@shadcnuikit

Chart block with title and single or multi-series data viz.

Chart card with visualization and legend.

Chart with single or multiple series and labels.

Chart block with title and data viz.

Chart layout with axis and series.

Chart with grid background and data display.

Chart card with visualization and optional controls.

Chart with title and legend.

Data chart with axis and series.

Chart block for dashboard metrics.

Chart with visualization and optional subtitle.

Chart card with legend and optional timeframe.

Chart card with title and data viz.

Dashboard chart with axis labels and data series.

Chart layout with title and visualization.

Chart with grid or card wrapper and optional controls.

Data chart with legend and axis.

Chart block for line, bar, or area visualization.

Chart with title and data display.

Dashboard chart with optional subtitle or filters.

Inset sidebar with quick create button, grouped navigation, documents list, user menu, and a site header above an empty content area.

Double sidebar with an icon rail on the left, workspace switcher, grouped navigation links, and a site header above an empty content area.

Narrow rail sidebar with stacked icon and label items, bottom shortcuts, avatar, and a site header with breadcrumb above an empty content area.

Rounded icon rail sidebar with a tall dark header holding title, search, icon buttons, and a primary action, with the content area overlapping the header.

Top navbar shell with horizontal links, icon actions and avatar, a gradient page header with filter and create buttons, and a mobile drawer sidebar.

Full-width top navbar with horizontal links, icon actions and greeting avatar, plus a static grouped sidebar with count badges that scrolls with the content.

Floating card sidebar with logo and avatar, goal progress with budget stats, a grid of service tiles, footer icons, and a minimal top navigation.

Floating card sidebar with grouped navigation and user menu, paired with a floating card header above an empty content area.

Shell with a horizontal top navigation on desktop that collapses into a vertical sidebar on mobile, with logo, theme toggle, and user menu.

Form with grouped fields, labels, and submit area.

Form layout with columns or sections and actions.

Split sign up dialog with social login and email form.

Multi-step onboarding dialog with radio and checkbox fields.

Feedback dialog with emoji mood selector and comment box.

Rating dialog with selectable emoji cards and actions.

Product feedback dialog with emoji rating, comment, and consent.

Plan selection dialog with pricing cards and checkout action.

Feedback form dialog with area select and description field.

Confirmation dialog with icon, message, and dismiss button.

Delete confirmation alert dialog with icon and actions.

Report dialog with reason radio group and optional comment.

Notification settings dialog with described radio options.

OTP verification dialog with resend and edit options.

Command palette dialog with grouped actions and shortcuts.

Workspace members dialog with search, invite, and roles.

New project dialog with date picker, selects, and visibility.

Profile settings dialog with photo upload and contact fields.

Activity dialog with tabs, notification list, and actions.

Upgrade checkout dialog with payment form and plan options.

Company profile dialog with upload area and form fields.

Quiz builder dialog with dynamic answers and file upload.

Integration connect dialog with permissions and consent.

Sign up dialog with password strength meter and consent.

Two factor setup dialog with live QR code and setup key.

Modal with title, content area, and action buttons.

Dialog layout with header, body, and footer actions.

Modal or dialog with form or confirmation content.

Share dialog for managing member access and roles.

Account switcher dialog with selectable account list.

Dashboard page with header and main content area.

Page layout with sidebar, top bar, and content.

Full page structure with nav and content region.

Layout with collapsible sidebar and main content area.

Login form with email, password, and submit button.

Sign-in layout with fields and optional social or link.

Login form with card layout and primary CTA.

Card with metric value, label, and optional trend.

Stat card with number, subtitle, and optional icon.

Metric card with value and label in a compact layout.

Stat block with headline number and description.

Card showing a KPI with optional sparkline or icon.

Metric card with value, label, and styling.

Stat card with number and subtitle.

Dashboard stat block with value and optional trend.

Simple invoice table with caption, status, payment method, and footer total.

Transaction history table with date picker filter, category filter, card account details, and numbered pagination.

Projects table with add project dialog, archive tabs, sorting, search, status filters, progress bars, and list or grid view.

Product inventory table with sortable columns, status filter, CSV export, add product dialog, page size selector, and pagination.

Contacts table with group chips, date and status filters, search, pagination, and a slide-out sheet with contact edit form.

