# Layout

Surfaces and containers that arrange content. 12 live React parts in [Beamline](https://beamline.io/), each in nine looks.

- [Accordion](https://beamline.io/components/accordion): Topics that open in place, one at a time or several: FAQs and settings sections; each header is a button and the panel's height follows its content.
- [Aspect ratio](https://beamline.io/components/aspect-ratio): Holds media, video and embeds at a fixed width-to-height ratio while the layout resizes.
- [Bezel](https://beamline.io/components/bezel): A double-bezel frame: an outer shell with a hairline, a small gap, and an inset panel with its own edge, so a preview, chart or media reads as set into the surface.
- [Card](https://beamline.io/components/card): A record or a small group of related content and actions: optional media, avatar, title, status, action, meta, free content and a Details toggle; plain or double-bezel frame.
- [Carousel](https://beamline.io/components/carousel): A row of slides that snap into place: swipe on touch, drag or the arrows with a mouse, ← → when focused, or the dots; optional autoplay that pauses and has a pause button.
- [Collapsible](https://beamline.io/components/collapsible): One region that opens and closes in place from its trigger, its height animating to the content.
- [Direction](https://beamline.io/components/direction): Sets left-to-right or right-to-left for everything inside: text and logical spacing flip, and Radix parts read the direction for keys and placement.
- [Expandable card](https://beamline.io/components/expandable-card): A dense card that grows in place when asked: the frame resizes and the clamped preview opens into the full text.
- [Resizable panels](https://beamline.io/components/resizable-panels): Panes that trade space across draggable dividers; each divider is a focusable separator with arrow keys, limits, folding for collapsible panes and double-click to restore.
- [Scroll area](https://beamline.io/components/scroll-area): A native scroll region with thin overlay thumbs and edge fades that show only where more content waits; thumbs can be dragged or clicked.
- [Separator](https://beamline.io/components/separator): A hairline between groups, horizontal or vertical; hidden from screen readers unless it carries meaning.
- [UI root](https://beamline.io/components/ui-root): Makes a region of any app a Beamline root: theme, brand and direction for everything inside, and a matching layer at page level where its menus, dialogs and tooltips open.

190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team.

Other categories: [Actions](https://beamline.io/components/actions) · [Form controls](https://beamline.io/components/forms) · [Overlays](https://beamline.io/components/overlays) · [Navigation](https://beamline.io/components/navigation) · [Feedback](https://beamline.io/components/feedback) · [Content & display](https://beamline.io/components/display) · [Data & tables](https://beamline.io/components/data) · [Charts & data-vis](https://beamline.io/components/charts) · [Trading](https://beamline.io/components/trading) · [Dashboard](https://beamline.io/components/dashboard) · [AI & agents](https://beamline.io/components/ai) · [Voice & audio](https://beamline.io/components/voice) · [Motion & effects](https://beamline.io/components/effects) · [Blocks](https://beamline.io/components/blocks)