uikit 아이템

Approval rail with steps, approvers, per-step state, current step, comments and watchers in horizontal or vertical layout.

Append-only change log list with relative or absolute time, per-entry field diff with masked fields, filters slot and load more.

TanStack Table v8 wrapper with sorting, column visibility, row selection and batch actions, pagination, expandable rows, virtualization and mobile cards.

Popover multi-select filter for a column or facet with option counts, search for long lists and a clear action.

Query input, facet filters, applied-filter pills, reset and saved views over a plain-object filter value, with allow-list URL serializers.

Board of columns and cards with pointer and keyboard drag, async moves that roll back on failure, WIP limits, collapsible columns and screen reader announcements.

Bell button with unread count and a popover list with unread/all tabs, mark all read, item actions, empty state and infinite loading.

Subjects by permissions grid with grouped columns, tri-state toggles, read-only cells, pending changes, search and an async save callback.

Filterable single or multi select panel with an anchored popover or modal variant, selected-first ordering and remote filtering states.

Sticky bottom bar for pending changes with count, save, discard, saving and error states and an unknown-changes warning.

Dashboard with statistic tiles and sparkline, revenue chart, period picker with presets and loading, empty and error states.

Reservation detail page with status header, tabs, descriptions, activity timeline, audit log and approval flow.

Housekeeping page with a room board, occupancy, cleaning and building filters and a cleaning status panel.

Reservation list page with filter bar and saved views, selectable data table with batch archive, slide-over detail, confirm dialog and undo toast.

Rate calendar page with a rate grid, a period price form with a date range picker and a staging bar that publishes changes together.

Room rack page with a resource timeline, an availability heatmap toggle and room type and guest filters.

Settings page with sections, option tiles, switches, a select and a staging bar for unsaved changes.

Admin layout with a grouped sidebar, breadcrumb top bar, notification center, theme toggle, account menu and page header.

Email and password sign-in page with inline errors and a one-time-code step.

Booking outcome page for confirmed, pending and failed payments with a reservation summary, stay progress and door code.

Three-step checkout with guest and phone fields, coupons, points, price breakdown, agreements and a submit-once pay bar.

Guest landing page with a hero, the booking search bar and a rail of featured properties.

Property page with photo gallery and lightbox, section navigation, room and rate cards, amenities, policies and a mobile bottom call to action.

In-stay reservation page with stay progress, door code with QR, management menu, policies and bottom navigation.

Search results page with a search bar, filters, sort, list and map views, empty and loading states, all kept in the URL.

Toolbar that moves overflowing actions into a More menu as its width shrinks, with an optional visible-count cap and keyboard hints in menu items.

Overlapping avatars with a +N overflow, name tooltips and a deterministic fallback color from chart tokens.

Button that copies a value to the clipboard with idle, copied and failed states, icon swap and a live announcement.

Read-only label and value grid with horizontal or vertical layout, responsive columns, spans, bordered variant and a header.

Month, week and day views of events in the provider time zone with overflow, now line, keyboard navigation and slot selection.

Click-to-edit text whose read and edit views look the same, with visible save and cancel, IME-safe Enter and Esc, async save with pending, error and rollback.

SVG QR code with error-correction level, quiet zone and the readable value shown below it.

A time element that shows an instant as a relative phrase, refreshes on a unit-aligned interval, pauses while the page is hidden and exposes the absolute time as a title.

Dependency-free inline SVG line, area or bar chart for small series with an accessible min, max and latest summary.

KPI figure with locale-formatted value, unit, tone-aware delta, comparison caption, loading skeleton and sparkline slot.

Non-interactive status label (lozenge) with six semantic tones, subtle/solid/dot variants and a typed status-to-tone map.

Removable or descriptive tag with chart-token accent colors and a labelled remove button.

Vertical event list with done, current, upcoming, warning and error states, localized time, meta and trailing slots and connector lines.

