Kanso UI - Kanso Labs

Kanso UI is a React component library built on React Aria Components and styled with StyleX. Its design tokens come from a single W3C Design Tokens (DTCG) file, compiled with Style Dictionary, and every component follows its Material Design spec page. Every token carries a default, light and dark, so a component renders correctly the moment it is imported.

npm install @kanso-labs/kanso-ui

import { Button } from '@kanso-labs/kanso-ui'

export function Example() {
  return <Button>Click me</Button>
}

Where to look

These guides cover what sits around the components: installing the package, fitting its CSS into yours, rendering on a server, and theming. The components themselves are documented in Storybook, which is published from the latest release.

Storybook

Every component, its props and its states, in light and dark.

Installation and usage

What the package needs from your bundler, and what it does on its own.

Theming

Override the --kui-* tokens for a page, or for part of one.

Server rendering

Server components, server renderers and test runners.

What the package includes

Components built on React Aria Components, each drawn to its Material Design spec: sizes, shapes, type and colour roles, in every state the spec lists.
The React Aria utilities an app needs around them, re-exported so you never install a second copy. See React Aria and dates.
Layout primitives: Container, Stack, Feed, ListDetail and SupportingPane. See Layout.
Design tokens as --kui-* custom properties, published as tokens.css and as the DTCG source tokens.json.

The package ships no icons and no typefaces; those come from your app. See Icons.

Kanso UI for React Native draws the same components, props and tokens with React Native’s core components.
Kanso UI Core is the design data both libraries build from.

Coming from an earlier 0.x release? Upgrading lists every breaking change on the way to 1.0.

⌘I

​Where to look

Storybook

Installation and usage

Theming

Server rendering

​What the package includes

​Related packages

Where to look

What the package includes

Related packages