Orders table with expandable accordion rows revealing the products of each order with quantities and totals.

Contact details table with label and value rows, copy buttons, owner avatar, status badge, and tags.

Payment list with card style rows, sortable headers, inline transaction detail columns, quick actions, and pagination.

Task list grouped by status with collapsible tinted group headers, priority badges, due dates, assignee stacks, and priority filtering.

Properties table with a fixed first column that stays pinned over the other columns on horizontal scroll, built with TanStack column pinning.

Data table with columns, rows, and optional actions or badges.

User management table with avatars, role badges, status indicators, social profiles, toggles, and pagination.

Team members table built with TanStack Table, featuring sorting, row selection, team badges, edit dialog, and numbered pagination.

Invoice table with status tabs, search, creator filter, and date sorting built with TanStack Table.

Billing invoices table with status filter dropdown, search, payment breakdown, and colored status badges.

Customers table with sortable columns, payment method logos, category badges, clickthrough progress bars, and filtering.

Orders list with status tabs and counts, row selection, assignee avatars, task and comment chips, and status indicators.

Patient orders table with segmented status filters, colored status dots, product badges, and days-in-status counters.

Checkout page with product list, shipping options, payment methods, and order summary.

Checkout page with product list, shipping options, payment methods, and order summary.

Checkout page with product list, shipping options, payment methods, and order summary.

Checkout page with product list, shipping options, payment methods, and order summary.

Checkout page with product list, shipping options, payment methods, and order summary.

Two-column section with heading and CTA on the left and three stacked, color-coded review cards with avatars on the right.

Compact review summary card with average star rating, total count, and a per-star percentage breakdown with progress bars.

Full review listing with average score, product image thumbnails, sort dropdown, review cards with thumbs up/down, and pagination.

Two-column layout with a searchable, filterable review list on the left and a rating summary with breakdown bars on the right.

Single review card with avatar, star rating, title, body text, verified badge, photo thumbnails, and helpful/unhelpful vote buttons.

Reviews dashboard with total count, average rating, mini distribution chart, and a list of review cards with comment, message, and like actions.

Dark navy carousel section with heading, arrow navigation, and review cards showing avatar, name, stars, and text. Snap-scroll on mobile.

Two-column layout with a sidebar showing rating breakdown and customer preference votes, and a main panel with a studio banner and detailed review cards.

Review summary with rating bars, customer photo grid with lightbox carousel, and a comment card carousel with avatar, stars, and text.

Clean product card grid with image, color swatches, star rating, wishlist toggle, and price.

Cart summary card with product thumbnail, size, quantity, wishlist toggle, estimated total, and Shop Now action button.

Skincare product card with hover interaction: default shows product on white, hover reveals lifestyle photo with Add to Cart button and size selector.

Mobile-style product card with badge, wishlist button, image carousel dots, brand label, and Buy Now CTA.

Single product card with badge, wishlist toggle, dot indicators, brand label, and Buy Now button.

Horizontal product card with image on the left, star rating, Quick View button, description, and color swatches.

Product card with discount badge, action buttons, live countdown timer, and strikethrough pricing.

Minimal skincare product card with warm cream palette, serif heading, italic description, and dark Add to Cart button with inline price.

Full-bleed product card where the image is the background, with overlaid star rating, wishlist, name, price, and cart button.

Real estate investment listing card with property image, active badge, features row, and token price/IRR/APR metrics.

Real estate listing card with full-bleed photo and frosted glass overlay showing price range, address, features, and star rating.

Category section with products in a grid or list.

Category block with headline and product cards.

Category layout with filters or tabs and product grid.

Category page section with products and optional sidebar.

Editorial grid layout with a featured collection panel and two stacked category tiles.

Full-width hero banner with interactive product hotspots and a membership CTA.

Alternating split-panel layout with bold typographic headings and product imagery.

Three-column editorial layout with flanking model images and centered text content.

Room category grid alternating between image tiles and text-only cells in a checkerboard pattern.

Product page with image gallery, title, price, and add-to-cart.

Detail layout with main image, specs, and purchase CTA.

Product view with gallery, description, and options.

Detail section with images and key info side by side.

Product block with image, price, variants, and CTA.

Layout with product images and details column.

