Semi Design — Modern Design System and React UI Library by ByteDance

Introduction

Semi Design is a design system and React UI library developed by ByteDance's front-end team. It provides 80+ production-ready components, a design-to-code workflow through Semi DSM (Design System Manager), and built-in support for theming, dark mode, and right-to-left layouts. The library powers many internal ByteDance products.

What Semi Design Does

• Provides 80+ React components covering forms, navigation, data display, and feedback patterns
• Ships a Design System Manager (DSM) for visual theme creation and export
• Supports runtime theme switching between light, dark, and custom brand themes
• Includes A11y compliance with keyboard navigation and screen reader support
• Offers internationalization for 20+ locales with bidirectional text support

Architecture Overview

Semi Design uses a layered architecture: a design token layer defines visual primitives (colors, spacing, typography), a Foundation layer implements framework-agnostic component logic, and the React Adapter layer binds Foundation to React lifecycle. This separation means components can theoretically be ported to other frameworks while preserving the same design tokens and logic. Styling uses Sass with CSS variable output for runtime theming.

Self-Hosting & Configuration

• Install @douyinfe/semi-ui; styles are bundled and loaded automatically
• Customize themes through Semi DSM (a web tool) or by overriding Sass variables
• Enable dark mode by adding a data-theme attribute to the body element
• Configure locale by wrapping the app with LocaleProvider
• Compatible with Next.js, Umi, Vite, and Webpack projects

Key Features

• Design-to-code pipeline: create themes visually in Semi DSM and export as npm packages
• Foundation/Adapter architecture separates logic from rendering framework
• Runtime theme switching without page reload via CSS variable injection
• Table component supports virtual scrolling, column resizing, and grouped headers
• 8k+ GitHub stars with regular releases from the ByteDance front-end team

Comparison with Similar Tools

• Ant Design — also from the Chinese tech ecosystem but by Ant Group; Semi Design has a different visual language and DSM tooling
• Arco Design — by ByteDance as well but from a different team; Semi Design has broader component coverage and DSM integration
• Material UI — follows Material Design; Semi Design implements its own design language with a visual theme builder
• Chakra UI — utility-prop styling with a simpler API; Semi Design offers more enterprise-grade components and a full design system manager

FAQ

Q: What is Semi DSM? A: Semi DSM is a web-based design system manager where designers create and export themes that developers consume as npm packages.

Q: Does Semi Design support server-side rendering? A: Yes. Components render correctly with Next.js SSR and support hydration without layout shift.

Q: Can I use Semi Design without React? A: The Foundation layer is framework-agnostic, but only React adapters are officially maintained.

Q: How does Semi Design handle forms? A: The Form component provides declarative field definitions with built-in validation, conditional fields, and array fields.

Sources

• https://github.com/DouyinFE/semi-design
• https://semi.design/en-US/