Introduction
A modern, accessible, themeable React component library. Thirty-plus production-ready components with zero runtime dependencies beyond React.
What is Sisyphos UI?
Sisyphos UI is a suite of 32 React components built for teams that care about accessibility, performance, and design consistency. Every component ships as an independent npm package, wired through a shared CSS variable system you can theme at runtime.
Accessible by default
Focus trap, scroll lock, keyboard navigation, and WAI-ARIA roles built in — verified in every component's test suite.
Themeable at runtime
CSS custom properties under --sisyphos-*. Call applyTheme() and the whole library flips.
Tree-shakable
Install the umbrella for DX or individual packages for minimum footprint. Zero runtime deps beyond React.
Strict TypeScript
Full types, forwardRef + displayName, JSDoc on every public prop. IntelliSense knows the API.
Design principles
- Accessibility is not a feature. Components ship with keyboard support, focus management, and correct ARIA semantics out of the box — not as an opt-in.
- Ownership of tokens. Every color, spacing value, radius, and duration is a CSS variable you can override at any level of the cascade.
- Composition over configuration. Compound APIs like
Dialog.Header,Tabs.List, andCard.Footerkeep markup readable. - Controlled and uncontrolled. Every interactive primitive accepts both modes through standard React props.
Quick start
Install the umbrella package and you have every component in scope:
pnpm add @sisyphos-ui/uiImport the bundled stylesheet once in your app root, then use any component:
import "@sisyphos-ui/ui/styles.css";
import { Button, Dialog, toast, Toaster } from "@sisyphos-ui/ui";
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<html>
<body>
<Toaster position="bottom-right" />
{children}
</body>
</html>
);
}