Components
Atoms as plain CSS classes (wf-*) built only from tokens. Every variant below has copy buttons for HTML, React and Astro. They restyle with every preset; try switching in the header.
import { Button, buttonClass } from "wallflower-ui/react/button";
import { Badge } from "wallflower-ui/react/badge";
// …or copy them in: npx shadcn@latest add <registry>/wf-button.jsonimport Button from "wallflower-ui/astro/Button.astro";
import Badge from "wallflower-ui/astro/Badge.astro";
// No Astro wrapper? Copy the HTML — it's just wf-* classes.Badge
Short status labels. The brand badge tints with the preset's brand color.
Chip
A toggleable pill for filters and segmented choices. Selected state comes from aria-pressed.
Card
Header, content and footer slots. Add the interactive modifier for clickable cards.
Create project
Deploy your new project in one click.
Interactive card
Lifts on hover. Use it for links and selectable tiles.
Inputs
Input, textarea and native select. Fields use 16px text on phones so iOS doesn't zoom, and 14px from md up.
We'll never share it.
Only letters, numbers and dashes.
Checkbox, radio, switch
Native inputs restyled, so forms, keyboard and screen readers work with no JavaScript.
Alert
Inline messages. Tone colors the border, tint and icon; text stays at full contrast.
Heads up
You can switch presets from the header.
Saved
Your preset was exported.
Low contrast
One token pair is under 4.5:1.
Import failed
tokens.json had no color tokens.
Avatar
Image or initials fallback. Pill-shaped, or square when the preset radius is 0.
Feedback
Skeleton, spinner and progress for loading states.
Kbd, code, link, separator
Layout primitives
Container, stack, cluster and an intrinsic grid that's responsive without breakpoints.
<div class="wf-container"> <!-- max 80rem, 16px→32px gutters -->
<div class="wf-stack" style="--wf-gap: 1.5rem"> <!-- vertical rhythm -->
<div class="wf-cluster"> <!-- wrapping row -->
<div class="wf-grid" style="--wf-grid-min: 16rem"><!-- auto-fill columns -->Table
Data tables in a bordered card that scrolls sideways on small screens. Mark number columns with wf-num.
| Invoice | Customer | Status | Amount |
|---|---|---|---|
| INV-001 | Ada Lovelace | Paid | $250.00 |
| INV-002 | Grace Hopper | Pending | $1,120.00 |
| INV-003 | Alan Turing | Draft | $89.50 |
Tabs
A segmented tab list. Styling comes from aria-selected; show the matching panel in your own code.
Accordion
Native <details> disclosures: keyboard and screen-reader friendly with no JavaScript.
Is it free?
Does it work with shadcn/ui?
Can I use my own colors?
Stat
KPI tiles for dashboards. Put one inside a card.
Dialog
A native modal <dialog>: focus trapping and Esc to close come from the browser. Open it with dialog.showModal(), or the open prop in React.
Text styles
See Typography for the full scale.
Overline
A gradient heading
Lead text sits under a heading.