26 v0 Prompts for UI Components (2026)

Build only a responsive top navigation bar component — no page, no hero, no footer.

Product surface: logo on the left, 4 nav links [Home, Product, Pricing, Docs] center, and a primary "Sign up" button plus a ghost "Log in" button on the right. Below 768px, collapse the links and buttons into a hamburger that opens a full-width mobile menu.
Context: the top-level chrome of a SaaS marketing site, seen on every page.
Constraints:
- Next.js App Router, shadcn/ui (Sheet for the mobile menu, Button), Tailwind, TypeScript.
- Sticky to the top with a subtle bottom border and a blurred translucent background on scroll.
- Tokens: primary #4F46E5, foreground #0F172A, muted #64748B, radius 0.5rem, links weight 500.
- States: link default / hover (underline slide-in) / active (primary color, aria-current="page") / focus (2px ring, ring offset). Buttons: default / hover / focus / disabled.
- Accessibility: nav landmark, hamburger is a button with aria-expanded and aria-controls, mobile menu traps focus and closes on Escape, all interactive targets at least 44px.
- Responsive from 360px up.
Render the desktop and the open mobile-menu states as preview variants.

Build only a collapsible sidebar navigation component for an app shell — no page content.

Product surface: a vertical nav with a top logo, 3 grouped sections [Overview, Workspace, Settings], each with 2–4 items that have a leading icon and label. A collapse toggle at the bottom shrinks the sidebar to icons only.
Context: the persistent left rail of a dashboard, used by a signed-in operator switching between areas all day.
Constraints:
- shadcn/ui, Tailwind, lucide-react icons, TypeScript.
- Tokens: background #FFFFFF, active item bg #EEF2FF with primary #4F46E5 text, muted label #94A3B8, radius 0.5rem, item height 40px.
- States: item default / hover (muted bg) / active (primary bg + text, left 2px accent bar) / focus (ring) / disabled (50% opacity, no pointer). Collapsed vs. expanded rail.
- Accessibility: nav landmark, active item marked aria-current="page", collapse toggle has aria-expanded, icon-only items keep an accessible label via aria-label and a tooltip.
- Responsive: overlay drawer below 1024px.
Show expanded and collapsed variants.

Build only a breadcrumb navigation component.

Product surface: a horizontal trail of up to 5 crumbs with a chevron separator; the last crumb is the current page and is not a link. When the trail overflows on small screens, collapse the middle crumbs behind a "…" menu.
Context: the top of a deep content or file-browser page so users can jump back up the hierarchy.
Constraints:
- shadcn/ui (Breadcrumb, DropdownMenu for the collapsed crumbs), Tailwind, TypeScript.
- Tokens: link #64748B, current #0F172A weight 600, separator #CBD5E1, gap 8px.
- States: crumb link default / hover (foreground color, underline) / focus (ring); current crumb has aria-current="page". Collapsed "…" trigger: default / hover / focus / open.
- Accessibility: wrapped in nav with aria-label "Breadcrumb", ordered list markup, "…" is a button that opens a keyboard-navigable menu.
- Responsive: truncate to first + last + "…" below 480px.

Build only a command-palette component triggered by Cmd/Ctrl+K — no surrounding app.

Product surface: a centered modal search with an input, grouped results [Pages, Actions, Recent], keyboard arrow navigation, and a footer showing ↑↓ to move, ↵ to select, esc to close. Include a loading state while results fetch and an empty state when nothing matches.
Context: power users of a productivity app navigating and running actions without the mouse.
Constraints:
- shadcn/ui (Command / CommandDialog built on cmdk), Tailwind, TypeScript. Stub the result data.
- Tokens: overlay rgba(15,23,42,0.5), panel bg #FFFFFF, radius 0.75rem, selected row bg #EEF2FF, muted #94A3B8.
- States: row default / hover / selected (arrow-highlighted) / disabled. Input default / focus. Panel: loading (skeleton rows), results, empty ("No results for '[query]'").
- Accessibility: role="dialog" aria-modal, focus moves to the input on open and returns to the trigger on close, full arrow-key + Enter + Escape support, results announced via aria-live.
- Responsive: full-screen sheet below 640px.

Build only a KPI stat card component.

