greyhaven-design-system/htmx-demo/README.md

HTMX Showcase — Validation Harness

Parallel to app/page.tsx (the React showcase), public/htmx.html is a plain HTML page that exercises the generated dist/greyhaven.htmx.css across every static component. Load it while running pnpm dev at /htmx.html.

Purpose

Validate that greyhaven.htmx.css produces visually-equivalent output to the React components. The HTMX page only uses:

• data-slot / data-variant / data-size attributes
• Standard HTML tags (<button>, <span>, <input>, <div>)
• Inline SVGs for icons (no lucide-react)

No React, no JavaScript (apart from the theme toggle).

Build

pnpm htmx-css:build      # Regenerate dist/greyhaven.htmx.css from components/ui/*.tsx
pnpm htmx-demo:build     # Compile htmx-demo/input.css + tokens + htmx.css → public/htmx.css
pnpm dev                 # Serves /htmx.html at http://localhost:3000/htmx.html

What's covered

• Typography (H1/H2/H3 + body + UI label)
• Button — variants (6), sizes (3), states (5), icon sizes (3)
• Badge — core (4), tag/value (2), semantic (4), channel pills (5), on-muted-surface (6)
• Input + Textarea (default / with value / disabled) + Label
• Card (simple + with header/action/content/footer)
• Alert (default + destructive)
• Separator, Progress, Skeleton, Kbd

What's intentionally out of scope

• Interactive components (Dialog, Dropdown, Popover, Select, Combobox, Accordion, Tabs, Tooltip) — their CSS rules exist in greyhaven.htmx.css but require Alpine.js or HTMX swap patterns for open/close state. Validate those in a separate runtime-integration test.
• Form Control primitives with JS state (Checkbox, Switch, RadioGroup, Slider) — Radix renders these with bespoke markup the CSS targets via data-state=checked. Native <input type="checkbox"> won't match without additional bridging.