Skip to main content

GBGR Design System

GBGR 디자인 시스템 문서입니다.

빠른 시작​

일반적으로는 아래 두 가지 소비 방식 중 하나를 고르면 됩니다.

  • @gbgr/ui: 토큰 + 컴포넌트를 한 번에 쓰는 고수준 패키지
  • @gbgr/react: 컴포넌트만 선택해서 쓰는 저수준 패키지

전역 컴포넌트 스타일은 @gbgr/ui/styles.css 또는 @gbgr/react/styles.css 중 하나만 선택하세요. 두 파일을 동시에 import 하면 스타일 중복 로딩이 발생할 수 있습니다.

옵션 A) 고수준(권장): @gbgr/ui​

pnpm add @gbgr/ui
import "@gbgr/ui/styles.css";
import { Button, Checkbox } from "@gbgr/ui";

export function Example() {
  return (
    <>
      <Button tone="primary">Save</Button>
      <Checkbox defaultChecked>Agree</Checkbox>
    </>
  );
}

옵션 B) 저수준: @gbgr/react​

컴포넌트만 선택적으로 쓰고 싶다면 @gbgr/react를 사용하세요.

pnpm add @gbgr/react @gbgr/css
import "@gbgr/css";
import "@gbgr/react/styles.css";
import { Button } from "@gbgr/react";

export function Example() {
  return <Button tone="primary">Save</Button>;
}

토큰만 필요한 경우: @gbgr/css​

컴포넌트 없이 CSS 변수만 필요하면 @gbgr/css만 import 하면 됩니다.

pnpm add @gbgr/css
import "@gbgr/css"