shadcn KitDesign system

Overview

Components

Button
Badge
Avatar
Card
Input
Field
Select
Dropdown Menu
Dialog
Sheet
Tabs
Accordion
Tooltip
Table
Chart

Blocks

Templates

All templates

Gallery

Design system

shadcn Kit

A personal frontend factory: the full stock shadcn/ui component set, an authored library of blocks and page templates, and this gallery to preview them — all in the project's oceanic theme, across light and dark. Press d to toggle the theme.

Components

15 in the gallery

Clickable action trigger — variants, sizes and states.

Compact status or category label.

User image with graceful initials fallback.

Surface for grouping related content.

Single-line text field, including states.

Label, description and error wiring for form controls.

Dropdown for choosing a single option.

Menu of actions triggered by a button.

Modal overlay for focused tasks.

Side panel overlay for secondary flows.

Switch between panels of content.

Vertically stacked, collapsible sections.

Contextual hint on hover or focus.

Rows and columns of structured data.

Recharts wrapper themed with --chart-1..5.

Blocks

Browse templates →

Marketing site header with responsive sheet menu.

Centered marketing hero with CTAs and a preview frame.

Two-column hero — accent title, CTAs, review ratings, framed photo.

Row of customer/brand marks.

Icon-block feature grid with heading.

Grid of customer quote cards.

Pricing Section

Pricing tiers with a featured plan, on a tinted panel.

Accordion of frequently asked questions.

Full-width call-to-action band.

Multi-column marketing footer with socials.

Kanban issue card — assignees, priority, labels, progress; opens a detail dialog.

Status columns of issue cards — color menu per group, counts and add-task affordances.

In-app billing plans — monthly/annual toggle, tier marks, current-plan and upgrade CTAs.

Compact KPI card — value, trend pill and an inline sparkline.

Marketplace Table

Flagship analytics grid — saved views, banded header, frozen edges, virtualized rows with inline drill-down.

28 metrics under a two-tier banded header; whole bands toggle off at once.

SKU × period heat matrix with all four edges frozen and row/column totals.

Category → brand → SKU drill-down; sums roll up, ratios recompute.

10 000 virtualized rows — resizable columns, facets, selection and a bulk bar.

Quadrant Scatter

Volume × margin map — four quadrants, four decisions; median split, bubble = units sold.

Bars and a line on one time axis with dual scales, a target threshold and event markers.

Where one sale's money went — floating bars from price to profit, with each deduction's share.

Actual vs target with qualitative bands; a single row is compact enough for a table cell.

Conversion funnel where the step-to-step rates lead, benchmarked to flag the leaking step.

Payout Reconciliation

Own model vs the marketplace's settlement report — delta per cause, with a guard for anything the lines don't explain.

Cash Gap Timeline

Weekly running balance against payout lag — flags the weeks a profitable catalogue still runs out of cash.

Value × demand-stability grid; nine cells, nine standing restock decisions.

ABC analysis — ranked contribution with a cumulative curve and the 80% cut-off stated in words.

A number that shows its own arithmetic on click, and flags a breakdown that doesn't add up.

Cost Structure Bar

100% stacked per-unit costs — comparable across price points; below-cost SKUs overflow instead of clipping.

Category Treemap

Composition by area for many categories at once; small tiles fall back to a numeric list.

Combo Chart + Brush

The combo chart over 90 days with a range selector — opt-in, since a brush only pays past ~30 points.

Cohorts across later periods — delivery batches by sell-through week; unreached cells stay blank, never zero.

Per-feed staleness badge reporting the oldest source, with a deterministic `now` prop instead of Date.now().

Prioritised "what's on fire" zone above the KPI row — toned rows with the affected objects, an action slot, and an all-clear state.

Operational KPI tile that carries a health tone, links to where the number is acted on, and takes an optional sparkline.

Named counts for one standing concern — toned values, links, and a slot naming the objects behind a count.

Chronological findings feed — keyboard-operable rows, an attention filter, and separate empty vs filtered-empty states.

How one total divides — two figures over a split bar, or over countable pips when the total is small enough to verify.

Ranked rows carrying their own bar; behind the label when figure columns follow, trailing it when the share is the message.

Composition Card

A total broken into named sources — stacked bar over the legend that reads it back, with the people behind it.

A week of logged time as countable pips per day; the delta from target is printed inline on narrow screens, not hover-only.

A number against its ceiling — knob on the track, both scale ends named, optional tabs for the same goal in another unit.

Survey Overview Card

A survey's summary strip — goal progress beside the invitation outcomes, so the flattering number never travels alone.

Poll Results Card

One closed question answered — every option's share and raw count on a shared 0–100 scale.

Scale Distribution Card

An opinion scale as columns, where a bimodal split is visible and the average is demoted to a quiet pill.