Product surface: a card showing a metric label [Monthly revenue], a large value [$48,120], a delta chip [+12.4% vs last month] colored green for up / red for down, and a tiny sparkline. Include a menu button in the corner for [View details, Export].
Context: the top row of an analytics dashboard scanned quickly by an operator checking health.
Constraints:
- shadcn/ui (Card, Badge, DropdownMenu), Tailwind, recharts for the sparkline, TypeScript.
- Tokens: card bg #FFFFFF, border #E2E8F0, radius 0.75rem, positive #16A34A, negative #DC2626, label #64748B, value weight 700.
- States: default / hover (shadow-md lift, cursor) / focus-within (ring) / loading (skeleton for value + sparkline) / error ("Couldn't load" + retry link) / empty ("No data yet"). Delta chip: up vs. down.
- Accessibility: value has an accessible label pairing metric + number, delta conveys direction with an icon not color alone, menu is a keyboard-navigable button.
- Responsive: cards flow into a 1/2/4-column grid.
Show default, loading, and error variants.

Build only a media card component for a content grid.

Product surface: a card with a 16:9 cover image, a category badge overlaid top-left, a title (max 2 lines, ellipsis), a one-line description, an author avatar + name + date row, and a bookmark toggle button in the corner.
Context: a browsable feed of articles or courses; users skim and save items.
Constraints:
- shadcn/ui (Card, Badge, Avatar, Button), Tailwind, next/image, TypeScript.
- Tokens: radius 0.75rem, border #E2E8F0, title weight 600 #0F172A, meta #64748B, badge bg #EEF2FF.
- States: card default / hover (image zoom 1.03, shadow lift) / focus-within (ring). Bookmark: unsaved / saved (filled, primary) / focus. Image loading (skeleton blur-up). Empty description handled gracefully.
- Accessibility: whole card is a single link with the title as the accessible name, bookmark is a separate toggle button with aria-pressed, image has descriptive alt.
- Responsive: 1/2/3 columns from 360px up.

Build only a user profile card component.

Product surface: an avatar (with initials fallback), name, role/title, an online-status dot, a short bio (2 lines), a stats row [Following, Followers, Posts], and a primary "Follow" button that toggles to "Following".
Context: a hover preview or a team directory tile.
Constraints:
- shadcn/ui (Card, Avatar, Button, Badge), Tailwind, TypeScript.
- Tokens: radius 0.75rem, primary #4F46E5, online #22C55E, muted #64748B, name weight 600.
- States: Follow button default / hover / focus / loading (spinner while the request runs) / following (outline style) / disabled. Avatar image vs. initials fallback. Status: online / away / offline.
- Accessibility: status dot has an accessible label, Follow uses aria-pressed, stats have visible labels not just numbers.
- Responsive: stacks vertically below 400px.

Build only an accordion FAQ component.

Product surface: a list of 6 question rows; clicking a row expands its answer with a smooth height transition and rotates a chevron. Single-open behavior by default.
Context: a support or pricing page where users scan questions and open one at a time.
Constraints:
- shadcn/ui (Accordion, built on Radix), Tailwind, TypeScript.
- Tokens: divider #E2E8F0, question weight 600 #0F172A, answer #475569, radius 0.5rem, row padding 16px.
- States: row default / hover (muted bg) / focus (ring on the trigger) / expanded (chevron rotated, answer visible) / disabled.
- Accessibility: each trigger is a button with aria-expanded and aria-controls, answers are region-labelled, full keyboard support (Enter/Space to toggle, arrow keys to move between headers).
- Responsive: full width, comfortable tap targets on mobile.

Build only a 3-step onboarding form component with a progress indicator — no page around it.

Product surface: Step 1 Account [name, email, password with strength meter]; Step 2 Company [company name, size select, role]; Step 3 Review + Submit. A stepper at the top shows progress; Back/Next buttons move between steps; Next is disabled until the current step validates.
Context: first-run onboarding; the user must not lose entered data moving between steps.
Constraints:
- Next.js App Router, shadcn/ui (Form, Input, Select, Button, Progress), react-hook-form + zod for validation, Tailwind, TypeScript.
- Tokens: primary #4F46E5, error #DC2626, radius 0.5rem, label weight 500, helper text #64748B.
- States for every field: default / focus (ring) / filled / error (red border + inline message + aria-describedby) / disabled. Submit button: default / hover / focus / loading (spinner, disabled) / success. Stepper: completed / current / upcoming.
- Accessibility: each input has a label and error linked via aria-describedby, aria-invalid on error, focus moves to the first invalid field on failed Next, step change announced via aria-live.
- Responsive: single column below 640px.
Render step 1 in default and error states.

