shadcncraft
404 1 – Minimalist error page with navigation recovery actions404-1A clean and centered error page design for handling "Page not found" scenarios. The layout features a clear information hierarchy starting with the "404" status code, followed by a bold headline and a brief, friendly explanation. Below the text, two distinct call-to-action buttons—a primary "Back home" and a secondary "Go back" with an arrow icon—provide users with immediate paths to resume their browsing.
404 2 – Visual 404 error page with immersive split-screen layout404-2A modern and emotionally engaging error page that uses a split-screen composition. The left side provides clear, left-aligned information: the "404" status code, a bold headline, a supportive description, and two navigation recovery buttons. The right side features a high-impact, artistic image that reflects the brand's aesthetic, transforming a negative technical moment into a stylish brand experience.
404 3 – Error page with multi-channel support contact cards404-3A comprehensive error recovery page designed to provide immediate assistance. The top section maintains the standard 404 messaging and primary navigation buttons. Below, the layout features a horizontal grid of three informative cards, each offering a different support channel. This proactive design ensures that users who encounter a dead end can easily find a way to get help.
404 4 – Error page with conceptual plug illustration404-4A creative balanced error page that uses a custom illustration to communicate a technical disconnect. The layout features a two-column split: on the left, a stylized illustration of two disconnected blue plugs; on the right, the "404" status code, a bold headline, and a friendly message explaining the potential reasons for the error. The recovery path is clearly defined by two primary action buttons.
404 5 – Error page with immersive image and support directory404-5A highly functional error page that utilizes a balanced grid system. The layout is dominated on the right by a large, atmospheric image with rounded corners. The left side is divided into two clear zones: a top section containing the "404" status code, headline, and primary buttons, and a bottom section featuring a three-column support directory. This directory provides direct links for Email, Phone, and Live Chat.
404 6 – Split-screen 404 page with high-contrast editorial visual404-6A modern error page that utilizes an inverted split-screen layout. A large, stylized editorial image with rounded corners is positioned on the left. The right side contains the focused messaging area, featuring the "404" status code, a bold headline, and the standard recovery buttons. This composition provides a high-end feel, turning a common navigation hurdle into a curated brand moment.
Activity Feed 1 – Filterable timeline with inline contextactivity-feed-1A chronological activity feed presented as a vertical timeline, combining user avatars, action summaries, and timestamps for quick scanning. Includes a top search field and segmented filters to switch between activity types. The layout adapts cleanly to smaller screens by tightening spacing and stacking controls while preserving the same linear reading order.
Dashboard 23 – AI insightsai-insights-1Alerts and opportunities surfaced automatically across the funnel.
App Shell 1 – Sidebarapp-shell-1App shell with a standard sidebar, header, and content slot. Collapsed variant included.
App Shell 2 – Floating sidebarapp-shell-2App shell with a floating sidebar, header, and content slot. Collapsed variant included.
App Shell 3 – Inset sidebarapp-shell-3App shell with an inset sidebar, header, and content slot. Collapsed variant included.
App Shell Header 1app-shell-header-1App shell header with a page selector, date range presets, filters, and search.
App Shell Header 2app-shell-header-2App shell header with a breadcrumb, faceted filters, and a search field.
App Shell Header 3app-shell-header-3App shell header with a page selector, applied filters as removable chips, and a search field.
App Shell Header 4app-shell-header-4App shell header with a page selector, filters, and a primary action.
App Shell Header 5app-shell-header-5App shell header with a page selector, a period select, and a date range stepper.
Assistant Panel 1 – Chat docked beside your appassistant-panel-1For products where the chat is a guest rather than the page: a panel docked to the right, opened from a button in your own header, with a menu of past conversations, rename and delete on the open one, and a way out from inside. It holds its open state itself rather than borrowing a SidebarProvider, so the sidebar your app already has keeps its trigger, its shortcut and its collapse. It brings a whole working chat with it, so what your app supplies is the page it sits beside.
Dashboard 10 – Attribution breakdownattribution-breakdown-1Revenue credited by first touch vs last touch, per channel.
Banner 1 – Inline signup bannerbanner-1A low-height horizontal banner with an icon, short message, and inline input with primary action. Designed to sit between sections without breaking page flow. Use for newsletter signups, announcements, or lightweight calls to action that should feel unobtrusive but visible.
Banner 10 – Inline announcement linkbanner-10A minimal announcement banner for low-friction updates. Renders as simple inline text with an optional icon and link, plus a close action. Best for subtle product news or secondary announcements that shouldn't compete with primary page content.
Banner 2 – Dismissible signup cardbanner-2A compact banner presented as a card with icon, short message, input field, and primary action, plus a close control. Designed to float within a layout or sit near content without spanning full width. Use when you want a more prominent call to action than an inline banner, but still lightweight and dismissible.
Banner 3 – Inline announcement banner with actionsbanner-3A low-height horizontal banner with an icon, short announcement text, and multiple call-to-action buttons, plus a dismiss control. Designed to span the content width and draw attention without blocking layout flow. Use for product updates, launches, or time-sensitive announcements that need clear next actions.
Banner 4 – Announcement banner with primary and secondary actionsbanner-4A horizontal announcement banner with an icon, single-line message, two clearly ranked actions, and a dismiss control. Designed to sit inline within a page and support quick decision-making without expanding vertically. Use when you need to promote an update or feature with both a soft action and a strong primary action.
Banner 5 – Consent banner with action groupbanner-5A horizontal banner with an icon, short explanatory text, and a grouped set of actions including primary, secondary, and tertiary options, plus a dismiss control. Designed to sit inline or at page edges without dominating the layout. Use for consent, permissions, or policy-related prompts that require a clear choice hierarchy.
Banner 6 – Consent banner with stacked actionsbanner-6A consent banner that pairs a low-height inline message with a stacked action layout in the card variant. Actions are vertically ordered to clearly separate primary, secondary, and tertiary choices, with a dismiss control included. Use when consent or permission flows need stronger visual hierarchy and clearer decision separation.
Banner 7 – Minimal announcement stripbanner-7A low-contrast, single-line banner with centered text and a close action. No icon or buttons, designed to sit quietly at the top or within content. Use for lightweight announcements or status messages where visibility is needed without drawing strong attention or interrupting flow.
Banner 8 – Inline announcement linkbanner-8A compact announcement banner with inline link styling and a dismiss action. Designed for subtle product updates or release notes where the primary action is a simple text link rather than a button. Works well when you want visibility without visual weight or layout disruption.
Banner 9 – Full-width callout barbanner-9A high-contrast, full-width banner for urgent or high-intent messages like hiring, launches, or announcements. Uses a single clear line of copy with an inline arrow to signal action, designed to span the page edge to edge without secondary actions or dismissal clutter.
Benefits 1 – Alternating rows with text and imagebenefits-1A benefits section with a headline and intro, followed by multiple feature rows that alternate text and visual previews. Each row includes an icon, feature title, short description, bullet points, and a supporting UI image. Use to explain a product's core value areas in a structured, scannable way on landing pages.
Benefits 10 – Full-width media with overlay textbenefits-10A benefits block built around a large, full-width image with short text overlaid directly on the visual. Use to make a single, emotionally driven point where the image carries most of the meaning and the copy reinforces one clear benefit.
Benefits 11 – Emphasized lead with supporting columnbenefits-11A benefits block with a strong headline on the left and a longer supporting explanation on the right, with a clear visual hierarchy between primary and secondary text. Use to reinforce a core positioning message when you want one idea to land clearly without images or feature lists.
Benefits 12 – Two-column icon listbenefits-12A two-column layout that displays a list of items, each paired with an icon, title, and short description. Items flow vertically within each column and adapt to a single column on smaller screens. Use when you need a dense but scannable list with clear visual anchors.
Benefits 13 – Card grid with section headerbenefits-13A layout with a section header followed by a grid of equal-height cards. Each card includes an icon, title, and short text, arranged in a consistent grid that collapses responsively. Use when you need a structured, repeatable set of items with strong visual separation.
Benefits 2 – Alternating rows with actions and imagebenefits-2A benefits section with a headline and intro, followed by multiple feature cards arranged in a staggered grid. Each card includes an icon, feature title, short description, supporting UI image, and primary actions. Use to present key product capabilities when you want each feature to stand alone and drive clicks to demos or deeper pages.
Benefits 3 – Stacked sections with full-bleed mediabenefits-3A benefits section with a headline and intro, followed by stacked feature sections that alternate text and large visual panels. Each feature includes a title, short description, bullet points, and a strong illustrative image. Use when you want to tell a more visual, narrative story around key product benefits rather than drive quick scanning or clicks.
Benefits 4 – Compact icon listbenefits-4A simple benefits block that displays a small set of features as icon-led items with short titles and descriptions. Use when you need to quickly communicate core value points without images, interactions, or deep explanation, such as secondary sections or lower on a page.
Benefits 5 – Icon gridbenefits-5A benefits block with a headline and short intro, followed by a grid of icon-led features arranged in two rows. Each item includes an icon, feature name, and short description. Use to present a broad set of product benefits at a glance without visuals or calls to action.
Benefits 6 – Image-led cardsbenefits-6A benefits block with a headline and short intro, followed by large visual feature cards. Each card pairs a strong image with a feature title and short description. Use when visuals are doing most of the work and you want to communicate product value through imagery rather than text-heavy explanations.
Benefits 7 – Split highlights with supporting listbenefits-7A benefits block with a headline and intro, followed by two primary feature highlights with large images. Secondary benefits are listed below as a compact icon-and-text row. Use when you want to spotlight a small number of hero features while still covering supporting capabilities in the same section.
Benefits 8 – Hero media with supporting listbenefits-8A benefits block with a headline and intro, followed by a single large hero image. Supporting benefits are listed below as icon-led items with short descriptions. Use when you want a strong visual anchor with concise, secondary benefit details for quick scanning.
Benefits 9 – Two-column text layoutbenefits-9A benefits block with a strong headline and supporting text split across two columns. Use to clearly explain a single core value or positioning statement when you need more depth than a short tagline but no visuals or feature lists.
Blog Listing 1 – Featured gridblog-listing-1A responsive blog listing that highlights recent posts in a clean card grid. Includes category, title, read time, author, and date, with a clear section header and optional "See all" action. Works well for homepages or content hubs where you want to surface a small set of featured articles.
Blog Listing 2 – Paginated card gridblog-listing-2A card-based blog layout with a clear section header and a progressive "Load more" pattern. Uses consistent post cards with image, category, title, meta, and author, designed to scale as content grows. Suitable for blog index pages or homepages that need a lightweight, expandable feed without full pagination.
Blog Listing 3 – Featured lead with supporting gridblog-listing-3A blog layout anchored by a large featured post followed by a compact card grid. Emphasizes editorial hierarchy by spotlighting a primary article, then surfacing recent or related posts underneath. Works well for blog homepages where one story should lead, with the rest supporting discovery and ongoing reading.
Blog Listing 4 – Dense editorial gridblog-listing-4A high-density card grid that surfaces many posts at once with equal visual weight. Uses consistent card sizing and rhythm to support fast scanning and browsing. Best for archive pages or content hubs where breadth and discovery matter more than a single featured story.
Dashboard 7 – Campaign performancecampaign-performance-1Top campaigns by leads generated, as a compact data table.
Careers 1 – Job list with metadatacareers-1A simple vertical job list focused on clarity and scannability. Uses a single-column layout with clear role titles and lightweight metadata like location, work type, and salary. Designed to help users quickly compare openings and jump into a role without visual noise.
Careers 2 – Job list with media leadcareers-2A split layout that pairs a job list with a large supporting image. Uses the image to set tone and culture, while keeping roles and metadata clean and easy to scan alongside it. Suitable for careers landing pages where brand and roles need equal weight.
Careers 3 – Card grid job listingscareers-3A multi-column grid of role cards with consistent metadata and actions. Designed for scanning and comparison across roles, with equal visual weight and clear hierarchy. Works well for larger job sets where breadth matters more than storytelling.
Careers 4 – Feature image with listcareers-4A careers layout anchored by a large lifestyle image, followed by a clean vertical job list. Uses imagery to set culture and tone first, then supports focused role scanning. Best when you want to sell the team and environment before the openings.
Careers 5 – Split intro with stacked listingscareers-5A careers layout with a left-aligned intro and a dense, stacked job list alongside it. Prioritizes fast scanning of roles over storytelling. Best for teams with multiple open positions where clarity and comparison matter more than brand imagery.
Dashboard 4 – Channel performancechannel-performance-1Clicks received vs leads converted, by channel, as grouped bars.
Chat 1 – A conversation wired to the AI SDKchat-1A chat that answers the moment it lands on a page, built on the Vercel AI SDK. The message list and the composer come with it, and text, reasoning, tool calls, citations and attachments each get a renderer of their own, so a stream arrives drawn rather than as raw JSON. A scripted conversation stands in until you point it at your own model.
Chat Shell 1 – Thread sidebar with pin, rename, share and deletechat-shell-1The shell around a chat: workspace switcher, new chat, search, thread history grouped by recency with pinned threads on top, and an account menu at the foot. Renaming, pinning, sharing and deleting all work, on demo data you swap for your own backend. Not a generic app shell: everything in it exists for a chat product, and chat-1 is what mounts in the middle. It assumes no router, so it drops into the app you already have.
Checkout 1 – Checkout page with shipping, payment and order summarycheckout-1A comprehensive and professional checkout interface featuring a dual-column layout. The left column is dedicated to user data entry, the right column acts as a fixed "Summary" sidebar, providing a final review of cart items, detailed cost breakdowns (subtotal, shipping, taxes), and the primary action button.
Checkout 2 – Modular checkout with summary and overview sidebarscheckout-2Checkout interface that uses a multi-card layout to prioritize order transparency. It features a "Summary" of items and an "Overview" of costs (including a promo code field) on the left side, while the more extensive "Shipping Information" and "Payment" forms are grouped in a primary card on the right. This arrangement allows users to keep their order details constantly in sight while navigating through the data entry process.
Checkout 3 – Checkout with left-aligned order overview and payment stackcheckout-3A checkout layout that separates order details from data entry through a clean, vertical split. The left column is dedicated to a high-visibility "Summary" of cart items and a secondary "Overview" card for financial totals and promo codes. The right side contains the primary "Shipping Information" and "Payment" sections, using a vertically stacked form design that maintains a clear, linear path for the user to complete their purchase.
Composer 1 – Prompt input with attachments, model and dictationcomposer-1The prompt input, and the hardest part of a chat to get right. Files arrive by picker, drag or paste, each reporting its own upload state; a menu switches tools and connectors on for the turn; the model picker carries reasoning effort with it; and dictation swaps the field for a live waveform without shifting the layout. The unsent draft survives leaving and coming back. Speaks the AI SDK's message shape, and drops into a chat you already have.
Contact 1 – Centered form, single-columncontact-1A centered contact form with a clear headline and stacked inputs. Uses a simple, linear flow that keeps focus on completion. Best for general inquiries where you want minimal distraction and a calm, neutral presentation.
Contact 10 – Split layout with embedded schedulercontact-10A high-contrast contact block using a wide primary panel paired with a secondary sidebar. The layout is designed to showcase an embedded scheduling or booking interface, balancing strong visual weight with a clear, task-focused interaction. Works well when the primary action is time-based or appointment-driven.
Contact 11 – Centered form with supporting sidebarcontact-11A balanced contact layout with a primary, centered form and a secondary sidebar that mirrors or reinforces the same interaction. The main column keeps focus on the form, while the sidebar provides a persistent fallback or alternative entry point. Useful when you want a calm, symmetrical layout with built-in redundancy for conversion.
Contact 2 – Centered form in cardcontact-2A centered contact form wrapped in a card with clear visual boundaries. The card adds emphasis and contrast while keeping the layout simple and focused. Good when the form should feel contained and slightly elevated from the page background.
Contact 3 – Split form with imagecontact-3A two-column layout pairing a contact form with a large supporting image. The image adds personality and visual balance while the form stays clear and readable. Works well when you want the contact section to feel more human and less transactional.
Contact 4 – Multi-channel contact optionscontact-4A centered layout that surfaces multiple ways to get in touch without a form. Uses icon-led contact methods laid out horizontally, with clear labels and availability details. Best when you want to push people to the right channel fast rather than collect messages.
Contact 5 – Global presence with contact methodscontact-5A wide, visual-first layout that pairs a world map with key contact channels. Uses location markers to signal global reach, with email, phone, and live chat grouped below for quick access. Good for companies that want to show scale or multiple offices without pushing a form.
Contact 6 – Map-first contactcontact-6A contact layout built around a large location map, with clear contact methods shown below and in a compact side panel. Works well for businesses with a physical presence where location and availability matter as much as the form itself.
Contact 7 – Image-led contactcontact-7A contact layout anchored by a large, friendly image, with key contact options displayed clearly below and in a side panel. Good for brands that want to feel personal and approachable without using a full form upfront.
Contact 8 – Hero image with channel cardscontact-8A contact layout that pairs a large, edge-to-edge image with stacked contact channels. The image creates visual weight at the top, while card-based options below make it easy to scan and choose how to get in touch. Works well when you want a strong visual anchor without using a form.
Contact 9 – Centered CTA panelcontact-9A minimal contact block built around a single, centered call to action. Uses a contained panel with clear hierarchy and one primary button, making it ideal for low-friction contact moments at the end of a page or between sections.
Dashboard 5 – Cost per acquisition trendcost-per-acquisition-trend-1Daily cost per acquisition as an area trend with period comparison.
CTA 1 – Centered headline with stacked actionscta-1A centered call to action with a strong headline, short supporting copy, and side-by-side buttons. The layout feels more editorial and blends naturally into content-heavy pages. Works well when the CTA should feel integrated rather than isolated.
CTA 2 – Left-aligned headline with inline actionscta-2A left-aligned call to action with a strong headline, short supporting copy, and side-by-side buttons. The layout feels more editorial and blends naturally into content-heavy pages. Works well when the CTA should feel integrated rather than isolated.
CTA 3 – High-contrast panel with stacked actionscta-3A bold, high-contrast CTA presented inside a contained panel, with a centered headline and stacked primary and secondary actions. The strong visual separation makes this ideal for end-of-page moments where the CTA should clearly stand apart from surrounding content.
CTA 4 – High-contrast panel with left-aligned actionscta-4A wide, high-contrast CTA panel with left-aligned content and inline primary and secondary actions. The asymmetric layout creates a strong visual anchor while leaving room for surrounding content, making it well suited for mid-page transitions or section breaks.
CTA 5 – Split content with feature list and mediacta-5A two-column CTA layout combining structured text and a visual panel. Uses a feature list to add scannability and depth, paired with a supporting image or illustration. Works well when the CTA needs a bit more explanation without becoming a full section.
CTA 6 – Feature-led split with primary visualcta-6A split CTA layout anchored by a dominant visual panel, with supporting copy and a short feature list alongside. Emphasizes imagery first, then reinforces the action with structured text and clear primary and secondary buttons. Suitable when visual tone or brand feel needs to carry more weight than the copy.
CTA 7 – Product preview split with feature checklistcta-7A split CTA layout that pairs structured copy and a short feature list with a live product preview or dashboard screenshot. The layout leads with value explanation, then reinforces credibility through a concrete UI example. Works well when showing real product depth without turning the section into a full feature block.
CTA 8 – Wide product panel with offset previewcta-8A wide, left-aligned CTA paired with a large, offset product screenshot that bleeds toward the edge of the container. The layout creates a sense of depth and scale, making the product feel substantial while keeping the call to action simple and focused. Good for high-confidence CTAs where the UI itself does most of the convincing.
Dashboard 22 – Customer health scorecustomer-health-score-1Average customer health as an arc gauge with score bands.
Dashboard 19 – Deal velocitydeal-velocity-by-segment-1Average days in stage by segment as a heatmap.
Dashboard 17 – Deals tabledeals-table-1Open deals with owner, stage, value, and close date.
Dashboard 13 – Engagement by day & hourengagement-by-day-hour-1Open-rate heatmap by send day and hour.
FAQ 1 – Grid FAQs with CTAfaqs-1Multi-column FAQ layout with short answers visible by default. Includes an optional CTA panel below. Scales down to a stacked list on mobile.
FAQ 2 – Accordion list with centered CTAfaqs-2Single-column, centered accordion for longer answers. Optimized for reading and scanning. Collapses into a stacked accordion on mobile.
FAQ 3 – Wide accordion with stacked mobile previewfaqs-3A responsive FAQ section with a wide, centered accordion for desktop, plus a compact stacked version shown as a mobile preview. Built for clean scanning, with one expanded answer and the rest collapsed by default.
FAQ 4 – Centered accordion with supporting panelfaqs-4A clean, centered FAQ accordion paired with a narrow sidebar version. Uses a strong section header and clear dividers for easy scanning, with an optional support link at the end. Works well for product or marketing pages where FAQs are a secondary section, not the main focus.
File Upload 1 – Drag-and-drop upload with inline progressfile-upload-1A compact file upload layout with a prominent drag-and-drop zone and clear fallback action. Uploaded files are listed inline with filename, size, status, and progress indicators, supporting multiple concurrent uploads. Designed to give immediate feedback and visibility into upload state without leaving the page.
File Upload 2 – Simplified upload list with minimal metadatafile-upload-2A streamlined file upload layout that pairs a drag-and-drop zone with a clean, minimal upload list. Each file item focuses on status and progress only, reducing visual noise while still supporting multiple simultaneous uploads, cancellation, and deletion. Best suited for lightweight workflows where clarity and speed matter more than detailed file metadata.
File Upload 3 – Grouped upload states with clear status separationfile-upload-3A structured file upload layout that separates completed and in-progress uploads into clear sections. Uses lightweight headers to group states, making it easy to scan what’s finished versus what’s still uploading. Supports drag-and-drop input, progress indicators, and per-file actions, while keeping the overall layout calm and readable for higher-volume uploads.
Footer 1 – Multi-column sitemap footerfooter-1A wide, multi-column footer with grouped navigation links and a compact legal row. Designed for content-heavy sites that need clear link categorization and quick scanning. Includes a stacked variant for mobile layouts.
Footer 2 – Sitemap footer with newsletter signupfooter-2A multi-column sitemap footer with a prominent newsletter signup band. Combines navigation, legal links, and email capture in a single layout. Designed for marketing sites that want to convert at the page end, with a stacked mobile layout that prioritizes the signup first.
Footer 3 – Compact sitemap footerfooter-3A clean, low-profile sitemap footer with evenly spaced link columns and a minimal brand and legal row. Designed for content-heavy sites that need clear navigation without visual weight. Collapses into a single stacked list on mobile for fast scanning.
Footer 4 – Brand-led sitemap footerfooter-4A sitemap footer anchored by a short brand statement and logo, followed by structured link columns and legal links. Gives more context about the company while keeping navigation clear. Works well for marketing sites where brand positioning matters as much as wayfinding.
Dashboard 12 – Goal progressgoal-progress-1Month-to-date attainment against monthly targets as bullet bars.
Dashboard 11 – Growth simulatorgrowth-simulator-1Live sliders modeling monthly spend against projected pipeline.
Header 1 – Page header with actions and searchheader-1A standard page header that anchors the page title with optional breadcrumbs, primary actions, and inline search. Designed for app and dashboard pages where users need context, quick actions, and filtering in one place. Collapses cleanly on smaller screens into a stacked layout with back navigation and core controls.
Header 2 – Page header with cover imageheader-2A page header that pairs a visual cover with navigation context and search. Uses an image to set tone or brand while keeping the page title, breadcrumbs, and controls clear and accessible. Works well for profile, settings, or content overview pages where light visual hierarchy helps without overpowering the UI.
Header 3 – Page header with tabsheader-3A compact page header that combines breadcrumbs, a clear page title, and inline tabs for switching between related sections. Keeps navigation close to the content and works well for settings, account areas, or multi-section pages where users move between views often.
Header 4 – Page header with cover image and tabsheader-4A richer page header that pairs breadcrumbs and a page title with a visual cover image and inline tabs. Useful for profile, settings, or sectioned pages where you want stronger visual hierarchy while still keeping navigation and actions close to the content. Works well for top-level views that benefit from branding or context imagery.
Header 5 – Profile header with identity and actionsheader-5A compact header designed for user or account pages. Combines avatar, name, and secondary details with inline actions and search, keeping identity and controls visible without dominating the page. Works well for settings, profile, or account management views where context matters more than decoration.
Header 6 – Page header with supporting descriptionheader-6A lightweight page header that pairs a clear title with a short supporting description. Designed for settings or configuration screens where users need immediate context about what they are editing, with optional inline actions and search kept secondary to the page intent.
Hero 1 – Centered headline with media herohero-1A classic centered hero with a strong headline, short supporting copy, and a primary call to action. Anchored by a large visual or video to set tone and establish brand presence. Works well as a primary landing hero when you want clarity first and visual impact second.
Hero 10 – Full-bleed image herohero-10A bold, image-led hero with text overlaid on photography. Best when you want an emotional hook first and the message second. Works well for marketing pages, brand stories, and team or culture-led sections where the image does most of the work.
Hero 2 – Full-bleed background with centered contenthero-2A bold, immersive hero that places the headline and call to action directly on a full-bleed visual background. Designed to create mood and instant impact, with social proof reinforcing credibility. Best used when you want an emotional first impression and strong brand presence right at the top.
Hero 3 – Light background with centered contenthero-3A calm, airy hero that centers the headline and call to action over a soft, low-contrast background. Designed to feel open and approachable, with social proof placed directly beneath the primary action. Works well for product-led sites that want clarity and reassurance without heavy visual weight.
Hero 4 – Soft gradient hero with dual CTAs and ratinghero-4A centered hero set on a subtle gradient background, using stacked CTAs to support different commitment levels. Includes lightweight credibility with an inline rating, making it well suited to waitlists, previews, or early-access launches where trust and softness matter more than urgency.
Hero 5 – Split layout with waitlist capturehero-5A balanced split hero that pairs left-aligned messaging with a strong visual on the right. Uses an inline email field and single primary CTA to support early-access or waitlist flows. Works well when the image carries mood or concept, while the layout keeps conversion front and center without feeling heavy.
Hero 6 – Feature-led split herohero-6A practical split hero that pairs a strong visual with a short benefits list. Designed to quickly explain value through scannable points, with a clear primary CTA. Works well for product-led pages where clarity and speed to understanding matter more than mood alone.
Hero 7 – Editorial story herohero-7A narrative-led hero that explains the problem before selling the solution. Uses longer-form copy, author attribution, and a strong visual to build trust and context. Best suited to thought leadership, launch posts, or product pages where education and credibility come before conversion.
Hero 8 – Minimal page headerhero-8A stripped-back hero for secondary pages. Focuses on a clear page title, short supporting copy, and a simple primary action. Best for pricing, docs, feature detail pages, or anywhere the goal is clarity over impact.
Hero 9 – Page header with supporting visualhero-9A balanced hero that pairs a clear page title and primary actions with a strong supporting image. Works well when you want more visual context than a minimal header, without going full marketing hero. Ideal for feature overviews, product detail pages, or campaign landing pages where clarity still comes first.
Dashboard 2 – Hero time serieshero-time-series-1Hero area chart comparing this period against the previous period.
Inline CTA 1 – Compact call to actioninline-cta-1A small, inline call to action that pairs a short title and description with one or two buttons. Designed to sit naturally within content flows to prompt the next step without breaking layout or stealing focus from the primary task. Works well for upgrades, secondary actions, or gentle nudges inside pages.
Inline CTA 2 – Media-led call to actioninline-cta-2An inline call to action that pairs a visual with a short title and description to add context and emotional weight. The image helps draw attention while the compact copy and buttons keep the action clear. Best used mid-page to highlight featured content, announcements, or moments that benefit from visual reinforcement.
Inline CTA 3 – Email signup call to actioninline-cta-3An inline call to action designed for simple email capture. Combines a short title and description with a single input and primary action, keeping friction low. Works well mid-page or near content boundaries to collect signups for newsletters, updates, or early access without breaking the reading flow.
Kanban 1 – Deal boardkanban-1Pipeline board with a column per stage, each carrying its deal count, total value, and an add action. Cards show the account and motion, the owner, a win probability bar, location, close date, and value, with a status badge that tints the bar. Cards drag between stages or reorder within one, and the stages themselves can be reordered by their header handle.
Dashboard 20 – Lead-to-customer funnellead-to-customer-funnel-1Marketing-to-sales handoff as concentric ring progress.
Dashboard 21 – Leads by regionleads-by-region-1Leads and pipeline value by country, with list and map views.
Dashboard 9 – Marketing funnelmarketing-funnel-1Stage-by-stage conversion across the marketing funnel.
Dashboard 1 – Metric cardsmetric-cards-1Four key metrics in a single strip: spend, revenue, cost per lead, and conversion rate.
Metrics 1 – Wide stats row with geographic backdropmetrics-1A horizontally distributed metrics layout that pairs large headline numbers with short labels, anchored by a subtle world map background. The pattern emphasizes scale and credibility without heavy visuals. On mobile, the metrics collapse into a vertical list, keeping each stat easy to scan while preserving hierarchy.
Metrics 2 – Centered headline with inline stat columnsmetrics-2A metrics layout built around a strong centered heading, followed by evenly spaced stat columns with short supporting labels and optional inline links. The pattern emphasizes balance and readability, using clear vertical dividers to separate each metric. On mobile, the stats stack into a single-column list while keeping the headline and hierarchy intact.
Metrics 3 – Split content with media anchormetrics-3A two-column metrics layout that pairs a text-led stats group with a strong visual anchor. The pattern uses a left-aligned heading and compact metric blocks, balanced by a fixed-aspect image on the opposite side to create visual weight. On mobile, the image drops below the metrics and the stats stack vertically, preserving hierarchy and scanability.
Metrics 4 – Centered headline with inline stat rowmetrics-4A symmetric metrics layout built around a centered headline and a single horizontal row of key stats. Each metric is evenly spaced to create a calm, balanced rhythm and equal visual weight. The pattern emphasizes comparability and quick scanning. On mobile, the metrics stack vertically into a single column while keeping the headline centered to maintain hierarchy and focus.
Metrics 5 – Carded metrics rowmetrics-5A metrics layout where each stat is wrapped in a lightweight card. The cards create clear boundaries, making each metric feel discrete and scannable while still reading as a group. The pattern works well when metrics need visual emphasis without heavy decoration. On mobile, cards stack vertically with consistent spacing, preserving rhythm and hierarchy.
Metrics 6 – Inline metrics with dividersmetrics-6A single-row metrics layout that uses subtle vertical dividers instead of cards. This keeps the section feeling light and flat while still giving each metric clear separation. Works well when metrics are supporting evidence rather than the main focal point. On smaller screens, the metrics stack into a clean vertical list with the same divider rhythm preserved.
Metrics 7 – Inline stats row with optional linksmetrics-7A centered section header paired with a single horizontal row of key stats. Uses generous whitespace and consistent column widths to make the numbers feel calm and easy to scan. On smaller screens, the row collapses into a clean vertical stack without changing the overall rhythm.
Modal 1 – Centered dialog modalmodal-1A centered modal with a fixed width and clear visual separation from the page using a dimmed backdrop. The layout is stacked and simple: a compact header with icon, title, description, and a close action, followed by a flexible content area. Actions sit at the bottom, aligned horizontally, with a clear primary and secondary button. Designed to focus attention, block background interaction, and work well for confirmations, forms, or short tasks.
Modal 2 – Destructive action modalmodal-2A centered dialog modal with a dimmed backdrop, similar in structure to Modal 1 but visually weighted toward caution. The header includes an icon, title, description, and a close action. The content area remains flexible and neutral, while the footer clearly emphasizes the primary action using a high-contrast, destructive button style, paired with a lower-priority secondary action. Designed to signal risk, confirm irreversible actions, and slow the user just enough to avoid mistakes.
Modal 3 – Authentication modalmodal-3A centered, medium-width modal designed specifically for sign-in flows. It uses a clear vertical layout with a strong heading, supporting text, and stacked form fields. Primary actions are visually anchored at the bottom with a full-width button, while secondary auth options are separated by a subtle divider to reduce cognitive load. Includes an inline close control, generous spacing, and soft elevation to keep focus on the task without feeling heavy. Optimized for quick entry, scanning, and repeated use.
Multistep 1 – Split onboarding layoutmultistep-1A wide, two-column layout that pairs the active step with clear progress context. The left column contains a centered card with soft elevation and rounded corners, acting as the focus area for the current step. The right column shows a vertical step list with numbered markers, current step emphasized and future steps visually muted. Spacing is generous and calm, with strong alignment between columns so the flow reads left to right. The structure sets expectations early, reduces uncertainty, and keeps users oriented without overwhelming them.
Multistep 2 – Media-assisted onboarding layoutmultistep-2A three-column composition that blends form, visual, and progress. The left column uses a contained card for the active step, with clear hierarchy and strong primary action. The center column introduces a full-height media panel with rounded corners, used as visual breathing room and brand tone rather than instruction. The right column repeats the vertical step indicator, keeping progress visible and consistent. The layout feels more editorial and expressive, while still keeping the task flow clear and anchored.
Multistep 3 – Split hero onboardingmultistep-3A strong two-panel layout that leans editorial. The left side is a full-height visual panel with soft motion blur, used purely for mood and brand expression. The right side is a clean, contained column that stacks a horizontal step indicator above a centered form card. The contrast is intentional: expressive on the left, structured on the right. Progress is visible but lightweight, and the form remains the clear focal point without competing with the imagery.
Newsletter Signup 1 – Split layout with visual anchornewsletter-signup-1A newsletter signup pattern that pairs a simple email capture with a strong visual anchor. The form stays lightweight and prominent, while the adjacent product visual adds context and credibility. On smaller screens, the layout stacks to keep the signup action clear and friction-free.
Newsletter Signup 2 – Value-led signup with supporting bulletsnewsletter-signup-2A newsletter signup pattern that leads with clear value before the email field. Short bullet points set expectations and reduce hesitation, while the form remains simple and easy to scan. The supporting visual reinforces product context without competing with the primary signup action, and the layout stacks cleanly on smaller screens.
Newsletter Signup 3 – Inline headline with minimal formnewsletter-signup-3A compact newsletter signup pattern that places the email field inline with the headline. The layout minimizes friction and keeps attention focused on a single action, making it suitable for low-commitment sections or repeated placements. On smaller screens, the form stacks cleanly while preserving hierarchy and clarity.
Newsletter Signup 4 – Centered call to action with supporting microcopynewsletter-signup-4A centered newsletter signup pattern that emphasizes balance and clarity. The headline and form are vertically stacked to create a clear focal point, with supporting microcopy reinforcing trust without competing for attention. The layout works well as a primary conversion section and scales cleanly to mobile by preserving alignment and spacing.
Newsletter Signup 5 – Inline callout with contained formnewsletter-signup-5A horizontal newsletter signup pattern presented inside a soft container to separate it from surrounding content. The headline and description anchor the left side while the inline form sits to the right, creating a clear scan path and compact footprint. Works well as an embedded callout within long pages and collapses cleanly to a stacked layout on smaller screens.
Dashboard 6 – Paid media allocationpaid-media-allocation-1Donut breakdown of spend across paid channels.
Dashboard 15 – Pipeline by stagepipeline-by-stage-1Open pipeline value and share across deal stages as a funnel.
Pricing 1 – Three-tier card pricing gridpricing-1A classic three-column pricing layout with equal-weight plan cards for easy comparison. Each card follows the same vertical rhythm with plan name, price, primary action, and feature list, making differences scannable at a glance. The pattern scales cleanly to mobile as a horizontal carousel or stacked cards, keeping one plan in focus at a time.
Pricing 2 – Focused two-plan comparisonpricing-2A simplified pricing layout that presents two plans side by side to reduce choice overload. The shared header anchors context, while the paired cards make differences easy to scan without overwhelming the user. This pattern works well when offerings are intentionally limited or when you want to guide users toward a primary upgrade path, and it adapts cleanly to a swipeable carousel on smaller screens.
Pricing 3 – Single plan spotlightpricing-3A centered, single-card pricing layout that puts all attention on one plan. Removing comparisons reduces decision friction and works well for early-stage products, default plans, or checkout-focused pages. The pattern scales cleanly by adding secondary plans later without changing the core structure.
Pricing 4 – Three-plan comparison with highlighted defaultpricing-4A classic three-tier pricing layout with a clearly emphasized middle plan to guide choice. The visual weight, border treatment, and "most popular" marker steer users toward a recommended option while still allowing easy comparison. Works well when you want flexibility without overwhelming the decision.
Pricing 5 – Side-by-side plans with duplicated emphasispricing-5A two-plan layout where one option is visually emphasized through stronger borders and hierarchy, even when the plans are similar. This pattern is useful for steering users toward a preferred choice while still showing a clear alternative, without introducing extra complexity or tiers.
Pricing 6 – Single-plan focused pricingpricing-6A minimal pricing pattern that centers on a single plan, removing comparison to reduce decision friction. This works well when there is only one offering, or when you want to validate pricing without distracting users with alternatives.
Pricing 7 – Feature-comparison table pricingpricing-7A dense pricing pattern that pairs plans with a side-by-side feature matrix. This works when buyers need to evaluate capability differences in detail and are willing to scan vertically to compare limits, access levels, and inclusions across tiers.
Product Category 1 – Category navigation grid with immersive hero imageryproduct-category-1A visually driven category section featuring a three-column grid. Each card uses large, high-impact photography as a background, with the category title and a brief descriptive subtext positioned in the bottom-left corner. This layout is designed to inspire users through lifestyle imagery
Product Category 2 - Category grid with external labelsproduct-category-2A minimalist category navigation section featuring a balanced three-column grid. Unlike overlay styles, this layout places category titles and descriptive subtext directly below each image, ensuring maximum legibility. Using high-quality lifestyle and product photography, it provides a professional and airy entry point to specific store sections.
Product Category 3 - Asymmetric category grid with mixed card orientationsproduct-category-3A visually engaging category section featuring an asymmetric three-column layout. The left column showcases a large, vertical hero image for while the right side is split into two stacked horizontal cards. This varied grid structure creates a modern, editorial feel that emphasizes priority collections through size while maintaining a clean and organized aesthetic with bottom-aligned text overlays.
Product Category 4 - Inverted asymmetric grid with top-aligned hero cardproduct-category-4A dynamic category section featuring an asymmetric three-card grid. The layout highlights "New Arrivals" with a large, full-width horizontal hero card at the top, while "Accessories" and "Last Pieces" are displayed in two smaller, side-by-side cards below. All categories utilize immersive photography with bottom-left text overlays, creating a modern and editorial navigation experience.
Product Category 5 - vertical category grid with labelsproduct-category-5A clean and balanced category section featuring a four-column grid of tall, vertical cards. Each card uses high-impact photography with a subtle dark gradient at the bottom to enhance the legibility of the centered white labels. This layout is ideal for stores with multiple key departments, providing a uniform and highly structured entry point to the entire collection.
Product Details 1 – Product overview with configurationproduct-details-1A clean and professional product detail section featuring a large primary image on the left and functional configuration tools on the right. The information hierarchy includes the product title, star ratings, price, and a brief description. Below, users can interact with size selection tiles, color swatches, and a quantity selector before adding the item to the cart. This layout is designed for maximum clarity, guiding the user through the customization process toward a final purchase.
Product Details 2 - Product page with breadcrumbs and accordionproduct-details-2A comprehensive product layout featuring a top breadcrumb navigation for easy store browsing. The left side showcases a large product image, while the right side organizes purchase details: rating, price, size tiles, and color swatches. Below the primary button, a vertical accordion provides detailed information keeping the page clean while offering deep product insights.
Product Details 3 - Detailed product view with specifications and galleryproduct-details-3A content-rich product detail section that prioritizes technical information. The layout features a primary text area on the left detailing fabric composition and design features, balanced by a configuration sidebar on the right for size and color selection. Below, a four-column gallery showcases the product in every available color variant, providing a visual overview that aids the customer's final decision.
Product Details 4 - Product detail page with vertical thumbnail galleryproduct-details-4A streamlined product section featuring a multi-image navigation system. The layout includes a vertical column of clickable thumbnails on the left, which updates the large primary image in the center. The right side is dedicated to product information, including a detailed list, price, size selection tiles, and color swatches. This design is ideal for products that require viewing from multiple angles or in different colors.
Product Details 5 - Product page with bottom gallery and navigation arrowsproduct-details-5A product detail layout featuring an interactive image gallery. The main product image is supported by a row of four thumbnails at the bottom for multi-angle viewing, along with directional arrows and a zoom icon for deep-dive inspection. The right-hand column maintains a clean hierarchy with product details, pricing, size selection tiles, and color swatches, providing an informative shopping interface.
Product Details 6 - Product page with centered hero and multi-column FAQ gridproduct-details-6A comprehensive product layout featuring a centered hero image flanked by essential purchase controls like price, size selection tiles, and a button. The lower section of the page is dedicated to a high-density information area. This design uses expandable accordions for topics like shipping, returns, and terms, providing a one-stop-shop experience for all customer inquiries.
Product List 1 – Product grid with header & action cardsproduct-list-1A clean e-commerce section featuring a left-aligned collection header and a four-column product grid. Each card includes a badge, high-quality product imagery, star ratings, pricing, and a brief description. The layout is finalized with a primary button for each product, designed to streamline the shopping experience through a clear and repetitive visual structure.
Product List 2 – Centered header with product gridproduct-list-2A balanced e-commerce section featuring a centered headline. The products are displayed in a clean four-column grid, where each card follows a vertical stack: high-quality product image, centered title, brief description, price, and a primary button. This minimalist approach removes distractions like ratings or badges, focusing entirely on product aesthetics and direct action.
Product List 3 – Product card grid with color swatchesproduct-list-3A modern e-commerce grid featuring products housed in individual white cards with subtle borders. In addition to the badge, star ratings, and button, each card includes interactive color swatches for product customization. This layout is optimized for high-engagement retail, providing users with more options and a clear visual containment for each item.
Product List 4 - Product grid with centered labels and color swatchesproduct-list-4A streamlined e-commerce layout featuring a centered collection header and a four-column grid of bordered product cards. Each card prioritizes clear information hierarchy: category badge, star rating, product title, and description, followed by prominent price labels and interactive color swatches. This design is optimized for brands that want to provide a detailed yet airy shopping experience.
Product List 5 - Product grid with horizontal carouselproduct-list-5A clean e-commerce section featuring a left-aligned collection header and a four-column product layout. Each item includes a badge, star rating, pricing, and a primary button. The distinctive feature is the inclusion of directional arrow buttons at the bottom-left, allowing users to scroll through a larger inventory within a single, space-efficient horizontal row.
Progress 1 – Horizontal step overviewprogress-1A clean, linear progress bar that spreads steps evenly across the page. Each step is anchored by a numbered marker with a short title and supporting line of text below it. The connecting line is subtle and continuous, keeping focus on sequence rather than state. It reads left to right at a glance and works well as a high-level orientation pattern rather than an active control.
Progress 2 – Vertical step listprogress-2A stacked, vertical progress pattern with numbered steps aligned to a single axis. Each step uses a circular index, a clear title, and a short description, connected by a thin vertical line to reinforce sequence. The layout reads top to bottom, making it easy to scan and well suited for sidebars or onboarding flows where space is constrained.
Progress 3 – Horizontal completion trackerprogress-3A horizontal stepper that shows progress at a glance. Steps are laid out left to right with a thin connecting line. Completed steps use filled circular check icons, while the current or pending step uses a neutral indicator. Each step includes a short title and supporting description beneath it, balancing status clarity with explanatory context. Best suited for onboarding or checkout flows where users benefit from seeing what’s done and what’s left.
Progress 4 – Vertical completed checklistprogress-4A vertical step list with all steps shown as completed. Each step uses a filled circular check icon aligned to the left, connected by a subtle vertical line to reinforce sequence. Titles are bold, with short descriptions beneath in muted text. The layout reads like a checklist rather than a tracker, signaling completion and closure rather than ongoing progress. Works well for review states, confirmations, or “you’re all set” screens.
Dashboard 16 – Rep leaderboardrep-leaderboard-1Reps ranked by quota attainment with target markers.
Dashboard 14 – Revenue vs targetrevenue-vs-target-1Closed revenue against target and forecast as a tick meter.
Section Footer 1 – Minimal action-focused footer barsection-footer-1A compact footer layout built around a single horizontal row of lightweight links paired with a small set of primary actions. Uses clear alignment and restrained spacing to keep the footer unobtrusive, with responsive behavior that stacks actions vertically on smaller screens. Best suited for product or app surfaces where the footer supports navigation and actions without competing with page content.
Section Footer 2 – Single-action footer with progressive revealsection-footer-2A stripped-back footer built around a single, prominent action rather than navigation. Uses a centered or edge-aligned call-to-action with minimal visual noise, designed to extend a page flow rather than close it. Adapts cleanly to smaller screens by stacking the action styles vertically. Best used when the footer's job is to prompt the next step, not provide site-wide links.
Section Footer 3 – Utility footer with inline controlssection-footer-3A functional footer layout that combines secondary actions with an inline utility element. Uses a horizontal bar to group button variants on one side and a compact search input on the other, creating a balanced, tool-like feel. Scales down cleanly by stacking controls vertically on small screens. Best suited for product or admin contexts where the footer supports ongoing interaction rather than navigation or conversion.
Section Footer 4 – Pagination footersection-footer-4A footer layout focused on paging controls for long lists or tables. Combines previous and next actions with direct page selection and a clear page count indicator. Adapts for smaller screens by simplifying to basic navigation while keeping context about the current page. Best suited for data-heavy views like tables, feeds, or search results where navigation continuity matters.
Share Dialog 1 – Scoped link for a conversationshare-dialog-1Publishes a conversation to a link. Picking who can see it is the act of sharing, so there is no second confirm button and the link is one click from the clipboard. Opens from the control you already render, a header button or a row in a thread menu. Works with no backend behind it, and takes a real one when you have it.
Shopping Cart 1 – Overlay with itemized list and checkoutshopping-cart-1A functional slide-out cart interface that appears as an overlay on the right side of the screen. It features a clear itemized list of added products, including thumbnail images, titles, brief descriptions, quantities, and prices. The layout is completed by a subtotal calculation at the bottom and a prominent button, providing a seamless transition from browsing to final purchase without leaving the current page.
Shopping Cart 2 - shopping cart page with order summary and promo sectionshopping-cart-2A comprehensive checkout page featuring a two-column layout. The larger left column displays a detailed list of cart items with quantity adjusters and removal options. The right column serves a sidebar containing a promo code input field and a breakdown of subtotal, shipping, and taxes. This design provides an overview of the order total, ensuring a frictionless transition to the final checkout stage.
Shopping Cart 3 - Centered shopping cart page with inline summaryshopping-cart-3A streamlined and focused shopping cart layout where all elements are stacked in a single centered column. The page displays the list of items with full management controls (quantity and removal), followed directly by the promotional code input and the financial breakdown (subtotal, shipping, and taxes). This design minimizes eye travel and provides a clear, linear path toward the final checkout action.
Shopping Cart 4 - Triple-card cart layout with discount and summaryshopping-cart-4A highly organized shopping cart page that utilizes three distinct white cards on a light gray background to separate functional areas. The main card on the left manages the product list and inventory controls. On the right, two smaller stacked cards isolate the Discount and Summary sections. This modular structure provides visual hierarchy and makes the information of the final checkout stage easy to digest.
Social Proof 1 – Inline logo stripsocial-proof-1A minimal social proof pattern that presents partner or customer logos in a single horizontal row. It builds trust without interrupting flow, using uniform sizing and muted styling so the section supports the page rather than competing with primary content.
Social Proof 2 – Auto-scrolling logo marqueesocial-proof-2A horizontally scrolling logo strip that loops automatically. It adds motion and density without taking more vertical space. Good when you have lots of logos or want the section to feel more alive. Keep the speed slow and subtle so it reads as credibility, not decoration.
Social Proof 3 – Color logo stripsocial-proof-3A static row of full-color logos. Feels louder and more brand-forward than grayscale. Works best when the logos are well-known and visually consistent. Less subtle, but stronger at first glance.
Social Proof 4 – Inline trust statementsocial-proof-4A compact logo row paired with a short trust line. Very low visual weight and easy to drop between sections. Good when you want credibility without pulling attention away from the main content.
Social Proof 5 – Visual-led trust sectionsocial-proof-5A logo strip paired with a strong visual. Adds credibility while creating a clear visual break between sections. Best used when you want trust signals without relying on testimonials or copy-heavy proof.
Social Proof 6 – Structured grid, editorial feelsocial-proof-6Centered headline with a strict, even grid below. Strong symmetry, lots of white space, and clear hierarchy. Feels calm, credible, and deliberate. Works well when you want restraint and clarity over motion or visual noise.
Table 1 – Customer data tabletable-1Full-featured data table for admin and SaaS back-office views: customers, users, records, list management. Use for dense, editable lists with a per-row selection checkbox, sortable columns and inline status badges. Includes a filter field, density toggle, column-visibility control, export, a bulk-action bar on selection (export CSV, delete) and a rows-per-page pagination footer. The most complete data-table pattern; prefer it when you need selection, sorting and bulk actions. Rows can be reordered by drag and drop via a per-row grip handle.
Table 10 – Product leaderboardtable-10Product performance leaderboard for e-commerce, catalogue and analytics dashboards. Use for ranking products by sales with a thumbnail and category, price, units sold, a star rating with review count and revenue. Includes a period selector and export, led by a heading. Read-oriented ranking; prefer when surfacing top sellers rather than editing a catalogue.
Table 11 – Market overviewtable-11Market and asset-tracking table for crypto, stock and finance dashboards. Use for listing assets with an icon and ticker, price, a colour-coded change value, volume and market cap, and an inline sparkline trend. Includes a search field and time-range toggle in the header. Prefer when each row is a tradable asset needing an at-a-glance trend. Rows can be reordered by drag and drop via a per-row grip handle.
Table 12 – Recent transactions summarytable-12Compact transactions card for dashboards and overview panels. Use as a condensed summary of recent activity: each row pairs a directional icon and date, a status badge, the payment method and a signed, colour-coded amount, under a heading and account selector. Prefer this smaller companion over the full transaction-history table when space is tight and browsing depth is not needed.
Table 13 – Customer accountstable-13Customer accounts table for sales, success and account-management views. Use for tracking companies with a logo and domain, a lifecycle status badge (customer, churned), a short about line, a stacked group of assigned-user avatars and a horizontal license-use meter. Includes a heading, status filter and export. Prefer when rows are company accounts with usage and assigned users rather than individual customer records. Rows can be reordered by drag and drop via a per-row grip handle.
Table 14 – Members listtable-14Members list for team rosters and organisation directories. Use for listing people with an avatar, name and email, a function with a supporting line, an online/offline status and an employed date. Led by a heading, a search field and an Add member action, with pagination. A clean, heading-led roster; prefer over the toolbar-driven team-members table for a simpler card layout. Rows can be reordered by drag and drop via a per-row grip handle.
Table 15 – Role permissions matrixtable-15Role permissions matrix for settings, access-control and admin views. Use for mapping each role to a description, member count and a checkbox grid of rights (view, edit, publish, billing, admin). Includes filter and column controls and a New role action. Prefer when configuring or displaying access levels at a glance. Rows can be reordered by drag and drop via a per-row grip handle.
Table 16 – Sales by countrytable-16Geographic sales block pairing a table with a world map, for regional analytics dashboards. Use for breaking sales down by country with a flag, sales count, value and bounce rate, alongside a dotted world map with plotted markers. Led by a heading and View report action. Prefer when data has a geographic dimension worth mapping.
Table 17 – Empty state (no data)table-17Empty / first-run state for a data table, for zero-data and filtered-to-nothing views. Use when there are no rows yet: the full toolbar and column headers stay visible while a centred icon, a no-data message and Add and Clear-filters actions fill the body. Prefer over the no-results state when the table has no records at all rather than an unmatched search. Rows can be reordered by drag and drop via a per-row grip handle.
Table 18 – Empty state (no results)table-18No-results empty state for a data table, for search and filter interactions. Use when a search or filter returns nothing: the toolbar and search stay in place while the grid is replaced by a centred icon, a no-results message and Add and Clear-search actions. Pair with the customer / data table; prefer this state specifically for empty search results rather than no data at all. Rows can be reordered by drag and drop via a per-row grip handle.
Table 19 – Loading statetable-19Loading / skeleton state for a data table. Use while data is being fetched: the toolbar and column headers stay in place over shimmering skeleton rows with a loading note in the footer. Prefer to hold the grid's shape during load rather than showing a spinner or blank area. Rows can be reordered by drag and drop via a per-row grip handle.
Table 2 – Invoice listtable-2Invoice management table for billing and finance dashboards. Use for listing invoices with paid, pending and overdue status badges, document icons and issued, due and amount columns. Includes a toolbar with search, status and column filters plus a New invoice action, row selection with bulk download and copy-link actions, and numbered pagination. Prefer over the transactions table when rows represent invoices with a payment status. Rows can be reordered by drag and drop via a per-row grip handle.
Table 20 – Error statetable-20Error / failed-fetch state for a data table. Use when data fails to load: the toolbar and headers stay while the body shows a warning icon, an error message and a Try again action. Prefer this state to communicate a failed request rather than an empty or offline table. Rows can be reordered by drag and drop via a per-row grip handle.
Table 21 – Offline statetable-21Offline / connection-lost state for a data table. Use when the table cannot reach the network: the header stays while the body shows a centred icon, an offline message and a Refresh action. Prefer this state to signal a connection problem rather than missing or filtered data.
Table 3 – Transactions with filters and paginationtable-3Paginated transactions table with global search, multi-select method and status filters, sortable date and amount columns, row selection and per-row actions. Use it for billing or payment histories where users scan and reconcile recent transactions.
Table 4 – Team memberstable-4Team and workspace member directory for admin and settings pages. Use for listing people with an avatar, name and email, plus role, status (active, offline, invited) and joined date. Includes member search, role and column filters and an Invite member action. Prefer this simple roster for managing team access; use the members-with-attachments table for a richer people-and-projects view. Rows can be reordered by drag and drop via a per-row grip handle.
Table 5 – Task listtable-5Task and project-tracking table for project management and sprint views. Use for listing work items with an assignee avatar, a status badge (todo, in progress, done, blocked), an inline progress bar with percentage and a due date. Includes status, assignee and column filters. Prefer when rows are tasks needing per-row progress and assignment. Rows can be reordered by drag and drop via a per-row grip handle.
Table 6 – Support ticket queuetable-6Support ticket queue for helpdesk, support and operations views. Use for triaging tickets by priority (urgent, high, medium, low), an SLA countdown that turns red when time is short or breached, status and an assignee avatar. Includes open-state, priority and column filters. Prefer when rows are tickets triaged by urgency and time remaining. Rows can be reordered by drag and drop via a per-row grip handle.
Table 7 – Audit logtable-7Paginated audit log for a workspace. Each row pairs the acting user or automation with the event it triggered, the affected resource, the source IP and a sortable timestamp. Global search plus event-type and date-range filters narrow the log; use it for security review and compliance trails.
Table 8 – Member directory with attachmentstable-8Rich member directory pairing people with projects and files, for team, HR and resource views. Use for showing each member with title and start date, an associated project marked by a brand app logo, and a linked file attachment with size. Leans on avatars and brand icons rather than a toolbar. Prefer over the plain team-members table when people, projects and documents need to be seen together. Rows can be reordered by drag and drop via a per-row grip handle.
Table 9 – File managertable-9File manager table for document, asset and workspace file views. Use for listing shared files with a file-type icon, name, format and size, upload date and uploader. Introduced by a heading and description with Download all and Upload actions in the header. Prefer when rows are files with download and upload actions. Rows can be reordered by drag and drop via a per-row grip handle.
Team 1 – Centered team roster gridteam-1A centered section with a clear headline and supporting line, followed by an evenly spaced grid of profile tiles. The layout keeps attention on the faces, uses consistent alignment and spacing for quick scanning, and collapses cleanly into fewer columns on smaller screens without changing the overall structure.
Team 2 – Split intro with profile gridteam-2A two-column layout where a compact intro block anchors the section on the left while a dense, evenly spaced avatar grid fills the remaining width. The structure balances narrative and faces, maintains a strong visual rhythm, and adapts cleanly to a stacked list on smaller screens without changing the hierarchy.
Team 3 – Mixed-shape avatar mosaicteam-3Team 3 – Mixed-shape avatar mosaic
Team 4 – Lifestyle imagery with structured rosterteam-4A split layout that pairs large, candid team photos with a clean, tabular roster below. The imagery adds warmth and context, while the list anchors the section with clear hierarchy and scannability, balancing human presence with structured information.
Team 5 – Editorial portrait cardsteam-5A gallery-style layout built around large, consistent portrait cards with subtle overlays. Emphasizes visual uniformity and hierarchy, using generous spacing and minimal UI chrome to let imagery carry the section while still supporting clear identity and interaction.
Testimonial 1 – Single feature quotetestimonials-1A centered, long-form testimonial designed to feel calm and authoritative. Uses generous whitespace, oversized quotation marks, and a single focal block to give the quote weight. Best suited for primary social proof moments where you want one voice to carry the section without visual noise.
Testimonial 10 – Dense quote gridtestimonials-10A compact testimonial layout that surfaces many short quotes at once using a uniform card grid. Designed for volume and credibility, it emphasizes breadth of feedback over individual storytelling, making it effective for scanning, comparison, and reinforcing widespread adoption.
Testimonial 11 – Editorial quote gridtestimonials-11A structured testimonial layout that combines a clear section header with a multi-column grid of short quotes. It balances scannability and depth by presenting many voices at once, using consistent cards and subtle hierarchy to reinforce trust without relying on a single standout story.
Testimonial 2 – Centered quote with attribution focustestimonials-2A minimal, centered testimonial layout that tightens the hierarchy around the quote and author. Compared to Testimonial 1, this version reduces visual weight and brings the attribution closer to the content, making it feel more compact and versatile. Works well when you want strong social proof without the section dominating the page.
Testimonial 3 – Split quote with featured profiletestimonials-3Testimonial 3 – Split quote with featured profile
Testimonial 4 – Image-led split with ratingtestimonials-4A bold split layout that gives equal weight to a large portrait and the testimonial copy. The oversized image anchors the section visually, while the quote, attribution, and star rating sit in a clean text column for clarity. Works best when you want testimonials to feel premium and emotive, not just informational.
Testimonial 5 – Card carousel with stacked mediatestimonials-5A carousel-style testimonial where the quote and controls sit in a fixed text column, paired with layered image cards that suggest depth and progression. The stacked visuals reinforce momentum and make the pattern feel interactive, while the layout keeps the testimonial readable and anchored. Best used when you want testimonials to feel dynamic without turning into a full slider section.
Testimonial 6 – Split carousel with overlapping profile cardstestimonials-6A split testimonial layout with the quote anchored in a static text column and a horizontal carousel of large profile cards running alongside it. The overlapping cards add depth and motion, while the fixed quote keeps the message readable and stable. Works well when you want strong visual presence without letting the imagery overpower the testimonial itself.
Testimonial 7 – Multi-profile grid with headline leadtestimonials-7A testimonial layout that leads with a strong headline and brand marker, followed by a dense grid of profile cards. The structure shifts emphasis from a single quote to collective validation, using repetition and ratings to build credibility at scale. Best used when you want to show breadth of adoption rather than spotlight one individual voice.
Testimonial 8 – Branded quote with team striptestimonials-8A testimonial layout that anchors on a long-form quote with clear brand attribution, then reinforces credibility using a horizontal strip of individual profiles. The composition balances authority and social density, making it effective when you want a strong narrative supported by visible team adoption rather than a single spokesperson.
Testimonial 9 – Multi-segment case cardstestimonials-9A testimonial layout built around small, self-contained story cards, each representing a different team or use case. The grid creates quick scanability while still allowing depth per card, making it well suited to showcasing breadth of adoption across industries rather than a single standout quote.
Dashboard 8 – Top landing pagestop-landing-pages-1Pages ranked by sessions with visitor share.
Top Navigation 1 – Left-aligned dropdown navigationtop-navigation-1A classic left-aligned top navigation with horizontal links and inline dropdown menus for larger screens. Primary actions are grouped on the right for clear visual separation. On smaller screens, the layout collapses into a full-height mobile menu with expandable sections, preserving hierarchy while keeping the interaction simple and familiar.
Top Navigation 2 – Centered primary navigationtop-navigation-2A center-aligned top navigation that places the primary links in the middle of the header, creating a more balanced, symmetrical layout. Dropdown menus open directly beneath each item on larger screens, while actions remain grouped to the right. On smaller screens, the navigation collapses into a vertical, full-height menu with expandable sections, keeping the structure clear while shifting focus to touch-friendly interaction.
Top Navigation 3 – Compact bar with progressive disclosuretop-navigation-3A compact top navigation that keeps the large-screen layout minimal and low-profile, with primary links arranged in a single horizontal bar. Dropdowns reveal richer, icon-led menus only when needed, keeping visual noise down by default. On smaller screens, the same structure expands into a stacked, panel-style menu with nested sections, preserving hierarchy while shifting emphasis to vertical scanning and tap targets.
Top Navigation 4 – Centered pill navigation with dropdown menutop-navigation-4A centered top navigation where primary links sit inside a pill-style container, creating a strong visual anchor across large screens. Dropdown menus open from the center group to reveal secondary links in a compact panel. On small screens, the layout collapses into a full-height drawer with stacked links and clear primary actions, maintaining the same information structure while prioritizing tap comfort and readability.
Top Navigation 5 – Minimal center-aligned links with inline authtop-navigation-5A stripped-back, center-aligned top navigation that prioritizes clarity and whitespace. Primary links sit in a single horizontal row with the brand anchored to the left and a lightweight login action on the right. On small screens, the layout collapses into a simple slide-out menu with stacked links and a single secondary action, keeping the structure familiar while reducing visual noise.
Dashboard 3 – Traffic by channeltraffic-by-channel-1Total traffic with a segmented share bar and per-channel breakdown.
Dashboard 18 – Win ratewin-rate-1Win rate with stage-to-stage conversion bars.