Installation
Get Sakani running in a fresh or existing React project.
1. Install the package
Sakani requires React 19 as a peer dependency.
npm install @sakaniui/react
2. Import the tokens once
Every component references CSS variables for color, spacing, radius, and shadow; tokens.css is what actually defines them. Import it exactly once, at your app's root, before any component renders.
// app/layout.tsx (or your app's single entry point) import '@sakaniui/react/tokens.css';
3. Import a component
Components are named exports from the package root.
import { Button } from '@sakaniui/react';
export function Example() {
return <Button variant="primary">Click me</Button>;
}4. Blocks live on their own subpath
Blocks are kept out of the main bundle so importing a component never pulls in an entire page section's worth of code. Import them from @sakaniui/react/blocks instead.
// blocks live on a separate subpath from components
import { PricingTableBlock } from '@sakaniui/react/blocks';Dark mode
Every token has a light and dark definition. Sakani doesn't ship a theme switcher: toggle the .dark class on any ancestor element (typically <html>) and every component underneath it re-themes automatically.
// toggle dark mode anywhere in your app
document.documentElement.classList.toggle('dark');