推薦一款抖音開源前端UI架構：Semi-UI

Semi-UI是一款現代、全面、靈活的設計系統和 UI 庫。 緻力打通 DesignOps & DevOps ，快速搭建美觀的 React 應用。

特性

• 60+高品質元件
• 完善的無障礙支援，為所有元件提供遵循 W3C 标準的鍵盤互動、焦點管理和語義化
• 設計系統管理工具 Semi DSM，多達2000+ Design Token，快速定制你的專屬設計系統
• 國際化支援 17 種語言，提供完備的多語言、多時區、RTL支援
• Code2Design，根據不同主題自動生成 Figma UI Kit，保持代碼與設計同源
• 強大的 Design2Code支援，設計稿一鍵轉代碼，快速建構應用
• ⚙️ 穩定的品質保障，覆寫單元測試、E2E測試、視覺回歸測試等多種測試手段
• 支援 SSR
• 使用 TypeScript, 良好的類型定義，基于 Foundation / Adapter 架構，源碼易于閱讀 / 貢獻

安裝

# 使用 npm
npm install @douyinfe/semi-ui

# 使用 yarn
yarn add @douyinfe/semi-ui
           

使用

這是一個快速開始的例子：

import React from 'react';
import ReactDOM from 'react-dom';
import { Button, Switch } from '@douyinfe/semi-ui';

const App = () => (
    <>
        <Button type='primary'>primary button</Button>
        <Switch size='large' />
    </>
);

ReactDOM.render(<App />, document.querySelector('#app'));           

Semi UI 官網 擁有上千個支援實時調試的例子，歡迎體驗使用。

文檔

• Semi DSM
• Semi Design2Code
• Semi Figma Plugin
• 快速開始
• 元件總覽
• 自定義主題
• DSM主題商店
• Design Tokens
• 暗色模式
• Icons
• 全局配置
• 國際化
• 常見問題
• CHANGELOG

#挑戰30天在頭條寫日記#