Layout components
Components that arrange and reveal content: accordions and collapsibles with height motion you can reverse mid-way, a scroll-snap carousel, resizable split panels, scroll areas with edge fades, aspect ratio boxes and separators.
Closed panels stay searchable with the browser’s find, and nothing jumps when content loads in.
- AccordionStacked headings that each reveal a panel, with height motion you can reverse mid-way and panels that stay searchable while closed.
- Aspect ratioA box that holds its shape before media loads, shimmers while loading, fades the media in and falls back when it fails.
- CarouselNative scroll-snap slides with momentum on touch, mouse dragging, arrow keys, dots, thumbnails and an autoplay that pauses when it should.
- CollapsibleA panel that shows and hides with height motion you can reverse mid-way, without jumping the layout.
- ResizablePanels you can drag apart, with a quiet divider that wakes up on hover, sizes that glide on reset or collapse, and layouts that persist.
- Scroll areaNative scrolling with a minimal scrollbar, edges that fade only where there’s more to see, and an optional peek that cuts the last item in half.
- SeparatorA hairline that divides content horizontally or vertically, with an optional label and a decorative mode for purely visual lines.
Built into Pro blocks
Blocks for AI products that are built from these components.
- Agent TodosThe plan an agent keeps while it works, one line per step. Handles steps in progress, failed steps and plan changes mid-run.
- Chat SidebarThe sidebar of a chat app, with pinned chats, projects and recents. Handles rename in place, delete with undo and chats still replying.
- Stack TraceA crash shown the way a developer reads it. Your code comes first, framework frames fold away and every cause is listed in order.
- SubagentsThe runs an agent hands to other agents, one line per run. Handles parallel runs, stop and retry, and a summary once each run is done.
- Test ResultsAn agent’s test run, shown as it happens. Tests stream in and fold into a summary, with every failure left open and its diff in view.
- ThinkingThe thinking view of an AI chat. A live label follows each step, searches and sources fold into a trail, and citations sit beside the answer.