⛰️ KaiUI

Try now

You can view KaiUI components on KaiUI storybook. visit here: https://65b35bda1b62e520d32c1ef9-qfbnydrwwz.chromatic.com/?path=/docs/configure-your-project--docs

Installation

$ npm install kai-kit

Autocomplete for CSS Variables (VScode)

1. Install CSS Variable Autocomplete Extention.
2. Add lines below on setting.json of VScode

{
  "cssVariables.lookupFiles": [
    "**/*.css",
    "**/*.scss",
    "**/*.sass",
    "**/*.less",
    "node_modules/kai-kit/src/tokens/build/css/kai-tokens.css"
  ]
}

Architecture

KaiUI is composed by 2 main external packages:

🟥 react-aria-components

react-aria-components is a component library focused on accessibility in React. This library is designed to facilitate web accessibility, aiming to help developers easily construct accessible UIs.

👩‍🎤 styled-components (Emotion)

Emotion is a popular library for styling components in React applications. It uses the concept of styled-components, allowing developers to write CSS directly in their JavaScript code. This approach combines the power of CSS with the flexibility and dynamism of JavaScript, enabling more efficient and maintainable styling solutions.

Tokens

Design tokens in a design system refer to the small, defined units that systematize the elements of design. These tokens represent design aspects like colors, typography, spacing, and shadows, and are used to construct a consistent design language. If you want to know more about Design Tokens, Please refer to MUI3. In KaiUI, design tokens are prepared for elements such as color, size, typography, and motion. The names of each design token are broadly divided into three parts. Also, the 'Type' is composed of three categories: ref, sys, and comp. Their roles are as follows:

• ref: Tokens that round continuous values into reusable discrete values.
• sys: Semantic tokens intended for actual use, which resolve to ref type tokens.
• comp: Tokens used in components, which resolve to sys type tokens.

For more detailed types and implementation of design tokens, please refer to the URL attached in the Development Status. Please visit the URL provided in the Development Status for more information on the types and implementation of design tokens.

Development Status

🟢 : stable, 🟡 : WIP, ⚪️ : Not started, | Tokens | ref | sys | comp | Figma | | --- | --- | --- | --- | --- | | color | 🟢 | 🟢 | ⚪️ | 🟡 | | size | 🟢 | 🟢 | ⚪️ | 🟡 | | typo | 🟢 | 🟢 | ⚪️ | 🟢 | | breakpoint | 🟢 | 🟢 | ⚪️ | ⚪️ | | motion | 🟡 | 🟡 | ⚪️ | ⚪️ | | opacity | 🟡 | 🟡 | ⚪️ | ⚪️ | | z-index | 🟡 | 🟡 | ⚪️ | ⚪️ | | effect | ⚪️ | ⚪️ | ⚪️ | ⚪️ |

Components

In KaiUI, the components below are implemented right now.

Development status

🟢 : stable, 🟡 : WIP, ⚪️ : Not started, | Components | Style | Logic | Customization | Figma | | --- | --- | --- | --- | --- | | Button | 🟢 | 🟢 | ⚪️ | 🟢 | | Chip | 🟢 | 🟢 | ⚪️ | 🟡 | | IconButton | 🟢 | 🟢 | ⚪️ | 🟡 | | KaiProvider | 🟢 | 🟢 | ⚪️ | - | | Label | 🟢 | 🟢 | ⚪️ | 🟢 | | Menu | 🟢 | 🟢 | ⚪️ | 🟢 | | Separator | 🟢 | 🟢 | ⚪️ | 🟢 | | Skelton | 🟢 | 🟢 | ⚪️ | 🟢 | | Switch | 🟢 | 🟢 | ⚪️ | 🟢 | | Tabs | 🟢 | 🟢 | ⚪️ | 🟡 | | TextField | 🟢 | 🟢 | ⚪️ | 🟢 | | TextArea | 🟢 | 🟢 | ⚪️ | 🟢 | | IconUpload | 🟢 | 🟡 | ⚪️ | 🟡 | | Modal | 🟢 | 🟡 | ⚪️ | 🟡 | | Dialog | 🟡 | 🟡 | ⚪️ | ⚪️ | | DateField | 🟢 | 🟡 | ⚪️ | 🟡 | | Snackbar | 🟢 | 🟢 | ⚪️ | ⚪️ | | Selection | ⚪️ | ⚪️ | ⚪️ | ⚪️ | | Radio | ⚪️ | ⚪️ | ⚪️ | ⚪️ | | Checkbox | ⚪️ | ⚪️ | ⚪️ | ⚪️ | | Calendar | ⚪️ | ⚪️ | ⚪️ | ⚪️ | | Tooltip | ⚪️ | ⚪️ | ⚪️ | ⚪️ | | Effect | ⚪️ | ⚪️ | ⚪️ | ⚪️ | | Motion | ⚪️ | ⚪️ | ⚪️ | ⚪️ |