Compose primitivesComposeShell

Compose Shell

Full-bleed stage frame with hero, footer, max-width, and stretch behaviour.

ComposeShell ships with a full API table, a copyable example, and accessibility notes.

tsx

Stage content

Stage footer

Installation

Install the package once, then import ComposeShell from its direct entry point or from the root.

bash

pnpm add @agent-ui/react

tsx

import { ComposeShell } from "@agent-ui/react";

Tailwind CSS v4 users: add @source "../node_modules/@agent-ui/react/src" to the global stylesheet so the library utilities are generated.

Usage

The example below is the same code that renders the preview. Copy it, swap in your own handlers, and ship.

tsx

1import { ComposeShell } from "@agent-ui/react";
2 
3<ComposeShell id="custom" maxWidth="max-w-none" footer={<p>Demo</p>}>
4  <section className="flex flex-1 flex-col">...</section>
5</ComposeShell>

API reference

Every prop ComposeShell accepts, its type, default, and behaviour.

API reference for this component
Name	Type	Default	Description
id	string	—	Stage id emitted as data-agent-id="compose-<id>".
hero	string	—	Optional heading above the stage body.
heroClassName	string	—	Hero type overrides.
footer	ReactNode	—	Sticky footer rendered after the body.
maxWidth	string	"max-w-3xl"	Tailwind max-width class; composes use max-w-none.
className	string	—	Merged onto the shell.
children	ReactNode	—	Stage content.

Use it with the rest of the library

ComposeShell composes with MessageList, ChatShell, useChat, and the provider compose blocks. Browse the full reference or see all components in the gallery.

5 lines · copy-ready