Accessibility first
Built on native HTML elements like <dialog> and <details>, with ARIA support, keyboard navigation and focus management in every component.
// Open source
sander‑ui
My own React component library, designed and built from scratch: the API, the accessibility, the design tokens and every one of the 28 components. I use it to ship client projects faster, and it shows exactly how I think about component design.
$ npm install sander-ui
28Production-ready components
2Runtime dependencies
React 18 + 19TypeScript strict, full types
Built the way
I build for clients
Zero-runtime styling
CSS Modules with CSS custom properties. Scoped styles, no CSS-in-JS overhead, and all animations in pure CSS.
Design token system
Colors, typography, spacing, radii, shadows and transitions all live in CSS variables. Theming is a matter of overriding them.
Tree-shakeable
ES modules with subpath imports like sander-ui/button, so your bundle only contains what you use. Two runtime dependencies in total.
Every component,
documented
// Compound components, typed props
import { Button, Input } from "sander-ui";
import "sander-ui/styles.css";
<Card>
<CardHeader>
<Heading as="h3">Card title</Heading>
</CardHeader>
<CardBody>
<Input label="Email" placeholder="you@example.com" />
</CardBody>
<CardFooter>
<Button variant="primary">Save</Button>
</CardFooter>
</Card>What's in the box
Form
- Button
- IconButton
- Input
- Textarea
- Select
- Checkbox
- Radio
- Switch
Feedback
- Alert
- Toast
- Progress
- Spinner
- Skeleton
Data display
- Avatar
- Badge
- Table
- Tooltip
- Accordion
Navigation
- Tabs
- Breadcrumbs
- Pagination
- Dropdown
Layout
- Container
- Card
- Modal
- Drawer
- Heading
- Text
Want components like these in your product, with your brand and your tokens? That's exactly the work I do for clients.