KMUI Design System

A comprehensive React component library with custom design tokens and themed TDesign components

✨ Features

• 🧩 70+ React Components - Full set of UI components powered by TDesign React
• 🎨 Custom KMUI Theme - Customized CSS styles on top of TDesign components
• 📘 TypeScript First - Full type safety and IntelliSense support
• 🎯 Figma-Aligned - Pixel-perfect implementation of Figma designs
• 📦 Tree-Shakeable - Import only what you need
• 🚀 Production Ready - Built and optimized for production use

📦 Installation

# npm
npm install @michelleyuan1111/kmui-system

# yarn
yarn add @michelleyuan1111/kmui-system

# pnpm
pnpm add @michelleyuan1111/kmui-system

Peer Dependencies

Make sure you have React 16.8+ installed:

npm install react react-dom

🚀 Quick Start

1. Import Styles

Import the CSS file in your application entry point:

// main.tsx or index.tsx
import '@michelleyuan1111/kmui-system/dist/kmui.css';

2. Use Components

import React from 'react';
import { Button, Input, Select, Table } from '@michelleyuan1111/kmui-system';

function App() {
  return (
    <div>
      <Button theme="primary" onClick={() => alert('Clicked!')}>
        Submit
      </Button>
      <Input placeholder="Enter text..." />
    </div>
  );
}

export default App;

📚 Components (71 Total)

All components are re-exported from TDesign React with KMUI custom theme styles applied.

General

| Component | Import | Description | |-----------|--------|-------------| | Button | import { Button } from '@michelleyuan1111/kmui-system' | Button for triggering actions | | Icon | Via TDesign Icons | Icon library | | Link | import { Link } from '@michelleyuan1111/kmui-system' | Hyperlink component | | Typography | import { Typography } from '@michelleyuan1111/kmui-system' | Text and paragraph styles |

Layout

| Component | Import | Description | |-----------|--------|-------------| | Layout | import { Layout } from '@michelleyuan1111/kmui-system' | Page layout with Header, Content, Footer, Sider | | Divider | import { Divider } from '@michelleyuan1111/kmui-system' | Content separator | | Space | import { Space } from '@michelleyuan1111/kmui-system' | Spacing between components |

Navigation

| Component | Import | Description | |-----------|--------|-------------| | Menu | import { Menu } from '@michelleyuan1111/kmui-system' | Navigation menu | | Tabs | import { Tabs } from '@michelleyuan1111/kmui-system' | Tab navigation | | Breadcrumb | import { Breadcrumb } from '@michelleyuan1111/kmui-system' | Breadcrumb navigation | | Pagination | import { Pagination } from '@michelleyuan1111/kmui-system' | Page pagination | | Steps | import { Steps } from '@michelleyuan1111/kmui-system' | Step-by-step navigation | | Anchor | import { Anchor } from '@michelleyuan1111/kmui-system' | Anchor link navigation | | BackTop | import { BackTop } from '@michelleyuan1111/kmui-system' | Scroll back to top | | Dropdown | import { Dropdown } from '@michelleyuan1111/kmui-system' | Dropdown menu | | StickyTool | import { StickyTool } from '@michelleyuan1111/kmui-system' | Sticky toolbar | | Guide | import { Guide } from '@michelleyuan1111/kmui-system' | User guide / tour |

Form

| Component | Import | Description | |-----------|--------|-------------| | Form | import { Form } from '@michelleyuan1111/kmui-system' | Form container with validation | | Input | import { Input } from '@michelleyuan1111/kmui-system' | Text input | | InputAdornment | import { InputAdornment } from '@michelleyuan1111/kmui-system' | Input prefix/suffix addon | | InputNumber | import { InputNumber } from '@michelleyuan1111/kmui-system' | Numeric input | | Textarea | import { Textarea } from '@michelleyuan1111/kmui-system' | Multi-line text input | | Select | import { Select } from '@michelleyuan1111/kmui-system' | Dropdown selector | | SelectInput | import { SelectInput } from '@michelleyuan1111/kmui-system' | Select with input | | Checkbox | import { Checkbox } from '@michelleyuan1111/kmui-system' | Checkbox | | Radio | import { Radio } from '@michelleyuan1111/kmui-system' | Radio button | | Switch | import { Switch } from '@michelleyuan1111/kmui-system' | Toggle switch | | Slider | import { Slider } from '@michelleyuan1111/kmui-system' | Slider input | | DatePicker | import { DatePicker } from '@michelleyuan1111/kmui-system' | Date picker | | TimePicker | import { TimePicker } from '@michelleyuan1111/kmui-system' | Time picker | | Cascader | import { Cascader } from '@michelleyuan1111/kmui-system' | Cascading selector | | AutoComplete | import { AutoComplete } from '@michelleyuan1111/kmui-system' | Autocomplete input | | TagInput | import { TagInput } from '@michelleyuan1111/kmui-system' | Tag-style input | | RangeInput | import { RangeInput } from '@michelleyuan1111/kmui-system' | Range input | | Transfer | import { Transfer } from '@michelleyuan1111/kmui-system' | Transfer list | | Upload | import { Upload } from '@michelleyuan1111/kmui-system' | File upload | | ColorPicker | import { ColorPicker } from '@michelleyuan1111/kmui-system' | Color picker | | Rate | import { Rate } from '@michelleyuan1111/kmui-system' | Star rating | | TreeSelect | import { TreeSelect } from '@michelleyuan1111/kmui-system' | Tree-based selector |

Data Display

