Headless UI components for the edges of the web.
Wrote these so I could ship weird stuff faster. You can too.
bun add @bizarre/ui
Or use npm, yarn, or pnpm. Whatever you like.
A smart, headless time range picker that speaks human.
- 🧠 Natural language input – understands
"last 3 days"or"yesterday to tomorrow"(powered bychrono-node) - ⏳ Relative time ranges – like
"last hour"or"past 15 minutes" - 🧱 Fully composable – render it your way
- 🧭 Keyboard accessible – arrow keys, tab jumping, full control
- 🌍 Timezone-aware
- ⚡ Performance-tuned
- ♿ Accessible by default
import { TimeSlice } from '@bizarre/ui'
function MyComponent() {
const handleConfirm = (range) => {
console.log('Selected range:', range)
}
return (
<TimeSlice.Root onDateRangeConfirm={handleConfirm}>
<TimeSlice.Input />
<TimeSlice.Portal>
<TimeSlice.Shortcut duration={{ minutes: 15 }}>
15 minutes
</TimeSlice.Shortcut>
<TimeSlice.Shortcut duration={{ hours: 1 }}>1 hour</TimeSlice.Shortcut>
<TimeSlice.Shortcut duration={{ days: 1 }}>1 day</TimeSlice.Shortcut>
<TimeSlice.Shortcut duration={{ months: 1 }}>
1 month
</TimeSlice.Shortcut>
</TimeSlice.Portal>
</TimeSlice.Root>
)
}- Dashboards & analytics
- Log & event explorers
- Data viz
- Monitoring tools
Live demos. Keyboard magic. Check it out.
Help make it weirder (or better). PRs and issues welcome:
- Open bugs or ideas in GitHub Issues
- Fork + PR to
master - Keep it tested, readable, and accessible
MIT — do wtvtf