Hierarchical list with lazy child loading, single or multiple selection with tri-state checkboxes, full keyboard support and opt-in virtualization.

Page or section message with five tones, a required title, at most two actions, an opt-in dismissible variant and a flush layout.

ConfirmDialog on alert-dialog plus ConfirmProvider and useConfirm() returning a Promise<boolean>, with async confirm, typed confirmation and queued requests.

Short field- or section-level message with five tones, no actions and a polite live region.

Section state wrapper for loading, slow, ready, empty, error and partial states with skeleton kinds and an async retry.

Page-level outcome for success, error, info, warning, 403, 404 and 500 with icon, title, description, up to two actions and a body slot.

toastWithUndo and toastError helpers on sonner plus a Toaster wrapper with 3 s / 5 s durations, a close button, a bottom offset variable and an assertive error region.

Debounced async search input with abortable loader, loading, empty and error states with retry, match highlighting and a minimum query length.

Hook that turns a holiday callback and weekend flags into react-day-picker modifiers with the calendar-holiday and calendar-saturday colour tokens.

Shared date helpers for the uikit pickers: locale-ordered date parsing, bounds checks, grid key navigation, calendar props from the locale provider, and a popover-or-drawer overlay.

Date field with typed entry and a popover calendar that becomes a bottom drawer on phones; values are YYYY-MM-DD strings.

Two-endpoint date range field with presets, day-count limits, anchor-aware unavailable dates and one or two month calendars; values are YYYY-MM-DD strings.

Date and time fields composed into one value, either a { date, time } pair or an instant resolved in the provider time zone.

Keyboard-operable dropzone and file list with type and size checks, image previews, per-file progress, retry and a pluggable upload adapter.

Amount input with currency minor units, locale grouping while typing, caret-safe editing, formatted paste and a number or null value.

Month grid for bulk date selection with select all, weekday columns, week rows, shift-click ranges and a polite selection count.

Year and month grid with min/max months and a field variant; values are YYYY-MM strings.

Searchable multiple-choice combobox with chips, select-all of the filtered list, max count, disabled and creatable options, and +N chip collapse.

Base UI number field with locale formatting, commit-on-blur clamp and step snapping, wheel scrub off by default and contextual stepper labels.

Selectable card group (choicebox) for single or multiple choice with title, description, trailing slot and native radio or checkbox semantics.

Password field with a show/hide toggle using aria-pressed, a Caps Lock warning and an optional live rules checklist.

Country calling code picker with search by localized name, English name, dial code and ISO, plus a national number field that yields an E.164 number.

Minus and plus stepper with a value display, contextual labels, live announcements, min/max clamp, optional typed entry and 44px hit areas.

Search input with icon, clear button, IME-safe Enter submit, optional debounced value changes and a keyboard shortcut hint.

Two to five option single-choice control built on toggle-group with radio semantics, icons and a full-width mode.

Free-text tag input: Enter, comma and blur commit, paste splits, Backspace removes, IME-safe, with dedupe, max count and validation.

Time field with typed entry and a slot list; HH:mm values, 24-hour by default and 12-hour when the locale uses it.

LocaleProvider with locale, time zone, currency, text direction, week start and message overrides; useFormat and useMessages hooks used by every uikit component.

Base dependencies and design tokens for uikit: status tones, calendar day colors, row density, motion, CJK font stacks, safe-area and hit-area utilities.

High-contrast neutral theme that keeps every text pair above 7:1 and every border above 3:1.

Deep green primary family.

Indigo accent for admin and back-office apps.

Blue primary family.

Warm brown primary family for lodging guest sites.

Entry code display with grouped digits, copy with live announcement, reveal toggle, validity window and QR slot.

Terms consent list with a tri-state agree-all checkbox, required and optional items, detail sheets and hidden form inputs.

Grouped amenity list that maps keys to icons with a fallback and collapses after a limit.

Resource by day grid of open, closed, missing and partial cells with month header spans, legend and cell selection.

