Text & icons

<Title order={3}>
    Project settings
</Title>

type HeadingOrder = 1 | 2 | 3 | 4 | 5 | 6;

<Subtitle>Manage domains, builds and access.</Subtitle>

type HeadingOrder = 1 | 2 | 3 | 4 | 5 | 6;

<Heading level={3}>
    Team members
</Heading>

<Text muted>
    Last deployed 4 minutes ago by Ada.
</Text>

<Prose>
    <h3>Release notes</h3>
    <p>
        This release focuses on <a href="#a11y">accessibility</a>: every overlay now traps focus
        and restores it on close.
    </p>
    <ul>
        <li>Keyboard support for menus and trees</li>
        <li>Reduced-motion aware transitions</li>
    </ul>
</Prose>

<Article>
    <ArticleTitle order={3}>Designing a kit-wide customization system</ArticleTitle>
    <ArticleMeta>Ada Lovelace · Sep 12, 2026 · 6 min read</ArticleMeta>
    <p>Every component forwards attributes and exposes named slots…</p>
</Article>

<Article>
    <ArticleTitle order={3}>
        Designing a kit-wide customization system
    </ArticleTitle>
</Article>

type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;

<Article>
    <ArticleTitle order={3}>Release 2.4</ArticleTitle>
    <ArticleMeta>Grace Hopper · Sep 1, 2026</ArticleMeta>
</Article>

<Stack gap="1rem">
    <Quote cite="Grace Hopper">
        The most dangerous phrase in the language is “we've always done it this way.”
    </Quote>
    <Quote variant="plain" cite="Alan Kay">
        The best way to predict the future is to invent it.
    </Quote>
</Stack>

<Anchor href="/docs">
    Read the docs
</Anchor>

<Text>
    Deploys run on <Mark>every push</Mark> to main.
</Text>

<Highlight text="Deploy marketing-site to production" highlight="deploy" />

<Truncate style={{ "max-width": "22rem" }} lines={2}>
    The customization system covers every component: attributes are forwarded to the host
    element, classes and styles target named slots, unstyled drops the built-in look, and
    configureUI sets app-wide defaults. Text past the second line is cut with an ellipsis.
</Truncate>

<Leader label="Espresso" value="$3.50" />

<NumberFormatter value={1234567.891} decimalScale={2} />

<RelativeTime value={Date.now() - 5 * 60_000} />

<Countdown to={Date.now() + 3 * 86_400_000} />

<Button variant="ghost" onClick={() => {}}>
    ★<VisuallyHidden>Add to favourites</VisuallyHidden>
</Button>

<Icon name="bell" />

type IconName = | "check" | "x" | "plus" | "minus" | "search" | "user" | "users" | "settings" | "menu" | "home" | "heart" | "star" | "bell" | "mail" | "calendar" | "clock" | "edit" | "trash" | "copy" | "download" | "upload" | "link" | "external" | "info" | "warning" | "error" | "success" | "chevron-down" | "chevron-up" | "chevron-left" | "chevron-right" | "arrow-left" | "arrow-right" | "eye" | "eye-off" | "eye-outline" | "lock" | "unlock" | "filter" | "more" | "close" | "spinner" | "sun" | "moon" | "play" | "pause" | "refresh" | "share" | "image" | "file" | "folder" | "zap" | "phone" | "git" | "code";

<IconBadge name="zap" tone="accent" />

type IconName = | "check" | "x" | "plus" | "minus" | "search" | "user" | "users" | "settings" | "menu" | "home" | "heart" | "star" | "bell" | "mail" | "calendar" | "clock" | "edit" | "trash" | "copy" | "download" | "upload" | "link" | "external" | "info" | "warning" | "error" | "success" | "chevron-down" | "chevron-up" | "chevron-left" | "chevron-right" | "arrow-left" | "arrow-right" | "eye" | "eye-off" | "eye-outline" | "lock" | "unlock" | "filter" | "more" | "close" | "spinner" | "sun" | "moon" | "play" | "pause" | "refresh" | "share" | "image" | "file" | "folder" | "zap" | "phone" | "git" | "code";