// Open source

sander‑ui

My own React component library, designed and built entirely by me from scratch: the visual design, 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.

View on npm → GitHub

$ npm install sander-ui

28Production-ready components
~19 KBJavaScript, gzipped
2Runtime dependencies
React 18 + 19TypeScript strict, full types

Built the way
I build for clients

Accessibility first

Built on native HTML elements like <dialog> and <details>, with ARIA support, keyboard navigation and focus management in every component.

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. The entire library is about 19 KB of JavaScript gzipped, on top of just two runtime dependencies.

Not a screenshot.
The real thing, live.

Everything below is the published sander-ui package, rendered live on this page. I designed and built every one of these components myself: the API, the visual design, the accessibility and the motion. The whole library is about 19 KB of JavaScript gzipped and fully tree-shakeable. Type in the fields, flip the switches, open the modal.

Form

Button & IconButton

Input, Textarea & Select

Checkbox, Radio & Switch

Engagement

Feedback

Alert & Toast

Fully accessible
Keyboard navigation, focus management and ARIA are built into every component. Dismiss this alert with the close button or Escape.

Progress, Spinner & Skeleton

Upload progress68%
Indeterminate

Data display

Avatar & Badge

+2
DefaultLivev0.1.26BetaDeprecated

Table

ComponentCategoryStatus
ButtonFormStable
ToastFeedbackStable
DrawerLayoutStable

Tooltip & Accordion

Appears on hover and focus
Is this the real package?
Yes. This is the published sander-ui npm package, rendered live on this page.
Does it work with React 18 and 19?
Both. React 18 and 19 are declared as peer dependencies.
How many runtime dependencies?
Two: classnames and lucide-react. Nothing else.

Navigation

Tabs

28 components, built in TypeScript with CSS Modules and a design-token system.

Breadcrumbs, Pagination & Dropdown

Layout

Heading & Text

Typography scale

Text and Heading share the same token-driven sizing, weight and color scale.

Small strong text sits alongside emphasised copy and info-colored spans.

Card, Modal & Drawer

Card title

Compound Card with header, body and footer sections.

// 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.