Points or credit usage input clamped to the usable limit with a use-all toggle, step and remaining balance.

Destination, stay dates and guests with one Search button that commits the draft, a full-screen sheet on mobile and URL helpers.

Ticket-shaped value card for amount or percent coupons with minimum spend, expiry, usage state and apply toggle.

Guest account with charge, payment and refund lines, period band, minor-unit balance due, tabs slot and callback-driven editing.

Adults, children and rooms picker (or a single guests count) with optional child ages, a summary label, a popover on desktop and a drawer on mobile.

Pure occupancy, ADR and RevPAR functions with ratio-of-sums aggregation and Format-based display helpers.

Map-provider-agnostic price pin and cluster count markers with selected and visited states.

Checkout total and primary action bar, fixed on mobile and inline on desktop, with a submit-once guard.

House rules and cancellation policy with check-in and check-out times and a zone-aware cancellation state.

Minor-unit money display with a smaller currency symbol, tabular figures, struck-through original price, suffix, sold-out and sign states.

Collapsible price lines from list price to total, summed in minor units with a server-total mismatch report.

Month grid that shows a price or availability state per day, highlights the lowest price and supports keyboard grid navigation.

Room type by date price grid with metric rows, editable base price, foldable channel rows, pending edits, minimum guardrail, month loading and bulk edit by date range.

Lodging reservation lifecycle statuses preset with tones, a badge and a bucket helper.

Room rack style timeline with grouped resource rows, day columns, booking bars, block overlays, virtualization, keyboard navigation and opt-in drag move and resize.

Housekeeping room tiles with occupancy bar, cleaning chip and counters, grouped by building and floor with two multi-select filters.

Room type card with media slot, facts, amenity summary and rate rows that carry refundability, inclusions, member price and sold-out state.

Compact one-line trigger showing destination, dates and guests that opens a search slot.

Check-in and check-out picker with night counts, night-based availability, per-day content and a single committed stay value.

Four-step stay journey whose current step comes from dates, times and the current instant in a time zone.

Address field with a provider adapter, a Daum Postcode preset loaded on demand, a detail input and stacked or inline layouts.

Searchable Korean bank select, grouped account number and holder name with an optional verification adapter and a masking helper.

Korean business registration number field that formats as 000-00-00000 while typing, checks the checksum and accepts an optional status verification adapter.

Hook that keeps a digits-only value behind a formatted text field with caret-safe editing, paste, IME composition and separator-aware deletion.

Hook that plugs Korean public holidays, Sunday as holiday and blue Saturday into calendar-modifiers.

koLocaleSettings preset with the ko-KR locale, Asia/Seoul time zone, KRW currency and Sunday week start for LocaleProvider.

Korean message bundles for every uikit item, collected as koMessages for LocaleProvider.

Korea preset for phone-input with progressive hyphenation, Korean number validation and an E.164 value.

Korean resident registration number field with a masked back part, reveal on demand, shape validation and a masked display part.

Korean vehicle plate number field that cleans input, validates with the plate parser and hints at the current and old formats.

Page header with breadcrumb, static or selector title, subtitle, badges, actions slot and back link that stacks on small screens.

Light, dark and system theme switch on next-themes that renders a placeholder until hydrated.

Horizontal snap scroller of cards with desktop arrow buttons that hide at the ends and a labelled keyboard-focusable region.

Fixed-ratio image with a loading skeleton, an error fallback slot, lazy loading by default and no hover scaling.

Full-screen image viewer with a fixed stage, keyboard and swipe navigation, counter, optional thumbnails and a renderImage adapter.

Fixed bottom action area with safe-area padding, reserved layout space, single and double layouts, a top accessory slot, keyboard-aware hiding and optional hide on scroll.

App tab bar of three to five items with icon, label, badge count, safe-area padding and link rendering through render.

Row with leading, content and trailing areas, link or button rendering through render, and a group that owns the dividers.

