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.
Absence Rate 1 – Monthly sick and unplanned leave trendabsence-rate-1Sick and unplanned leave as a share of working days, month by month over the last year, as a line chart on a pinned percentage scale. Includes loading, empty and error states.
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 4 – Inset sidebar with linked navigationapp-shell-4App shell with an inset sidebar, a page selector and search header, and a content slot. Navigation rows are real links that highlight the current section, so it drives an app's routes directly. 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.
App Shell Header 6app-shell-header-6App shell header with a page selector that follows the current route, and search.
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.
Attrition by Department 1 – Voluntary turnover barsattrition-by-department-1Voluntary turnover by department as horizontal gradient bars on a fixed percentage scale, each rate labelled on the right. Includes loading, empty and error states. Use it to spot teams that need a closer look.
Balance 1balance-1A data-rich block for showing an account balance at a glance, with supporting context over time. Combines a primary balance summary with trend indicators and a chart to help users quickly understand current state and recent movement without digging into detailed reports.
Balance 2balance-2A data-rich block for showing an account balance at a glance, with supporting context over time. Combines a primary balance summary with trend indicators, a chart, and optional actions to help users quickly understand current state and recent movement without digging into detailed reports.
Balance 3balance-3A data-rich block for showing an account balance at a glance, with supporting context over time. Combines a primary balance summary and a chart to help users quickly understand current state and recent movement without digging into detailed reports.
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.
Benefit Plans 1 – Plan cards with price, features and an actionbenefit-plans-1A responsive row of benefit plan cards: plan name and provider, monthly price with a note, a checklist of what is included, and a full-width action, with the current plan badged. One column on narrow containers, three side by side once there is room. Includes loading, empty and error states. Adapt it for pricing tiers, insurance or perks.
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 14 – Hero media with supporting icon rowbenefits-14A layout with a section header and large hero media element, followed by a horizontal row of icon-and-text items. The media anchors the section visually while the supporting items summarize key points in a compact, aligned row. Use when you want a strong visual lead with a short, structured follow-up list.
Benefits 15 – Side-by-side media with icon listbenefits-15A layout with a section header, a media element on one side, and a vertically stacked icon-and-text list on the other. The media and list sit side by side on larger screens and stack responsively. Use when you want to pair a focused visual with a compact, structured list.
Benefits 16 – Lead text with media and supporting rowbenefits-16A layout with a prominent lead text area, a supporting media element alongside it, and a horizontal row of icon-and-text items below. The structure creates a clear reading order from explanation to visual context to summarized points, and stacks responsively on smaller screens. Use when you want a strong textual lead supported by media and a compact follow-up row.
Benefits 17 – Section header with stacked cardsbenefits-17A layout with a section header on one side and a vertical stack of uniform cards on the other. Each card contains an icon, title, and short text, creating a clear top-to-bottom scan pattern. Use when you want a simple, linear list with strong separation between items.
Benefits 18 – Centered media with divider and summary rowbenefits-18A layout with a section header and centered media element, followed by a horizontal divider and a row of evenly spaced text items. The structure creates a clear visual hierarchy from primary media to summarized points and stacks cleanly on smaller screens. Use when you want a strong central visual with a balanced, low-density summary underneath.
Benefits 19 – Text list with vertical accent and side mediabenefits-19A layout with a section header, a vertically stacked text list marked by a left accent line, and a media element positioned to the side. The text and media sit side by side on larger screens and stack responsively. Use when you want a clean, editorial-style list paired with a supporting visual.
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 20 – Wide media showcase with side panelbenefits-20A layout with a section header and a wide media element spanning most of the content area, paired with a narrow supporting panel to the side. The media acts as the primary visual focus while the side panel provides secondary context. Use when you want to emphasize a large interface or visual while keeping related content nearby without competing for attention.
Benefits 21 – Card grid with equal emphasisbenefits-21A layout with a section header followed by a balanced grid of equal-size cards. Each card uses the same visual weight, creating a calm, uniform scan pattern. Use when all items are equally important and you want a clean, structured presentation without a primary highlight.
Benefits 22 – Split content with feature list and imagebenefits-22A two-column layout with structured text and a stacked feature list on one side, paired with a large supporting image on the other. The layout balances dense content with a strong visual anchor. Use when you want clear explanation alongside an expressive image without the image overpowering the content.
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.
Benefits Table 1 – Enrolled benefits data tablebenefits-table-1A benefits data table: plan with provider and coverage, enrollment status (active, pending, waived), enrolled and renewal dates and monthly cost, with a filter field, a status filter, column-visibility controls, an Add benefit action, row selection, sortable plan and cost columns, row actions and numbered pagination. Includes loading, empty and error states. Built on TanStack Table.
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.
Calendar 1 – Week, day and month calendar with event detailscalendar-1A full calendar: a week time grid with timed event chips, overlapping events side by side and blocked time, a month grid with overflow popovers, and a day view that phones get automatically. Filter tabs count meetings, events, conflicts and cancellations, and each event opens a popover with attendees, place and a join button. Includes loading, empty and error states.
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.
Celebrations 1 – Birthdays, anniversaries and new joinerscelebrations-1A list of the week's team celebrations: birthdays, work anniversaries and new joiners, each with a portrait, when it happens and a badge for the occasion. Includes loading, empty and error states. Use it on team dashboards and intranet home pages.
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.
Course Progress 1 – Completion ring with next lessoncourse-progress-1A learning card with a completion ring for the current course, a short progress summary, the next lesson and a resume action. Use it on employee portals, LMS dashboards and onboarding programs.
Courses 1 – Assigned courses with completion and statuscourses-1An assigned-courses card: a table of courses with a completion bar and a status badge that follows from it (not started, in progress, completed). Includes loading, empty and error states. Use it on employee profiles and learning dashboards.
Coverage Planner 1 – Weekly staffing against daily demandcoverage-planner-1A weekly coverage planner: each person's shifts and leave per day, scheduled against required headcount, and a detail panel for the selected day that lists available backups to add one by one or all at once, with undo. Gaps show in the warning tint and the panel opens on the first gap. Includes week navigation and loading, empty and error states. Reuse it for staffing, project allocation, equipment or bookings.
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.
Current Project 1 – Project summary with milestones and task statscurrent-project-1A single-project overview: name, status, timeline and team on the left, milestone progress and task completion counts on the right. Adapt it for projects, campaigns or initiatives on a personal or team dashboard.
Dashboard 22 – Customer health scorecustomer-health-score-1Average customer health as an arc gauge with score bands.
Daily Feedback 1 – Mood check-in with optional commentdaily-feedback-1A quick daily check-in: five mood options, an optional comment and an anonymous submit, with a thank-you state after sending. Use it for pulse surveys and engagement tracking on employee dashboards.
Day-one Setup 1 – Workflow run with a blocked stepday-one-setup-1A selected-record workflow run: a dependency graph of step cards (one start step, two parallel steps, one final step) joined by connectors colored by state, a run status alert, and a side panel for the blocked step with its owner, the issue and a one-click fix that moves the run along (with undo). The graph scrolls sideways on narrow screens. Includes loading, empty and error states. Reuse it for onboarding, provisioning, fulfillment or approvals.
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.
Documents Table 1 – Employee documents with signing statusdocuments-table-1An employee documents table: file-type icon, name, size and format, upload date and what is still needed (signature with a due date, acknowledgment, or available), introduced by a heading with a Download all action. Row actions to review and sign, acknowledge, download or copy a link, row selection, sortable name and date columns, and drag-and-drop reordering. Includes loading, empty and error states. Built on TanStack Table.
Employee About 1 – Contact and employment detailsemployee-about-1An employee details card: a labeled list of contact, employment, team, office and emergency contact fields. Includes loading, empty and error states. Adapt it for any record with key facts.
Employee Rating 1 – Peer rating ring with verdictemployee-rating-1A rating card: a ring showing the average score out of five, a verdict and the number of peer reviews behind it, with a link to the reviews. Includes loading, empty and error states. Use it on employee profiles and performance pages.
Employee Spotlight 1 – Featured person with a nomination quoteemployee-spotlight-1A featured profile: portrait, role and award, with the nomination quote set large, and a Nominate action. Includes loading, empty and error states. Adapt it for members, contributors or customers.
Dashboard 13 – Engagement by day & hourengagement-by-day-hour-1Open-rate heatmap by send day and hour.
Expenses 1expenses-1A compact data visualization block for showing spending by category over a selected time range. Uses simple bars and inline values to make comparisons easy at a glance, with support for hover details and quick period switching. Suitable for dashboards, reports, and financial overviews.
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.
Gender Split 1 – Donut with share and count legendgender-split-1A category breakdown as a donut with the leading share in its center and a legend of percentages and counts, side by side when there is room and stacked when narrow. Includes loading, empty and error states. Adapt it for audience, inventory or other distributions.
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.
Headcount 1 – Monthly headcount area chartheadcount-1Workforce size over the last 12 months as an area chart on a pinned scale, with a month tooltip. Includes loading, empty and error states. Use it to review growth and staffing changes.
Headcount by Department 1 – Sortable department table with hub mapheadcount-by-department-1Departments with headcount, voluntary turnover and average tenure in a sortable table, beside a world map marking each department's hub. Includes loading, empty and error states. Built on TanStack Table.
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.
HR Dashboard 1 – Complete HR app with 14 screenshr-dashboard-1The complete HR Dashboard app for Next.js: an inset app shell with 14 screens (personal and team dashboards, calendar, leave, timesheets, projects, teams, employee profile, benefits, documents, requests, performance, onboarding and analytics), assembled from the individually installable HR Dashboard blocks. Installs routes under `app/hr`, so the app lives at /hr beside your existing pages.
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.
Job Timeline 1 – Role, team and contract historyjob-timeline-1A job history card: tenure, roles held and managers, then a timeline of promotions, pay, manager, team and contract changes with who made each change, when, and a category badge. Includes loading, empty and error states. Adapt it for accounts, projects or records.
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.
Kudos 1 – Recognition feed with a compose boxkudos-1A recognition feed: this week's kudos, people recognized and top value, a timeline of who recognized whom with the value it was given for, and a composer to pick a teammate, a value and an optional note. Includes loading, empty and error states. Adapt it for acknowledgments or community highlights.
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.
Leave Balances 1 – Days left per leave typeleave-balances-1A leave balance card: total days remaining across all leave types, then a progress bar per type with days left of the yearly allowance, and a Policy action. Includes loading, empty and error states. Adapt it for any quota, such as credits, seats or budget lines.
Leave Requests Table 1 – Leave history data tableleave-requests-table-1A leave request data table: request, dates, type, days, status and requested date, with a filter field, a status filter, density and column-visibility controls, export, row selection with a bulk action bar, sortable request and day columns, row actions and rows-per-page pagination. Includes loading, empty and error states. Built on TanStack Table.
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 10 – Expanded circular metrics rowmetrics-10A circular metrics layout that supports more data points in a single row. Works well when you need to show multiple performance indicators with equal visual weight while keeping the section compact. On smaller screens, the metrics stack vertically while preserving the circular rhythm and scan order.
Metrics 11 – Lead-in explanation with supporting statsmetrics-11A metrics layout that pairs a short explanatory block with supporting stats to the right. Useful when metrics need framing or justification rather than standing alone. The structure keeps the narrative primary while allowing the numbers to reinforce it, and collapses cleanly into a stacked flow on smaller screens.
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.
Metrics 8 – Multi-row metrics gridmetrics-8A dense metrics layout that supports a larger number of stats without cards or dividers. Uses a balanced grid to keep emphasis evenly distributed across rows, making it suitable for credibility or performance sections where multiple figures carry equal weight. On smaller screens, the grid collapses into a vertical list while preserving spacing and readability.
Metrics 9 – Circular progress metricsmetrics-9A metrics layout that uses circular progress indicators to visualize change or progress at a glance. Works well when the magnitude or direction of a metric matters as much as the value itself. The pattern adds visual interest without becoming decorative, and collapses cleanly into a stacked vertical layout on smaller screens.
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.
Needs Attention 1 – Action queue with inline approve, sign and reviewneeds-attention-1An action queue for managers: a summary of pending approvals, signatures and reviews, then the most pressing tasks with their due date, a category badge and inline actions that resolve each task. Adapts to its column: badges and a footer when narrow, one row per task when wide. Includes loading, empty and error states. Adapt it for approvals, reviews, signatures or exceptions.
New Hires Table 1 – Joiners with onboarding progressnew-hires-table-1A new joiners table led by a heading, a search field and an Import action: joiner with avatar and email, role and department, onboarding progress as a badge (percent and tasks done, a start date for upcoming joiners, or completed), start date, row actions and pagination. Includes loading, empty and error states. Built on TanStack Table.
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.
Notes 1 – Tagged notes with previewsnotes-1A compact notes card listing recent notes with a title, preview, date and category tag. Add note opens a dialog for the title, note and tag. Adapt it for personal notes, meeting notes or account context on a dashboard.
1:1 Agenda 1 – Talking points and action itemsone-on-one-agenda-1A 1:1 meeting card: who and when, a checklist of talking points and a checklist of action items, and an Add talking point action that opens an inline field. Includes loading, empty and error states. Use it for 1:1s, standups or any meeting agenda.
Org Chart 1 – Reporting lines across three levelsorg-chart-1An org chart card that draws reporting lines from a nested tree of people, with avatar, name and role on each node. Scrolls sideways on narrow screens. Includes loading, empty and error states. Adapt it for ownership or any hierarchy.
Dashboard 6 – Paid media allocationpaid-media-allocation-1Donut breakdown of spend across paid channels.
People Directory 1 – Profile cards with team and locationpeople-directory-1A responsive grid of people cards: avatar, name and role, a team badge and location with time zone. Columns follow the width of the container. Includes loading, empty and error states. Adapt it for members, collaborators or contacts.
Performance Reviews Table 1 – Review cycle data tableperformance-reviews-table-1A performance reviews table: employee, manager with avatar and email, review stage (not started, self-review, manager review, calibrated), a progress bar with percentage and a sortable due date. A filter field, stage and assignee filters, column visibility, row selection, row actions, drag-and-drop reordering and pagination. Includes loading, empty and error states. Built on TanStack Table.
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 10 – Free vs paid contrast layoutpricing-10A two-option pricing pattern that pairs a neutral free tier with a strongly emphasized paid plan. The visual contrast clearly establishes an upgrade path, using color and emphasis to guide attention toward the paid option while still allowing easy side-by-side comparison.
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.
Pricing 8 – Split layout with featured plan emphasispricing-8A two-column pricing pattern that pairs contextual framing on the left with vertically stacked plans on the right. One plan is visually elevated using contrast to guide choice, making this pattern effective when you want to anchor users toward a recommended tier while still supporting comparison.
Pricing 9 – Unified card group with equal plan weightpricing-9A single grouped pricing container where all plans share the same visual treatment and hierarchy. This pattern emphasizes fairness and easy comparison, making it suitable when no plan is intentionally promoted and users are expected to evaluate options side by side.
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.
Project Time Log 1 – Time split across projectsproject-time-log-1Where the week's time went: the total, a stacked bar sized by each project's share, and a table of projects with share bars and tracked time. Includes loading, empty and error states. Adapt it for clients, projects or categories.
Projects Table 1 – Project portfolio data tableprojects-table-1A project data table: project, lead, milestone, progress, status and target date, with row selection, sortable project and progress columns, row actions and rows-per-page pagination. Takes an optional `statuses` filter so a header Filter menu can narrow it, and collapses to project names in a narrow container. Includes loading, empty and error states. Built on TanStack Table.
Dashboard 16 – Rep leaderboardrep-leaderboard-1Reps ranked by quota attainment with target markers.
Requests Table 1 – Request queue with views and approvalsrequests-table-1An HR request queue: request, priority, due date (today in destructive), status (pending, approved, rejected), requester with avatar and email, and submitted date. All requests, Awaiting me and Due today views switch the list; a filter field, status, priority and column filters narrow it. Row actions approve or reject, with row selection, a sortable submitted column, drag-and-drop reordering and rows-per-page pagination. Includes loading, empty and error states. Built on TanStack Table.
Dashboard 14 – Revenue vs targetrevenue-vs-target-1Closed revenue against target and forecast as a tick meter.
Review Cycle 1 – Stage counts with per-person progressreview-cycle-1A review cycle summary: complete, not started and in-progress counts, a segmented meter across the whole cycle, and a table of reviews with progress and stage. Includes loading, empty and error states. Adapt it for reviews, audits or applications.
Schedule 1 – Month calendar with the day's meetingsschedule-1A schedule card pairing a month calendar with the selected day's meetings. Each meeting expands to show attendees, the platform and a category badge, and days without meetings show an empty state. Use it on personal dashboards, booking tools or team schedules.
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.
Spending Balance 1spending-balance-1A summary card that shows total spend for a period, with a clear visual cue and a simple category breakdown. Good for dashboards where you want one quick read before details. It answers “how much did I spend and where did it go” at a glance.
Status Tracker 1 – Who is in, away or absent todaystatus-tracker-1A team presence card: counts for in today, away and absent, then who is absent and who is away with the reason and when they are back. Includes loading, empty and error states. Use it on manager dashboards and team pages.
Stock Market 1stock-market-1A market snapshot block that shows current value, change over time, and basic context. The chart is the focus, with quick filters for time range and a couple of supporting stats. Good for dashboards where you want trend first, details second.
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.
Talent Grid 1 – Nine-box calibration gridtalent-grid-1A nine-box talent grid for calibration: people placed by performance (low to high, left to right) and potential (high to low, top to bottom), each box named (Diamond, Star, Core, At risk and so on) with an avatar stack, plus a Calibrate action. Includes loading, empty and error states. Use it for review calibration, succession planning or skills matrices.
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.
Team Absences 1 – Monthly leave timeline per personteam-absences-1A team absence card for one month: a table with a day timeline per person (annual, sick and casual leave in their own colors), leave type, days and approval status, a legend, and a footer with days out this month, the peak week and a Request leave action. Scrolls sideways on narrow screens. Includes loading, empty and error states.
Team Activity 1 – Who is active and how muchteam-activity-1A team pulse card: the share of the team active in the last hour over a progress bar, then each member with their role, time tracked today and an activity badge. Includes loading, empty and error states. Use it on manager dashboards and time tracking apps.
Team Pulse 1 – Engagement heatmap with insight and action planteam-pulse-1An engagement survey matrix: participation, then favorable scores by team and dimension as a four-band heatmap with the change since the last survey. Selecting a score opens its insight (statement, favorable, neutral and unfavorable split, a suggested next step) and drafts an action plan with an owner and due date. Includes loading, empty and error states. Reuse it for service quality, product feedback or any team-by-metric scores.
Teams Table 1 – Teams with lead, hiring status and hiring planteams-table-1A teams table: each team with its lead, a hiring or frozen badge with open roles, its function, stacked member avatars and a hiring-plan meter, plus a status filter, export and row actions. Includes loading, empty and error states. Adapt it for departments, squads or cost centers.
Tenure Distribution 1 – Employees by years at the companytenure-distribution-1How long people have been at the company, as a column chart of tenure bands from under a year to nine plus. Includes loading, empty and error states.
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 12 – Featured quote with supporting cardstestimonials-12A hybrid testimonial layout that anchors the section with a single, prominent featured quote and portrait, supported by smaller secondary quotes beneath. It creates a clear hierarchy: one strong endorsement to lead, with additional voices adding breadth and credibility without competing for attention.
Testimonial 13 – Single featured testimonial with inline paginationtestimonials-13A clean, focused testimonial layout built around one primary quote and portrait, with minimal controls to step through additional testimonials. Strong visual emphasis on the individual builds trust and authority, while inline pagination keeps the layout compact and distraction-free.
Testimonial 14 – Dual quote carousel with ratingstestimonials-14A two-up testimonial layout showing parallel quotes with star ratings, names, and roles. Uses carousel controls to rotate content while keeping density low. Works well when you want social proof without large imagery and want to highlight consistency across multiple voices. Includes pagination.
Testimonial 15 – Image-led quote cardstestimonials-15A two-card layout that pairs large, contextual photos with short quotes and author details. Feels more human and story-driven than avatar cards. Best when you want atmosphere and team presence to do some of the credibility work, not just the text.
Testimonial 16 – Single hero testimonialtestimonials-16A focused, one-voice layout with a large contextual image and a single quote. Very clear hierarchy. Works best when you have one strong story you want people to actually read, not skim. Good for mid-page trust reinforcement rather than a dense social proof wall.
Testimonial 17 – Testimonial with supporting metricstestimonials-17This one blends a strong personal quote with credibility stats. The testimonial does the emotional work, while the numbers add reassurance without overwhelming it. Best used near conversion points where people want proof and scale, not just praise.
Testimonial 18 – Multi-quote card carouseltestimonials-18This pattern breaks one customer into multiple short quotes, each paired with a different visual. It’s good for scanning and variety, but weaker on trust unless the context is clear. Works best as supporting social proof rather than a primary testimonial.
Testimonial 19 – Image carousel with quote overlaystestimonials-19A horizontally scrolling set of image-led cards, each using a full-bleed photo with a subtle gradient overlay to anchor short quotes and author details. pagination controls sit inline, reinforcing the carousel behavior without dominating the layout. On smaller screens, the design collapses into a single-card vertical rail for focused browsing. Works well when you want visual consistency, motion, and repeatable social proof without turning the section into a dense grid.
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 20 – Split heading and featured quotetestimonials-20A minimal, two-column layout that separates context from content. The left side anchors the section with a static heading and short intro, while the right side highlights a single, prominent quote with author details and inline navigation. The structure creates a strong reading flow and keeps focus on one testimonial at a time. On smaller screens, it stacks into a compact, single-column carousel for clarity and continuity.
Testimonial 21 – Auto-scrolling quote cardstestimonials-21A horizontally auto-scrolling row of compact testimonial cards paired with a centered section header. Cards move continuously to showcase multiple quotes without user input, creating motion and density while keeping each card lightweight and readable. Designed to surface social proof at scale, with a smooth transition to a single-card carousel on smaller screens to maintain focus and pacing.
Testimonial 22 – Auto-scrolling stacked columnstestimonials-22A multi-column testimonial layout where cards are arranged in vertical stacks that auto-scroll in opposing or offset directions. This creates a dense, editorial-style wall of social proof with constant motion, while preserving clear card boundaries and scanability. Works well for showcasing many short testimonials at once, with a simplified single-column experience on smaller screens to keep it readable.
Testimonial 23 – Masonry quote cardstestimonials-23A three-column masonry layout with compact quote cards beneath a centered section heading. Varied card heights accommodate different quote lengths, while avatars, names, roles and verification badges provide clear attribution. The arrangement makes multiple customer voices easy to scan, working well when you want a broad collection of short endorsements without giving one testimonial priority.
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.
Time Off Summary 1 – Allowance meter with recent requeststime-off-summary-1A leave summary showing days used against the annual allowance as a segmented meter, followed by recent requests with their dates, length and approval status. Use it on employee dashboards and profile pages.
Time Tracker 1 – Session clock with project and breakstime-tracker-1A time-tracking card with the current session time, a status badge, the project being logged to with recent shortcuts, and progress against today's target. Clock out and take-a-break controls change the session state. Use it on employee dashboards, agency tools or timesheet apps.
Timesheet 1 – Week of clock-ins with a day timeline and approvalstimesheet-1A weekly timesheet: each day's worked sessions on a timeline, clock-in to clock-out hours, the day's total and its approval status, then the week's total, breaks and overtime with a submit button. Includes loading, empty and error states. Use it in time tracking, payroll or agency apps.
Top Apps 1 – Team time by apptop-apps-1The apps a team spends tracked time in: app logos, time today and a share bar with its percentage, plus a note on how much of the day the top apps cover. Includes loading, empty and error states. Use it in time tracking and productivity dashboards.
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.
Transactions 1transactions-1A compact transaction list for recent activity. Shows status filters, clear labels, amounts, and dates at a glance. Works well in dashboards where users need quick confirmation of money in or out, with a simple path to view the full history.
Dashboard 18 – Win ratewin-rate-1Win rate with stage-to-stage conversion bars.