# Kanso Labs

> Guides for Kanso Labs' open-source projects: the Kanso UI design system, the Style Dictionary plugin, Home Assistant packaging and the conventions behind them.

- [Kanso Labs](https://docs.kansolabs.org/index.md): Guides for the open-source projects Kanso Labs makes, and the conventions they share.
- [Projects](https://docs.kansolabs.org/projects.md): Everything Kanso Labs publishes, where to find it, and where its work is planned.
- [How Kanso Labs works](https://docs.kansolabs.org/principles.md): The three principles every Kanso Labs repository follows.
- [Kanso UI](https://docs.kansolabs.org/kanso-ui/web/introduction.md): A React component library on React Aria Components, styled with StyleX, that follows Material Design.
- [Installation and usage](https://docs.kansolabs.org/kanso-ui/web/installation.md): Install Kanso UI and render a component, with nothing else to set up.
- [CSS cascade layers](https://docs.kansolabs.org/kanso-ui/web/css-layers.md): Order the library's rules against your own stylesheets, Tailwind and resets.
- [React Aria and dates](https://docs.kansolabs.org/kanso-ui/web/react-aria.md): The React Aria utilities and date values Kanso UI re-exports, and why a second copy breaks the components.
- [Localisation](https://docs.kansolabs.org/kanso-ui/web/localisation.md): Render every label, number and direction in the reader's language with I18nProvider.
- [Layout](https://docs.kansolabs.org/kanso-ui/web/layout.md): Container, Stack, Feed and the pane layouts, and lining an app bar up with the page below it.
- [Composition](https://docs.kansolabs.org/kanso-ui/web/composition.md): Render a component as another element, and open and close overlays.
- [Icons](https://docs.kansolabs.org/kanso-ui/web/icons.md): Bring your own icons, and size them so one icon serves every slot.
- [Server components](https://docs.kansolabs.org/kanso-ui/web/server-components.md): Render Kanso UI from a React server component, such as a page in the Next.js App Router.
- [Server rendering and tests](https://docs.kansolabs.org/kanso-ui/web/ssr-and-tests.md): The one setting Vite, Vitest and Jest need to load a package that imports its own stylesheet.
- [Theming](https://docs.kansolabs.org/kanso-ui/web/theming/overview.md): Retheme every component by overriding the --kui-* custom properties.
- [A scheme from Material Theme Builder](https://docs.kansolabs.org/kanso-ui/web/theming/material-theme-builder.md): Turn a Material Theme Builder export into --kui-* overrides, positive and negative included.
- [Theming part of a page](https://docs.kansolabs.org/kanso-ui/web/theming/theme-scope.md): Resolve the tokens again on a ThemeScope, so an override reaches only what is inside it.
- [Pinning light or dark](https://docs.kansolabs.org/kanso-ui/web/theming/light-and-dark.md): Follow the reader's OS, or pin a scheme from your app's own theme switch.
- [Upgrading](https://docs.kansolabs.org/kanso-ui/web/upgrading.md): How to move between 0.x releases on the way to 1.0, and where every breaking change is listed.
- [Kanso UI for React Native](https://docs.kansolabs.org/kanso-ui/react-native/introduction.md): Kanso UI's Material Design components for iOS and Android, on the same tokens and theming as the web library.
- [Installation](https://docs.kansolabs.org/kanso-ui/react-native/installation.md): Install the package and the React Native libraries it needs beside it.
- [Theming](https://docs.kansolabs.org/kanso-ui/react-native/theming.md): ThemeScope, reading tokens with useTheme(), and the fonts a type role draws in.
- [Routing and localisation](https://docs.kansolabs.org/kanso-ui/react-native/routing-and-localisation.md): Make href press through your router, and have the components write in your app's locale.
- [Kanso UI Core](https://docs.kansolabs.org/kanso-ui/core/introduction.md): The design data both Kanso UI libraries share: tokens, glyph paths and demo schemes.
- [Design tokens](https://docs.kansolabs.org/kanso-ui/core/tokens.md): One W3C Design Tokens file, the stylesheet and defaults built from it, and how a token change reaches both libraries.
- [Glyphs and demo schemes](https://docs.kansolabs.org/kanso-ui/core/glyphs-and-schemes.md): The glyph paths both libraries draw inside their controls, and the seven demo schemes both Storybooks render.
- [Unplugin Style Dictionary](https://docs.kansolabs.org/style-dictionary/introduction.md): Compile Style Dictionary design tokens ahead of your bundler, with watching and rebuilds under Vite, Rolldown, Rollup, Rspack and Webpack.
- [Installation](https://docs.kansolabs.org/style-dictionary/installation.md): Install the plugin beside Style Dictionary 5, on Node 22.12 or newer.
- [Add it to your bundler](https://docs.kansolabs.org/style-dictionary/bundlers.md): Import the entry point that matches your bundler.
- [Configuration](https://docs.kansolabs.org/style-dictionary/configuration.md): Point the plugin at a file, hand it an object, or return one from a function.
- [Watching and rebuilds](https://docs.kansolabs.org/style-dictionary/watching.md): What the plugin watches, and what a token change triggers under each bundler.
- [Building only some platforms](https://docs.kansolabs.org/style-dictionary/platforms.md): Rebuild only what the page in front of you uses.
- [Caching](https://docs.kansolabs.org/style-dictionary/caching.md): Skip a compile whose output is already current.
- [Path resolution](https://docs.kansolabs.org/style-dictionary/paths.md): Which paths follow the host's root, and which follow the working directory.
- [Logging and errors](https://docs.kansolabs.org/style-dictionary/logging-and-errors.md): How much the plugin says, where it says it, and when a failure stops the build.
- [Build hooks](https://docs.kansolabs.org/style-dictionary/build-hooks.md): Run your own code when a compile starts, ends or fails.
- [Options](https://docs.kansolabs.org/style-dictionary/options.md): Every option the plugin takes, with its default.
- [Public API](https://docs.kansolabs.org/style-dictionary/public-api.md): Five bundler entry points, one root entry and two types.
- [Migrating from the Vite plugin](https://docs.kansolabs.org/style-dictionary/migrating.md): Moving from @kanso-labs/vite-plugin-style-dictionary.
- [Home Assistant applications](https://docs.kansolabs.org/home-assistant/applications/introduction.md): A media, download and automation stack packaged for Home Assistant.
- [Add the repository](https://docs.kansolabs.org/home-assistant/applications/installation.md): Add the repository to Home Assistant, then install applications from the store.
- [Catalogue](https://docs.kansolabs.org/home-assistant/applications/catalogue.md): Every application, what it does, and where its web interface is.
- [How the applications are packaged](https://docs.kansolabs.org/home-assistant/applications/concepts.md): Hostnames, updates, backups, storage and the watchdog, as every application here handles them.
- [Robot Vacuum Map](https://docs.kansolabs.org/home-assistant/robot-vacuum-map/introduction.md): A live map of your robot vacuum in Home Assistant, from Xiaomi's cloud, with no rooting.
- [Installation](https://docs.kansolabs.org/home-assistant/robot-vacuum-map/installation.md): Install Robot Vacuum Map through HACS.
- [Configuration](https://docs.kansolabs.org/home-assistant/robot-vacuum-map/configuration.md): Sign in to Xiaomi, choose the vacuum, then adjust how the map is drawn.
- [Entities](https://docs.kansolabs.org/home-assistant/robot-vacuum-map/entities.md): The map, its controls, and a sensor for each element of it.
- [Supported vacuums](https://docs.kansolabs.org/home-assistant/robot-vacuum-map/supported-vacuums.md): Which map API each model is read through.
- [Troubleshooting](https://docs.kansolabs.org/home-assistant/robot-vacuum-map/troubleshooting.md): Debug logging, diagnostics, and where to report a problem.
- [Conventions](https://docs.kansolabs.org/engineering/conventions.md): The rules every Kanso Labs repository follows, and the reasoning behind each.
- [Commits and releases](https://docs.kansolabs.org/engineering/commits-and-releases.md): How a pull request title becomes a version, a changelog line and a release in every Kanso Labs repository.
- [Shared actions](https://docs.kansolabs.org/engineering/shared-actions.md): The composite actions and reusable workflows every Kanso Labs repository calls, from kanso-labs/actions.
- [Renovate](https://docs.kansolabs.org/engineering/renovate.md): How the organization's self-hosted Renovate runner keeps every Kanso Labs repository's dependencies current.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.