A count across an ordered severity scale; three-pip rank marks carry the ordering where colour alone can't.

Funnel Status Card

A funnel as stacked either/or splits — the losing branch drawn full size, the unreached remainder hatched.

Rating Gauge Card

Period headlines over a continuous qualitative scale — named bands, knob for the reading, no hard band edges.

Marketplace chrome: address and locale topbar, catalog mega-menu, search, account/favourites/cart widgets and a scrolling nav row.

Link columns with app-store buttons, social marks, accepted-payment row and the legal line.

Storefront hero — full-bleed photo slides with an overlay scrim and a gradient promo slide with a tilted product cluster.

Image with favourite toggle, stock/sale badges, price with strike-through, sold count, rating and an optional add-to-cart.

A product section: header with 'view all', the grid, and the one quick-view dialog shared by every card in it.

Product Carousel

The product grid's rail sibling — same card, dragging, header arrows.

Four-up promo tiles — image left, label right — for the row under a hero.

Category Carousel

Portrait category cards on a draggable rail, in a compact and a tall variant with a call-to-action pill.

Scrolling interest/subcategory selector with a fade at the cut-off edge so overflow reads as scrollable.

Listing facets — checkbox groups with in-group search and show-more, a sale switch, colour swatches, rating rows and a price range.

Product Gallery

Thumbnail column driving a large preview — the thumbnails are the carousel's pagination in both directions.

The product page's right rail: variants, price, stock and quantity, purchase actions, shipping/returns/checkout rows and the seller card.

Rating summary over star-bucket tabs, with review cards, photo strips and an empty state for buckets with no reviews.

Dotted-leader spec table with a copyable article code, a collapse for the long tail and the 'about this item' bullets.

Alternating image and copy pairs for the long-form part of a product page.

Shop-by-brand row — wordmarks set in the theme's own type, no baked-in brand colour.

Storefront Header

Boutique chrome: centre mega-nav, full-screen search, favourites dropdown, cart drawer and account menu.

Storefront Footer

Newsletter capture over link columns, with location and currency pickers and the theme toggle.

Full-screen search — recent queries filter live and a trending rail sits underneath.

The header's cart offcanvas: promo banner, line items with options, running total and checkout.

Cart page items grouped by shipment, each with a quantity select, favourite and remove.

Totals card with derived lines, tooltip hints and a collapsible promo-code field.

Progress rail where completed steps stay clickable and later ones don't.

Apparel buy panel — colourway and size before price, stock, shipping notes and a details accordion.

Side-by-side comparison; product headers stay put while attribute rows scroll.

One order in the history list: status, number, date, total and its items.

Vertical order progress with timestamps on the steps already passed.

Saved Address & Cards

Address book and stored payment methods, with a dashed add-tile.

Account Sidebar

Account-area nav — a static column from lg up, the same list in a Sheet below it.

Category teasers built from a three-image collage.

Service Highlights

The reassurance row — payment, delivery and returns.

Search band over topic cards; the field filters the cards instead of pretending to submit.

Marketplace buy rail — size before price, a delivery date tied to the chosen pickup point, and an add-to-cart that refuses to run without a size.

Размерная сетка behind a dialog, with the shopper's current size highlighted in the table.

Delivery Method Cards

Pickup / courier / post as selectable cards — each one shows when, how much, and what you can do at handover.

Pickup Point List

Пункты выдачи with search, rating, arrival date and price; filtered-to-nothing names the query that emptied it.

Pickup Code Card

The code read out at the counter: largest text on the page, address under it, storage deadline, one copy action.

Search, sort, company/stage filters, row selection with a bulk bar, row menus and paging — all local state, no store required.

Customer Header

Identity block above the detail tabs: list membership popover, email composer, call sheet, edit/archive/delete.

Customer List Sidebar

Master list beside the detail view — searchable, marks the active route, collapses into a Sheet below xl.

Underlined section tabs that are real routes; the longest matching href wins so nested pages light one tab.

Definition row with an inline clipboard button — confirms in place, falls back to a toast when the browser blocks it.

Activity Timeline

Vertical activity rail with per-kind filters and a note composer that prepends to the feed.

Bookings with a status filter, attendee stack, reschedule dialog and a cancel confirmation.

Invoice cards whose line items expand; download, print, share and mark-as-paid all act.

Progress ring driven by the checklist beside it — ticking a task moves the dial, so the two can't disagree.

Kanban pipeline: rename and recolour columns, hide or delete a group, move a deal by menu (works on touch and keyboard).

Result list with counted filter tabs, a live refine field, load-more with a real spinner and a named empty state.

Notification Menu

Tabbed inbox/archive panel — per-row mark-read and archive, mark-all footer, empty state per tab.

Command Palette

⌘K / “/” overlay with topic chips that seed the query, grouped results and key hints in the footer.