Design once.
Ship anywhere.
The design system that ships everywhere you do.
- 33
- Components
- 3
- Frameworks
- MIT
- Forever free
Same Dialog. Three frameworks.
Pick the binding that matches your stack — the rendered DOM, class names, keyboard behavior, and theming hooks are identical across React, Vue, and Angular. The design system is one. The framework is yours.
Delete this item?
This action cannot be undone.
import { Button, Dialog } from "@sisyphos-ui/react";
export function ConfirmDelete() {
const [open, setOpen] = useState(false);
return (
<>
<Button color="error" onClick={() => setOpen(true)}>
Delete
</Button>
<Dialog open={open} onOpenChange={setOpen}>
<Dialog.Header>
<Dialog.Title>Delete this item?</Dialog.Title>
</Dialog.Header>
<Dialog.Body>
<Dialog.Description>
This action cannot be undone.
</Dialog.Description>
</Dialog.Body>
</Dialog>
</>
);
}One stylesheet. One token system. 33 components. Three framework bindings. Add a new framework binding without changing the design.
Pure components. Tokens that bend.
Nothing you don't need.
Sisyphos UI is deliberately small. We ship primitives, accessibility, and a theme engine — and leave state, data-fetching, and utilities to you.
Runtime theming
applyTheme() swaps every color, radius and spacing in one call. No rebuild, no CSS-in-JS, no ThemeProvider.
Zero runtime deps
Just your framework. No lodash, no emotion, no date libraries. Your bundle stays yours.
Accessible by default
Built to WAI-ARIA practices. Keyboard, focus rings, screen-reader — not opt-in.
One system, every framework
React, Vue 3, and Angular 18 share the same class names, ARIA, and CSS tokens. Pick your stack — the design system stays identical.
TypeScript strict
Strict mode, no any, no implicit returns. Your editor will tell you everything.
MIT, forever
Open source with no plus tier, no enterprise gating, no telemetry. Just code.
One line. Whole palette.
Override any token at runtime. Sisyphos UI ships CSS variables you can set per element — or globally in a single helper call.
import { applyTheme } from "@sisyphos-ui/core";
applyTheme({
colors: {
primary: "#ff7022", // brand
success: "#22c55e",
error: "#fb3748",
},
spacing: { md: 16, lg: 24 },
radius: { md: 12, full: 9999 },
});Ship what you build.
Drop Sisyphos UI into your React, Vue, or Angular app in under a minute. Keep it until you're tired of shipping.