Reference

Components

30 primitives organized by purpose. Each shows the YAML you write and the output.

Content

8

header, meta, markdown, code, image, callout, blockquote, kbd

Open →

Grids

6

card_grid, stat_grid, selectable_grid, before_after, avatar_group, definition_list

Open →

Charts

new

pie, bar (vertical/horizontal), timeseries — inline SVG, themed, stackable

Open →

Interactive

3

table, tabs, accordion

Open →

Layout

6

section, columns, divider, timeline, steps, progress_bar, empty_state

Open →

Indicators

new

badge, tag, status, progress_bar, kbd, divider

Open →

Navigation

new

breadcrumb, button_group

Open →
Every component shares a pattern

type + props

Every component in a page's components: list has a type: field (snake_case name) and its own property fields. Nothing else. Consistent shape makes LLM generation trivial — the model just picks the type and fills the props.

components:
  - type: header              # required: the component type
    title: My Page            # component-specific props
    subtitle: optional
    eyebrow: optional

  - type: card_grid
    cards: [...]

  - type: markdown
    body: |
      free-form prose
Next up

Start with content primitives — headers, markdown, code blocks, callouts, images. The building blocks every page uses.

Content componentsSee examples