Where Design & Dev Work Together

Maintained by the Douyin front-end and UED teams, an easy-to-customize modern design system that helps designers and developers create high-quality products.

semi web arch
semi application demosemi application demo

Trusted by 100,000 + users

Bytedance SSO

Smooth Dev Experience

Focus on the essentials and we’ll take care of the rest

Easy-to-contribute FA architecture

Semi is designed based on FA architecture, and the main logic is extracted as Foundation package, which is easy to migrate to other frameworks

Complete accessibility support

Semi follows W3C standards to provide keyboard interaction, focus management and semantics for all components

Internationalization and Multilingualism

Semi provides complete multi-language, multi-time zone, RTL support to easily create global applications

Live Code component

LiveCode allows you to instantly demonstrate your UI components using an online code editor

Stable quality assurance

Semi uses a variety of methods such as unit testing to ensure the stability and quality of components, and the code coverage rate reaches 90%

SSR support

Semi component library supports SSR scenarios and can be used in frameworks like Next.js and Gatsby

Theming

Create variations of UI Styles that suit your brand with full flexibility

Semi Design Default

Feishu Universe Design Theme

Douyin Creator Theme

CapCut Theme

Volce Engine Theme

Richard Hendricks

@RichardHendricks
Beijing, ChinaDouyin certificationrichard@gmail.comChief foodie, good at algorithms, especially
Video compression algorithm
Official TopicsKOL

Private Message Management

Apple Accountrichard@icloud.com
Google Accountrichard@gmail.com
Instagramrichard_aaa
FacebookRichard Hendricks
SenderPrivate message contentTime of dispatch
No Result

Managing Themes

Tweak 2000+ tokens with powerful theme editor, synced with Figma

Make design and code homologous

BETA

Use real components to draw design drafts and transfer front-end code with one click

Upload report

Document Chinese name

*

Document English name

Documentation link

*

Report tag

Conclusion

Note

Continuous upload

Build State of the Art Apps

Modern design vibes compile with next-gen OS and browsers

In-depth interpretation of content

Learn about our thinking behind accessibility, theme customization, automation solutions

Accessible Design in Semi Design

"A front-end open source UI component library that does not support Accessibility is a disaster"

In-depth explanation of Semi theming scheme

Compatible with diverse brand languages ​​and product forms to avoid meaningless re-creation

Stride along with Users

Semi Design value our users, any kind of contribution is welcome

Stars

0+

Fork

0+

Downloads

0+

Contributors

0+

Special thanks

semi application demosemi application demosemi application demosemi application demo

@Mengzhou

Developer, ByteDance

C

@Changyi

Developer, ByteDance

M

@Miaomiao

Design, ByteDance

Y

@Yinfeng

Product Manager, ByteDance

@Dingwei

Developer, ByteDance

@Jingyu

Developer, ByteDance

@Yucang

Developer, ByteDance

G

@Guangye

Product Manager, ByteDance

@Baifu

Developer, ByteDance

Where Design & Dev Work Together

Start using Semi Design on your next project today

Dev

Semi UI for React, live code demo with full documentation that speed up your workflow.

Component Documentation

Design

Fully synced design tokens and component variants, powered by Figma.

Figma UIKit