Nuxt 4 · shadcn-vue · Tailwind CSS 4
The claude.ai look, as a component kit
Tokens, type, density and motion from claude.ai's design system, mapped onto the shadcn-vue variable contract. Gallery pages are generated from the router: drop a page under app/pages/components and it appears in the navigation.
- Colour mode
- light, dark or system: .dark on <html> (or any [data-mode="dark"] island)
- Density
- comfortable (claude.ai web) or compact: <html data-density>
- Motion
- the OS setting or the in-app switch: <html data-reduce-motion>
Foundations
Components
Actions
Button The cds button: a paint layer behind the label (v2: no press squish; hover, press and open menus stack translucent layers-* washes), six variants, five sizes on the control scale, pressed / busy / disabled-with-reason states, shortcuts, carets and indicators.
/components/buttonButtonGroup Joined groups (squared seams that hide next to a hovered segment), spaced groups, and the SplitButton: a primary action with a caret menu anchored to the whole group./components/button-groupToggle A pressed-capable Button (Reka Toggle as-child): pressed paints the accent tint and keeps it on hover; pressedVariant="selected" uses the grey fill. Labels and tooltips can flip with the state./components/toggleToggleGroup A row of independent toggles with roving focus (the code titlebar pane toggles). spacing 1 = 4px apart; spacing 0 = the joined ButtonGroup look. Single-select UIs use SegmentedControl./components/toggle-groupSegmentedControl A radio group on a translucent track with a sliding thumb (200ms ease-snap FLIP). Arrow keys move and select; only the checked item is tabbable. Sizes xs–lg, text or icon items, compaction, plain variant./components/segmented-controlKbd Keycaps (18px at 12px text, radius 4, a 1px line in the ink colour) and the text variant used in tooltips and menus. Shortcut formats "mod+shift+o" per platform: ⇧⌘O on Mac, Ctrl+Shift+O elsewhere./components/kbdTextLink Accent links with a 3px-offset underline at 40% of the text colour (100% on hover and keyboard focus), inherit-colour links at 65%, external links with an opens-in-new-tab description, icons, disabled./components/text-linkCopyButton Copy with feedback: the Copy glyph swaps to Check for 1500ms, the label / tooltip reads “Copied” (updated in place), a polite status announces “Copied to clipboard”, and a toast reports clipboard failures./components/copy-buttonForm controls
Input Single-line text entry with the cds field paint: field, ghost (menu search) and bare (inline rename).
/components/inputTextarea Multi-line entry with the field paint, autosize, vertical resize, mono and animated example placeholders./components/textareaInputGroup The cds TextInput wrapper: addons, nested buttons, search with clear, an inline expanding search, a textarea toolbar and the composer pill./components/input-groupLabel The stacked form label: 14/14 w500 primary, an optional danger required star, faded with a disabled peer./components/labelField Stacked form fields, settings rows (SettingsRow), choice rows, fieldsets and errors, with automatic id / ARIA wiring./components/fieldCheckbox cds checkbox: 12–24px boxes on the control scale, accent fill, a Minus for indeterminate and an optional wipe-in glyph./components/checkboxRadioGroup Radios on the checkbox scale with an on-accent dot, plus a selectable card radio./components/radio-groupSwitch The settings toggle: 1.8 × h track, white knob travelling 0.8 × h with a 120ms overshoot./components/switchSelect The cds combobox-as-select: field and ghost triggers, an instant 12px-radius popup with trailing checks, two-line and preview options, and a bottom-sheet presentation on touch./components/selectCombobox A searchable select: the Select trigger and popup with a full-bleed search row, live filtering, "No results", multi-select and a pill header./components/comboboxNativeSelect A native <select> with the field paint and a logical-end chevron (used by the calendar month / year dropdowns)./components/native-selectSlider The cds segment slider: a 32px control with a 28px track, a 24×28 white thumb that grows while dragged, stops, a marked default and a range./components/sliderNumberField A numeric field with nested ghost steppers on the field paint; ArrowUp / Down step./components/number-fieldInputOTP One-time code entry (vue-input-otp) as separate 40px field boxes; the active slot takes the focus shadow, paste fills every slot./components/input-otpPinInput Reka PinInput with the same 40px field boxes as InputOTP (the two are interchangeable); Backspace moves back./components/pin-inputTagsInput Neutral 22px chips inside the field paint; Backspace on the empty input selects, then deletes, the last chip./components/tags-inputForm vee-validate + zod forms in the cds layout: 28px between fields, label → control 8px, CircleAlert messages, a footer that stacks on phones./components/formCalendar Reka Calendar on the control scale: 32px cells with the control radius, accent selection and today, month / year dropdowns on NativeSelect./components/calendarRangeCalendar Reka RangeCalendar: accent endpoints with an accent-muted band rounded at its ends, two months side by side./components/range-calendarOverlays
Dialog Modal dialogs: six sizes, the 44px band header (15/20 title, in-flow 28px Close, scroll hairline), 16px body, popover and panel surfaces, nesting with blur and veil, 200ms fade + scale.
/components/dialogAlert Dialog ConfirmationDialog: a 400px alert dialog with Cancel and a primary or danger confirm, busy and disabled states; layout="centered" for the 416px icon-led prompt./components/alert-dialogSheet Edge-anchored dialogs: full slide over 300ms on the cds ease-out, panel / sidebar / page surfaces, swipe to close./components/sheetDrawer Bottom sheets: the touch presentation of menus, selects and popovers (decision 4), nested sheets, detents./components/drawerPopover Non-modal anchored panels: surface-popover (#fff | #303030), radius 12, panel shadow, max 320; open and close instantly./components/popoverInfoTip A 16px info glyph whose tooltip-styled popup opens on hover (300ms) and on click (focus moves inside)./components/info-tipHover Card cds PreviewCard: opens 300ms after hover or focus, 120ms snap fade + .98 scale, min 200 / max 360./components/hover-cardTooltip Labels for icon buttons and controls: 300ms delay, 120ms fade + .98 scale, shortcut and description slots, disabled reasons, overflow labels./components/tooltipCoachMark Non-modal feature callouts anchored to a control: neutral and accent, arrow, 200ms .97 scale./components/coach-markToast vue-sonner with the cds card: neutral / warning / danger, 6s minimum, (×N) dedupe, stacked 14px / .04, exit scale .85./components/sonnerLightbox Image preview: a 62.5% black layer, the image up to 640 × viewport − 64, Close beside it, a View Transition morph from the thumbnail./components/lightboxMenus and command
Dropdown Menu The cds Menu: content-sized popups (radius 14, 6px gutter, #fff | #303030), 28px rows (w435, 15% highlight), subs, checks, accelerators, two-line status and inline-action rows, header / footer regions and touch sheets.
/components/dropdown-menuContext Menu Right-click menus with the cds menu panel: opens at the pointer, no initial highlight, accelerators, subs, one-level Escape./components/context-menuMenubar Desktop-style menubar (not used on claude.ai), restyled to the cds tokens; its menus are the shared cds menu panel./components/menubarCommand Searchable lists on Reka Listbox: menu rows for popovers and the 672px search palette with filters, loading, empty state and footer hints./components/commandModel Selector Composer model menu: two-line model radios, an Effort submenu with badges, More models; flattened under 640px; a compact code variant with digit accelerators./components/model-selectorSuggestion Menu Editor-driven slash command and @mention lists: focus stays in the editor, arrows clamp, Enter / Tab select, Escape closes./components/suggestion-menuNavigation and layout
Sidebar claude.ai app sidebar: 232–420px, three layout modes (docked, collapsed with hover peek, phone sheet), 32px rows on a 34px pitch with one roving tab stop, hover-revealed row actions, overflow fades, collapsible sections and project lists, resize handle, footer tray.
/components/sidebarTabs Pill tabs drawn by ::before (no track), underline tabs and route NavigationTabs, manual activation, scroll pager and collapse-to-menu overflow modes./components/tabsBreadcrumb Header crumbs: 28px ghost links, a 50 % “/” separator, the current page in primary ink (optionally a rename button), a back link and a loading placeholder. Crumbs truncate before the page title./components/breadcrumbPagination Settings-table paging: 28px ghost chevrons with tooltips, “Page X of Y” in tabular figures, a polite “Showing a–b of n” summary; the ends are aria-disabled (no disabled attribute, skipped by Tab)./components/paginationScrollArea Scrollers with claude.ai edge fades (28px stepped masks revealed by scroll-driven animation), the sidebar's 12px “scrolled” fade, a sticky surface edge, native or Reka overlay scrollbars./components/scroll-areaResizable Splitter panels and resize handles: an invisible 12 / 8 / 3px gap whose 3×48 pill appears 200ms after hover, turns accent and full-length on keyboard focus; tile handles for code panes; a standalone px handle (sidebar edge)./components/resizableSeparator Hairlines between menu groups, toolbar buttons, table rows and trays: 1px border ink (10 %), subtle 5 %, strong 20 %, 0.5px hairlines and the menu inset./components/separatorCollapsible Disclosure with a 200ms cds height animation (clip-path keeps focus rings visible sideways), instant / fade / grid modes, a rotating caret and claude.ai trigger recipes./components/collapsibleAccordion cds Accordion: 40px headers (lg, default) whose ghost fill bleeds 12px past the text column, a 16px rotating caret, 1px dividers that hide under a hovered header, multiple open by default./components/accordionPageHeader Library / projects headers: a transparent sticky band over a frosted ground (85 % page + 12px blur) with a 24/32 serif title, tabs and 28px controls sharing the second line, a 1px border-line rule across the pane once the page scrolls; description and detail variants, inline search./components/page-headerToolbar Header rows with one roving tab stop, all frame-row tall (45, 48 on touch): the absolute frame header (plain, ruled or translucent), the ruled pane titlebar, the opaque ruled page header and the panel row; ToolbarTitle renames inline and opens the title menu./components/toolbarPanel Flat side panes (v2): no radius, shadow or inset, surfaces collapse to the page colour inside, a 1px seam toward the content; pane (code), drawer (artifact panel / file viewer next to the chat), flat overlay and uncontained; frame-row headers with a 1px rule. Focus rings inside cut out against the panel surface./components/panelNavigationMenu Restyled shadcn NavigationMenu: 32px secondary triggers on ghost fills, cds popover panel; a vertical link list (settings-style nav) with selected-fill current rows and external links./components/navigation-menuStepper Not seen on claude.ai; restyled to tokens: control-sized circles (10 % ink inactive, ink fill active, accent + popping check completed), body / footnote labels, accent segments for completed steps./components/stepperAspectRatio Thumbnail box (search palette, artifact gallery, template tiles): 16:10 by default, image anchored to the top, ring kept visible over the image in dark mode./components/aspect-ratioCarousel Featured fade carousel (500ms crossfade, 5.2s autoplay that pauses on hover / focus / hidden tab and stays off with reduced motion, dots with a progress fill, 40px on-content nav), Embla slide carousel and the native tile strip./components/carouselData display
Badge Small status and metadata labels (v2: an outlined pill, 1.5px border, w540): tones, hue outlines, solid emphasis, sizes xxs–lg, icons, removable chips.
/components/badgeCounter Count pills and unread dots: danger by default, neutral / accent / success / warning, sizes xxs–md, 99+ overflow./components/counterAvatar User avatars (image, initials, assistant spark), overlapping AvatarStack with a surplus chip, LogoTile icon / logo tiles and the profile-photo button./components/avatarCard Surface cards with a ring layer and a fill layer: variants, sm size scope, link cards (stretched CardLink: no ring, translucent card-link fill with hover / pressed layers), tinted icon tiles, media, bezel./components/cardItem List rows: outset row with an overlay link, divided groups, compact grid rows, tile and menu rows, meta ↔ actions swap./components/itemTable Native tables on the cds recipe: outset DataTable, inset / full / no separators, hover pill rows, row links and actions, selection mode, toolbar, pagination, mini analytics tables./components/tableEmpty Empty, error and not-found states: section, error, pane, page, inline, bordered and dropzone layouts with kit-drawn pictograms./components/emptyAlert cds Banner (v2): every variant is the neutral page-colour card with the banner-line ring and primary text; the icon carries the variant (Info secondary, Warning #fbb315, Warning #dc3c3d). Promo, inline / wrapped / stacked CTA, collapsible details, dismiss, composer placement./components/alertProgress Usage Meter (role=meter) in four tones and three heights (xs on the neutral track), Reka Progress with the same visuals and an indeterminate sweep, and the 14px ProgressRing./components/progressSkeleton Loading placeholders: 1em bars with a sheen, shapes, and SkeletonGroup motion (lockstep / wave / sweep) with a delayed reveal./components/skeletonSpinner The cds ring spinner: muted track with a fading arc, sizes 12 / 16 / 20, optional reveal delay./components/spinnerStatusDot Session and task status dots: hollow idle, ready, awaiting, blinking running, unread, error, attention, new run, breathing clay; plus the Pulse attention dot over an icon./components/status-dotSpark The kit's own spark mark (not a brand logo) with thinking / entrance / exit / tickle motion, WorkingMark, ThinkingDots and ShimmerText./components/sparkRelativeTime Relative timestamps ("2 days ago", "yesterday", then "Oct 6") with an absolute tooltip; refreshes every minute./components/relative-timeChart unovis charts on the cds chart tokens: ChartCard, ChartStat tiles with deltas, HTML legend, styled tooltip, empty and loading states./components/chartDiffView Diffs (unified or split): sticky collapsible file headers, git-tinted rows with a gutter bar, Shiki syntax highlighting, word emphasis, hunk separators, DiffStat, preview variant./components/diff-viewFileTree Files and changed-files trees on Reka Tree: keyboard navigation, folders, selection, indent guides, diff stats, flat list mode, commits list recipe./components/file-treeIcon The semantic icon registry (app/lib/icons.ts): lucide glyphs with cds stroke weights, RTL mirroring, filled glyphs and custom marks./components/iconChat
Chat composer The prompt box: home, project, reply, code, incognito, pill and the phone dock, with the action row, submit cell, tray and chin.
/components/chat-composerAttachment Composer tray tiles, images above a user bubble and file rows: pending, error, remove and the enter / exit motion./components/attachmentMessage One transcript turn: a right-aligned user bubble or an assistant stack (status, cards, prose) with its action row./components/messageBubble The user message bubble: radius 12 | 10, padding 12×16 | 8×12, 15/21 text (one line = 45), at most 85 % of the column./components/bubbleMessage actions The 24px action toolbar under a message: hover / focus reveal, toggles, copy feedback, roving focus./components/message-actionsProse Long-form reply text: the cds .prose rules with the reply font, text inset / stop, tables and the streaming word fade./components/proseCode block Chat code blocks, Code transcript fences and bash command rows, highlighted with the measured cds-dark palette (github-light in light mode)./components/code-blockTurnStatus (Trace) The collapsible status row above a reply: thinking, web search, tool use, busy state and failed steps./components/traceCitation Inline source chips at the end of a sentence, with a hover / focus PreviewCard listing the sources./components/citationArtifact card The artifact / file card under a reply: a flat 520 × 64 link-card row with an icon tile, title, meta and hover-revealed actions./components/artifact-cardMessage scroller The transcript scroller: a role=feed list of articles with arrow-key navigation, a jump-to-latest button, under a translucent title row./components/message-scrollerQuestionnaire The AskUserQuestion card: single / multiple choice rows on the cds radio-card recipe, free text, shortcuts, and the answered receipt./components/questionnaireMarker Quiet transcript markers: notices, chapter separators and bordered rows (13/17 muted)./components/markerTemplates
App
App shell + new chat The app frame with the sidebar in all its modes (docked 232–420px and resizable, collapsed with hover peek, auto-collapsed 640–700px, phone sheet) and the new chat home: greeting, home composer, incognito. States: ?incognito, ?state=collapsed | peek | booting | lists-loading | lists-error | empty. Keys: ⌘B, ⇧⌘O, ⇧⌘K, ⇧⌘I, ⌘/.
/templates/shell-homeConversation A chat with the sidebar, header, transcript (thinking, search, citations, code, table, artifact and file cards, images), reply composer, artifact split view (?artifact=<id>, as linked from the artifact page), file viewer and Files panel. States via ?state= and ?panel=./templates/conversationSettings and overlays
Settings dialog Hash-routed settings over the app shell: 1024×800 two-column dialog with nav search, sections, rows, usage meters, memory tables and sub-pages; phone card with a scrolling tab strip.
/templates/settings-overlaysSearch palette Top-anchored command palette over the app shell: type tabs, grouped results, simulated remote search, filters, compose mode, row actions and thumbnail cards, nested rename./templates/settings-overlays-paletteGlobal dialogs Rename chat, Create a project, Keyboard shortcuts and destructive confirmation dialogs, the non-modal quick task dock and toast placement over the app shell./templates/settings-overlays-dialogsPages
Projects Projects list: sticky serif header with filter tabs, inline search, sort menu and New project over a two-column card grid; loading, failed, empty and no-match states.
/templates/pages-projectsProject Project detail: frame crumbs with inline rename, serif title block, project composer, chats list with row menus, and the sticky knowledge rail (instructions, memory, context, scheduled) with its dialogs./templates/pages-projectCreate project The /projects/create form page: serif heading, name (autofocused), goal and visibility, Cancel and Create project./templates/pages-project-createArtifacts Artifacts gallery (and the Design variant): info card, Make-something-new hue tiles, 3-column cover cards or a flat (Design: date-grouped) list, inline search, Filter-and-sort facets and the New menu; loading, failed and offline states./templates/pages-artifactsArtifact Standalone artifact page (full screen, no sidebar): ruled 45px header with Home, the title menu (meta header, Add to Dock, Permissions, pinned footer), presence, the Comment split, Chat, Share and the Open chat icon (both open the conversation with the artifact panel), over the sandboxed iframe; owner (with or without a chat) and viewer variants./templates/pages-artifactChats and tasks Recents: headerless chats table with hover-swapped row actions, Filter by, inline search, Select mode (checkbox column, Select all, bulk Archive / Delete) and infinite scroll with a skeleton row./templates/pages-recentsScheduled tasks Scheduled tasks: Yours / Templates tabs with Search, Filter, Sort and New task menus, task cards with source badges and new-run dots, empty state with squiggle divider and template rows (peek cards), the Create scheduled task dialog, loading and failed states./templates/pages-scheduledCustomize Customize: Skills / Connectors / Plugins with Yours and Discover (promo card, tile rows, categories, list rows with hover toggles, connectors table), unified search, item detail and the load-error state./templates/pages-customizeApps and extensions Downloads: shell-less page with the ruled 45px header, serif hero and bezel cards (full-width browser extension first, office add-ins, desktop, command line, mobile; featured hue washes) entering with a staggered rise./templates/pages-downloadsAnalytics Analytics: shell-less page with a 220px sub-nav, notices popover, stat tiles, activity chart (unovis), app pages with a period switch and mini table, and empty app pages./templates/pages-analyticsCode Code surface at comfortable density (v2): home (start card, "Waiting" setup card, code composer, environment bar with environment / repo / model / permissions / usage), session (ruled 45px pane titlebar, Changes and Files panes with DiffView and FileTree, session rail), Routines, and the centred "Enable notifications" alert dialog./templates/pages-codeErrors and offline Every error state in the app shell: not-found and no-access blocks, the org-aware 404, code session not found, load-error states, inline settings errors, banners, toasts, held skeletons and an offline simulation./templates/pages-errorsNot found Shell-less 404 (what app/error.vue renders for unknown routes): Spark + name, serif title, subline and a primary "Go back home" link; ?org adds the organization switch./templates/pages-not-found