# Display Components

Display components present static or structural content that is not bound to a table data source: hard-coded tables, command palettes, empty states, resizable split panels, scroll areas, chat speech bubbles, carousels, accordions, and tab containers. All accept the shared `props` bag plus `visibility` and `responsive` modules.

```yaml
components:
  - type: static-table
    headers: [Plan, Price, Seats]
    rows:
      - [Free, '$0', '1']
      - [Pro, '$29', '10']
    caption: 'Pricing tiers'
```

## `static-table`

A table populated from inline data (not a data source).

| Property  | Description                                      |
| --------- | ------------------------------------------------ |
| `headers` | Column header labels.                            |
| `rows`    | Row data as an array of string arrays.           |
| `caption` | Caption text displayed above or below the table. |

## `command`

A command palette (⌘K-style) of searchable command groups.

| Property | Description                                                                             |
| -------- | --------------------------------------------------------------------------------------- |
| `groups` | Groups of commands. Each group has a heading and `items` (`{ label, icon, shortcut }`). |

## `empty-state`

A placeholder shown when there is nothing to display.

| Property      | Description                            |
| ------------- | -------------------------------------- |
| `icon`        | Lucide icon name for the illustration. |
| `title`       | Title text.                            |
| `description` | Supporting text below the title.       |
| `children`    | Optional call-to-action components.    |

## `resizable`

Resizable split panels separated by a draggable handle.

| Property       | Description                                           |
| -------------- | ----------------------------------------------------- |
| `direction`    | Panel layout direction: `horizontal` or `vertical`.   |
| `defaultSizes` | Default panel sizes as percentages (must sum to 100). |
| `minSize`      | Minimum panel size as a percentage.                   |
| `children`     | The panel components.                                 |

## `scroll-area`

A scrollable region with custom scrollbars.

| Property      | Description                                       |
| ------------- | ------------------------------------------------- |
| `orientation` | Scroll axis: `vertical`, `horizontal`, or `both`. |
| `maxHeight`   | CSS max-height for the area (e.g. `400px`).       |
| `children`    | The scrollable content.                           |

## `speech-bubble`

A chat-style message bubble (used in conversation UIs).

| Property  | Description                                                         |
| --------- | ------------------------------------------------------------------- |
| `content` | The message text.                                                   |
| `props`   | HTML attributes — typically `className` for sender alignment/color. |

## `list-item`

A single list-item element, used as a building block inside lists and menus.

| Property   | Description        |
| ---------- | ------------------ |
| `content`  | Inline content.    |
| `children` | Nested components. |
| `props`    | HTML attributes.   |

## `aspect-ratio`

Constrains a child to a fixed width-to-height ratio.

| Property   | Description                                                |
| ---------- | ---------------------------------------------------------- |
| `ratio`    | Width-to-height ratio (e.g. `16/9` = 1.778, `1` = square). |
| `children` | The constrained component.                                 |

## `carousel`

A slideshow of child slides with optional auto-play and navigation.

| Property           | Description                                   |
| ------------------ | --------------------------------------------- |
| `orientation`      | Scroll direction: `horizontal` or `vertical`. |
| `autoplay`         | Automatically advance slides.                 |
| `autoplayInterval` | Interval between auto-play transitions (ms).  |
| `showDots`         | Show dot indicators below the carousel.       |
| `showArrows`       | Show previous/next navigation arrows.         |
| `children`         | The slide components.                         |

## `accordion`

Collapsible content sections. (Also documented in [Content Components](/en/docs/content-components#accordion).)

| Property      | Description                           |
| ------------- | ------------------------------------- |
| `type`        | `single` or `multiple` open sections. |
| `defaultOpen` | IDs of items open by default.         |
| `children`    | The accordion items.                  |

## `tabs`

A tabbed container holding [`tab-panel`](/en/docs/layout-components#tab-panel) children. (Also documented in [Navigation Components](/en/docs/navigation-components#tabs).)

| Property       | Description                                 |
| -------------- | ------------------------------------------- |
| `orientation`  | Trigger layout: `horizontal` or `vertical`. |
| `defaultValue` | ID of the tab active by default.            |
| `children`     | The `tab-panel` components.                 |

## Related Pages

- [Pages Overview](/en/docs/pages-overview) — the component model.
- [Layout Components](/en/docs/layout-components) — containers, cards, tab panels.
- [Data Components](/en/docs/data-components) — data-bound tables vs. `static-table`.
- [Content Components](/en/docs/content-components) — text, code, callouts.