Product detail with gallery, specs, and add-to-cart.

Section highlighting product features with icons or bullets.

Product benefits or specs in a list or grid.

List of product cards with image, title, price, and action.

Product list layout with thumbnails and key details.

Grid or list of products with image and info.

Product listing with cards and optional filters.

Product rows or cards with price and CTA.

Product list section with consistent card layout.

Listing of products with image, title, and actions.

Product grid or list with thumbnail and details.

Quickview dialog or panel with product image, title, price, and CTA.

Compact product preview in a modal or drawer.

Promo block with headline, copy, and CTA or offer highlight.

Shopping cart block with product list, total, and checkout button.

Shopping cart block with product list, total, and checkout button.

Cart UI with coupons, gift wrap, and a price details summary.

Shopping bag sheet with compact item list and totals.

Store nav with categories or links for browsing products.

Changelog with sidebar search and filters, and dated entries with author avatars.

Changelog layout with list of releases and expandable or linkable items.

Simple changelog list with dates, titles, and short descriptions.

Changelog page with timeline or grouped entries and optional sidebar.

Two-column contact section with an interactive map on the left and booking, call, and directions cards on the right.

Minimal three-row contact section with section labels, separated by dividers, showing email, address, social links, and phone in a clean grid layout.

Two-column contact section with large watermark heading, feature checklist and social icons on the left, contact form on the right, and three info cards at the…

Full-bleed background image contact section with a dark overlay, large heading and info grid on the left, and a white form card with inquiry type pills and sub…

Centered contact section with a dotted world map SVG showing global office markers and a Melbourne tooltip, below which are four channel cards for sales, suppo…

Two-column contact section with large heading, description, and trusted brand logos on the left, and a form card with name, email, company, and message fields …

Three-column contact section with heading on the left, an underline-style form card in the center, and contact info blocks on the right.

Full-bleed background image contact section with a floating form card featuring underline inputs, privacy checkbox, and a rounded send button.

Three-column contact section with large heading on the left, stacked contact groups in the center and right, and social links beside a wide image at the bottom.

Two-column contact section with a full-height portrait image on the left and a contact form with first/last name, email, message fields, send button, and an in…

Three-part contact section with heading and address/contact info cards on top, a full-width interactive map with Get Directions button, and a Request a Demo fo…

Two-column contact section with a form card on the left and direct contact info, interactive map, and office address card on the right.

Warm-background contact section with centered heading, three channel cards (chat, email, phone) with colored icon circles, and a footer availability note.

CTA block with headline, short text, and one button on a gradient background.

CTA block with emphasis headline and single or dual buttons.

Two-column CTA with inline expert avatars in heading, description, lime call button, and service cards with arrow links.

Centered CTA with headline, text, and two buttons over a grid pattern.

CTA section with headline, supporting copy, and primary button.

Compact CTA with headline and call-to-action button.

CTA block with headline, description, and button group.

Section with headline, subtext, and one or more CTA buttons.

CTA layout with centered or split headline and buttons.

Simple CTA with headline, short text, and primary action.

CTA with headline, supporting copy, and button row.

Centered FAQ section with a label, headline, description, and accordion list of questions.

Bordered card FAQ with FAQ badge, heading, avatar group on the left, and a plus/x accordion on the right.

Two-column FAQ section with label, bold heading, and description on the left, and an accordion list on the right.

Centered FAQ section with a category sidebar, accordion questions, and a contact support card at the bottom.

Two-column FAQ with a large heading and contact button on the left, and a circle-icon accordion on the right.

Grid FAQ section with a badge, heading, description, 3-column Q&A grid, and a contact CTA bar at the bottom.

Tab-filtered FAQ with bordered accordion cards and a Book a free call CTA at the bottom.

Editorial minimal FAQ with uppercase questions, answer revealed in right column, and italic serif FAQ's heading.

Two-column FAQ with avatar, booking CTA on the left, and a bordered accordion list on the right.

Two-column FAQ with bold heading on the left, accordion list, and a full-height image on the right.

Grid of feature cards with icons, title, and short description.

Section with feature list and supporting headline.

Feature grid or list with icons and descriptions.

Feature cards with icon, title, and copy in a structured layout.

Feature section with alternating or grid layout and visuals.