Bottom-sheet single select with radio semantics, search for long lists, commit on pick and a hidden form input.

Sticky section anchor tabs that highlight the section in view, with a sliding indicator and a header offset variable.

Progress steps that are horizontal on wide screens and vertical on mobile, with complete, current, upcoming, skipped and error states and optional links.

One dialog API that renders a Dialog from 768px up and a bottom Drawer below, with Back-button close, sticky footer and a full-screen mobile variant.

Right-side detail panel on stock sheet with header, body, footer, URL-param deep link, previous/next records and an unsaved-changes guard.

제목을 눌러 내용을 펼치고 접는 목록(아코디언, accordion)입니다. shadcn base-nova 의 원본을 그대로 담은 아이템이며 Base UI `Accordion` 위에 스타일만 얹습니다.

화면 안에서 눈에 띄게 알리는 안내 상자(알림, alert)입니다. shadcn base-nova 의 원본을 그대로 담은 아이템이며 `div` 로 그립니다. 닫기·확인 같은 동작은 `AlertAction` 자리에 버튼을 넣어 만듭니다.

되돌릴 수 없는 일을 하기 전에 확인을 받는 대화상자(알림 대화상자, alert dialog)입니다. shadcn base-nova 의 원본을 그대로 담은 아이템이며 Base UI `AlertDialog` 위에 스타일을 얹습니다. 일반 대화상자는 `dialog` 를 씁니다.

가로세로 비율을 고정한 상자(aspect ratio)입니다. shadcn base-nova 의 원본을 그대로 담은 아이템이며 CSS `aspect-ratio` 로 그립니다.

첨부 파일 한 개를 보여 주는 카드(첨부, attachment)입니다. 그림 또는 아이콘, 이름, 설명, 동작 버튼을 조합하고 올리는 중·실패 같은 상태를 색과 테두리로 구분합니다. shadcn base-nova 의 원본을 그대로 담은 아이템입니다. 업스트림 메타데이터에 문서 링크가 없습니다.

사람이나 계정을 나타내는 동그란 그림(아바타, avatar)입니다. shadcn base-nova 의 원본을 그대로 담은 아이템이며 Base UI `Avatar` 위에 스타일을 얹습니다. 그림이 없거나 불러오지 못하면 대체 글자를 보여 줍니다.

짧은 꼬리표나 개수를 보여 주는 알약 모양 표시(배지, badge)입니다. shadcn base-nova 의 원본을 그대로 담은 아이템입니다. 예약·결제 같은 흐름의 상태는 `status-badge` 를 씁니다.

지금 보는 곳이 어디인지 상위 경로로 보여 주는 길 표시(브레드크럼, breadcrumb)입니다. shadcn base-nova 의 원본을 그대로 담은 아이템이며 `nav` 안의 `ol` 목록으로 그립니다.

대화 한 줄을 담는 말풍선(버블, bubble)입니다. 보낸 쪽·받은 쪽 정렬, 여러 색 변형, 이모지 반응 표시를 갖습니다. shadcn base-nova 의 원본을 그대로 담은 아이템입니다. 업스트림 메타데이터에 문서 링크가 없습니다.

누르는 버튼(button)입니다. shadcn base-nova 의 원본을 그대로 담은 아이템이며 Base UI `Button` 위에 변형과 크기를 얹습니다. 다른 아이템의 버튼(대화상자, 달력, 캐러셀 등)이 이 아이템을 씁니다.

버튼 여러 개를 이어 붙여 한 덩어리로 보이게 하는 묶음(버튼 그룹, button group)입니다. shadcn base-nova 의 원본을 그대로 담은 아이템입니다.

날짜를 고르는 달력(calendar)입니다. shadcn base-nova 의 원본을 그대로 담은 아이템이며 react-day-picker 10 의 `DayPicker` 에 스타일과 버튼을 얹습니다. 한국 공휴일·주 시작 요일 같은 지역 규칙은 이 아이템에 없습니다.

