Kube Design

A suite of components, hooks, and icons. Originally built for KubeSphere Console, but it can also be used for developing any other React web apps.

Documentation

https://kubesphere-design.netlify.app/zh

Requirement

Ensure you have Node.js 24 and Yarn Classic installed.

• Node.js 24.x
• Yarn 1.22.22

Installation

$ yarn add @kubed/components @kubed/hooks @kubed/icons
or
$ npm i @kubed/components @kubed/hooks @kubed/icons

Usage

1. Wrap your application with the KubedConfigProvider:

import { CssBaseline, KubedConfigProvider } from '@kubed/components';
const Application = () => (
  <KubedConfigProvider>
    <CssBaseline /> // ---> Normalize styles
    <AppComponent /> // ---> Root of your application
  </KubedConfigProvider>
)

1. Use components like so:

import { Button } from "@kubed/components"
const MyComponent = () => <Button>Click Me</Button>

Contributing

...

Thank

We benefit a lot from these awesome project, Many thanks to them.

• Mantine
• ant-design
• Geist
• chakra-ui

License

MIT © kubesphere