Design · 2 min
Components
The handful worth reusing, and why there are only a handful.
There is no component library here. There are eleven components, and most of them exist because they hold behaviour, not because they hold styles.
The two you will reuse
ui/Card is the panel shape: border on a raised surface, consistent
padding, optional title and lead. Everything in the dashboard is one.
<Card title="Billing" lead="Your purchases and the keys they issued.">
<Receipts rows={orders} />
</Card>ui/Field is a labelled input with its hint and error in the right place
and the label actually associated with the control, which is the part people
skip.
<Field label="GitHub username" note="Invitations go to this account.">
<input name="github_login" />
</Field>The ones that hold behaviour
| Component | What it knows |
|---|---|
SignInForm | The magic link round trip and its three states |
SignOutButton | Refresh before push, so the server sees the cleared cookie |
LocaleSwitcher | Writes the cookie the server reads on the next render |
CopyField | Clipboard, plus the confirmation the click is meant to give |
Logo, Icons | Line-work SVG, sized in em so they follow the text |
Why not more
A boilerplate that ships two hundred components ships two hundred opinions you have to override. The ones here are the ones that would otherwise be copy-pasted with a bug in the third copy.
When you need a real primitive, a dialog with a focus trap, a combobox, a date picker, install Radix or Base UI and style it with your tokens. Do not write your own dialog. Accessible focus management is genuinely hard and entirely solved.
Adding one
Server component by default. Add "use client" only when you need state, an
effect or an event handler, and push it as far down the tree as it will go: a
client component makes everything it renders client too.
Something wrong or missing on this page? Tell us.