Requirements

React 18+, Vue 3+, or Angular 18+
Node.js ≥ 18
A bundler that supports ESM — Next.js, Vite,Angular CLI, Webpack 5, and Rollupall work out of the box.

Pick a framework

Sisyphos UI v1.0 ships three umbrella packages — pick the one that matches your stack. The framework picker below is sticky: once you choose, every code panel on this site remembers your choice.

$ pnpm add @sisyphos-ui/react

Then import the bundled stylesheet once at app entry: import "@sisyphos-ui/react/styles.css";

Your first component

Import the bundled stylesheet once at app entry, then use components from anywhere. Here is the same Button rendered in each framework:

example.tsx

import "@sisyphos-ui/react/styles.css";
import { Button, Toaster, toast } from "@sisyphos-ui/react";

export default function App() {
  return (
    <>
      <Toaster position="bottom-right" />
      <Button onClick={() => toast.success("Ready to ship")}>Click me</Button>
    </>
  );
}

Next.js

Sisyphos UI works with the App Router, Pages Router, and Turbopack. Add the import to your root layout:

app/layout.tsxtsx

import "@sisyphos-ui/react/styles.css";
import { Toaster } from "@sisyphos-ui/react";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Toaster position="bottom-right" />
      </body>
    </html>
  );
}

Vite

Import the stylesheet in your entry file, and you're done:

src/main.tsxtsx

import React from "react";
import ReactDOM from "react-dom/client";
import "@sisyphos-ui/react/styles.css";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

TypeScript

Types ship alongside every package. You don't need @types/* helpers. If you want strict prop inference, turn on strict mode in tsconfig.json— Sisyphos UI's types are written for strict projects.

1
Install the umbrella package.
snippet.bashbash
pnpm add @sisyphos-ui/react
2
Import the stylesheet once in your root layout.
snippet.tsxtsx
import "@sisyphos-ui/react/styles.css";
3
Mount the Toaster (optional — only if you plan to use toast()).
snippet.tsxtsx
<Toaster position="bottom-right" />

Start composing.

snippet.tsxtsx

import { Button } from "@sisyphos-ui/react";

<Button variant="outlined" color="success">Ship it</Button>