SakaniUI — React Design System

Maps, glass, charts andfull product screens

Live, not screenshots. Real SakaniUI components wired to real data, each one a single import.

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.

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.

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.

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, unless a decorative showcase opts out with reducedTransparency="ignore".

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.