Build only a search input with an autocomplete suggestions dropdown.

Product surface: an input with a leading search icon and a clear (×) button once text is entered; as the user types, a dropdown shows up to 6 matching suggestions with the matched substring bolded. Arrow keys move through suggestions, Enter selects, Escape closes.
Context: site-wide search in the header; results are debounced as the user types.
Constraints:
- shadcn/ui (Input, Popover/Command), Tailwind, TypeScript. Stub suggestion data; simulate a 300ms debounce.
- Tokens: radius 0.5rem, border #CBD5E1, focus ring #4F46E5, highlighted row bg #EEF2FF, muted #94A3B8.
- States: input default / focus / filled (clear button shown) / disabled. Dropdown: loading (spinner in the input), results, empty ("No matches"), and a highlighted (keyboard-focused) row.
- Accessibility: combobox pattern — role="combobox" with aria-expanded, aria-controls, aria-activedescendant on the highlighted option, listbox of options, results announced via aria-live.
- Responsive: full width on mobile.

Build only a file-upload dropzone component.

Product surface: a dashed drop area with an upload icon, "Drag files here or click to browse", and an accepted-types + max-size hint. Dropped files list below each with a name, size, a per-file progress bar, and a remove button. Reject files over [10MB] or of the wrong type with an inline error.
Context: attaching documents inside a form; users drag from the desktop or pick via the file dialog.
Constraints:
- shadcn/ui (Card, Progress, Button), Tailwind, TypeScript. Simulate upload progress.
- Tokens: dashed border #CBD5E1, drag-over border #4F46E5 + bg #EEF2FF, error #DC2626, radius 0.75rem.
- States: dropzone idle / hover / drag-over (highlighted) / disabled. Per file: uploading (progress) / done (check) / error (message + retry) / removing. Empty (no files yet).
- Accessibility: the dropzone is keyboard-focusable and opens the file dialog on Enter/Space, hidden native input is labelled, progress uses aria-valuenow, errors linked to their file row.
- Responsive: full width, list scrolls if long.

Build only a date-range picker component.

Product surface: a trigger button showing the selected range [Jul 1 – Jul 23]; clicking opens a popover with a two-month calendar, quick presets [Today, Last 7 days, Last 30 days, This month], and Apply/Cancel. Selecting a start then end highlights the range.
Context: filtering an analytics dashboard by period.
Constraints:
- shadcn/ui (Popover, Calendar built on react-day-picker, Button), Tailwind, date-fns, TypeScript.
- Tokens: range bg #EEF2FF, endpoints bg #4F46E5 text white, radius 0.5rem, muted out-of-range #CBD5E1.
- States: trigger default / hover / focus / open. Day cell: default / hover / in-range / start / end / today (ring) / disabled (future or out of bounds). Preset: default / hover / active.
- Accessibility: trigger has aria-haspopup and aria-expanded, calendar is grid-navigable with arrow keys, selected range announced, Escape closes and returns focus to the trigger.
- Responsive: single month + presets stacked below 640px.

Build only a destructive-action confirmation dialog component.

Product surface: a modal with a warning icon, title "Delete [project]?", a body explaining the action is permanent, and two buttons — a cancel (ghost) and a destructive "Delete" (red). The Delete button shows a spinner and stays disabled while the action runs; on error, an inline message appears without closing the dialog.
Context: guarding an irreversible action in an app.
Constraints:
- shadcn/ui (AlertDialog, Button), Tailwind, TypeScript.
- Tokens: destructive #DC2626, overlay rgba(15,23,42,0.5), panel radius 0.75rem, title weight 600.
- States: Delete button default / hover / focus / loading (spinner, disabled) / error. Cancel: default / hover / focus. Dialog open / closing.
- Accessibility: role="alertdialog" aria-modal, focus trapped inside and set to Cancel on open (safer default), Escape and overlay click cancel, focus returns to the trigger on close.
- Responsive: comfortable padding, buttons stack below 400px.

