ssg-ui
Introduction 😊
- ssg-ui/components는 React, chakra-ui 기반의 ssg-ui 디자인 시스템 컴포넌트 라이 브러리입니다.
- 유연하고 확장성이 있습니다.
- WAI_ARIA 웹접근성 지침을 준수합니다.
- 다크모드를 지원합니다.
Installing SSG UI Components 🎉
$ yarn add @ssg-ui/components framer-motion @emotion/react @emotion/styled
# or
$ npm install --save @ssg-ui/components framer-motion @emotion/react @emotion/styled
Getting Started 👏
ssg ui 컴포넌트를 사용하기 위해, 아래의 순서를 따라해주세요. To start using the components, please follow these steps:
-
@ssg-ui/components의
SsgThemeProvider, ColorModeProvider로 애플리케이션 을 래핑해주세요.
import { ThemeProvider, ColorModeProvider } from "@ssg-ui/components";
const App = ({ children }) => (
<SsgThemeProvider>
<ColorModeProvider>{children}</ColorModeProvider>
</SsgThemeProvider>
);ColorModeProvider는 컴포넌트에 라이트 모드와 컬러 모드를 제공하는 컨텍스트 프
로바이더입니다. 시스템의 컬러 모드를 사용할 수도 있고, 커스텀 컬러 모드를 사용할
수도 있습니다. 자세한 사용법은 chakra-ui 공식문서
(https://chakra-ui.com/docs/features/color-mode)를 참조해주시기 바랍니다.
- 이제는 컴포넌트를 사용하실 수 있습니다.
import { Button } from "@ssg-ui/components";
const MyComponent = () => <Button>SSG-UI 버튼을 사용합니다.</Button>;