pointhalo d54a76ae42 Merge branch 'main' into release 2 éve
..
_base 92dbd3cd1f Merge branch 'main' into release 2 éve
_cssAnimation 73401f34e4 fix: fix tooltip animation in react18 #1225 (#1227) 3 éve
_portal 638f1e7a4f fix: fix document is not defined 2 éve
_sortable ef375fb64e refactor: change react-sortable-hoc to dnd-kit for Transfer/Taginput … (#1738) 2 éve
_test_ d4c3d4b522 chore: use eslint to format code (#1162) 3 éve
_utils 3faa6064f0 fix: extract the public method getScrollbarWidth to the util folder 2 éve
anchor d4b9f3276b feat: pass data-* attribute to dom (#1630) 2 éve
autoComplete f05ed24b0b chore: remove file head lint rule which already set global (#1706) 2 éve
avatar f05ed24b0b chore: remove file head lint rule which already set global (#1706) 2 éve
backtop f05ed24b0b chore: remove file head lint rule which already set global (#1706) 2 éve
badge f05ed24b0b chore: remove file head lint rule which already set global (#1706) 2 éve
banner f05ed24b0b chore: remove file head lint rule which already set global (#1706) 2 éve
breadcrumb f05ed24b0b chore: remove file head lint rule which already set global (#1706) 2 éve
button 81502aee75 feat: Split Button supports deep nested Button (#1741) 2 éve
calendar f05ed24b0b chore: remove file head lint rule which already set global (#1706) 2 éve
card bd83d1f9cd chore: format code 3 éve
carousel 9b82b7e001 chore: eslint fix 2 éve
cascader 04334fa11b fix: [Cascader] Fix cascader cannot display +N Popover in disabled and non-search situations (#1670) 2 éve
checkbox f05ed24b0b chore: remove file head lint rule which already set global (#1706) 2 éve
collapse f05ed24b0b chore: remove file head lint rule which already set global (#1706) 2 éve
collapsible d4b9f3276b feat: pass data-* attribute to dom (#1630) 2 éve
configProvider f05ed24b0b chore: remove file head lint rule which already set global (#1706) 2 éve
datePicker df3925eb5c fix: fix datepicker autofocus 2 éve
descriptions d4b9f3276b feat: pass data-* attribute to dom (#1630) 2 éve
divider fd9f597550 Chore: update storybook & Webpack & Cypress (#1589) 2 éve
dropdown f05ed24b0b chore: remove file head lint rule which already set global (#1706) 2 éve
empty d4b9f3276b feat: pass data-* attribute to dom (#1630) 2 éve
form 9b82b7e001 chore: eslint fix 2 éve
grid bd83d1f9cd chore: format code 3 éve
highlight ee4f9b2c72 New Component Highlight (#1281) 2 éve
iconButton f05ed24b0b chore: remove file head lint rule which already set global (#1706) 2 éve
icons d7ce8db958 test: update storybook filename (#1161) 3 éve
image 2b3d99421a Merge pull request #1748 from DouyinFE/fix-sidesheet-overflow 2 éve
input 3265d387c2 fix: fix audoFocus autofocus in Input and TextArea #1608 2 éve
inputNumber f05ed24b0b chore: remove file head lint rule which already set global (#1706) 2 éve
layout 9b82b7e001 chore: eslint fix 2 éve
list d4b9f3276b feat: pass data-* attribute to dom (#1630) 2 éve
locale 076be4564e Merge branch origin/main into main 2 éve
modal 380b864c4f fix: fix utils import 2 éve
navigation f05ed24b0b chore: remove file head lint rule which already set global (#1706) 2 éve
notification f05ed24b0b chore: remove file head lint rule which already set global (#1706) 2 éve
overflowList f05ed24b0b chore: remove file head lint rule which already set global (#1706) 2 éve
pagination e082a7d7c0 perf: improve pagination small size render (#1714) 2 éve
popconfirm f05ed24b0b chore: remove file head lint rule which already set global (#1706) 2 éve
popover 5c36a97b25 fix: add some lint config 2 éve
progress f05ed24b0b chore: remove file head lint rule which already set global (#1706) 2 éve
radio f05ed24b0b chore: remove file head lint rule which already set global (#1706) 2 éve
rating f05ed24b0b chore: remove file head lint rule which already set global (#1706) 2 éve
resizeObserver f05ed24b0b chore: remove file head lint rule which already set global (#1706) 2 éve
scripts 626c4b9f9e Feat/support next (#245) 3 éve
scrollList f05ed24b0b chore: remove file head lint rule which already set global (#1706) 2 éve
select f05ed24b0b chore: remove file head lint rule which already set global (#1706) 2 éve
sideSheet f619611591 fix: fix utils import 2 éve
skeleton bd83d1f9cd chore: format code 3 éve
slider f6f7ef0a8e Merge pull request #1753 from SyMind/chore/eslint-fix 2 éve
space 685ea938f3 feat: DatePicker support onClickOutside, open, close methods (#1470) 2 éve
spin f05ed24b0b chore: remove file head lint rule which already set global (#1706) 2 éve
steps d4b9f3276b feat: pass data-* attribute to dom (#1630) 2 éve
switch f05ed24b0b chore: remove file head lint rule which already set global (#1706) 2 éve
table a2713cfaed fix: fixed Table column not aligned when header is sticky #1760 (#1761) 2 éve
tabs f05ed24b0b chore: remove file head lint rule which already set global (#1706) 2 éve
tag f05ed24b0b chore: remove file head lint rule which already set global (#1706) 2 éve
tagInput ef375fb64e refactor: change react-sortable-hoc to dnd-kit for Transfer/Taginput … (#1738) 2 éve
timePicker ce49ca8cc7 fix: Timepicker fill with wrong current time in start time under controlled mode (#1717) 2 éve
timeline d4b9f3276b feat: pass data-* attribute to dom (#1630) 2 éve
toast f05ed24b0b chore: remove file head lint rule which already set global (#1706) 2 éve
tooltip f05ed24b0b chore: remove file head lint rule which already set global (#1706) 2 éve
transfer ef375fb64e refactor: change react-sortable-hoc to dnd-kit for Transfer/Taginput … (#1738) 2 éve
tree 1e97094980 style: [Tree][TreeSelect] When filterTreeNode & treeNodeFilterProp is not label, only the search content is highlighted instead of the entire line (#1764) 2 éve
treeSelect 1e97094980 style: [Tree][TreeSelect] When filterTreeNode & treeNodeFilterProp is not label, only the search content is highlighted instead of the entire line (#1764) 2 éve
trigger f05ed24b0b chore: remove file head lint rule which already set global (#1706) 2 éve
typography c58c2f2abf fix: typography popover ellipsis remove default 240px width, close #1766 2 éve
upload 3d5322154d fix: upload preview auto fallback when preview other file (not image) (#1771) 2 éve
README.md 47a1ddada0 docs: update semi-ui readme 2 éve
getBabelConfig.js 496f3db0f7 chore: remove corejs 3 éve
gulpfile.js 9c3a607100 chore: auto format code 3 éve
index.ts ee4f9b2c72 New Component Highlight (#1281) 2 éve
package.json 6f625c7c2e v2.41.3 2 éve
tsconfig.json 2f70e0bbc2 fix: ts check error of upload/witFied/fields in strict mode 3 éve
webpack.config.js 0b2dd121d0 chore: use webpack5 2 éve

README.md

Semi-UI

A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.

[![LICENSE][license-badge]][license-url] [![NPM][npm-badge]][npm-url] [![CONTRIBUTORS][contributors-badge]][contributors-url] ![Design Token][Design Token] [![FIGMA][figma-badge]][figma-url] [![BUILD-JS][build-js-badge]][build-js-url] [![BUILD-CSS][build-css-badge]][build-css-url] [![CODECOV][codecov-badge]][codecov-url] [![Chromatic][chromatic-badge]][chromatic-url] [![Cypress][cypress-badge]][cypress-url] [![Twitter Follow](https://img.shields.io/twitter/follow/SemiDesignUI?style=social)](https://twitter.com/SemiDesignUI)

🎉 Features

  • 💪 Up to 60+ high-quality Components.
  • 💅 Code2Design, automatically generate Figma UI Kit according to different themes, keep same between design and code
  • 🚀 Powerful Design2Code support, convert figma draft to code in a few seconds
  • 💕 Complete A11y support, follows W3C standards to provide keyboard interaction, focus management and ARIA for all components
  • 💅 Up to 2700+ Design Tokens can be easily modify by Semi Design system management, make Semi Design to Any Design quickly.
  • 🌍 Internationalization Support for Dozens of Languages, timezone, RTL support
  • ⚙️ Strict quality assurance, covering unit testing, E2E testing, visual testing
  • 👏 Written in Typescript, friendly Static Type Support. Based on Foundation/Adapter architecture, easy to read and contribute
  • 🥳 SSR (Server Side Rendering) Compatible.

🔥 Install

# with npm
npm install @douyinfe/semi-ui

# with yarn
yarn add @douyinfe/semi-ui

👍 Usage

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

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'));

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

📰 News about Semi UI

📌 Documentation

👌 Platform Support

Semi UI supports all major modern browsers.

|chrome
chrome|firefox
firefox|safari
safari|IE/Edge
IE/Edge|electron
Electron| |--|--|--|--|--| | latest 2 versions | latest 2 versions | latest 2 versions | Edge | latest 2 versions |

👨‍👨‍👧‍👦 User Group

Join User Group on Feishu / Lark

💖 Thanks

Chromatic

Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.

Cypress

Thanks to Cypress for providing E2E testing.

👐 Contributing

Thanks to all the people who already contributed!

Read the contributing guide to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to Semi UI.

See CONTRIBUTING documentation.

🎈 License

Semi UI is MIT Licensed