Core Components

Core Components

Architecture

Core components live in packages/ui/src/components. They should be small React primitives with predictable props, token-based styling, and Storybook examples. A component enters the design system only when it has a documented purpose, variants, states, accessibility expectations, and code export.

Component Inventory

Component	Status	Notes
Accordion	Active	Radix disclosure pattern
Alert	Active	Status and contextual messages
Alert Dialog	Active	Destructive confirmation flow
Aspect Ratio	Active	Fixed-ratio media and preview areas
Avatar	Active	User identity fallback
Badge	Active	Compact status labels
Breadcrumb	Active	Hierarchical page location
Button	Active	Command surface with variants and icon size
Button Group	Active	Adjacent command sets
Calendar	Active	Date selection primitive
Card	Active	Content container with header/content/footer
Carousel	Active	Embla carousel composition
Chart	Active	Recharts wrapper with design tokens
Checkbox	Active	Binary form control
Collapsible	Active	Inline expandable content
Combobox	Active	Searchable select with Base UI
Command	Active	Command palette and searchable list
Context Menu	Active	Right-click contextual actions
Data Table	Active	Table recipe for typed rows and columns
Date Picker	Active	Calendar + popover recipe
Dialog	Active	Modal workflow shell
Direction	Active	RTL/LTR provider example
Drawer	Active	Mobile-first bottom sheet
Dropdown Menu	Active	Triggered action menu
Empty	Active	Empty state composition
Field	Active	Accessible form field and group composition
Hover Card	Active	Hover disclosure for profile/context details
Input	Active	Text entry primitive
Input Group	Active	Addons and grouped inputs
Input OTP	Active	One-time code input
Item	Active	List item recipe with media/content/actions
Kbd	Active	Keyboard shortcut display
Label	Active	Accessible form label
Menubar	Active	Desktop app menu composition
Native Select	Active	Native select styling
Navigation Menu	Active	2-depth website navigation
Pagination	Active	Page navigation recipe
Popover	Active	Anchored lightweight overlay
Progress	Active	Determinate progress state
Radio Group	Active	Single-choice form control
Resizable	Active	Panel group layout
Scroll Area	Active	Styled scroll container
Select	Active	Radix select composition
Separator	Active	Visual grouping divider
Sheet	Active	Side panel overlay
Sidebar	Active	App shell navigation system
Skeleton	Active	Loading placeholder
Slider	Active	Range input primitive
Sonner	Active	Toast provider and notifications
Spinner	Active	Loading indicator
Switch	Active	Boolean setting control
Table	Active	Semantic table primitive
Tabs	Active	Section navigation
Textarea	Active	Multiline text input
Toast	Active	Notification recipe using Sonner
Toggle	Active	Toggle button primitive
Toggle Group	Active	Single/multiple toggle set
Tooltip	Active	Small contextual hint

Storybook 기준

Storybook 경로는 Design System/shadcn/Components입니다.

이 경로는 packages/ui/src/components의 실제 컴포넌트를 import해서 조합합니다. 임시 HTML/CSS 모사 구현은 기준으로 삼지 않습니다.

보강된 대표 예제

Sidebar

Sidebar Story는 앱 셸에 가깝게 구성합니다.

• SidebarProvider, Sidebar, SidebarInset, SidebarTrigger
• SidebarHeader, SidebarInput, SidebarContent, SidebarFooter
• SidebarGroup, SidebarGroupLabel, SidebarGroupAction, SidebarGroupContent
• SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarMenuBadge, SidebarMenuAction
• SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton

Navigation Menu

Navigation Menu Story는 공식 문서와 유사하게 2-depth 구조를 보여줍니다.

• 상위 trigger: Product, Resources
• 직접 링크: Documentation
• 하위 영역: featured card, link grid, description text

Menubar

Menubar Story는 desktop app menu 기준으로 네 개 메뉴를 보여줍니다.

• File: group, separator, shortcut
• Edit: submenu
• View: checkbox item, radio group
• Profile: label, account actions

Field

Field Story는 단일 input이 아니라 복합 form section 기준으로 보여줍니다.

• FieldSet, FieldLegend, FieldDescription
• FieldGroup, Field, FieldLabel, FieldContent
• FieldError, FieldSeparator
• Input, NativeSelect, Checkbox, Switch 조합

구현 기준

• 컴포넌트 구현은 packages/ui/src/components에 둡니다.
• 조합 예제는 packages/ui/src/shadcn-showcase/shadcn-showcase.stories.tsx에 둡니다.
• 컴포넌트 export는 packages/ui/src/index.ts에서 관리합니다.
• 스타일 토큰과 shadcn CSS 변수는 packages/ui/src/styles/global.css에서 관리합니다.
• 외부 라이브러리 interop 보정은 Storybook/Vite 설정과 packages/ui/src/vendor wrapper로 격리합니다.

검증 기준

• pnpm --filter @my-lab/ui typecheck
• pnpm typecheck
• pnpm lint
• pnpm build:storybook
• Storybook index에서 요청 component catalog와 보조 Story 누락 여부 확인
• 대표 overlay/interactive component는 iframe 렌더링과 기본 상호작용 확인