Skip to main content
View as Markdown

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.

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.

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.)

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 children. (Also documented in Navigation Components.)

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