Build only a right-side slide-over drawer that contains an edit form — no page.

Product surface: a drawer sliding in from the right with a header [Edit contact + close ×], a scrollable body with fields [name, email, tags, notes], and a sticky footer with Cancel + Save. Save shows a loading spinner; unsaved changes prompt a confirm before closing.
Context: editing a record inline without leaving the list view behind it.
Constraints:
- shadcn/ui (Sheet, Input, Button, Badge for tags), Tailwind, react-hook-form, TypeScript.
- Tokens: panel width 420px, overlay rgba(15,23,42,0.4), radius on inputs 0.5rem, primary #4F46E5.
- States: fields default / focus / error / disabled. Save: default / hover / loading / disabled (until dirty & valid). Drawer: opening / open / closing. Unsaved-changes confirm.
- Accessibility: role="dialog" aria-modal, focus trap, focus to the first field on open and back to the trigger on close, Escape closes (with unsaved guard), body scroll locked behind it.
- Responsive: full-width sheet below 640px.

Build only a user-account dropdown menu component.

Product surface: an avatar trigger that opens a menu with a header (name + email), a grouped item list [Profile, Billing, Settings], a checkbox item for "Dark mode", a submenu for "Switch team", a separator, and a destructive "Sign out".
Context: the top-right account menu of an app.
Constraints:
- shadcn/ui (DropdownMenu built on Radix, Avatar, Switch), Tailwind, lucide-react, TypeScript.
- Tokens: radius 0.5rem, item height 36px, hover bg #F1F5F9, destructive #DC2626, muted #94A3B8.
- States: trigger default / hover / focus / open. Item default / hover (bg) / focus / disabled / checked (checkbox item). Submenu opening on hover and on arrow-right.
- Accessibility: full keyboard nav (arrows, Enter, Escape, typeahead), roles menu/menuitem/menuitemcheckbox, submenu with aria-haspopup, focus returns to trigger on close.
- Responsive: opens as a bottom sheet below 480px.

Build only a mobile bottom-sheet component.

Product surface: a sheet that slides up from the bottom with a drag handle, a title, a scrollable list of action rows (icon + label), and a snap point at half height and full height. Dragging down past a threshold dismisses it.
Context: contextual actions on a mobile screen (share, add to list, report).
Constraints:
- shadcn/ui (Drawer, based on vaul), Tailwind, TypeScript.
- Tokens: sheet radius top 1rem, handle #CBD5E1, overlay rgba(15,23,42,0.4), row height 48px.
- States: sheet closed / opening / half-snap / full-snap / dragging / dismissing. Action row default / active (press) / disabled. Empty (no actions).
- Accessibility: role="dialog" aria-modal, focus trap, Escape and drag-to-dismiss both close and return focus, rows are buttons at least 48px tall.
- Responsive: this is mobile-first; on ≥768px fall back to a centered dialog.

Build only a data table component — no page chrome.

Product surface: a table of [users] with columns [Name (avatar+name), Email, Role (badge), Status, Created]. Header cells sort on click (asc/desc arrow). A toolbar above has a search field, a Role filter, and a column-visibility menu. Rows have a checkbox for multi-select; selecting shows a bulk-action bar. Bottom pagination shows range + prev/next.
Context: an admin panel where an operator manages records.
Constraints:
- shadcn/ui (Table, Checkbox, Badge, DropdownMenu, Input, Button), TanStack Table for sorting/filtering, Tailwind, TypeScript. Stub 20 rows.
- Tokens: header text #64748B weight 600, row hover #F8FAFC, selected row #EEF2FF, radius 0.5rem, status colors green/amber/slate.
- States: row default / hover / selected / disabled. Table-level: loading (skeleton rows), populated, empty ("No users match your filters" + clear-filters button), error (message + retry). Sort header: unsorted / asc / desc. Bulk bar shown only when ≥1 selected.
- Accessibility: proper table semantics with scope on headers, sortable headers are buttons with aria-sort, select-all checkbox in the header, keyboard-operable pagination and filters.
- Responsive: horizontal scroll with a sticky first column below 768px.
Render populated, loading, and empty variants.

Build only a paginated list component (not a table).

