| component-button.md |
Button |
The most-used control. Variants, intent, sizes, loading state, asChild pattern. |
| component-button-base.md |
ButtonBase |
Low-level interactive primitive for building design-system controls. Semantics, focus-visible, ripple, disabled, and polymorphic root rules. |
| component-border-beam.md |
BorderBeam |
Decorative moving border emphasis layer. Host DOM constraints, reduced motion, aria-hidden, and semantic-state boundaries. |
| component-input.md |
Input (text field) |
Label/help/error, validation timing, autocomplete, IME (Korean) handling, password/clearable affordances. |
| component-modal.md |
Modal / Dialog / Sheet |
Focus trap, scroll lock, keyboard contract, three variants in one spec (dialog/alert-dialog/sheet). |
| component-toast.md |
Toast / Snackbar |
Imperative API (toast.success(...)), promise wrapper, intent + duration matrix, persistent errors. |
| component-card.md |
Card |
Composition slots, variants, interactive cards, block-link pattern, when NOT to use a card. |
| component-form.md |
Form (composition pattern) |
Field/Label/Control/HelpText/ErrorText composition, Zod schema validation, multi-step, server-error mapping, accessibility wiring. |
| component-table.md |
Table / DataTable |
Headless engine (TanStack), sort/select/paginate, density, mobile→card-list, sticky columns. |
| component-tabs.md |
Tabs |
Underline / segmented / card / bottom-bar variants, WAI-ARIA tabs pattern, manual vs automatic activation. |
| component-date-picker.md |
DatePicker |
Single/range/dateTime/quickRange modes, Korean date formats, calendar grid keyboard contract, mobile bottom sheet. |
| component-select.md |
Select / Combobox |
Single/multi/searchable/creatable/async, WAI-ARIA combobox pattern, Korean IME composition handling. |
| component-pagination.md |
Pagination |
Numbered + Load More + simple variants, sibling/boundary algorithm, URL sync, accessibility. |
| component-alert.md |
Alert (Banner) |
Persistent in-page feedback. Subtle/outlined/solid variants, intent + icon redundancy, action buttons, role=alert vs status. |
| component-tooltip.md |
Tooltip |
Hover/focus hint, why native title is wrong, touch handling, WAI-ARIA tooltip pattern, when NOT to use. |
| component-form-controls.md |
Switch / Checkbox / Radio |
Three sibling controls in one spec — semantic differences, when each, shared accessibility patterns, Korean marketing-consent rule. |
| component-skeleton.md |
Skeleton |
Loading shape (not progress %), shimmer animation, primitive composition, transition rules, reduced motion. |
| component-progress.md |
Progress |
Linear + circular, determinate vs indeterminate, intent variants, aria-valuenow rules, when Progress vs Spinner vs Skeleton. |
| component-avatar.md |
Avatar |
Image → initials → icon fallback chain, Korean initials convention, AvatarGroup overlap, status indicators, hash-to-color. |
| component-breadcrumb.md |
Breadcrumb |
Hierarchy navigation, truncation algorithm, when not to use (mobile), aria-current="page", ordered list semantics. |
| component-accordion.md |
Accordion (Collapse) |
Single vs multiple, four visual variants, height animation via grid-template-rows, WAI-ARIA disclosure pattern. |
| component-drawer.md |
Drawer |
Side-anchored panel for navigation. Modal vs persistent mode, mobile detents, swipe-to-dismiss. |
| component-slider.md |
Slider |
Single + range, step semantics, when slider vs number input, WAI-ARIA slider pattern. |
| component-popover.md |
Popover |
Click-triggered overlay with interactive content. Distinct from Tooltip / Modal / Dropdown. |
| component-divider.md |
Divider (Separator) |
Horizontal + vertical, solid/dashed/dotted, inset, decorative vs semantic, when whitespace is better. |
| component-steps.md |
Steps (Stepper) |
Multi-step progress visualization. Status states, mobile compact variant, when Steps vs Tabs vs Progress. |
| component-rate.md |
Rate (Rating) |
Stars / emoji / custom icons. Input + display modes, half-star precision, slider-pattern a11y. |
| component-tag-badge.md |
Tag + Badge |
Two sibling status indicators in one spec. Inline label vs dot/count overlay. |
| component-tree.md |
Tree (TreeView) |
Hierarchical data, async lazy-load, check + select modes, WAI-ARIA tree pattern, mobile drill-in alternative. |
| component-statistic.md |
Statistic |
Hero KPI display. Delta semantics (goalDirection-aware coloring), Korean stock convention, sparkline. |
| component-upload.md |
Upload |
Drop zone + button + avatar patterns. Per-file progress, async validation, retry, Korean copy. |
| component-result.md |
Result + Empty |
Two sibling full-page components in one spec. Status icons, primary/secondary actions, inline mode. |
| component-carousel.md |
Carousel |
When NOT to use. Multi-slide view, auto-play warnings, WAI-ARIA carousel pattern. |
| component-image.md |
Image |
Wrapper with lazy load, aspect-ratio, fallback, lightbox, srcset, alt rules. |
| component-calendar.md |
Calendar (full month view) |
Distinct from DatePicker. Event rendering, holiday/weekend Korean colors, view modes. |
| component-cascader.md |
Cascader (multi-level select) |
2–4 level hierarchy picker. When NOT to use (mobile drill-in instead). |
| component-color-picker.md |
ColorPicker |
HSV square + hue slider, hex/rgb/hsl/oklch inputs, presets, alpha. |
| component-transfer.md |
Transfer (dual list) |
Permission/tag editor pattern. When NOT to use (Multi-Select instead). |
| component-spin.md |
Spin (Spinner) |
Indeterminate loading. Distinct from Skeleton/Progress. Delay to avoid flash, reduced motion. |
| component-segmented.md |
Segmented (toggle button group) |
iOS-native pill, time/view filters, WAI-ARIA radiogroup pattern. |
| component-auto-complete.md |
AutoComplete |
Free-text + suggestions. Distinct from Select. Korean IME composition handling. |
| component-mentions.md |
Mention (@-trigger) |
Trigger char (@/#/:) opens picker, chip insertion. Storage formats, IME. |
| component-timeline.md |
Timeline |
Sequential events: order tracking, activity feed, audit log. Status indicators. |
| component-tour.md |
Tour (in-product overlay) |
Step-by-step UI walkthrough. When NOT to use (most cases). |
| component-affix.md |
Affix (sticky positioning) |
When CSS position: sticky isn't enough. Container-scoped sticky. |
| component-float-button.md |
FloatButton (FAB) |
Floating action button. Speed-dial menu, safe-area handling. |
| component-qr-code.md |
QRCode |
Encoding strings as QR. Error correction levels, center logo, color contrast. |
| component-splitter.md |
Splitter (resizable panel) |
When CSS sticky isn't enough. IDE / 3-pane layouts. |
| component-anchor.md |
Anchor (scrollspy / TOC) |
Side-rail nav for long-form content. Active section detection. |
| component-app-bar.md |
AppBar (top app bar) |
Persistent top header. iOS large-title variant, search overlay, sub-tabs. |
| component-layout.md |
Layout (page chrome) |
Header / Sidebar / Content / Footer slots. Responsive sider collapse. |
| component-input-otp.md |
InputOTP (verification code) |
Multi-cell digit input. Korean SMS verification flow, autocomplete=one-time-code. |
| component-watermark.md |
Watermark |
Repeating overlay for sensitive content. Per-user trace, screenshot deterrent. |
| component-code.md |
Code (inline + block) |
Monospace text + syntax highlighting + copy button. |
| component-css-baseline.md |
CssBaseline |
Root global baseline for app shells. Box sizing, body typography, color-scheme, print, SSR, and reset ownership. |
| component-typography.md |
Typography (text primitive) |
Variant-driven text. When NOT to use (Tailwind utility classes are usually clearer). |
| component-badge.md |
Badge |
Standalone label + indicator dual modes. Variants (default/secondary/destructive/outline), count + dot indicator on parent. |
| component-dropdown.md |
Dropdown / DropdownMenu |
Triggered overlay menu of actions. WAI-ARIA Menu pattern, sub-menus, checkbox / radio items, shortcuts. |
| component-context-menu.md |
ContextMenu |
Right-click / long-press triggered menu. Same WAI-ARIA Menu pattern as Dropdown. |
| component-config-provider.md |
ConfigProvider |
App-level design-system configuration boundary. Theme, locale, direction, portals, CSP, static APIs, and component defaults. |
| component-hover-card.md |
HoverCard |
Hover-triggered floating preview. Distinct from Tooltip + Popover; profile previews, link previews. |
| component-sheet.md |
Sheet |
Side-anchored modal panel. Mobile-first detents, side variants (top/right/bottom/left). |
| component-command.md |
Command / CommandPalette |
cmdk-based searchable command palette. Cmd+K pattern, fuzzy match, async results. |
| component-sidebar.md |
Sidebar |
Persistent collapsible navigation panel. Icon-only mode, mobile offcanvas, multi-level menu. |
| component-navigation-menu.md |
NavigationMenu |
Top horizontal nav with mega-menu panels. Marketing site / SaaS header pattern. |
| component-menubar.md |
Menubar |
Persistent menu bar (File / Edit / View). Desktop-style web apps; hover-roving between menus. |
| component-aspect-ratio.md |
AspectRatio |
Lock child to specific aspect ratio. Image, video, card thumbnail wrapper. |
| component-collapsible.md |
Collapsible |
Single expandable section primitive. Base for Accordion; FAQ, "Show more" patterns. |
| component-toggle.md |
Toggle / ToggleGroup |
Two-state pressable button. Toolbar formatting, mutually-exclusive (single) or independent (multiple) groups. |
| component-scroll-area.md |
ScrollArea |
Custom-styled scrollbar. Cross-platform consistency; visibility modes (auto/always/scroll/hover). |
| component-banner.md |
Banner |
Persistent in-page strip (system status, trial, cookie consent). Distinct from Alert + Toast. |
| component-kbd.md |
Kbd |
Keyboard shortcut display. Platform-aware Mac/Win symbols, used in tooltips + menus. |
| component-separator.md |
Separator |
Horizontal / vertical divider. Decorative vs semantic; aliased as Divider in some libs. |
| component-alert-dialog.md |
AlertDialog |
Modal confirmation for destructive actions. Distinct from Modal; default focus on Cancel; role="alertdialog". |
| component-bottom-navigation.md |
BottomNavigation |
Mobile primary nav (3-5 tabs). iOS / Android / Material 3 conventions; safe-area handling. |
| component-chart.md |
Chart |
Recharts wrapper with theming + a11y. Korean stock convention (red=up); engine-agnostic chart-type table. |
| component-combobox.md |
Combobox |
Searchable select. WAI-ARIA combobox pattern; Korean IME composition handling; multi-select + creatable variants. |
| component-field.md |
Field family |
Form-field wrapper (Field / FieldLabel / FieldDescription / FieldError / FieldGroup / FieldSet / FieldLegend). |
| component-item.md |
Item family |
List-item primitive (Item / ItemMedia / ItemContent / ItemTitle / ItemDescription / ItemActions). |
| component-link.md |
Link |
Text link primitive. Link vs Button decision; external indicator; underline policies; Korean conventions. |
| component-paper.md |
Paper |
MUI surface primitive — elevation + outlined variants. Building block for Card, Modal, Drawer. |
| component-spinner.md |
Spinner |
Indeterminate loading indicator. Spinner vs Progress vs Skeleton; size scale; reduced-motion. |
| component-empty.md |
Empty |
Inline "no data" primitive. Distinct from EmptyState (full-page custom KR-aware). |
| component-masonry.md |
Masonry |
Pinterest-style staggered grid. CSS multicolumn vs JS measurement trade-offs; a11y reading order. |
| component-icon.md |
Icon |
Base primitive for rendering icons; size scale, currentColor theming, decorative vs meaningful. |
| component-icon-button.md |
IconButton |
Icon-only button. Variants (ghost/outline/filled/tonal), sizes, mandatory aria-label. |
| component-checkbox.md |
Checkbox |
Form selection control. Indeterminate state, "select all" pattern, Korean marketing-consent rule. |
| component-radio.md |
Radio + RadioGroup |
Mutually exclusive choice control. Radio vs Select decision; KR payment-method picker example. |
| component-label.md |
Label |
Form-control label primitive. htmlFor linking, required/optional indicators, KR conventions. |
| component-box.md |
Box |
Most generic styled <div> primitive. System-prop access; when to use vs Stack/Grid/Flex. |
| component-flex.md |
Flex |
flex layout primitive. Direction, gap, align, justify, wrap; common patterns. |
| component-grid.md |
Grid |
2D grid layout. Ant Row+Col / MUI v2 / modern CSS Grid wrapper. |
| component-list.md |
List |
Semantic + styled wrapper around Item rows. Pagination, infinite scroll, virtualization, empty state. |
| component-menu.md |
Menu |
Structured navigation menu (Ant style). Distinct from DropdownMenu / NavigationMenu / Sidebar. |
| component-message.md |
Message |
Top thin pill notification (Ant). Imperative API; distinct from Toast / Notification. |
| component-notification.md |
Notification |
Richer corner card notification. Title + description + actions; placement variants. |
| component-space.md |
Space |
Tiny utility for inline gap. Direction, size, wrap, split element-between-children. |
| component-button-group.md |
ButtonGroup |
Visually-unified action button cluster. Distinct from ToggleGroup / Segmented. |
| component-speed-dial.md |
SpeedDial |
FAB that expands into 2-5 secondary action FABs. Mobile compose pattern. |
| component-time-picker.md |
TimePicker |
Hour/minute/second picker. 24- vs 12-hour, step granularity, KR conventions, range variant. |
| component-tree-select.md |
TreeSelect |
Dropdown with hierarchical tree picker. Distinct from Cascader (columns) / Tree (full-page). |
| component-backdrop.md |
Backdrop |
Semi-opaque scrim overlay. Used internally by Modal/Drawer/Sheet; standalone for full-page loading. |
| component-switch.md |
Switch |
iOS-style toggle for binary on/off settings. Distinct from Checkbox (form). |
| component-tag.md |
Tag |
Closeable label / chip; filter chips, multi-select selected items. |
| component-snackbar.md |
Snackbar |
Material's bottom-anchored Toast variant; brief result + optional Undo. |
| component-sonner.md |
Sonner |
Modern shadcn toast library; stacking depth, promise wrapper, rich actions. |
| component-textarea.md |
Textarea |
Multi-line text input. Korean IME composition handling, character counter. |
| component-textarea-autosize.md |
TextareaAutosize |
Textarea that grows with content; CSS field-sizing + JS measurement fallback. |
| component-popconfirm.md |
Popconfirm |
Inline confirmation popover; lightweight alternative to AlertDialog. |
| component-popper.md |
Popper |
Low-level positioning primitive. Used internally by Tooltip / Popover / Menu. |
| component-swipeable-drawer.md |
SwipeableDrawer |
Drawer with swipe-to-open / swipe-to-close gestures; mobile-first. |
| component-resizable.md |
Resizable |
IDE-style resizable panel groups (horizontal + vertical); layout persistence. |
| component-image-list.md |
ImageList |
Uniform-grid photo display. Distinct from Masonry (varied) and Grid (general). |
| component-back-top.md |
BackTop |
Floating "scroll to top" button after threshold; reduced-motion aware. |
| component-click-away-listener.md |
ClickAwayListener |
Outside-click callback utility. Used internally by overlays. |
| component-toolbar.md |
Toolbar |
Horizontal action container; app bar / editor / dialog footer. role="toolbar". |
| component-step.md |
Step |
Single step sub-component within a Steps / Stepper flow. |
| component-zoom.md |
Zoom |
Transition primitive (scale + fade). Sibling to Fade / Slide / Grow. |
| component-speed-dial-action.md |
SpeedDialAction |
Single action item inside a SpeedDial; child component spec. |
| component-slide.md |
Slide |
Direction-based slide-in/out transition. Used internally by Drawer / Sheet / Snackbar. |
| component-auto-complete.md |
AutoComplete |
Free-text + suggestions input. (Canonical name; sibling of Combobox.) |
| component-mentions.md |
Mentions / Mention |
@-trigger picker for inline chips / tagging. |