Introduction

Sakani is a React component library generated directly from a single Figma file: every component, variant, and state you see in the design file has a matching implementation here. Nothing is guessed or approximated: colors, spacing, radii, and typography all trace back to the same token definitions the designers use.

Two layers

The library ships two kinds of things, and it's worth knowing which one you're reaching for:

• Components: real, importable, configurable React components (Button, Select, Card…). You install these and use them as-is, the same way you'd use any other component library.
• Blocks: full page sections (a pricing table, a checkout flow, a billing form). These are composition examples, not configurable components, and the intent is to copy the source file into your own project and edit it directly, the same way shadcn/ui's blocks work.

Token-driven, not hardcoded

Every visual property in every component is a CSS custom property, not a literal value. That's what makes the built-in dark mode possible, and it's what lets you re-theme the whole system by repointing a handful of semantic tokens instead of touching component code. See Theming for the full token reference.

Not a fork, not a wrapper

Sakani doesn't sit on top of Radix, Headless UI, or any other primitive library: every interactive behavior (keyboard navigation, focus management, portal positioning) is implemented directly against the DOM. That keeps the bundle small and the behavior fully within this project's control.