bit Bheadless × Tailwind
The same headless components, styled with Tailwind v4 utilities and custom data-* variants.
What's different here?
Every demo page renders the exact same headless components — only the styling layer
changes. The Tailwind section uses utility classes and custom variants registered in
tailwind/input.css:
data-state-open:,data-state-closed:,data-state-checked:data-active:,data-selected:,data-disabled:,data-loading:data-orientation-horizontal:,data-orientation-vertical:
Browse components (Tailwind)
Pick a component to see live demos and the Razor + Tailwind classes that produced them.
- Accessibility Utilities
- Accordion
- Alert Dialog
- Aspect Ratio
- Avatar
- Button
- Checkbox
- CloseButton
- Collapsible
- Combobox
- Command Palette
- Context Menu
- DataInteractive
- Dialog
- Disclosure
- Field / Input
- Fieldset
- FocusTrap
- Grid / TreeGrid
- Hover Card
- Listbox
- Menu
- Menubar
- Popover
- Portal
- Progress / Meter
- Radio Group
- Slider
- Sortable
- Switch
- Tabs
- Toast
- Toggle / Toggle Group
- Toolbar
- Tooltip
- Transition
- Tree View