관련 내용을 한 상자에 담는 카드(card)입니다. shadcn base-nova 의 원본을 그대로 담은 아이템이며 `div` 로 그립니다.

슬라이드를 옆이나 위아래로 넘기는 캐러셀(carousel)입니다. shadcn base-nova 의 원본을 그대로 담은 아이템이며 embla-carousel 에 이전·다음 버튼을 얹습니다.

recharts 위에 색 설정과 툴팁·범례 모양을 얹은 차트 틀(chart)입니다. shadcn base-nova 의 원본을 그대로 담은 아이템입니다. 차트 종류(막대, 선 등)는 recharts 를 그대로 씁니다.

켜고 끄는 체크박스(checkbox)입니다. shadcn base-nova 의 원본을 그대로 담은 아이템이며 Base UI `Checkbox` 위에 스타일을 얹습니다.

코드를 보여 주는 상자(코드 블록, code block)입니다. 제목 줄, 복사 버튼, 줄 번호, 줄 강조(추가·삭제·강조)를 갖습니다. shadcn base-nova 의 원본을 그대로 담은 아이템입니다. 색 입히기는 `use-highlighted-code` 가 맡고 이 아이템은 글자를 그대로 받습니다.

하나의 영역을 펼치고 접는 접이식(collapsible)입니다. shadcn base-nova 의 원본을 그대로 담은 아이템이며 Base UI `Collapsible` 을 `data-slot` 만 붙여 감쌉니다. 스타일은 입히지 않습니다. 여러 항목 중 고르는 목록은 `accordion` 을 씁니다.

입력하면서 목록에서 고르는 콤보박스(combobox)입니다. shadcn base-nova 의 원본을 그대로 담은 아이템이며 Base UI `Combobox` 위에 입력 그룹·칩 스타일을 얹습니다. 여러 값을 고르면 칩으로 쌓입니다.

글자를 쳐서 명령이나 항목을 찾아 실행하는 명령 팔레트(command palette)입니다. shadcn base-nova 의 원본을 그대로 담은 아이템이며 cmdk 에 스타일을 얹고, `CommandDialog` 는 `dialog` 아이템의 대화상자 안에 놓습니다. 선택 목록 위젯은 `combobox` 를 씁니다.

마우스 오른쪽 클릭(또는 길게 누르기)으로 여는 맥락 메뉴(context menu)입니다. shadcn base-nova 의 `context-menu` 를 그대로 싣습니다. 눌러서 여는 메뉴는 `dropdown-menu` 를 씁니다.

배경을 막고 띄우는 대화상자(dialog)입니다. shadcn base-nova 의 `dialog` 를 그대로 싣습니다. 되돌릴 수 없는 확인은 `alert-dialog` 를 씁니다.

글자 방향(direction: `ltr` 왼쪽에서 오른쪽, `rtl` 오른쪽에서 왼쪽)을 Base UI 부품 전체에 알리는 제공자(provider)입니다. shadcn base-nova 의 `direction` 은 `@base-ui/react/direction-provider` 를 그대로 다시 내보냅니다.

화면 가장자리에서 밀려 나오는 서랍(drawer)입니다. 끌어서 닫을 수 있고 겹쳐 열 수 있습니다. shadcn base-nova 의 `drawer` 를 그대로 싣습니다. 끌지 않는 옆 패널은 `sheet` 를 씁니다.

버튼을 눌러 여는 메뉴(dropdown menu)입니다. shadcn base-nova 의 `dropdown-menu` 를 그대로 싣습니다. 오른쪽 클릭으로 여는 메뉴는 `context-menu`, 고르는 값이 입력값이면 `select` 를 씁니다.

보여 줄 내용이 없을 때의 빈 상태(empty state) 화면입니다. shadcn base-nova 의 `empty` 를 그대로 싣습니다.

