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:

1. @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)를 참조해주시기 바랍니다.

2. 이제는 컴포넌트를 사용하실 수 있습니다.

import { Button } from "@ssg-ui/components";

const MyComponent = () => <Button>SSG-UI 버튼을 사용합니다.</Button>;