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 two stylesheets once
Every component references CSS variables for color, spacing, radius, and shadow; tokens.css is what actually defines them, and style.css holds the component styles. Both are required: import them 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'; import '@sakaniui/react/style.css';
Optional: the Geist font
Typography is set in Geist. The package does not load fonts, so without it the system font is used. To match the design exactly, install and import it once:
npm install @fontsource-variable/geist // next to the two imports above import '@fontsource-variable/geist';
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');