@raonrabbit/design-system

React UI 컴포넌트 라이브러리입니다. TypeScript, Tailwind CSS 4, Framer Motion으로 구축되었습니다.

Features

• 20+ UI 컴포넌트 - Button, Badge, Modal, Skeleton 등 프로덕션 레디 컴포넌트
• 5가지 테마 - Blue, Red, Yellow, Monochrome, Rainbow
• Compound Component 패턴 - 유연하고 조합 가능한 컴포넌트 설계
• 애니메이션 시스템 - Framer Motion 기반, Reduced motion 지원
• 완전한 TypeScript 지원
• Tailwind CSS 4 호환

Installation

npm install @raonrabbit/design-system react@^18 react-dom@^18 tailwindcss@^4 framer-motion@^11

framer-motion은 애니메이션 사용 시에만 필요합니다 (선택사항)

Quick Start

ThemeProvider로 감싸기만 하면 바로 사용할 수 있습니다.

import { ThemeProvider, Button } from "@raonrabbit/design-system";

function App() {
  return (
    <ThemeProvider>
      <Button color="primary" variant="fill">
        Hello World
      </Button>
    </ThemeProvider>
  );
}

테마 변경

<ThemeProvider defaultTheme="red">
  {/* 앱 컨텐츠 */}
</ThemeProvider>

Components

Button

<Button color="primary" variant="fill">Primary</Button>
<Button color="danger" variant="light-color">Danger</Button>
<Button color="dark" variant="fill" loading>Loading</Button>

| Prop | Values | |------|--------| | variant | fill | light-color | | color | primary | danger | light | dark | | size | small | medium | large | xlarge | | display | inline | block | full |

Badge

<Badge color="blue" variant="fill">Info</Badge>
<Badge color="green" variant="light-color">Success</Badge>

| Prop | Values | |------|--------| | variant | fill | light-color | | color | blue | teal | green | red | yellow | elephant | | size | xsmall | small | medium | large |

Modal

const [open, setOpen] = useState(false);

<Modal open={open} onOpenChange={setOpen}>
  <Modal.Overlay />
  <Modal.Content size="md">
    <h2>Modal Title</h2>
    <p>Content here</p>
  </Modal.Content>
</Modal>

Checkbox

<Checkbox.Circle checked={checked} onCheckedChange={setChecked} />
<Checkbox.Line checked={checked} onCheckedChange={setChecked} />

Loader

<Loader size="medium" type="primary" label="Loading..." />

Skeleton

<Skeleton pattern="topListWithIcon" />
<Skeleton custom={["title", "subtitle", "list"]} />

Paragraph

<Paragraph typography="t5">
  <Paragraph.Text>Hello </Paragraph.Text>
  <Paragraph.Badge color="blue" variant="fill">NEW</Paragraph.Badge>
  <Paragraph.Link href="/more">Learn more</Paragraph.Link>
</Paragraph>

ListHeader

<ListHeader
  title={
    <ListHeader.TitleParagraph typography="t5" fontWeight="bold">
      Section Title
    </ListHeader.TitleParagraph>
  }
  right={
    <ListHeader.RightArrow typography="t7" onClick={handleClick}>
      View All
    </ListHeader.RightArrow>
  }
/>

ListFooter

<ListFooter icon="plus" onClick={handleLoadMore}>
  더 보기
</ListFooter>

기타 컴포넌트

• IconButton - 아이콘 버튼 (clear | fill | border)
• Card - 카드 컨테이너 (default | outlined | elevated)
• Input - 텍스트 입력
• Select - 드롭다운 선택
• Radio - 라디오 버튼
• Switch - 토글 스위치
• Alert - 알림 메시지 (info | success | warning | error)
• Tooltip - 툴팁
• Tabs - 탭 네비게이션
• Table - 데이터 테이블
• ThemeSelector - 테마 선택기

Theming

Available Themes

• blue (default)
• red
• yellow
• monochrome
• rainbow

useTheme Hook

import { useTheme } from "@raonrabbit/design-system";

function ThemeSwitcher() {
  const { theme, setTheme } = useTheme();

  return (
    <button onClick={() => setTheme("red")}>
      Change to Red
    </button>
  );
}

Advanced Setup (선택사항)

Tailwind 클래스를 커스텀하게 확장하려면 preset을 사용할 수 있습니다:

// tailwind.config.ts
import { designSystemPreset } from "@raonrabbit/design-system/tailwind";

export default {
  presets: [designSystemPreset],
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@raonrabbit/design-system/dist/**/*.{js,mjs}",
  ],
};

TypeScript

import type {
  ButtonProps,
  BadgeProps,
  ModalProps,
  Theme,
  ThemeName,
} from "@raonrabbit/design-system";

License

MIT