Requirements

React 17, 18, or 19
Node.js ≥ 18
A bundler that supports ESM — Next.js, Vite, Remix,Webpack 5, and Rollup all work out of the box.

Umbrella install

The umbrella package (@sisyphos-ui/ui) re-exports every component. This is the recommended starting point — modern bundlers tree-shake the imports you don't use.

snippet.bashbash

pnpm add @sisyphos-ui/ui

Import the compiled stylesheet once, then use components anywhere:

app/layout.tsxtsx

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

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

Individual packages

Every component also ships as its own package. Use this mode when you want to minimize the client bundle and own which components enter your dependency tree.

snippet.bashbash

pnpm add @sisyphos-ui/button @sisyphos-ui/core

Each package ships its own stylesheet:

app/layout.tsxtsx

import "@sisyphos-ui/core/styles.css";
import "@sisyphos-ui/button/styles.css";
import { Button } from "@sisyphos-ui/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/ui/styles.css";
import { Toaster } from "@sisyphos-ui/ui";

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/ui/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/ui
2
Import the stylesheet once in your root layout.
snippet.tsxtsx
import "@sisyphos-ui/ui/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/ui";

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