DCS-uikitDesign Component System - uikit
- Design Component System
- 반복된 컴포넌트들을 카테고리화 하고, 디자인하여 컴포넌트를 통해 재사용성 높임
- 태그가 명시화가 되어, 코드가 직관적이면서, 사용하는 목적을 알 기가 편해짐
- Switch(Toggle), Input, Button, Tab, Select, Radio....
<input type="checkbox"> => Checkbox Component Design => <CheckBox> <input type="radio"> => Radio Component Design => <Radio>
npm i npm run storybook
npm run build
Main lib. description
The primary way to style elements with emotion is the
cssprop. It provides a concise and flexible API to style your components.
- Change the rendered tag using
- Targeting another emotion component
- Customizing prop forwarding
- Composing dynamic styles
- Nesting components:
Composition is one of the most powerful and useful patterns in Emotion. You can compose styles together by interpolating value returned from
cssin another style block.
Twin blends the magic of Tailwind with the flexibility of css-in-js
Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
Styled System is a collection of utility functions that add style props to your React components and allows you to control styles based on a global theme object with typographic scales, colors, and layout properties.
To use Styled System, install a CSS-in-JS library such as Styled Components or Emotion.