Headless primitives

Unstyled, accessible building blocks. They emit state as data-* attributes and you style them with Tailwind variants — nothing here ships a look you have to override. Two-way binding, roving keyboard nav, and ARIA are handled for you. Each demo shows the live component with its usage code below.

Switch

role=switch · data-[checked]: on a group

<Switch bind={this.airplane} class="... data-[checked]:bg-orange-500">
  <span class="... group-data-[checked]:translate-x-6" />
</Switch>

Checkbox

role=checkbox · group-data-[checked]:

Subscribe to the newsletter

<Checkbox bind={this.newsletter} class="group ... data-[checked]:bg-orange-500">
  <svg class="hidden group-data-[checked]:block ..."> … </svg>
</Checkbox>

Select

native, themed, two-way bound

<Select
  bind={this.fruit}
  placeholder="Pick a fruit"
  options={[
    { label: "Apple", value: "apple" },
    { label: "Banana", value: "banana" },
    { label: "Cherry", value: "cherry" },
  ]}
/>

Radio group

role=radiogroup · data-[checked]: per option

Starter — $9/mo

Pro — $29/mo

Team — $99/mo

<RadioGroup
  bind={this.plan}
  optionClass="... data-[checked]:border-orange-400 data-[checked]:bg-orange-50"
  options={[
    { label: "Starter — $9/mo", value: "starter" },
    { label: "Pro — $29/mo", value: "pro" },
    { label: "Team — $99/mo", value: "team" },
  ]}
/>

Listbox

arrow keys · data-[active] / data-[selected]

<Listbox
  bind={this.assignee}
  placeholder="Assign to…"
  optionClass="... data-[active]:bg-slate-100 data-[selected]:text-orange-600"
  options={[
    { label: "Ada Lovelace", value: "ada" },
    { label: "Alan Turing", value: "alan" },
    { label: "Grace Hopper", value: "grace" },
  ]}
/>

Combobox

type to filter · autocomplete

<Combobox
  bind={this.city}
  placeholder="Search a city…"
  options={cities}   // { label, value }[]
/>

Disclosure & accordion

aria-expanded · data-[open]

Full refund within 30 days. No questions asked.

Ships in 1–2 business days.

Free returns within 30 days.

2-year manufacturer warranty.

<Disclosure label="Refund policy">
  Full refund within 30 days.
</Disclosure>

<Accordion
  multiple
  items={[
    { label: "Shipping", content: "Ships in 1–2 business days." },
    { label: "Returns",  content: "Free returns within 30 days." },
  ]}
/>

Popover & tooltip

click-open · hover/focus

<Popover label="Solutions ▾">
  <a href="/analytics">Analytics</a>
  <a href="/reports">Reports</a>
</Popover>

<Tooltip content="Copy link" placement="top">
  <button>Hover me</button>
</Tooltip>

Field

wires label · description · error a11y

We'll never share it.

<Field label="Email" description="We'll never share it.">
  <input type="email" class="input" />
</Field>