Design System

Work in progress. I'm adding components as I go, following patterns from what's already documented. Nothing here is set in stone yet.

Navigation

Mobile drawer, burger icon, sidebar tree. Structural chrome.

BurgerIcon

Atom

Animated hamburger menu icon that transforms to an X when the parent has .open class.

Interactive

Click to toggle

Designed to be used inside an IconButton. The animation triggers when the parent element has the .open class.

Sidebar

Organism

Searchable navigation sidebar with collapsible sections, view detection, and auto-scroll to active link. Accepts any SidebarSection[] data.

Minimal example

Getting Started

Components

<Sidebar
  sections={[
    {
      title: "Getting Started",
      items: [
        { label: "Overview", href: "#overview" },
        { label: "Installation", href: "#install" },
      ],
    },
    {
      title: "Components",
      items: [
        { label: "Button", href: "#button", framework: "solid" },
        { label: "Card", href: "#card", framework: "astro" },
      ],
    },
  ]}
  client:load
/>

Props

Prop	Type	Default	Description
`sections`	`SidebarSection[]`	required	Navigation tree data
`title`	string	—	Header title (shown in mobile drawer)
`class`	string	—	Additional CSS class

ColorSwitcher

Atom

Chromatic dropdown that switches --accent-color and all related tokens on :root.

Preview

Selecting a color sets --accent-color, --accent-bright, --accent-tint, and --secondary-accent-color on :root.

Tokens Updated

Variable	Maps To
`--accent-color`	`--{color}`
`--accent-bright`	`--{color}-dark`
`--accent-tint`	`--{color}-tint`
`--secondary-accent-color`	`--{color}-light`

Usage

import ColorSwitcher from "@/components/sidebar/ColorSwitcher";

<ColorSwitcher client:load />