Components

Every page on this site, including this one, is built from these pieces. Reuse them instead of writing one-off markup for a card grid or a CTA button — that's what keeps a site visually consistent as it grows.

Button

Renders a real <button> when no href is passed, sodisabled/loading work for form submits.

<Button href="/docs/quickstart">Primary</Button>
<Button href="/docs/quickstart" variant="secondary">Secondary</Button>
<Button disabled>Disabled</Button>
<Button loading>Loading</Button>

Card

Only pass href when the card is genuinely clickable — an href-less card renders as a plain informational block instead of a bordered box, so the two cases look different on purpose.

<Card title="Clickable" description="Has an href — renders as a bordered, hoverable link." href="/docs/quickstart" />
<Card title="Informational" description="No href — renders as a plain block, no border." />

Hero

Used for the top of a page — see the homepage for a live example. Takes an optionaleyebrow status line, an HTML title (so a word can carry.text-gradient), and a slot="after" for anything below the buttons.

<Hero eyebrow="Optional status line" title="Your <span class='text-gradient'>title</span>" subtitle="Optional supporting line">
  <Button href="/">Primary action</Button>
  <div slot="after">Anything, e.g. an install snippet</div>
</Hero>

Terminal

A bordered, title-barred frame for CLI output or a code sample — used on the homepage for the install and config snippets.

npm run dev

<Terminal title="sh">
  <pre><code>npm run dev</code></pre>
</Terminal>

Theme toggle

Already live in the header of every page — shown again here for reference. Dark is the default palette; this persists an explicit light/dark choice in localStorage.

<ThemeToggle />

Tag filter

A React island — the only part of this section that ships JavaScript. Used on theblog page with real posts; these three are sample data.

<TagFilter client:load posts={posts} />

GitHub icon

Lucide dropped brand logos, so the GitHub mark is a small inline-SVG component (icons/Github.astro) instead. Used in the header's "View on GitHub" link and the footer's social link.

Nav & Footer

Structural chrome, not meant to be embedded standalone — you're already looking at both:Nav.astro at the top of this page, Footer.astro at the bottom.