@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.

Form with grouped fields, labels, and submit area.

Form layout with columns or sections and actions.

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.

Multi-step onboarding dialog with radio and checkbox fields.

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.

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

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.

Minimal studio navbar with pill social links and a hamburger that opens a fullscreen dark menu with oversized typography, contact info, and socials.

Navbar with centered or split links and optional search.

Header with logo, nav items, and primary/secondary actions.

Navbar with logo, centered links, Sign in link, and Register CTA button.

App-style navbar with left-aligned links, message and notification icons, and user avatar.

Navbar with filled search field next to the logo, nav links, action icons, and avatar.

Navbar with left links and a rounded outlined search input beside action icons and avatar.

Navbar with minimal inline search and a user dropdown menu with avatar and name.

Compact navbar with logo, large centered search bar, action icons, and avatar.

Newsletter signup with headline, short text, and email input plus button.

Subscribe block with copy and inline or stacked form.

Email signup section with optional headline and CTA.

Centered newsletter section with floating community avatars, email input, and social proof count.

Dark two-column newsletter section with headline, email form, disclaimer, and decorative envelope illustration.

Two-column newsletter section with badge, headline, email form, subscribe button, and feature list beside a large image.

Split newsletter section with a full-height image on the left and email form with headline and disclaimer on the right.

Full-width background image newsletter with centered text and inline email form.

Pricing cards in a row with plan name, price, feature list, and CTA button.

Pricing section with tier cards and feature comparison.

Pricing grid or list with plans and highlight for a featured tier.

Pricing layout with multiple plans and feature checkmarks.

Pricing table with plan cards and optional badge or popular label.

Compact or expanded pricing blocks with CTA per plan.

Pricing section with headline and tier cards in a row.

Four-column stats section with animated counters, bold values, suffixes, labels, and short descriptions on a bordered-left layout.

Two-column stats section with a plain label, bold heading, description, and three inline animated stats on the left, and two stacked feature cards with orange …

Two-column stats section with badge, heading, description, and three inline animated stats on the left, and a 2x2 feature card grid with lime icon badges on th…

Three-column stats section with a bold heading and 2x2 animated stat grid on the left, a full-height portrait image in the center, and description paragraphs w…

Centered stats section with a pill badge, two-line heading with a highlighted word, and three large bordered cards each showing an animated number and label.

Three staggered stat cards with icon badge, large light-weight animated number, and a bolded description. Middle card is offset downward for visual rhythm.

Two-column stats section with a dashed Indicator label, bold heading, and a star rating row on the left, and a 2x2 animated violet stats grid on the right.

Full-width blue-to-indigo gradient card with four animated stats in a row, separated by translucent dividers, and a decorative blur blob on the right.

Bordered card with two columns: a large bold heading with a green emphasis line on the left, and three vertically stacked animated stats separated by dividers …

Two-column bordered card with an indigo ROI badge and heading. Left side shows two animated stats and a decorative SVG area chart. Right side has a heading, de…

Dark two-column stats section with a product image on the left and a pill badge, bold heading, description, and two large animated stats on the right.

Dark-themed 2x2 stats grid with corner bracket decorations, amber animated numbers, a bold two-line heading on the left, and a small italic tagline on the righ…

Grid of team cards with photo, name, role, and optional links.

Fan-style portrait cards with rotation effect, gradient overlay, and a tagline pill.

Two-column layout with heading and CTA on the left, five-photo masonry grid on the right.

Two-row pill card layout with grayscale photos, offset rows, and edge gradient masks.

Team member cards in a row or grid with avatar and bio.

Section with headline and team profile cards.

Layout showcasing team with photos and short descriptions.

Team grid or list with avatar, name, and role per card.

Editorial team section with full-height grayscale portraits, section number, and description.

Accordion-style team cards with pastel backgrounds that expand on hover to reveal name and title.

Leadership grid with name, role, bio, and portrait photo per card.

3x2 grid with a CTA card and five team member photo cards with social links.