Feature block with headline and icon-plus-text cards in a grid.

Section with feature list or cards and optional image or illustration.

Features in a row or grid with icons and descriptions.

Two-column or alternating layout for features with copy and visual.

Feature grid with icon, title, and body text per item.

Feature section with headline and card or list layout.

Layout highlighting multiple features with icons and short text.

Feature blocks with optional numbering or badges.

Footer with link columns, logo, and optional newsletter or social links.

Dark purple CTA footer with gradient swirl background, italic serif heading, two action buttons, and a slim translucent bottom nav bar.

Luxury footer with dark hero panel, cream contact section with Visit/Write/Call rows, newsletter signup, and pipe-separated nav bar.

Full blue footer with large CTA headline, outlined pill button, brand column with social icons, and three-column nav links.

Multi-column footer with nav links and bottom bar.

Compact or full footer with links and copyright.

Footer layout with columns and optional CTA or form.

Footer with nav groups, social icons, and legal links.

Dark footer with newsletter signup card, brand column, nav groups, social icons, and scroll-to-top button.

Dark green footer with serif headings, pill CTA, contact column, two-column quick links, and diamond-separated bottom bar.

Light footer with centered CTA section above a card containing brand, nav columns, social icons, and bottom credits bar.

Minimal white footer with large bold nav links, social links with arrow icons and dividers, and a slim bottom bar.

Centered hero with a small announcement badge, headline, short text, and two buttons.

Centered hero with badge, headline, one CTA, and a full-width screenshot below.

Dark gradient hero with glass nav, centered content, and a horizontal photo marquee.

Centered hero with avatars and stars, headline, two buttons, and a brand logo strip.

Two-column hero with badge, headline, and buttons on the left and vertical image marquees on the right.

Full-screen image hero with dark overlay, nav, and headline with one CTA at bottom left.

Centered hero with badge, headline, two buttons, and a row of avatars with star rating.

Centered hero with a version badge, headline with one highlighted word, and two buttons.

Full-height hero with gradient, nav, centered headline, prompt input, and suggestion chips.

Two-column hero: left side text with badge and buttons, right side grid of cards and avatars.

Two-column hero with badge and headline on the left, product image grid on the right, and stats below.

Two-column hero with headline and email signup on the left, animated icon orbits on the right.

Centered hero with pill-shaped nav, badge, headline, two buttons, and a stat cards grid.

Full-width image hero with nav, centered headline, and an inline booking form with stats.

Centered section with badge, heading, and three icon steps connected by dashed curved lines.

Centered heading with uppercase label and three bordered cards each showing an image, bold title, description, and a Learn more link.

Three-column layout with heading and two steps on the left, a portrait building image in the center, and description with two steps on the right.

Two-column layout with a full-height image on the left and numbered steps with dividers on the right.

Minimal centered layout with heading, subtitle, and three steps separated by dividers with inline number badges.

3-column grid with a heading card on the top-left and five bordered step cards each showing a number badge, title, and description.

Editorial layout with a slash-prefixed heading, a dark hero card for step 01, and outlined pill-badged rows for steps 02–04.

Centered heading with italic label, and three bordered cards each showing a large watermark number, bold title, and description.

Two-column interactive layout with an image panel on the left that switches per step, and auto-advancing steps with progress bars on the right.

2x2 grid layout with four steps each showing a number, heading, description, and an inline UI mockup card below.

Section with integration logos or cards in a grid.

Integration list or grid with icons and short labels.

Block showcasing connected apps or platforms with logos.

Integrations section with headline and logo grid.

Layout with integration cards or logo strip.

Section listing integrations with optional descriptions.

Top nav with logo, links, and CTA button; mobile menu.

E-commerce navbar with centered serif brand, mega menu with category columns, and account, search, and bag icons.

Fashion store navbar with uppercase links, centered brand, mega menu combining link columns and featured image cards, and search, account, wishlist, and bag ic…

Clothing store header with dark top bar, social icons, search field, centered brand over nav links, and a mega menu with product columns and featured image car…

Course platform navbar with dismissible gradient announcement bar, mega menu of icon category cards with promo panel, search field, and auth buttons.

Agency navbar with icon-tile dropdown menus, featured first item with long description, a resources menu with promo card, and a rounded CTA button.