Document

A framed container that shows a peek of its content and expands to the full body on demand.

Anatomy

Reach for it when a region of generated content is long enough that it would push everything else off screen. The peek keeps the start of the content visible so the reader can decide whether to expand, with a fade at the bottom signalling that there is more.

The body is dumb. Pass plain text, a Markdown render, a CodeBlock, or anything composed from the kit. The component owns the frame, the title row, the height transition, and the fade.

A toggle can live in the action slot as DocumentTrigger, or anywhere outside the component by wiring up open and onOpenChange. Both can coexist if you want both a header chevron and a floating button.

DocumentTrigger is headless. It wires the toggle behavior, aria-expanded, and aria-controls, but ships no styling. Pass render to provide the visual button (typically the kit's Button) and children for the icon. The trigger forwards an data-open attribute so the icon can rotate off the state.

API

Reference for each part of the component, including its available props and behavior.

Document

Root. Owns the open state and the collapsed height. Accepts open for the controlled flow, defaultOpen for the uncontrolled flow, and onOpenChange to mirror state. Sets data-open when expanded so descendants can style off the parent.

DocumentHeader

The top row. Lays out as a flex row so the title takes the leading space and the action slot sits at the end. Stays fixed in place when the body expands or collapses.

DocumentTitle

The label for the document. Renders as a div by default so the caller can choose the heading level or swap in a richer node.

DocumentAction

The trailing slot in the header. Drop in icon buttons for copy, download, feedback, and so on. Pair it with DocumentTrigger when you want a header chevron.

DocumentTrigger

Headless toggle. Wires the open state, aria-expanded, and aria-controls to a rendered element of the caller's choice. Pass render to provide the styled button and children for the icon. The trigger has no default styling and no default icon, so it composes with whatever button family the call site already uses. Place it inside DocumentAction for the standard header chevron, or anywhere inside the component.

DocumentContent

The body. Always renders, always visible at collapsedHeight when closed, and animates to its measured full height when open. A bottom fade fades out as the document opens. Inner padding is provided so children can be plain blocks.