shadcn Component Catalog

목적

packages/ui에 shadcn 기반 컴포넌트를 실제 재사용 가능한 React 컴포넌트로 적재하고, Storybook에서 대표 조합을 검수합니다.

이 문서는 단순 목록이 아니라 다음 기준을 기록합니다.

Storybook 경로: Design System/shadcn/Components

현재 Storybook은 요청한 shadcn component catalog와 Chart, Tooltip, Overview Story를 함께 제공합니다.

영역	위치
실제 컴포넌트	`packages/ui/src/components`
shadcn catalog Story	`packages/ui/src/shadcn-showcase/shadcn-showcase.stories.tsx`
Chart Story	`packages/ui/src/shadcn-showcase/shadcn-chart.stories.tsx`
Story 전용 export	`packages/ui/src/shadcn-showcase/story-components.ts`
public export	`packages/ui/src/index.ts`
CSS 변수와 Tailwind source	`packages/ui/src/styles/global.css`

그룹	컴포넌트
Foundation	Button, Button Group, Badge, Kbd, Label, Separator, Skeleton, Spinner
Layout	Aspect Ratio, Card, Resizable, Scroll Area, Sidebar, Sheet
Form	Checkbox, Combobox, Field, Input, Input Group, Input OTP, Native Select, Radio Group, Select, Slider, Switch, Textarea
Overlay	Alert Dialog, Context Menu, Dialog, Drawer, Dropdown Menu, Hover Card, Menubar, Popover, Tooltip
Navigation	Accordion, Breadcrumb, Navigation Menu, Pagination, Tabs, Toggle, Toggle Group
Data Display	Alert, Avatar, Calendar, Carousel, Chart, Command, Data Table, Date Picker, Empty, Item, Progress, Sonner, Table, Toast
Utility	Collapsible, Direction

Sidebar는 단순 목록이 아니라 application shell 기준으로 검수합니다.

Navigation Menu는 1-depth link가 아니라 2-depth navigation example로 구성합니다.

Menubar는 네 개 메뉴를 기준으로 구성합니다.

Field는 단일 input wrapper가 아니라 accessible form composition 기준으로 구성합니다.

import { Button, Card, Dialog, SidebarProvider } from "@my-lab/ui";
import "@my-lab/ui/styles/global.css";