라벨·입력·도움말·오류를 한 묶음으로 짜는 필드(field)입니다. shadcn base-nova 의 `field` 를 그대로 싣습니다. 입력 요소는 `input`·`select`·`checkbox` 등을 안에 넣습니다.

링크 위에 포인터를 올리면 미리 보여 주는 카드(hover card)입니다. shadcn base-nova 의 `hover-card` 는 Base UI 의 Preview Card 를 감쌉니다. 누르면 여는 창은 `popover` 를 씁니다.

한 줄 글자 입력(input)입니다. shadcn base-nova 의 `input` 은 Base UI 의 `Input` 을 감쌉니다. 여러 줄은 `textarea`, 앞뒤에 아이콘·버튼을 붙이려면 `input-group` 을 씁니다.

입력 앞뒤에 글자·아이콘·버튼을 붙이는 입력 묶음(input group)입니다. shadcn base-nova 의 `input-group` 을 그대로 싣습니다.

인증 번호처럼 정해진 자릿수를 칸으로 나눠 받는 일회용 비밀번호 입력(one-time password input, OTP)입니다. shadcn base-nova 의 `input-otp` 는 `input-otp` 패키지를 감쌉니다.

아이콘·제목·설명·동작을 한 줄에 놓는 목록 항목(item)입니다. shadcn base-nova 의 `item` 을 그대로 싣습니다. 표 형태의 많은 열은 `table` 을 씁니다.

키보드 키를 표시하는 글자판(keyboard key) 표시입니다. shadcn base-nova 의 `kbd` 를 그대로 싣습니다. 누를 수 있는 요소가 아닙니다.

입력에 이름을 붙이는 라벨(label)입니다. shadcn base-nova 의 `label` 은 `label` 요소를 감쌉니다. 라벨·도움말·오류를 한 묶음으로 짜려면 `field` 를 씁니다.

대화나 목록 사이에 놓는 구분 표시(marker)입니다. "오늘", "새 메시지" 같은 글자를 선과 함께 보여 줍니다. shadcn base-nova 의 `marker` 를 그대로 싣습니다.

데스크톱 앱처럼 가로로 늘어놓은 메뉴 줄(menubar)입니다. shadcn base-nova 의 `menubar` 는 `dropdown-menu` 위에 Base UI 의 Menubar 를 얹습니다.

대화 한 건(message)의 틀입니다. 아바타·머리글·본문·바닥글을 놓고 좌우 정렬을 정합니다. shadcn base-nova 의 `message` 를 그대로 싣습니다. 스크롤과 새 메시지 따라가기는 `message-scroller`, 말풍선은 `bubble` 을 함께 씁니다.

대화 목록을 스크롤하는 영역(message scroller)입니다. 새 메시지에 맞춰 아래로 따라가고, 이전 메시지를 앞에 붙여도 위치를 지킵니다. shadcn base-nova 의 `message-scroller` 는 `@shadcn/react` 의 `MessageScroller` 를 감쌉니다.

브라우저 기본 선택 상자(native select)를 입력 모양으로 다듬은 것입니다. shadcn base-nova 의 `native-select` 를 그대로 싣습니다. 검색이나 사용자 지정 모양이 필요하면 `select` 나 `combobox` 를 씁니다.

사이트 위쪽의 이동 메뉴(navigation menu)입니다. 링크와, 눌러 펼치는 큰 패널을 함께 둘 수 있습니다. shadcn base-nova 의 `navigation-menu` 는 Base UI 의 Navigation Menu 를 감쌉니다. 앱 안의 메뉴 동작은 `dropdown-menu`, 쪽 이동은 `pagination` 을 씁니다.

쪽 이동(pagination)입니다. 이전·다음과 쪽 번호 링크를 놓습니다. shadcn base-nova 의 `pagination` 을 그대로 싣습니다. 쪽 수와 현재 쪽 계산은 직접 합니다.

