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

49Production-ready components
~51 KBJavaScript, gzipped
0Runtime 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 51 KB of JavaScript gzipped, with zero runtime dependencies: nothing lands in your bundle but the components you import.

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 51 KB of JavaScript gzipped and fully tree-shakeable. Type in the fields, flip the switches, pick a date, open the command palette.

Form

Button, LinkButton & IconButton

LinkButton

Input, Textarea & Select

Field, PasswordInput & SearchInput

Password strength: Very weak

Field owns the label, the hint and the error, and wires them to whatever control it wraps.

Debounced by 300 ms, so the search fires once you pause.

Combobox, DatePicker & NumberInput

Type it or pick it from the calendar.

Use the arrow keys, or Page Up for larger steps.

TagInput, TimePicker & ColorPicker

  • react
  • typescript
Press Enter to add a tag, Backspace to remove the last one.

Type 9:30 pm or 21:30, or pick from the list.

Brand color

Arrow keys move across the swatch grid.

OtpInput & FileUpload

Verification code

Paste the whole code and it spreads across the fields.

Drag and drop, or browse

Images or PDF, up to 2 MB each.

Checkbox, Radio & Switch

Engagement

ToggleGroup

Slider & Rating

5 developers
How was working together?

Average across projects

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.7.0BetaDeprecated

Table

ComponentCategoryStatus
ButtonFormStable
ToastFeedbackStable
DrawerLayoutStable
CommandNavigationNew in 0.7

Timeline

  1. First commit

    One Button component, a token file and a build that produced something importable.

  2. Design tokens landed

    Colors, typography, spacing and radii moved into CSS custom properties, so theming became a matter of overriding variables.

  3. Published to npm

    Subpath exports, full TypeScript types and React 18 plus 19 as peer dependencies.

  4. v0.7.0

    Today
    Command palette, Field, Carousel, Timeline, Hero and six more components.

Carousel

Accessible by default

Arrow keys move between slides, the dots are real buttons, and auto-play stops for anyone who asked for less motion.

Token driven

Slide height and gap are exposed as CSS custom properties, so the carousel fits the layout instead of dictating it.

No dependencies

Scroll snapping and pure CSS transitions, with no carousel library underneath.

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?
None. React and React DOM are peer dependencies, and everything else ships inside the package.

Navigation

Tabs

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

Breadcrumbs, Pagination, Dropdown & Popover

Command palette

Layout

Hero

Open source

A hero in five variants

Centered, split, background, minimal and gradient, each with its own alignment defaults and a fluid size scale.

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, ConfirmModal & Drawer

Card title

Compound Card with header, body and footer sections.

// Compound components, typed props

import { Field, PasswordInput } from "sander-ui";
import "sander-ui/styles.css";

<Card>
  <CardHeader>
    <Heading as="h3">Card title</Heading>
  </CardHeader>
  <CardBody>
    <Field label="Password" hint="At least 12 characters.">
      <PasswordInput revealable strengthMeter />
    </Field>
  </CardBody>
  <CardFooter>
    <Button variant="primary">Save</Button>
  </CardFooter>
</Card>

What's in the box

Form

  • Button
  • LinkButton
  • IconButton
  • Field
  • Input
  • PasswordInput
  • SearchInput
  • Textarea
  • Select
  • Combobox
  • TagInput
  • DatePicker
  • TimePicker
  • NumberInput
  • OtpInput
  • ColorPicker
  • FileUpload
  • Checkbox
  • Radio
  • Switch
  • ToggleGroup
  • Slider
  • Rating

Feedback

  • Alert
  • Toast
  • Progress
  • Spinner
  • Skeleton

Data display

  • Avatar
  • Badge
  • Table
  • Timeline
  • Carousel
  • Tooltip
  • Accordion

Navigation

  • Tabs
  • Breadcrumbs
  • Pagination
  • Dropdown
  • Popover
  • Command

Layout

  • Container
  • Hero
  • Card
  • Modal
  • ConfirmModal
  • 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.