Display Components¶

Text and small visual elements. All accept the base props in addition to those listed.

Prop tables are auto-generated by npm run gen:docs from the zod schemas.

`heading`¶

Section heading, sized by level.

Prop	Type	Description
`text`	string	Heading text
`level`	number	1–6, matching HTML h1–h6

heading:
  level: 1
  text: "Welcome back"

Inline or block text with optional emphasis tone.

Prop	Type	Description
`value`	string	Text content
`tone`	`"muted"` \| `"strong"` \| `"accent"`	Emphasis style

text:
  value: "Last synced 2 minutes ago"
  tone: muted

Image placeholder. Uses src/alt but the actual image is not fetched — this is a mid-fi sketch tool, not a renderer.

Prop	Type	Description
`src`	string	Image URL (shown in hover/title only)
`alt`	string	Alt text

image:
  src: "https://example.com/hero.jpg"
  alt: "Product hero image"
  w: 400
  h: 240

Small icon marker. In v0.2 this is a text label in an icon-sized box (Obsidian's Lucide icons are not directly wired yet).

Prop	Type	Description
`name`	string	Icon identifier text
`size`	number	Box size in pixels

icon:
  name: "settings"
  size: 20

Circular user avatar showing initials derived from name.

Prop	Type	Description
`name`	string	Display name — initials are derived from it
`size`	number	Diameter in pixels

avatar:
  name: "Ada Lovelace"
  size: 40

Small status badge with a variant.

Prop	Type	Description
`label`	string	Badge text
`variant`	`"default"` \| `"primary"` \| `"success"` \| `"warning"` \| `"danger"`	Visual style

badge:
  label: "Beta"
  variant: primary

badge:
  label: "Failed"
  variant: danger

Tag-shaped label (think "topic" or "keyword"). Simpler than badge — no variants, more neutral.

Prop	Type	Description
`label`	string	Tag text

row:
  gap: 6
  items:
    - tag: { label: "react" }
    - tag: { label: "typescript" }
    - tag: { label: "obsidian" }

Keyboard shortcut display. Renders each key in a <kbd>-style box joined by +.

Prop	Type	Description
`keys`	string[]	Keys in the shortcut

kbd:
  keys: ["Ctrl", "K"]

kbd:
  keys: ["Cmd", "Shift", "P"]