A comprehensive React design system with Tailwind CSS support
npm install @raonrabbit/design-systemReact UI 컴포넌트 라이브러리입니다. TypeScript, Tailwind CSS 4, Framer Motion으로 구축되었습니다.
- 20+ UI 컴포넌트 - Button, Badge, Modal, Skeleton 등 프로덕션 레디 컴포넌트
- 5가지 테마 - Blue, Red, Yellow, Monochrome, Rainbow
- Compound Component 패턴 - 유연하고 조합 가능한 컴포넌트 설계
- 애니메이션 시스템 - Framer Motion 기반, Reduced motion 지원
- 완전한 TypeScript 지원
- Tailwind CSS 4 호환
``bash`
npm install @raonrabbit/design-system react@^18 react-dom@^18 tailwindcss@^4 framer-motion@^11
> framer-motion은 애니메이션 사용 시에만 필요합니다 (선택사항)
ThemeProvider로 감싸기만 하면 바로 사용할 수 있습니다.
`tsx
import { ThemeProvider, Button } from "@raonrabbit/design-system";
function App() {
return (
);
}
`
`tsx`
{/ 앱 컨텐츠 /}
`tsx`
| Prop | Values |
|------|--------|
| variant | fill \| light-color |color
| | primary \| danger \| light \| dark |size
| | small \| medium \| large \| xlarge |display
| | inline \| block \| full |
`tsx`
| Prop | Values |
|------|--------|
| variant | fill \| light-color |color
| | blue \| teal \| green \| red \| yellow \| elephant |size
| | xsmall \| small \| medium \| large |
`tsx
const [open, setOpen] = useState(false);
Content here
Modal Title
`
`tsx`
`tsx`
`tsx`
`tsx`
`tsx`
Section Title
}
right={
View All
}
/>
`tsx`
더 보기
- IconButton - 아이콘 버튼 (clear | fill | border)default
- Card - 카드 컨테이너 ( | outlined | elevated)info
- Input - 텍스트 입력
- Select - 드롭다운 선택
- Radio - 라디오 버튼
- Switch - 토글 스위치
- Alert - 알림 메시지 ( | success | warning | error)
- Tooltip - 툴팁
- Tabs - 탭 네비게이션
- Table - 데이터 테이블
- ThemeSelector - 테마 선택기
- blue (default)red
- yellow
- monochrome
- rainbow
-
`tsx
import { useTheme } from "@raonrabbit/design-system";
function ThemeSwitcher() {
const { theme, setTheme } = useTheme();
return (
);
}
`
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``
import type {
ButtonProps,
BadgeProps,
ModalProps,
Theme,
ThemeName,
} from "@raonrabbit/design-system";
MIT