Introduction
A modern, accessible, themeable design system shipped for React, Vue 3, and Angular 18. 35 production-ready components, one shared design contract.
What is Sisyphos UI?
Sisyphos UI is a design system of 35 components shipped for React, Vue 3, and Angular 18. Every framework binding produces the same DOM, the same class names, the same ARIA semantics, and the same keyboard behavior — built for teams that care about accessibility, performance, and design consistency, regardless of their stack.
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.
Three frameworks, one design
@sisyphos-ui/react, @sisyphos-ui/vue, @sisyphos-ui/angular — same components, same tokens, same a11y. Pick your stack.
Strict TypeScript
Full types in every binding. 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 your framework's idiomatic state pattern — React props, Vue
v-model, Angular signals.
Quick start
Install the package for your framework — head to Installationfor the cross-framework picker and the package-manager picker. Here's the React quickstart:
pnpm add @sisyphos-ui/reactImport the bundled stylesheet once in your app root, then use any component:
import "@sisyphos-ui/react/styles.css";
import { Button, Dialog, toast, Toaster } from "@sisyphos-ui/react";
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<html>
<body>
<Toaster position="bottom-right" />
{children}
</body>
</html>
);
}