🧩 sander-ui

A modern, accessible React component library — lightweight, themeable, and ready for production.

🌐 Live Demo · 📖 Storybook Docs

✨ Why sander-ui?

• Accessibility-first — Built on native HTML elements (<dialog>, <details>), full ARIA support, keyboard navigation, and focus management baked into every component.
• Zero-runtime styling — CSS Modules + CSS Custom Properties. Scoped styles with zero CSS-in-JS overhead.
• Minimal dependencies — Only classnames and lucide-react at runtime. All animations are pure CSS — no heavy libraries needed.
• 28 production-ready components — Forms, feedback, data display, navigation, and layout with compound component patterns (e.g. Modal + ModalHeader/Body/Footer).
• Design token system — Comprehensive CSS custom properties for colors, typography, spacing, radii, shadows, and transitions — ready for theming via simple variable overrides.
• Tree-shakeable — ES module exports with subpath imports (sander-ui/button) for optimal bundle size.
• TypeScript-first — Strict mode, full type definitions, and clear prop interfaces for every component.

📦 Installation

npm install sander-ui

Peer dependencies: React 18 or 19

🚀 Usage

Import components and the stylesheet:

import { Button, Input, Modal } from "sander-ui";
import "sander-ui/styles.css";

You can also import individual components via subpath exports for optimal tree-shaking:

import { Button } from "sander-ui/button";
import { Modal, ModalHeader, ModalBody, ModalFooter } from "sander-ui/modal";

Use them in your app:

function App() {
  return (
    <div>
      <Button variant="primary" size="md" onClick={() => alert("Clicked!")}>
        Click me
      </Button>
      <Input label="Email" placeholder="[email protected]" />
    </div>
  );
}

Many components support compound patterns for flexible composition:

<Card>
  <CardHeader>
    <Heading as="h3">Card Title</Heading>
  </CardHeader>
  <CardBody>
    <Text>Card content goes here.</Text>
  </CardBody>
  <CardFooter>
    <Button variant="primary">Save</Button>
  </CardFooter>
</Card>

🗂️ Components

📝 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

See the components in action at the 🌐 Live Demo, or browse interactive examples and full prop documentation at the 📖 Storybook.

🎨 Theming

All visual decisions are centralized in CSS custom properties, making theming as simple as overriding variables:

:root {
  --color-primary: #6366f1;
  --color-primary-hover: #4f46e5;
  --font-family: "Inter", system-ui, sans-serif;
  --radius-md: 0.5rem;
}

Available token categories: colors, typography (Outfit), spacing, border radius, shadows, transitions, and z-index.

🌐 Browser Support

Supports all modern browsers (Chrome, Firefox, Safari, Edge). Requires support for CSS Custom Properties and ES Modules.

📄 License

MIT