Skip to content
Guide

Components missing from shadcn/ui

Color picker, tree view, file explorer, phone input, code diff: React components shadcn/ui does not ship, installed with the shadcn CLI.

The short answer

As of October 2026, the shadcn/ui component list has 64 entries. It has no color picker, tree view, phone input, timeline, stepper, code diff, or file explorer. Control UI ships the items below as shadcn registry items. Each install copies its source into components/control-ui/* and never writes to your components/ui/*:

Each entry links to its docs page with a live preview, props, and the install command. Only items with no shadcn/ui equivalent under any name are listed.

Pickers and inputs

  • Color picker: color formats, presets, contrast helpers, and a gradient editor with draggable stops.
  • Emoji picker: searchable, virtualized emoji grid with an emoji-or-icon tabbed variant.
  • Icon picker: searchable icon grid and color swatches over an icon catalog your app supplies.
  • Phone input: country search, E.164 values, and Zod validation helpers.
  • Number field: numeric input with stepper buttons and optional drag-to-change.
  • Autocomplete: free-text input with search-as-you-type suggestions, unlike a combobox that forces a pick.
  • Checkbox group: multi-select checkbox set with shared state and select-all.
  • Dropzone: file intake with validation, managed selection, and drag-activated overlays.
  • Trigger menu: caret-anchored / command or @ mention menu for text editors.
  • Filter bar: editable field, operator, and value filters with a button or inline search.

Structure and navigation

  • Tree: accessible tree view with roving keyboard navigation, single or multi selection, and animated disclosure.
  • Timeline: chronological events with per-event status, connectors, and metadata.
  • Stepper: static and interactive workflow steps, horizontal or vertical.
  • Table of contents: sticky in-page navigation with scroll-spy range highlighting.
  • Page layout: page shell that owns the scroll container, the measure, and the title and actions row.
  • Toolbar: roving-focus toolbar for editor controls and compact actions.
  • Dockable panel: non-modal panel that moves between two edge slots, with a drawer fallback on mobile.
  • Morphing panel: compact control that expands into settings, navigation, or an inline confirmation.

Content and code

  • Code: Shiki-highlighted lines, gutter, clean copy, editing, and virtualization for large files.
  • Code diff: unified or split diff from a git patch or a before/after pair, with word-level highlights.
  • Markdown: GFM rendering whose code fences compose Code and diff fences compose Code diff.
  • Markdown editor: draggable blocks, slash commands, mentions, and app-owned image uploads.
  • Email: React Email compositions with Control UI colors, typography, markdown, and code.

Canvas and graphs

  • Infinite canvas: pan-and-zoom workspace for arranging content without fixed bounds.
  • Flow: node graph editor parts that skin React Flow with Control UI tokens.
  • Resize handle: edge and corner grips for resizing a positioned box; your app owns the math.

Effects and feedback

  • Progressive blur: backdrop blur that grows toward an edge, driven by CSS.
  • Track highlight: one fluid hover, focus, and selection highlight for custom lists.
  • Rich tooltip: persistent, dismissible tip for onboarding tours, with media and a step counter.
  • Dynamic notification: Dynamic Island-style pill whose thinking state morphs into a reply.
  • Meter: static range meter for quota, storage, or score, distinct from task progress.
  • Live status: always-mounted polite region that announces changes to screen readers.

Audio

  • Audio recorder: voice recording with a realtime waveform, duration, cancel, and submit.
  • Audio visualizer: waveform, line envelope, and frequency bar renderings.
  • Audio device select: input picker with permission, default-device, and disconnected states.
  • Level meter: live dBFS level with warning and clip zones and a peak hold.

Templates

Complete screens built from the parts above. Install one and edit it like any other source.

  • File explorer: Finder-style browser with locations, search, resizable columns, and a preview.
  • Settings: searchable multi-page settings with responsive navigation.
  • Design canvas: Figma-style editor with layers, an infinite canvas, and scrubbable inputs.
  • Team chat: Slack-style channels, unread badges, presence, reactions, and side threads.
  • Discussion: comment thread with nested replies, inline editing, and hover actions.
  • Coding agent: desktop coding workspace with tasks, a conversation, and a persistent composer.

AI and agent surfaces

shadcn/ui now covers the basic chat parts: message, bubble, attachment, message-scroller, questionnaire, and marker. Control UI's own versions of those are left off this list. What it adds is the agent layer around a conversation:

  • Chat composer: controlled text, Enter or ⌘ Enter submit, and trigger-menu mentions.
  • Chat layout: scrolling conversation with a pinned header and a floating composer dock.
  • Chat: chat shell that composes rendered turns and a composer your provider owns.
  • Activity: collapsible agent activity with bounded, scrollable detail.
  • Task list: floating task progress pill that expands into the full list.
  • Context: context-window usage with a derived token graph and a detail inspector.
  • Inline citation: multi-source citation with a keyboard-accessible preview.
  • Source badge: linked source with favicon, hostname, and a fallback.
  • Markdown block: assistant markdown output with a header and a copy-source action.
  • Action bar: hover actions for messages and responses.
  • Transcript divider: run boundaries for steering, interruptions, and condensed context.
  • Thread rail: conversation minimap for jumping between turns.

None of them call a model. They take plain props and callbacks, so the runtime boundary stays in your app.

Left off this list

Some Control UI items match a shadcn/ui component under another name, so they are not "missing":

  • Chat message, composer attachment, inline attachment, and user ask: shadcn/ui has message, bubble, attachment, and questionnaire.
  • Form: shadcn/ui documents forms on top of its field component.
  • Responsive dialog: shadcn/ui documents the same dialog-on-desktop, drawer-on-mobile pattern.
  • App shell: shadcn/ui's sidebar ships its own inset layout.
  • Theme toggle: shadcn/ui documents a mode toggle in its dark mode guide.

For how the two libraries compare beyond coverage, read Control UI vs shadcn/ui.

Frequently asked questions

Does shadcn/ui have a color picker?
No. As of October 2026 the shadcn/ui component list has no color picker, emoji picker, or icon picker. Control UI ships all three as installable source: the color picker covers formats, presets, contrast helpers, and a gradient editor.
Does shadcn/ui have a tree view or file explorer?
No, not as of October 2026. Control UI has a Tree primitive with roving keyboard navigation and single or multi selection, and a File explorer template with locations, search, resizable columns, breadcrumbs, and a preview.
Can I install these with the shadcn CLI?
Yes. Every item is a shadcn registry item, so npx shadcn@latest add with the Control UI registry URL copies the source into your project like any shadcn component.
Do they overwrite components/ui?
No. Control UI installs into components/control-ui/*. Your existing components/ui/* files stay untouched, and both sets read the same core token names such as --background and --primary.
Does shadcn/ui have chat components now?
Yes, basic ones. As of October 2026 shadcn/ui lists message, bubble, attachment, message-scroller, questionnaire, and marker. Control UI adds the agent parts around them: a composer with mention menus, agent activity, context-window usage, task progress, inline citations, and a conversation minimap.