Components
Interactive building blocks — cards, buttons, disclosure, tabs, toasts and more. Keyboard and reduced-motion aware.
Cards & surfaces
5Tilt me around
Move your cursor across the card.
Tilt Card
Tilts in 3D toward the pointer with a tracking glare.
Spotlight
Hover to sweep the highlight.
Spotlight Card
A radial glow follows the cursor across the surface.
Hover Card
Rich preview revealed on hover or keyboard focus, with delay.
Upgrade to Pro
Unlock advanced analytics and priority support.
Card
Composable content surface with header, content, and footer.
Interactive showcase
7Holo pass
Aurora Nine
Tilt me — the sheen shifts hue with the pointer.
Move around, then hover a target.
Page content
Revealed when loading completes.
Aurora
Northern drift
Inputs & forms
17OTP Input
Segmented code entry with auto-advance and paste.
Combobox
Accessible autocomplete with live filtering and keyboard nav.
- React
- Next.js
- Tailwind
Tag Input
Add chips with Enter, remove with × or Backspace.
File Dropzone
Drag-and-drop file picker with a list (front-end only).
Checkbox
Tri-state checkbox with an indeterminate option and labels.
Radio Group
Single-select with roving focus and arrow-key navigation.
Select
Listbox-style picker with type-ahead and full keyboard nav.
Textarea
Auto-resizing multiline field with an optional counter.
Date Picker
Calendar popover with WAI-ARIA grid keyboard navigation.
Color Picker
HSV picker with a hue slider, hex input, and swatches.
Calendar
Inline month grid for single or range selection (range shown).
Multi-Select
Searchable multi-select with removable chips and keyboard nav.
Time Picker
Pick an hour, minute, and AM/PM with spinbutton segments.
Overlays
5Tooltip
Shows on hover and keyboard focus, linked via aria.
Modal
Portaled dialog with focus management and Escape to close.
Popover
Floating panel of arbitrary content with focus return.
Drawer
Slide-in side panel with focus management and Escape.
Context Menu
Right-click menu at the pointer with keyboard navigation.
Data display
10Marquee
A seamless infinite scroller that pauses on hover.
Carousel
Looping slides with arrows, dots, and arrow-key support.
Image Compare
Before/after wipe with a draggable, keyboardable handle.
Avatar Stack
Overlapping avatars with an overflow +N chip.
- src
- components
- button.tsx
- card.tsx
- lib
- index.ts
- README.md
Tree View
Expandable hierarchy with roving focus and arrow-key nav.
| Mara Vance | Engineer | 482 | |
| Devon Park | Designer | 197 | |
| Iris Cho | PM | 88 | |
| Leo Mendez | Engineer | 341 |
Data Table
Sortable columns with aria-sort and optional row selection.
Account settings
Billing
Feedback & progress
8Toast
Imperative toasts via a tiny store and a Toaster.
Scroll me ↓
Paragraph 1. The bar at the top fills as this panel scrolls.
Paragraph 2. The bar at the top fills as this panel scrolls.
Paragraph 3. The bar at the top fills as this panel scrolls.
Paragraph 4. The bar at the top fills as this panel scrolls.
Paragraph 5. The bar at the top fills as this panel scrolls.
Paragraph 6. The bar at the top fills as this panel scrolls.
Paragraph 7. The bar at the top fills as this panel scrolls.
Paragraph 8. The bar at the top fills as this panel scrolls.
Paragraph 9. The bar at the top fills as this panel scrolls.
Paragraph 10. The bar at the top fills as this panel scrolls.
Scroll Progress
Gradient bar tied to scroll position (window or container).
Skeleton
Shimmering placeholders for loading states.
Payment received
Storage almost full
No messages yet
When you receive messages, they'll show up here.
Empty State
A centered placeholder for empty content with an action.
Layout & disclosure
4Accordion
Accessible disclosure list with smooth height transitions.
Resizable
Split panels with a draggable, keyboard-resizable divider.
Collapsible
A single show/hide disclosure with an animated height.
Scroll Area
A bounded scroll container with a custom, themed scrollbar.