| Component | Import | Description | |-----------|--------|-------------| | Table | import { Table } from '@michelleyuan1111/kmui-system' | Data table | | List | import { List } from '@michelleyuan1111/kmui-system' | List display | | Tree | import { Tree } from '@michelleyuan1111/kmui-system' | Tree view | | Tag | import { Tag } from '@michelleyuan1111/kmui-system' | Tag label | | Badge | import { Badge } from '@michelleyuan1111/kmui-system' | Badge indicator | | Card | import { Card } from '@michelleyuan1111/kmui-system' | Card container | | Collapse | import { Collapse } from '@michelleyuan1111/kmui-system' | Collapsible panel | | Avatar | import { Avatar } from '@michelleyuan1111/kmui-system' | User avatar | | Image | import { Image } from '@michelleyuan1111/kmui-system' | Image display | | ImageViewer | import { ImageViewer } from '@michelleyuan1111/kmui-system' | Image preview | | Swiper | import { Swiper } from '@michelleyuan1111/kmui-system' | Carousel / swiper | | Calendar | import { Calendar } from '@michelleyuan1111/kmui-system' | Calendar display | | Comment | import { Comment } from '@michelleyuan1111/kmui-system' | Comment component | | Statistic | import { Statistic } from '@michelleyuan1111/kmui-system' | Statistic number display | | Descriptions | import { Descriptions } from '@michelleyuan1111/kmui-system' | Description list | | Timeline | import { Timeline } from '@michelleyuan1111/kmui-system' | Timeline display | | Progress | import { Progress } from '@michelleyuan1111/kmui-system' | Progress bar | | Skeleton | import { Skeleton } from '@michelleyuan1111/kmui-system' | Loading skeleton | | Empty | import { Empty } from '@michelleyuan1111/kmui-system' | Empty state placeholder | | QRCode | import { QRCode } from '@michelleyuan1111/kmui-system' | QR code generator | | Watermark | import { Watermark } from '@michelleyuan1111/kmui-system' | Watermark overlay |

Feedback

| Component | Import | Description | |-----------|--------|-------------| | Dialog | import { Dialog } from '@michelleyuan1111/kmui-system' | Modal dialog | | Drawer | import { Drawer } from '@michelleyuan1111/kmui-system' | Side drawer panel | | Popup | import { Popup } from '@michelleyuan1111/kmui-system' | Popup container | | Popconfirm | import { Popconfirm } from '@michelleyuan1111/kmui-system' | Popover confirmation | | Tooltip | import { Tooltip } from '@michelleyuan1111/kmui-system' | Tooltip on hover | | Message | import { Message } from '@michelleyuan1111/kmui-system' | Global message notification | | Notification | import { Notification } from '@michelleyuan1111/kmui-system' | Notification panel | | Alert | import { Alert } from '@michelleyuan1111/kmui-system' | Alert banner | | Loading | import { Loading } from '@michelleyuan1111/kmui-system' | Loading spinner |

Config

| Component | Import | Description | |-----------|--------|-------------| | ConfigProvider | import { ConfigProvider } from '@michelleyuan1111/kmui-system' | Global configuration provider | | Affix | import { Affix } from '@michelleyuan1111/kmui-system' | Affix / sticky positioning |

🎯 Usage Examples

Form Example

import { Form, Input, Select, Button, DatePicker } from '@michelleyuan1111/kmui-system';
import from '@michelleyuan1111/kmui-system/dist/kmui.css';

function MyForm() {
  return (
    <Form onSubmit={handleSubmit}>
      <Form.FormItem label="Name" name="name">
        <Input placeholder="Enter your name" />
      </Form.FormItem>
      <Form.FormItem label="Role" name="role">
        <Select options={[
          { label: 'Admin', value: 'admin' },
          { label: 'User', value: 'user' },
        ]} />
      </Form.FormItem>
      <Form.FormItem label="Date" name="date">
        <DatePicker />
      </Form.FormItem>
      <Button theme="primary" type="submit">Submit</Button>
    </Form>
  );
}

Table Example

import { Table } from '@michelleyuan1111/kmui-system';

const columns = [
  { colKey: 'name', title: 'Name', width: 200 },
  { colKey: 'email', title: 'Email' },
  { colKey: 'role', title: 'Role', width: 120 },
];

const data = [
  { name: 'Alice', email: '[email protected]', role: 'Admin' },
  { name: 'Bob', email: '[email protected]', role: 'User' },
];

<Table columns={columns} data={data} rowKey="name" />

Dialog Example

import { Dialog, Button } from '@michelleyuan1111/kmui-system';
import { useState } from 'react';

function MyDialog() {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <Button theme="primary" onClick={() => setVisible(true)}>Open Dialog</Button>
      <Dialog
        visible={visible}
        header="Confirmation"
        body="Are you sure you want to proceed?"
        onClose={() => setVisible(false)}
        onConfirm={() => { handleConfirm(); setVisible(false); }}
      />
    </>
  );
}

📘 TypeScript Support

All component props are fully typed. Refer to TDesign React API documentation for detailed prop types.

import type { ButtonProps, InputProps, TableProps, SelectProps } from '@michelleyuan1111/kmui-system';

🎯 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

📦 Bundle Info

• ESM: dist/index.mjs
• CJS: dist/index.cjs
• Types: dist/index.d.ts
• Styles: dist/kmui.css

🔧 Development

# Install dependencies
npm install

# Run development server
npm run dev

# Build library
npm run build

# Type checking
npm run type-check

📄 License

MIT © michelleyuan

See LICENSE for more information.

Made with ❤️ by the KMUI Team