@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

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

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

Quick Start

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

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

function App() {
return (


Hello World


);
}
`

$3

`tsx

{/ 앱 컨텐츠 /}

`

Components

$3

`tsx
Primary
Danger
Loading
`

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

$3

`tsx
Info
Success
`

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

$3

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






Modal Title

Content here

`

$3

`tsx


`

$3

`tsx

`

$3

`tsx


`

$3

`tsx

Hello
NEW
Learn more

`

$3

`tsx
title={

Section Title

}
right={

View All

}
/>
`

$3

`tsx

더 보기

`

$3

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

Theming

$3

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

$3

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

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

return (
setTheme("red")}>
Change to Red

);
}
`

Advanced Setup (선택사항)

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

`typescript
// 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

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

License

MIT