Product surface: a stacked list of [invoice] rows, each with a leading icon, a title + subtitle, a status badge on the right, an amount, and a trailing "⋯" menu [View, Download, Delete]. A footer shows "Showing 1–10 of 84" with numbered pagination.
Context: a billing history screen scanned top to bottom.
Constraints:
- shadcn/ui (Card, Badge, DropdownMenu, Pagination), Tailwind, TypeScript.
- Tokens: divider #E2E8F0, subtitle #64748B, amount weight 600, radius 0.75rem, status colors paid/pending/failed.
- States: row default / hover (muted bg) / focus-within / selected. List-level: loading (5 skeleton rows), populated, empty ("No invoices yet" + illustration), error (retry). Row menu: closed / open. Pagination: page active / hover / disabled at ends.
- Accessibility: list markup, each row's primary action reachable by keyboard, the "⋯" is a labelled menu button, pagination is a nav with aria-current on the active page.
- Responsive: hide the subtitle and inline the amount below 480px.

Build only a single kanban column component with draggable cards.

Product surface: a column with a header [title + count badge + "+" add button] and a vertical stack of task cards. Each card has a title, a label chip, an assignee avatar, and a due date. Cards can be reordered by drag; dragging over the column shows a drop indicator.
Context: a project board where a user drags tasks between statuses.
Constraints:
- shadcn/ui (Card, Badge, Avatar, Button), @dnd-kit for drag, Tailwind, TypeScript. Stub 4 cards.
- Tokens: column bg #F8FAFC, card bg #FFFFFF border #E2E8F0, radius 0.75rem, drop indicator #4F46E5.
- States: card default / hover (lift) / focus / dragging (raised shadow, slight tilt) / drop-target. Column: default / drag-over. Empty ("No tasks — drop one here").
- Accessibility: cards are keyboard-draggable (dnd-kit keyboard sensor), move announced via aria-live, add button labelled, focus visible on cards.
- Responsive: fixed column width, horizontal scroll across columns on mobile.

Build only a 3-tier pricing section component.

Product surface: three plan cards [Starter, Pro, Business] each with a name, price, billing note, a CTA button, and a feature list with check/dash icons. A monthly/annual toggle above updates prices (annual shows a "save 20%" badge). The middle plan is highlighted as "Most popular".
Context: a pricing page where a visitor compares tiers and picks one.
Constraints:
- shadcn/ui (Card, Button, Switch, Badge), Tailwind, TypeScript.
- Tokens: primary #4F46E5, highlighted card border #4F46E5 + subtle shadow, check #16A34A, dash #CBD5E1, radius 0.75rem, price weight 700.
- States: toggle monthly / annual. CTA default / hover / focus / loading. Highlighted vs. standard card. Feature: included (check) / excluded (dash).
- Accessibility: toggle is a labelled switch with aria-checked, "Most popular" conveyed in text not only styling, price change announced via aria-live, each CTA has a plan-specific accessible name.
- Responsive: cards stack vertically below 900px, highlighted card first.

Build only a testimonial carousel component.

Product surface: a slider of quote cards, each with a large quote, an author avatar + name + company, and a 5-star rating. Prev/next arrows and dot indicators; auto-advance every 6s but pause on hover or focus.
Context: social proof on a marketing page.
Constraints:
- shadcn/ui (Carousel built on embla, Avatar), Tailwind, TypeScript. Stub 4 testimonials.
- Tokens: card bg #FFFFFF border #E2E8F0, quote #0F172A weight 500, meta #64748B, star #F59E0B, radius 0.75rem.
- States: slide active / entering / leaving. Arrows default / hover / focus / disabled at ends (if not looping). Dot active / inactive. Auto-play running / paused.
- Accessibility: region with aria-roledescription "carousel", arrows and dots are labelled buttons, auto-advance pauses on focus/hover and respects prefers-reduced-motion, live-region announces the current slide.
- Responsive: 1 card on mobile, peek of the next card on desktop.

Build only an inline call-to-action banner component.

