# Sakani UI

> Sakani UI (`@sakaniui/react`) is an open-source, token-driven React design system with Figma parity and a Liquid Glass surface layer. Components are accessible, themed with CSS variables, and re-theme for dark mode and glass surfaces without per-component code.

Install: `npm install @sakaniui/react`, then import `@sakaniui/react/tokens.css` and `@sakaniui/react/style.css` once. Read the agent guide first: it explains why components behave as they do and what to do when nothing fits.

- [Agent guide — the why behind the system](https://www.sakaniui.com/llms-full.txt): principles, per-component use/don't, glass rules, recipes for AI-product moments

## Getting Started
- [Introduction](https://www.sakaniui.com/docs): Sakani is an open-source React design system: 114+ components and 42 copy-paste blocks exported 1:1 from Figma, token-driven, with dark mode and TypeScript types included.
- [Installation](https://www.sakaniui.com/docs/installation): Install @sakaniui/react with npm, import the token stylesheet once, and render your first component. Works with Next.js App Router, Vite and any React 19 setup.
- [Theming](https://www.sakaniui.com/docs/theming): Retheme Sakani by repointing CSS custom properties. Semantic tokens for colour, radius and shadow, a scoped .dark class for dark mode, and no build step required.
- [Glass & Liquid Glass](https://www.sakaniui.com/docs/glass): Frosted glass (glassmorphism) and Apple-style liquid glass for React, built into Sakani as a theme layer: one attribute re-themes a whole area. Live demos, the photo → overlay → components recipe, tokens, accessibility and browser support.
- [Icons](https://www.sakaniui.com/docs/icons): The Sakani icon set is Tabler Icons: 5,184 outline and 1,054 filled icons, matching the Figma Icons (Tabler) page. Tree-shaken per icon, lucide-react-compatible props.
- [Tokens](https://www.sakaniui.com/docs/tokens): Every design token in Sakani, with its resolved value in light and dark mode, generated from the stylesheet itself.

## Core
- [Button](https://www.sakaniui.com/docs/components/button): The primary action primitive: 5 variants × 3 sizes, all token-bound. Sakani's React Button component, with live examples, props, and dark mode.
- [Badge](https://www.sakaniui.com/docs/components/badge): A small status or category label: 6 colors × 2 emphasis levels. Sakani's React Badge component, with live examples, props, and dark mode.
- [Icon Button](https://www.sakaniui.com/docs/components/icon-button): A square, icon-only button for actions a toolbar has no room to spell out. Sakani's React Icon Button component, with live examples, props, and dark mode.
- [Card](https://www.sakaniui.com/docs/components/card): A general-purpose content container with an optional title, description, and actions. Sakani's React Card component, with live examples, props, and dark mode.
- [Avatar](https://www.sakaniui.com/docs/components/avatar): User or entity avatar: image, initials, or icon, in 4 sizes. Sakani's React Avatar component, with live examples, props, and dark mode.
- [Alert](https://www.sakaniui.com/docs/components/alert): An inline status message: 5 colors, each with a matching default icon. Sakani's React Alert component, with live examples, props, and dark mode.
- [Accordion](https://www.sakaniui.com/docs/components/accordion): Collapsible sections for content that's worth offering but not worth showing all at once. Sakani's React Accordion component, with live examples, props, and dark mode.
- [Divider](https://www.sakaniui.com/docs/components/divider): A rule between groups of content, optionally with a label centred on it. Sakani's React Divider component, with live examples, props, and dark mode.
- [Link](https://www.sakaniui.com/docs/components/link): A styled anchor, with a one-prop treatment for links that leave the app. Sakani's React Link component, with live examples, props, and dark mode.
- [Kbd](https://www.sakaniui.com/docs/components/kbd): Renders a keyboard key, for documenting shortcuts inline. Sakani's React Kbd component, with live examples, props, and dark mode.

## Forms
- [Input](https://www.sakaniui.com/docs/components/input): Text input with optional label, help text, and icon slots. Sakani's React Input component, with live examples, props, and dark mode.
- [Textarea](https://www.sakaniui.com/docs/components/textarea): Multi-line text input, with the same label, description, and error treatment as Input. Sakani's React Textarea component, with live examples, props, and dark mode.
- [Select](https://www.sakaniui.com/docs/components/select): A custom, fully-styled single-select dropdown, not a native <select>. Sakani's React Select component, with live examples, props, and dark mode.
- [Combobox](https://www.sakaniui.com/docs/components/combobox): A searchable select, in single or multi mode, for option lists too long to scan. Sakani's React Combobox component, with live examples, props, and dark mode.
- [Checkbox](https://www.sakaniui.com/docs/components/checkbox): A single binary choice, with an optional description and a third indeterminate state. Sakani's React Checkbox component, with live examples, props, and dark mode.
- [Radio](https://www.sakaniui.com/docs/components/radio): One choice out of a set. Group options by giving them a shared name. Sakani's React Radio component, with live examples, props, and dark mode.
- [Switch](https://www.sakaniui.com/docs/components/switch): An immediate on/off toggle. Use it for settings that apply the moment they change. Sakani's React Switch component, with live examples, props, and dark mode.
- [Slider](https://www.sakaniui.com/docs/components/slider): A range input for values where the rough magnitude matters more than the exact number. Sakani's React Slider component, with live examples, props, and dark mode.
- [Segmented Control](https://www.sakaniui.com/docs/components/segmented-control): A compact single choice among a few peers, where all the options are worth showing at once. Sakani's React Segmented Control component, with live examples, props, and dark mode.
- [File Upload](https://www.sakaniui.com/docs/components/file-upload): A drop zone with a file picker fallback, reporting the selected files back to you. Sakani's React File Upload component, with live examples, props, and dark mode.
- [Label](https://www.sakaniui.com/docs/components/label): A form label with optional required marker, for controls that don't render their own. Sakani's React Label component, with live examples, props, and dark mode.

## Navigation
- [Sidebar](https://www.sakaniui.com/docs/components/sidebar): The app navigation rail and the nine parts it's assembled from. Sakani's React Sidebar component, with live examples, props, and dark mode.
- [Top Bar](https://www.sakaniui.com/docs/components/top-bar): The application header, in desktop and mobile variants. Sakani's React Top Bar component, with live examples, props, and dark mode.
- [Menu](https://www.sakaniui.com/docs/components/menu): A list of actions, plus the items it's built from. Pair it with Popover for a real dropdown. Sakani's React Menu component, with live examples, props, and dark mode.
- [Breadcrumb](https://www.sakaniui.com/docs/components/breadcrumb): Shows where the current page sits, and gives one-click access back up the tree. Sakani's React Breadcrumb component, with live examples, props, and dark mode.
- [Pagination](https://www.sakaniui.com/docs/components/pagination): Page navigation for lists and tables. Fully controlled: it renders the state you pass it. Sakani's React Pagination component, with live examples, props, and dark mode.
- [Stepper](https://www.sakaniui.com/docs/components/stepper): Progress through a multi-step flow, showing what's done, where you are, and what's left. Sakani's React Stepper component, with live examples, props, and dark mode.
- [Popover](https://www.sakaniui.com/docs/components/popover): A small panel anchored to a trigger, for content that needs more room than a tooltip and less ceremony than a modal. Sakani's React Popover component, with live examples, props, and dark mode.
- [Filter Chip](https://www.sakaniui.com/docs/components/filter-chip): The chips in a filter bar: unset, applied, and the affordance for adding another. Sakani's React Filter Chip component, with live examples, props, and dark mode.

## Application
- [Modal](https://www.sakaniui.com/docs/components/modal): A blocking dialog with a focus trap, for decisions that can't be deferred. Sakani's React Modal component, with live examples, props, and dark mode.
- [Notifications](https://www.sakaniui.com/docs/components/notifications): Three surfaces for telling someone something: a page-level banner, a feed row, and an inline hint. Sakani's React Notifications component, with live examples, props, and dark mode.
- [Activity Feed](https://www.sakaniui.com/docs/components/activity-feed): A chronological log of who did what, with the actor and object emphasised inside the sentence. Sakani's React Activity Feed component, with live examples, props, and dark mode.
- [Progress Steps](https://www.sakaniui.com/docs/components/progress-steps): Checklist rows for onboarding flows, and labelled bars for quota readouts. Sakani's React Progress Steps component, with live examples, props, and dark mode.
- [Finance](https://www.sakaniui.com/docs/components/finance): The money components: balances, spending, transactions, and market quotes. Sakani's React Finance component, with live examples, props, and dark mode.
- [Code Snippet](https://www.sakaniui.com/docs/components/code-snippet): A code block with an optional filename header, copy button, and an editable mode. Sakani's React Code Snippet component, with live examples, props, and dark mode.
- [Avatar Upload](https://www.sakaniui.com/docs/components/avatar-upload): A profile-photo picker with a local preview. It selects and previews; uploading stays yours. Sakani's React Avatar Upload component, with live examples, props, and dark mode.
- [Tags](https://www.sakaniui.com/docs/components/tags): A row of labels, optionally removable, for the tags attached to a record. Sakani's React Tags component, with live examples, props, and dark mode.

## Marketing
- [Section Heading](https://www.sakaniui.com/docs/components/section-heading): The eyebrow/title/subtitle block that opens a section, and the larger first-page hero version. Sakani's React Section Heading component, with live examples, props, and dark mode.
- [Rich Text](https://www.sakaniui.com/docs/components/rich-text): The building blocks of an article body: headings, paragraphs, lists, quotes, and images. Sakani's React Rich Text component, with live examples, props, and dark mode.
- [Blog Listing](https://www.sakaniui.com/docs/components/blog-listing): Cards for an article index: the standard tile and the larger featured variant. Sakani's React Blog Listing component, with live examples, props, and dark mode.
- [Team Cards](https://www.sakaniui.com/docs/components/team-cards): Two ways to present a person: a compact profile card and a portrait-led team card. Sakani's React Team Cards component, with live examples, props, and dark mode.
- [Marketing Elements](https://www.sakaniui.com/docs/components/marketing-elements): The small pieces marketing pages are built from: featured icons, metrics, sub-features, logos, and job listings. Sakani's React Marketing Elements component, with live examples, props, and dark mode.
- [Mobile Navigation](https://www.sakaniui.com/docs/components/mobile-navigation): The collapsing nav bar for marketing pages on small screens. Sakani's React Mobile Navigation component, with live examples, props, and dark mode.

## E-commerce
- [Product Card](https://www.sakaniui.com/docs/components/product-card): A product tile for grids and carousels, with pricing, rating, swatches, and stock state built in. Sakani's React Product Card component, with live examples, props, and dark mode.
- [Product Options](https://www.sakaniui.com/docs/components/product-options): The controls on a product detail page: price, swatches, sizes, quantity, stock, and wishlist. Sakani's React Product Options component, with live examples, props, and dark mode.
- [Product Gallery](https://www.sakaniui.com/docs/components/product-gallery): An image viewer with a thumbnail strip, usable controlled or uncontrolled. Sakani's React Product Gallery component, with live examples, props, and dark mode.
- [Cart](https://www.sakaniui.com/docs/components/cart): The cart row and the checkout progress track. Sakani's React Cart component, with live examples, props, and dark mode.
- [Star Rating](https://www.sakaniui.com/docs/components/star-rating): An e-commerce product rating display, shared by ProductCard and ProductDetailBlock. Sakani's React Star Rating component, with live examples, props, and dark mode.

## Feedback
- [Toast](https://www.sakaniui.com/docs/components/toast): A transient notification. Presentational only: queueing, timing, and positioning stay with your app. Sakani's React Toast component, with live examples, props, and dark mode.
- [Tooltip](https://www.sakaniui.com/docs/components/tooltip): A hover/focus label for controls whose purpose isn't already written on them. Sakani's React Tooltip component, with live examples, props, and dark mode.
- [Progress](https://www.sakaniui.com/docs/components/progress): A linear progress bar, determinate when you know the percentage and indeterminate when you don't. Sakani's React Progress component, with live examples, props, and dark mode.
- [Spinner](https://www.sakaniui.com/docs/components/spinner): An indeterminate loading indicator for waits too short or too unpredictable to measure. Sakani's React Spinner component, with live examples, props, and dark mode.
- [Skeleton](https://www.sakaniui.com/docs/components/skeleton): Placeholder shapes that hold a layout's geometry while its data is still loading. Sakani's React Skeleton component, with live examples, props, and dark mode.
- [Empty State](https://www.sakaniui.com/docs/components/empty-state): What a list, table, or panel shows when it has nothing to show. Sakani's React Empty State component, with live examples, props, and dark mode.

## Data display
- [Table](https://www.sakaniui.com/docs/components/table): A generic, selectable data table: column definitions drive fully custom cell rendering. Sakani's React Table component, with live examples, props, and dark mode.
- [Tabs](https://www.sakaniui.com/docs/components/tabs): A tab list for switching between views within the same context. Sakani's React Tabs component, with live examples, props, and dark mode.
- [Stat Card](https://www.sakaniui.com/docs/components/stat-card): A KPI card with an optional sparkline: the building block behind every Sakani dashboard. Sakani's React Stat Card component, with live examples, props, and dark mode.
- [List Item](https://www.sakaniui.com/docs/components/list-item): A row with leading and trailing slots, for lists that aren't tabular enough to be a table. Sakani's React List Item component, with live examples, props, and dark mode.
- [Board Card](https://www.sakaniui.com/docs/components/board-card): The card, column, and meta row that a kanban board is assembled from. Sakani's React Board Card component, with live examples, props, and dark mode.
- [Chat](https://www.sakaniui.com/docs/components/chat): The three pieces of a messaging UI: the thread, the conversation list, and the composer. Sakani's React Chat component, with live examples, props, and dark mode.
- [Calendar](https://www.sakaniui.com/docs/components/calendar): Date and date-range selection, with arrow or dropdown month navigation. Sakani's React Calendar component, with live examples, props, and dark mode.

## Charts
- [Line Chart](https://www.sakaniui.com/docs/components/line-chart): One of 9 Recharts wrappers, styled entirely with Sakani's chart tokens. Sakani's React Line Chart component, with live examples, props, and dark mode.
- [Area Chart](https://www.sakaniui.com/docs/components/area-chart): A filled line chart, for volume over time where the magnitude matters as much as the trend. Sakani's React Area Chart component, with live examples, props, and dark mode.
- [Bar Chart](https://www.sakaniui.com/docs/components/bar-chart): Comparison across categories, in six layouts covering grouped, stacked, negative, and horizontal. Sakani's React Bar Chart component, with live examples, props, and dark mode.
- [Pie Chart](https://www.sakaniui.com/docs/components/pie-chart): Parts of a whole, in ten layouts including labelled, interactive, and donut treatments. Sakani's React Pie Chart component, with live examples, props, and dark mode.
- [Donut Chart](https://www.sakaniui.com/docs/components/donut-chart): Composition of a whole, with room in the middle for the total it adds up to. Sakani's React Donut Chart component, with live examples, props, and dark mode.
- [Radial Chart](https://www.sakaniui.com/docs/components/radial-chart): Progress toward a limit, drawn as rings. Good for quotas, capacity, and gauges. Sakani's React Radial Chart component, with live examples, props, and dark mode.
- [Radar Chart](https://www.sakaniui.com/docs/components/radar-chart): Several measures for one subject on a shared scale, useful for comparing two profiles at a glance. Sakani's React Radar Chart component, with live examples, props, and dark mode.
- [Funnel Chart](https://www.sakaniui.com/docs/components/funnel-chart): Drop-off across sequential stages, where each stage is a subset of the one before it. Sakani's React Funnel Chart component, with live examples, props, and dark mode.
- [Heatmap Chart](https://www.sakaniui.com/docs/components/heatmap-chart): A grid where colour carries the value, for spotting patterns across two dimensions at once. Sakani's React Heatmap Chart component, with live examples, props, and dark mode.

## Blocks
- [Data Table](https://www.sakaniui.com/docs/blocks/data-table): A full data table with a toolbar: search, filters, bulk actions, and pagination. The Data Table block for React: live preview, props, and the source to copy.
- [Kanban Board](https://www.sakaniui.com/docs/blocks/kanban-board): A project-management board with columns, cards, and drag states: the Data & Content category's block. The Kanban Board block for React: live preview, props, and the source to copy.
- [App Shell](https://www.sakaniui.com/docs/blocks/app-shell): The furniture of a logged-in app: page headers, account overview, activity log, notifications, and profile settings. The App Shell block for React: live preview, props, and the source to copy.
- [Panels & Flows](https://www.sakaniui.com/docs/blocks/panels): Onboarding progress, a file-upload panel, a chat interface, and two modal flows. The Panels & Flows block for React: live preview, props, and the source to copy.
- [Authentication](https://www.sakaniui.com/docs/blocks/authentication): The six screens of an auth flow: sign in, sign up, password recovery, email verification, and 2FA. The Authentication block for React: live preview, props, and the source to copy.
- [Marketing Sections](https://www.sakaniui.com/docs/blocks/marketing-sections): Full-width landing page sections: hero, feature grid, logo cloud, CTA banners, and the footer. The Marketing Sections block for React: live preview, props, and the source to copy.
- [Content Sections](https://www.sakaniui.com/docs/blocks/content-sections): Testimonials, FAQ, team, careers, and a blog index — the sections a marketing site fills with real content. The Content Sections block for React: live preview, props, and the source to copy.
- [E-commerce](https://www.sakaniui.com/docs/blocks/ecommerce): The storefront path end to end: product detail, grid, cart, checkout, and order confirmation. The E-commerce block for React: live preview, props, and the source to copy.
- [Pricing Table](https://www.sakaniui.com/docs/blocks/pricing-table): A full pricing section: 2 or 3 plans, one highlighted as the recommended tier. The Pricing Table block for React: live preview, props, and the source to copy.
- [Billing](https://www.sakaniui.com/docs/blocks/billing): The billing settings screens: current plan, invoice history, saved cards, and the add-card form. The Billing block for React: live preview, props, and the source to copy.
- [Billing Address](https://www.sakaniui.com/docs/blocks/billing-address): A real, interactive billing-address form with built-in validation and save states. The Billing Address block for React: live preview, props, and the source to copy.