Design and engineering,finally on the same page.
130+ components and 42 blocks, matching your Figma file exactly, so designers hand off what engineers already have. With the SakaniUI MCP server and agent skill, your AI assistant builds from that same source of truth instead of guessing.
Maps, glass, charts andfull product screens
Live, not screenshots. Real SakaniUI components wired to real data, each one a single import.
Revenue
Last 30 days
Quarter goals
Product scorecard
Signups this week
The everyday pieces,finished
Forms, menus, steppers and feedback with keyboard support and quiet motion. Try them.
130+ components and 42 blocks, MIT licensed and free, no account needed.
Built for real products
Real dashboards and apps shipped with Sakani.
- Financial overview dashboard. Finance
- Procurement kanban board. Procurement
- Team management, dark mode. Team
- Storefront product listing with filters. Storefront
- Data management settings. Settings
- Workspace overview dashboard. Overview
Real dashboards, not mockups
Real Sakani blocks and a real production app, not screenshots: hover the sidebar, switch tabs, scroll the table. It all works.
Enhance component consistency and usability
+1Improve retention through campaigns
New tiers, annual toggle and FAQ
Eight sessions with churned accounts
Move every component to Tabler icons
Bottom bar with five primary destinations
Okta and Azure AD for enterprise plans
Three-step setup with progress tracking
Illustrations and copy for 12 screens
Keep 365 days on the Business plan
Semantic layer flips from a single source
New headline tested against the control
+1Invite by link or email with roles
Glass and liquid glass for React,built into the design system
Frosted glass (glassmorphism) and Apple-style liquid glass ship as part of Sakani, in the Figma file and in code, instead of being bolted on component by component. Swap a surface with one attribute.
Revenue
Last 30 days
Solid — the default
Revenue
Last 30 days
Glass — data-surface="glass"
Revenue
Last 30 days
Liquid — <LiquidGlass>
A theme layer, not a variant
Surface (Solid · Glass · Liquid) sits next to light and dark. One attribute re-themes a whole area; Solid stays pixel-identical.
Real liquid glass
The backdrop bends at the edge like a lens, with a faint color fringe, rim light and depth. A frosted fallback covers Safari and Firefox.
Accessible by design
Reduced transparency becomes opaque, reduced motion stops the glide, and the docs list measured contrast for every tint.
Built for AI to use correctly,not just quickly
Sakani ships a machine-readable contract, an MCP server and an agent skill, so Claude Code, Cursor and other assistants look components up instead of inventing props, and get told when something is wrong.
Add it to your editor
{
"mcpServers": {
"sakaniui": {
"command": "npx",
"args": [
"-y", "@sakaniui/mcp"
]
}
}
}Claude Code: claude mcp add sakaniui -- npx -y @sakaniui/mcp
Add the skill
mkdir -p .claude/skills cp -r \ node_modules/@sakaniui/react/skills/sakaniui \ .claude/skills/
Use ~/.claude/skills/ instead to have it in every project. Ships with 0.10.1 and later.
What it catches
// the assistant calls check_usage before it ships
check_usage("IconButton", { variant: "danger" })
// result (abridged)
ok: false
Missing required prop "icon".
Missing required prop "aria-label".
"variant" = "danger" is not allowed.
Use one of: destructive, primary, secondary,
outline, ghost.A contract, not a guess
manifest.json lists all 126 components and 42 blocks with props, allowed values, defaults and required props, plus every token. Generated from the source on each build.
An MCP server that checks the work
Search components and icons, start from a type-checked example, and check every snippet with check_code before it ships. It runs locally with no dependencies.
A skill that makes it ask
A short SKILL.md in the open Agent Skills format. Claude Code, Cursor and other skills-compatible agents load it when you ask for an interface, then use the server and manifest without being told to.
The reasoning behind it
AGENTS.md says why each piece behaves as it does, when not to use it, and what to do when nothing fits. Served at /llms-full.txt.
Everything a real product needs
Not a component playground: a system built to ship actual screens.
130+ components
Every atom, molecule, and pattern in the Sakani Figma file, exported 1:1, not reinterpreted.
42 ready-made blocks
Full page sections (pricing tables, checkout flows, auth screens) meant to be copied and edited, not configured.
Token-driven theming
Every color, radius, and shadow traces back to a CSS variable. Rebrand by repointing the semantic layer.
Dark mode included
Not bolted on after the fact: every component ships with a verified dark-mode pass from day one.
Browse everything
130+ components and 42 blocks, organized by category. Jump straight to the one you need.
Up and running in a minute
Install the package, import its two stylesheets once at your app root, then import any component like you would from any other library.
import '@sakaniui/react/tokens.css';
import '@sakaniui/react/style.css';
import { Button } from '@sakaniui/react';
export function Example() {
return <Button variant="primary">Get started</Button>;
}Frequently asked questions
Yes. MIT licensed and free to use in personal or commercial projects, no attribution required.
Yes, as a built-in theme layer. Surface has three modes: Solid (the default), Glass (frosted translucency) and Liquid (Apple-style liquid glass that bends the backdrop like a lens). Add data-surface="glass" to any area, or use the LiquidGlass component. It exists in the Figma file as well, and the live Liquid Glass dashboard in the showcase above is a full screen built with it.
The refraction itself renders in Chromium browsers (Chrome, Edge). Safari and Firefox get a frosted fallback with the same tint, rim and depth, just without the bending. With prefers-reduced-transparency, glass becomes a plain opaque surface.
Sakani only depends on React 19 as a peer dependency, so there's no framework lock-in. This docs site is itself a Next.js app; the same package works identically in Vite or CRA.
Yes. Components ship their own CSS Modules bound to CSS custom properties, so they don't conflict with Tailwind classes on surrounding elements. This docs site does exactly that, using Tailwind for its own layout while every color comes from Sakani's tokens.
shadcn/ui hands you generic source to copy, paste, and restyle into your own design language. Sakani starts from the other end: every component is a 1:1 export of a real, maintained Figma file, so the tokens, spacing, and states you see in design are exactly what ships in code, with no restyling pass and no drift between design and build. It's also an installable npm package, not a folder of files to maintain yourself: `npm install`, import, done, with dark mode and 130+ components covered from day one. Blocks stay copy-and-edit, same as shadcn's; that model is genuinely the right fit for full page sections you're meant to customize.
Not through props: blocks intentionally ship a small, fixed set of states (loading, empty, error, etc.) rather than a large configuration API. To go further, copy the block's source file from GitHub into your project and edit it directly.
Yes. The package ships manifest.json, a generated machine-readable contract of every component, block, prop, required prop and design token, and an MCP server (npx -y @sakaniui/mcp) with tools to search components, read a contract, list tokens and validate props with check_usage. It also ships AGENTS.md, a guide explaining why components behave as they do and what to do when nothing fits, and an agent skill (skills/sakaniui/SKILL.md, the open Agent Skills format) that makes Claude Code, Cursor and other skills-compatible agents use the server and the manifest on their own whenever you ask for an interface. Setup for both is on the AI & MCP page.
Not yet. Today it's a standard npm install. A shadcn-style registry for copying block source directly into a project is on the roadmap.