Product surface: a rounded gradient banner with a headline, a supporting line, a primary "Start free trial" button and a secondary "Book a demo" link, plus an optional dismiss (×).
Context: dropped between content sections or at the end of a page to drive signups.
Constraints:
- shadcn/ui (Button), Tailwind, TypeScript.
- Tokens: gradient from #4F46E5 to #7C3AED, text white, radius 1rem, headline weight 700, secondary link underlined on hover.
- States: primary button default / hover / focus / loading. Secondary link default / hover / focus. Dismiss default / hover / focus. Banner: visible / dismissed.
- Accessibility: sufficient contrast of text on the gradient (verify 4.5:1), dismiss is a labelled button, buttons keyboard-reachable with visible focus rings.
- Responsive: stack text above buttons below 640px, full-width buttons on mobile.

Build only a reusable empty-state component.

Product surface: a centered block with an inline SVG illustration, a heading [No projects yet], a one-line explanation, and a primary "Create project" button plus an optional secondary "Import" link. Support a compact variant (smaller, no illustration) for use inside cards and tables.
Context: shown when a list, table, or search has no results, so it must double as both a first-run and a no-results state.
Constraints:
- shadcn/ui (Button), Tailwind, TypeScript. Use a simple inline SVG placeholder illustration.
- Tokens: heading weight 600 #0F172A, body #64748B, primary #4F46E5, max-width 420px, centered.
- States: default (first-run) / no-results (different copy passed via props: "No results for '[query]'" + "Clear filters"). Primary button default / hover / focus / loading. Compact vs. full variant.
- Accessibility: heading is an h2/h3 in context, illustration marked aria-hidden (decorative), the primary action is the natural next step and keyboard-reachable.
- Responsive: comfortable padding, scales down cleanly on mobile.

Build only a toast notification component and its trigger demo.

Product surface: stacked toasts in the bottom-right, each with a variant icon [success, error, warning, info], a title, an optional description, an optional action button [Undo], and a dismiss ×. Toasts auto-dismiss after 5s with a subtle progress bar; hovering pauses the timer. Include buttons to fire each variant.
Context: transient feedback after an action (saved, failed, copied).
Constraints:
- shadcn/ui (Sonner / Toast), Tailwind, lucide-react, TypeScript.
- Tokens: success #16A34A, error #DC2626, warning #F59E0B, info #4F46E5, panel bg #FFFFFF border #E2E8F0, radius 0.75rem.
- States: toast entering (slide+fade) / visible / paused (on hover) / leaving. Action button default / hover / focus. Stacking of multiple toasts.
- Accessibility: container is an aria-live region (polite for info/success, assertive for error), each toast is dismissible by keyboard, action and dismiss are labelled buttons, respects prefers-reduced-motion.
- Responsive: full-width toasts at the bottom on mobile.

Build only a set of skeleton loader components that mirror real content.

Product surface: three skeletons — a card skeleton (image block + 2 text lines + button), a table-row skeleton (avatar circle + 3 bars), and a list-item skeleton (2 lines) — each with a gentle shimmer animation. Show a demo laying out several of each.
Context: placeholder UI shown while data loads, matched to the eventual layout to avoid layout shift.
Constraints:
- shadcn/ui (Skeleton), Tailwind, TypeScript.
- Tokens: base #E2E8F0, shimmer highlight #F1F5F9, radius matching the real components (0.75rem cards, full circles for avatars).
- States: shimmering (default) and a static fallback when prefers-reduced-motion is set (no animation, just the base blocks).
- Accessibility: skeleton containers marked aria-hidden or aria-busy on the region so screen readers don't read placeholder noise, animation respects prefers-reduced-motion.
- Responsive: skeletons match the responsive layout of the components they stand in for.

Before building, set up shared design tokens so every component I ask for next matches. Add these to my Tailwind theme and shadcn/ui CSS variables, and use them for all future components in this session:

Colors: primary #4F46E5, primary-hover #4338CA, foreground #0F172A, muted #64748B, border #E2E8F0, success #16A34A, warning #F59E0B, destructive #DC2626, background #FFFFFF.
Radius: sm 0.375rem, md 0.5rem, lg 0.75rem, xl 1rem.
Typography: Inter; body weight 400, medium 500, semibold 600, bold 700; base size 16px, scale 1.25.
Spacing base 4px; container max-width 1200px; focus ring 2px primary with 2px offset.
Shadows: card shadow-sm at rest, shadow-md on hover.

Apply these globally. When I ask for a component after this, use these tokens by name and keep light/dark parity. Confirm the theme is set, then wait for my next component request.