Repolode
Submit
DouyinFE

DouyinFE/semi-design

A React UI component library and design system with 80+ components, Figma design-to-code support and 3000+ design tokens.

View on GitHubWebsite
Stars
10,473
Forks
854
Open issues
626
Last commit
3 days ago

What is it?

Semi UI is a React component library paired with a design system, aimed at teams that want to connect design and development. It ships with more than 80 components and provides keyboard interaction, focus management and ARIA support across them, along with internationalization, timezone and RTL handling, and SSR compatibility.

The project includes a design-to-code workflow through a Figma plugin, which can output JSX with SCSS, Emotion or Tailwind, or a JSON Schema DSL. A Code-to-Design direction generates a Figma UI Kit that follows the same themes as the code. Semi DSM, the design system management part, exposes more than 3000 design tokens so teams can define their own visual system on top of Semi UI.

The library is written in TypeScript, uses a Foundation/Adapter architecture, and can be packaged as web components for scenarios that need DOM isolation. It is installed from npm as @douyinfe/semi-ui.

Key features

  • 0180+ React components with keyboard interaction and ARIA support
  • 02Figma plugin that converts designs to JSX with SCSS, Emotion or Tailwind
  • 03Code-to-Design generation of a Figma UI Kit that matches the code themes
  • 043000+ design tokens for customizing a design system
  • 05TypeScript typings, SSR compatibility and RTL/internationalization support

Use cases

  • Building admin dashboards or back-office React apps with a ready-made component set
  • Turning Figma designs into React code quickly with the official plugin
  • Maintaining a shared design token system that stays in sync between design and code
  • Creating browser extensions or SDK widgets that need DOM isolation via web components

Quick start

  1. 1

    Install the package with npm

    npm install @douyinfe/semi-ui
  2. 2

    Import components from the package and render them in a React app, as shown in the README example

Things to know

  • It is a React library, so it only fits projects built on React.
  • The README lists support only for the latest 2 versions of major modern browsers.

Topics

#react#ui-library#design-system#design-tokens#figma#typescript#dark-mode#design-to-code#ai-friendly#code2design

FAQ

What is semi-design?
A React UI component library and design system with 80+ components, Figma design-to-code support and 3000+ design tokens. Semi UI is a React component library paired with a design system, aimed at teams that want to connect design and development. It ships with more than 80 components and provides keyboard interaction, focus management and ARIA support across them, along with internationalization, timezone and RTL handling, and SSR compatibility.
Is semi-design free to use? What license does it have?
semi-design is open source under the Other license. Check the license terms before using it in commercial products.
Is semi-design still maintained?
Actively maintained. The last commit to semi-design was on Nov 5, 2026.
What can I use semi-design for?
Building admin dashboards or back-office React apps with a ready-made component set Turning Figma designs into React code quickly with the official plugin Maintaining a shared design token system that stays in sync between design and code Creating browser extensions or SDK widgets that need DOM isolation via web components
How do I install semi-design?
Install the package with npm: npm install @douyinfe/semi-ui Import components from the package and render them in a React app, as shown in the README example
Where can I get semi-design?
The source code and installation instructions are on GitHub: https://github.com/DouyinFE/semi-design

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects