• 💪 Up to 80+ high-quality Components. Stable updates since 2019
• 🚀 Official Design to Code (D2C) support, convert Figma draft to real code in a few seconds
• 💅 Code to Design (C2D), automatically generate Figma UI Kit according to different themes, keep consistency between design and code
• 💕 Complete A11y support, follows W3C standards to provide keyboard interaction, focus management and ARIA for all components
• 💅 Design system management Semi DSM, up to 3000+ Design Tokens, make Semi Design to Any Design quickly.
• 🌍 Internationalization Support for Dozens of Languages, timezone, and RTL support
• ⚙️ Strict quality assurance, covering unit testing, E2E testing, and visual testing.
• 👏 Written in Typescript, friendly Static Type Support. Based on Foundation/Adapter architecture, easy to read and contribute
• 🥳 SSR (Server Side Rendering) Compatible.
• 📦 Easily compatible with web components, providing a complete adaptation solution, more suitable for building SDKs, browser plugins and other scenarios that require DOM isolation.

npm install @douyinfe/semi-ui

yarn add @douyinfe/semi-ui

pnpm add @douyinfe/semi-ui

Here is a quick example to get you started, it's all you need:

import React from 'react';
import { createRoot } from 'react-dom/client';
import { Button, Form } from '@douyinfe/semi-ui';

const App = () => (
    <Form>
        <Form.Input field='name' initValue='semi design'></Form.Input>
        <Button htmlType='submit'>submit</Button>
    </Form>
);

const root = createRoot(document.querySelector('#app'));

root.render(<App />);

Semi UI Doc Site has hundreds of editable examples and live preview, welcome to play with those examples.

Install Semi Figma Plugin. Translate Figma to real code in seconds. Support multiple output formats: JSX + SCSS / Emotion/Tailwind, or JSON Schema DSL