Component library
62 components installed from the shadcn registry (style base-nova, on Base UI). 62 have a live demo. Everything renders against the site's own tokens.
about
client7 exports
A product designer with - every one of them closer to the build - in product teams.
I build - tokens, anatomy, and the test that catches drift - that survive engineering contact.
Ten years
Studio work first, then product design in-house, then the seam between design and the repo. Not a straight line.
Design systems
A system earns its place by carrying the next product. So it ships as code, with a test that fails when the anatomy drifts from what was declared.
accordion
4 exportslucide-react
Every component under components/ui, unmodified.
alert
4 exports
Heads up
This alert uses the default variant.
- variant
- default defaultdestructive
alert-dialog
client12 exports
aspect-ratio
1 export
attachment
9 exports
- size
- defaultsmxs
- orientation
- horizontalvertical
avatar
client6 exports
VD
AB
+3
badge
1 export
DefaultSecondaryOutlineDestructive
- variant
- default defaultsecondarydestructiveoutlineghostlink
bubble
4 exports
- variant
- default defaultsecondarymutedtintedoutlineghostdestructive
calendar
client2 exportslucide-reactreact-day-picker
card
7 exports
carousel
client5 exportsembla-carousel-reactlucide-react
chart
client6 exportsrecharts
checkbox
client1 exportlucide-react
collapsible
client3 exports
combobox
client15 exportslucide-react
command
client9 exportscmdklucide-react
dialog
client10 exportslucide-react
direction
client1 export
Children of this provider inherit
dir="rtl".drawer
client11 exports
empty
6 exports
No cases yet
They show up here once published.
- variant
- default defaulticon
field
client10 exports
Shown in the project switcher.
- orientation
- vertical defaulthorizontalresponsive
hover-card
client3 exports
input
1 export
input-group
client6 exports
- align
- inline-start defaultinline-endblock-startblock-end
input-otp
client4 exportsinput-otplucide-react
item
10 exports
Design system
Tokens wired to code.
- variant
- default defaultoutlinemuted
- size
- default defaultsmxs
kbd
2 exports
⌘K
label
client1 export
marker
3 exports
Shipped to production
- variant
- defaultseparatorborder
message
6 exports
message-scroller
client6 exports@shadcn/react/message-scrollerlucide-react
native-select
3 exportslucide-react
pagination
7 exportslucide-react
popover
client6 exports
progress
client5 exports
Uploading
questionnaire
client15 exports@shadcn/react/questionnairelucide-react
radio-group
client2 exports
resizable
client3 exportsreact-resizable-panels
Left
Right
scroll-area
client2 exports
select
client10 exportslucide-react
separator
client1 export
Above
Below
sheet
client8 exportslucide-react
skeleton
1 export
slider
1 export
spinner
1 exportlucide-react
switch
client1 export
table
client8 exports
| Company | Role |
|---|---|
| Day.io | Principal Product Designer |
| Haul | Lead Product Designer |
tabs
client4 exports
The default panel.
- variant
- default defaultline
textarea
1 export
toast
client10 exportslucide-react
toggle
client1 export
- variant
- default defaultoutline
- size
- default defaultsmlg
toggle-group
client2 exports
tooltip
client4 exports