트리거(trigger)를 누르면 그 옆에 떠서 제목·설명·입력 같은 짧은 내용을 보여 주는 팝오버(popover)입니다. shadcn base-nova 의 stock 아이템이며 Base UI `Popover` 위에 서 있습니다. 모달이 필요한 긴 작업에는 `dialog`, 마우스를 올렸을 때만 보이는 짧은 글에는 `hover-card` 나 `tooltip` 을 씁니다.

작업의 진행 정도를 막대로 보여 주는 진행률 표시(progress)입니다. shadcn base-nova 의 stock 아이템이며 Base UI `Progress` 위에 서 있습니다. 값이 없으면 얼마나 걸릴지 모르는 상태(불확정)로 그립니다.

질문을 한 번에 하나씩 보여 주고 선택지나 직접 입력으로 답을 받는 질문지(questionnaire)입니다. shadcn base-nova 의 stock 아이템이며 `@shadcn/react` 의 `Questionnaire` 부품 위에 서 있습니다. 한 화면에 여러 입력을 모두 늘어놓는 양식에는 `field` 를 씁니다.

여러 선택지 중 하나만 고르는 라디오 그룹(radio group)입니다. shadcn base-nova 의 stock 아이템이며 Base UI `RadioGroup`·`Radio` 위에 서 있습니다. 라벨과 설명을 함께 묶을 때는 `field` 아이템과 같이 씁니다.

패널 사이의 경계를 끌어 크기를 바꾸는 크기 조절 레이아웃(resizable)입니다. shadcn base-nova 의 stock 아이템이며 `react-resizable-panels` 위에 서 있습니다.

넘치는 내용을 모든 브라우저에서 같은 모양의 스크롤바로 보여 주는 스크롤 영역(scroll area)입니다. shadcn base-nova 의 stock 아이템이며 Base UI `ScrollArea` 위에 서 있습니다.

목록에서 값 하나를 고르는 선택 상자(select)입니다. shadcn base-nova 의 stock 아이템이며 Base UI `Select` 위에 서 있습니다. 브라우저 기본 목록을 쓰려면 `native-select`, 검색이 필요하면 `combobox` 를 씁니다.

내용 사이를 가르는 가로·세로 구분선(separator)입니다. shadcn base-nova 의 stock 아이템이며 Base UI `Separator` 위에 서 있습니다.

화면 가장자리에서 밀려 나오는 패널인 시트(sheet)입니다. shadcn base-nova 의 stock 아이템이며 Base UI `Dialog` 위에 서 있습니다. 아래에서 끌어 닫는 모바일 패널에는 `drawer`, 화면 가운데 대화상자에는 `dialog` 를 씁니다.

앱 왼쪽(또는 오른쪽)에 붙는 내비게이션 사이드바(sidebar)입니다. shadcn base-nova 의 stock 아이템입니다. 데스크톱에서는 접고 펼 수 있는 고정 패널로, 모바일에서는 `sheet` 로 열리는 패널로 그립니다.

내용이 불러와지기 전에 자리를 잡아 두는 깜박이는 뼈대(skeleton)입니다. shadcn base-nova 의 stock 아이템입니다. 진행 정도를 보여 줄 때는 `progress`, 돌아가는 아이콘이 필요하면 `spinner` 를 씁니다.

범위 안에서 값을 끌어 고르는 슬라이더(slider)입니다. shadcn base-nova 의 stock 아이템이며 Base UI `Slider` 위에 서 있습니다. 값을 하나 또는 여러 개(범위 선택) 받습니다.

화면 모서리에 잠깐 떴다 사라지는 알림(toast)을 `sonner` 라이브러리로 그리는 아이템입니다. shadcn base-nova 의 stock 아이템이며 `next-themes` 의 테마를 따릅니다. Base UI `Toast` 로 그리는 알림은 `toast` 아이템입니다. 한 앱에는 둘 중 하나만 씁니다.

작업이 진행 중임을 보여 주는 돌아가는 아이콘(spinner)입니다. shadcn base-nova 의 stock 아이템입니다. 버튼의 `isLoading` 같은 속성은 없으며 `Spinner` 를 직접 넣고 버튼을 `disabled` 로 둡니다.

켜고 끄는 두 상태를 즉시 바꾸는 스위치(switch)입니다. shadcn base-nova 의 stock 아이템이며 Base UI `Switch` 위에 서 있습니다. 여러 항목에서 고르는 선택에는 `checkbox` 를 씁니다.

행과 열로 데이터를 보여 주는 표(table)입니다. shadcn base-nova 의 stock 아이템으로, 시맨틱 HTML 표 요소에 스타일만 입힌 얇은 부품입니다. 정렬·필터·페이지 같은 표 기능은 없으며 `@tanstack/react-table` 과 함께 쓸 수 있습니다.

한 영역 안에서 보는 내용을 탭(tab)으로 바꾸는 부품입니다. shadcn base-nova 의 stock 아이템이며 Base UI `Tabs` 위에 서 있습니다. 한 번에 하나의 패널만 보입니다.

여러 줄 글을 입력받는 입력 칸(textarea)입니다. shadcn base-nova 의 stock 아이템으로, 스타일을 입힌 `<textarea>` 입니다. 한 줄 입력에는 `input` 을 씁니다.

화면 모서리에 잠깐 떴다 사라지는 알림(toast)을 Base UI `Toast` 로 그리는 아이템입니다. shadcn base-nova 의 stock 아이템입니다. `sonner` 라이브러리로 그리는 알림은 `sonner` 아이템입니다. 한 앱에는 둘 중 하나만 씁니다.

눌렀다 풀었다 하는 두 상태 버튼인 토글(toggle)입니다. shadcn base-nova 의 stock 아이템이며 Base UI `Toggle` 위에 서 있습니다. 즉시 켜고 끄는 설정에는 `switch` 를, 여러 토글을 묶으려면 `toggle-group` 을 씁니다.

여러 토글을 한 줄로 묶어 하나만, 또는 여러 개를 고르게 하는 토글 그룹(toggle group)입니다. shadcn base-nova 의 stock 아이템이며 Base UI `ToggleGroup` 위에 서 있습니다. 모양은 `toggle` 의 변형을 그대로 씁니다.

요소에 마우스를 올리거나 초점이 가면 옆에 짧은 설명을 띄우는 툴팁(tooltip)입니다. shadcn base-nova 의 stock 아이템이며 Base UI `Tooltip` 위에 서 있습니다. 눌러서 여는 내용에는 `popover` 를 씁니다.

에이전트가 한 일(도구 호출, 생각 같은 단계)을 한 줄씩 보여 주고 눌러서 세부 내용을 펼치는 단계 기록(trace)입니다. shadcn base-nova 의 stock 아이템입니다. 펼침은 `collapsible` 아이템이 맡습니다.

코드 글을 줄마다 색 입힌 React 노드로 바꾸는 훅(hook)과 도우미입니다. shadcn base-nova 의 원본을 그대로 담은 아이템이며 shiki 의 JavaScript 정규식 엔진을 씁니다. 언어는 처음 쓰일 때 하나씩 불러옵니다. 업스트림 메타데이터에 문서 링크가 없습니다. `code-block` 이 이 아이템을 씁니다.

화면 폭이 모바일 기준(768px 미만)인지 알려 주는 훅(hook)입니다. shadcn base-nova 의 stock 아이템이며 `sidebar` 가 모바일 판단에 씁니다. 파일은 `hooks/use-mobile.ts` 로 설치됩니다.

클래스 이름 조건부 결합 함수 `cn` 을 내는 라이브러리 아이템입니다. shadcn base-nova 의 stock 아이템으로 파일은 `lib/utils.ts` 로 설치됩니다. 실제 구현은 `cn` 패키지에 있고 이 파일은 그것을 다시 내보냅니다.