@shadcncraft

A compact, visually appealing component for displaying multiple user avatars in an overlapping stack. Perfect for showing participants in a group chat, team me…

A component that highlights a key excerpt or quote from an article. This component draws attention to important passages and breaks up long text blocks.

A component that displays an inline or full-width image with an optional caption. This component makes blog articles more engaging and visually appealing.

A component that combines small text with an icon for quick callouts. This component highlights key values such as benefits, attributes, or job details.

A component that arranges an icon, header, body text, and CTA in different layout styles. This component makes features clear and actionable.

A component that places an icon inside a styled square or circle frame for extra prominence. This component makes supporting visuals stand out in marketing lay…

A component that displays open roles in a card format with a badge, title, short body, and feature chips. This component brings structure and clarity to career…

A smooth, endlessly looping scroller ideal for showcasing logos, testimonials, images, or sponsor lists. Features auto-play with customizable speed, pause-on-h…

A component that displays large stats with a sub-label for context. This component is designed to highlight performance or usage data.

A Mobile Navigation Menu component that provides expandable menus for small screens. Built based on shadcn/ui Navigation Menu component, but optimized for smal…

A component that acts as the text-focused version of a hero banner. This component combines a pre-heading label, an H1 heading, supporting description text, an…

A component for that can be replaced with your brand's main logo. This component ensures layouts stay consistent before brand assets are applied.

An extension of the avatar component with more details on the individual. Good for blog posts etc.

A component that standardizes heading typography and spacing. This component includes a pre-heading label, main heading, and body text in different layout vari…

A component that displays ratings with stars and an optional label. This component builds trust with visual feedback.

A component that presents a smaller feature layout for a dialled-back look. This component balances detail with simplicity.

A component that displays a tagline with different variants.

A Placeholder that displays content in a device-style frame. This component helps showcase product UI.

A lightweight announcement component for highlighting updates, releases, or important notices without interrupting the main flow. Uses a compact label and titl…

A pagination footer for TanStack Table data tables. Combines a summary line, a rows-per-page select, a page indicator, and first, previous, next and last navig…

An Inline Hint is a lightweight, non-intrusive UI pattern that provides helpful guidance, clarification, or best-practice advice directly within or immediately…

A flexible messaging component for displaying conversational threads. Supports sent and received messages, timestamps, reactions, and file attachments. Built t…

A horizontal divider with optional inline content like labels, tabs, or actions. Used to separate sections while keeping context visible, not just a visual bre…

A multi-select tag picker for filtering or categorizing content. Supports search, selected-state chips, and a clear active state. Simple, compact, and meant to…

A compact, inline ticker for live or near-real-time values. Shows an identifier, current value, and delta with clear up or down signaling. Designed to sit quie…

Displays a badge or a component that looks like a badge.

Image zoom is a component that allows you to zoom in on an image.

A component that displays a blog listing card in a vertical or horizontal orientation.

A component that displays a blog listing card in a card format in a vertical or horizontal orientation.

A large featured blog card intended for featuring a blog post. With a floating overlay on the bottom left side of the card.

A large featured blog card intended for featuring a blog post. It has a progressive gradient and blur effect stacked horizontally on the bottom side of the car…

A large featured blog card intended for featuring a blog post. It has a progressive gradient and blur effect, stacked vertically on the left side of the card.

A component for Figma that compares plans with layout variants, including a 'Most Popular' highlight. This component makes pricing clear and actionable.

A component that displays a user's image alongside their name, a supporting detail such as role or date and social links. This component is useful for adding i…

A component that displays a user's image alongside their name, a description and social links. This component is useful for adding identity and context to cont…

A flexible feed item for displaying recent activity in a clear, scannable format. Combines an avatar, primary action text, optional supporting text, and contex…

A focused component for adding or updating a user profile image. Handles empty, uploaded, and removable states with clear affordances, including file requireme…

A focused component for adding or updating a user profile image. Handles empty, uploaded, and removable states with clear affordances, including file requireme…

A compact summary component for individual messages or threads. Shows sender, subject, timestamp, and a short preview of the content. Designed for inboxes, not…

A compact summary block for highlighting a single key metric. Combines a label, primary value, and supporting context like trend direction or time range. Desig…

A compact summary block for highlighting a single key metric. Combines a label, primary value, and supporting context like trend direction or time range. Desig…

A single step within a progress sequence used to show order, status, and context. Combines a step indicator with a title and optional description, supporting a…

A self-contained upload item that shows the status of an individual file during and after upload. Supports clear states for uploading, completed, and failed fi…

A dedicated drop zone for selecting files via drag-and-drop or manual browsing. Communicates accepted file types and size limits up front, with clear hover and…

A command or a short file, shown so it can be taken. Comes as an inline chip for code inside a sentence and as a block for code that stands on its own, with an…

TBD

TBD

TBD

TBD

The file a message was sent with, drawn as a card rather than left as a link. An image previews in place, anything else falls back to an icon beside its name a…

A model's thinking, folded away behind a disclosure so it never competes with the answer. The trigger shimmers while tokens are still arriving and settles once…

A message's text. An answer is parsed as markdown by Streamdown, which copes with the half-finished syntax a stream produces and gives code blocks their own he…

One tool call, through all four of its states: running, done, failed and refused. A denied call reads differently from one that simply errored, and expanding e…

The line saying a search happened: objective and a spinner while it runs, a warning when it fails. What it found is not rendered here, because the citations un…

The agent asking before it commits to expensive work: a multi-step form rendered inside the message, with choices, multi-select, a freeform field, validation a…

The citation list under an answer, collapsed to a count until asked for. Citations reach a chat by two different routes, streamed by the provider or buried ins…

A low-height horizontal banner with an icon, short message, and inline input with primary action. Designed to sit between sections without breaking page flow. …

A 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 …

A 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…

A 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…

A horizontal banner with an icon, short explanatory text, and a grouped set of actions including primary, secondary, and tertiary options, plus a dismiss contr…

A 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 pr…

A 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 lig…

A 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…

A 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 …

A 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 prod…

A benefits section with a headline and intro, followed by multiple feature rows that alternate text and visual previews. Each row includes an icon, feature tit…

A 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…

A benefits section with a headline and intro, followed by stacked feature sections that alternate text and large visual panels. Each feature includes a title, …

A 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 co…

A 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 s…

A 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 descrip…

A 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…

A 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 descriptio…

A 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 …

A 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 t…

A 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 seconda…

A 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 t…

A 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 …

A 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 …

A 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 l…

A 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 c…

A 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 cl…

A 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 clea…

A 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…

A 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…

A 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. U…

A 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 c…

A 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…

A 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 a…

A blog layout anchored by a large featured post followed by a compact card grid. Emphasizes editorial hierarchy by spotlighting a primary article, then surfaci…

A 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 browsin…

A simple vertical job list focused on clarity and scannability. Uses a single-column layout with clear role titles and lightweight metadata like location, work…

A 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 …

A multi-column grid of role cards with consistent metadata and actions. Designed for scanning and comparison across roles, with equal visual weight and clear h…

A 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 …

A 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 wit…

A 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 y…

A 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 w…

A 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…

A 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 availa…

A 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 gr…

A 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 physic…

A 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 p…

A 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 bel…

A 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…

A 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 …

A 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…

A 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 co…

A 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 int…

A bold, high-contrast CTA presented inside a contained panel, with a centered headline and stacked primary and secondary actions. The strong visual separation …

A wide, high-contrast CTA panel with left-aligned content and inline primary and secondary actions. The asymmetric layout creates a strong visual anchor while …

A 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 illu…

A split CTA layout anchored by a dominant visual panel, with supporting copy and a short feature list alongside. Emphasizes imagery first, then reinforces the …

A 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 explana…

A 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 s…

Multi-column FAQ layout with short answers visible by default. Includes an optional CTA panel below. Scales down to a stacked list on mobile.

Single-column, centered accordion for longer answers. Optimized for reading and scanning. Collapses into a stacked accordion on mobile.

A 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 …

A clean, centered FAQ accordion paired with a narrow sidebar version. Uses a strong section header and clear dividers for easy scanning, with an optional suppo…

A wide, multi-column footer with grouped navigation links and a compact legal row. Designed for content-heavy sites that need clear link categorization and qui…

A multi-column sitemap footer with a prominent newsletter signup band. Combines navigation, legal links, and email capture in a single layout. Designed for mar…

A 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 navigat…

A 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 …

A 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 establ…

A 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…

A 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 …

A centered hero set on a subtle gradient background, using stacked CTAs to support different commitment levels. Includes lightweight credibility with an inline…

A 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-a…

A 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 …

A 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 c…

A 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 de…

A 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 h…

A 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, br…

A horizontally distributed metrics layout that pairs large headline numbers with short labels, anchored by a subtle world map background. The pattern emphasize…

A metrics layout built around a strong centered heading, followed by evenly spaced stat columns with short supporting labels and optional inline links. The pat…

A 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, b…

A 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 r…

A metrics layout where each stat is wrapped in a lightweight card. The cards create clear boundaries, making each metric feel discrete and scannable while stil…

A 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 c…

A 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…

A 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, …

A 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 mat…

A 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 we…

A metrics layout that pairs a short explanatory block with supporting stats to the right. Useful when metrics need framing or justification rather than standin…

A newsletter signup pattern that pairs a simple email capture with a strong visual anchor. The form stays lightweight and prominent, while the adjacent product…

A newsletter signup pattern that leads with clear value before the email field. Short bullet points set expectations and reduce hesitation, while the form rema…

A compact newsletter signup pattern that places the email field inline with the headline. The layout minimizes friction and keeps attention focused on a single…

A centered newsletter signup pattern that emphasizes balance and clarity. The headline and form are vertically stacked to create a clear focal point, with supp…

A horizontal newsletter signup pattern presented inside a soft container to separate it from surrounding content. The headline and description anchor the left …

A classic three-column pricing layout with equal-weight plan cards for easy comparison. Each card follows the same vertical rhythm with plan name, price, prima…

A simplified pricing layout that presents two plans side by side to reduce choice overload. The shared header anchors context, while the paired cards make diff…

A centered, single-card pricing layout that puts all attention on one plan. Removing comparisons reduces decision friction and works well for early-stage produ…

A classic three-tier pricing layout with a clearly emphasized middle plan to guide choice. The visual weight, border treatment, and "most popular" marker steer…

A 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 s…

A 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 w…

A 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 w…

A 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…

A single grouped pricing container where all plans share the same visual treatment and hierarchy. This pattern emphasizes fairness and easy comparison, making …

A two-option pricing pattern that pairs a neutral free tier with a strongly emphasized paid plan. The visual contrast clearly establishes an upgrade path, usin…

A minimal social proof pattern that presents partner or customer logos in a single horizontal row. It builds trust without interrupting flow, using uniform siz…

A horizontally scrolling logo strip that loops automatically. It adds motion and density without taking more vertical space. Good when you have lots of logos o…

A 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 su…

A 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 att…

A 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 …

Centered headline with a strict, even grid below. Strong symmetry, lots of white space, and clear hierarchy. Feels calm, credible, and deliberate. Works well w…

A 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…

A 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 structu…

Team 3 – Mixed-shape avatar mosaic

A 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…

A gallery-style layout built around large, consistent portrait cards with subtle overlays. Emphasizes visual uniformity and hierarchy, using generous spacing a…

A centered, long-form testimonial designed to feel calm and authoritative. Uses generous whitespace, oversized quotation marks, and a single focal block to giv…

A minimal, centered testimonial layout that tightens the hierarchy around the quote and author. Compared to Testimonial 1, this version reduces visual weight a…

Testimonial 3 – Split quote with featured profile

A 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, at…

A 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 s…

A split testimonial layout with the quote anchored in a static text column and a horizontal carousel of large profile cards running alongside it. The overlappi…

A 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…

A testimonial layout that anchors on a long-form quote with clear brand attribution, then reinforces credibility using a horizontal strip of individual profile…

A testimonial layout built around small, self-contained story cards, each representing a different team or use case. The grid creates quick scanability while s…

A compact testimonial layout that surfaces many short quotes at once using a uniform card grid. Designed for volume and credibility, it emphasizes breadth of f…

A structured testimonial layout that combines a clear section header with a multi-column grid of short quotes. It balances scannability and depth by presenting…

A hybrid testimonial layout that anchors the section with a single, prominent featured quote and portrait, supported by smaller secondary quotes beneath. It cr…

A clean, focused testimonial layout built around one primary quote and portrait, with minimal controls to step through additional testimonials. Strong visual e…

A two-up testimonial layout showing parallel quotes with star ratings, names, and roles. Uses carousel controls to rotate content while keeping density low. Wo…

A 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 …

A 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 t…

This one blends a strong personal quote with credibility stats. The testimonial does the emotional work, while the numbers add reassurance without overwhelming…

This 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 unles…

A 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. pagina…

A 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…

A horizontally auto-scrolling row of compact testimonial cards paired with a centered section header. Cards move continuously to showcase multiple quotes witho…

A multi-column testimonial layout where cards are arranged in vertical stacks that auto-scroll in opposing or offset directions. This creates a dense, editoria…

A three-column masonry layout with compact quote cards beneath a centered section heading. Varied card heights accommodate different quote lengths, while avata…

A classic left-aligned top navigation with horizontal links and inline dropdown menus for larger screens. Primary actions are grouped on the right for clear vi…

A center-aligned top navigation that places the primary links in the middle of the header, creating a more balanced, symmetrical layout. Dropdown menus open di…

A compact top navigation that keeps the large-screen layout minimal and low-profile, with primary links arranged in a single horizontal bar. Dropdowns reveal r…

A centered top navigation where primary links sit inside a pill-style container, creating a strong visual anchor across large screens. Dropdown menus open from…

A stripped-back, center-aligned top navigation that prioritizes clarity and whitespace. Primary links sit in a single horizontal row with the brand anchored to…

A clean and centered error page design for handling "Page not found" scenarios. The layout features a clear information hierarchy starting with the "404" statu…

A modern and emotionally engaging error page that uses a split-screen composition. The left side provides clear, left-aligned information: the "404" status cod…

A comprehensive error recovery page designed to provide immediate assistance. The top section maintains the standard 404 messaging and primary navigation butto…

A 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 st…

A 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. T…

A 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 …

A chronological activity feed presented as a vertical timeline, combining user avatars, action summaries, and timestamps for quick scanning. Includes a top sea…

App shell with a standard sidebar, header, and content slot. Collapsed variant included.

App shell with a floating sidebar, header, and content slot. Collapsed variant included.

App shell with an inset sidebar, header, and content slot. Collapsed variant included.

App 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 i…

App shell header with a page selector, date range presets, filters, and search.

App shell header with a breadcrumb, faceted filters, and a search field.

App shell header with a page selector, applied filters as removable chips, and a search field.

App shell header with a page selector, filters, and a primary action.

App shell header with a page selector, a period select, and a date range stepper.

App shell header with a page selector that follows the current route, and search.

Four key metrics in a single strip: spend, revenue, cost per lead, and conversion rate.

Hero area chart comparing this period against the previous period.

Total traffic with a segmented share bar and per-channel breakdown.

Clicks received vs leads converted, by channel, as grouped bars.

Daily cost per acquisition as an area trend with period comparison.

Donut breakdown of spend across paid channels.

Top campaigns by leads generated, as a compact data table.

Pages ranked by sessions with visitor share.

Stage-by-stage conversion across the marketing funnel.

Revenue credited by first touch vs last touch, per channel.

Live sliders modeling monthly spend against projected pipeline.

Month-to-date attainment against monthly targets as bullet bars.

Open-rate heatmap by send day and hour.

Closed revenue against target and forecast as a tick meter.

Open pipeline value and share across deal stages as a funnel.

Reps ranked by quota attainment with target markers.

Open deals with owner, stage, value, and close date.

Win rate with stage-to-stage conversion bars.

Average days in stage by segment as a heatmap.

Marketing-to-sales handoff as concentric ring progress.

Leads and pipeline value by country, with list and map views.

Average customer health as an arc gauge with score bands.

Alerts and opportunities surfaced automatically across the funnel.

A standard page header that anchors the page title with optional breadcrumbs, primary actions, and inline search. Designed for app and dashboard pages where us…

A 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 c…

A compact page header that combines breadcrumbs, a clear page title, and inline tabs for switching between related sections. Keeps navigation close to the cont…

A 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 …

A compact header designed for user or account pages. Combines avatar, name, and secondary details with inline actions and search, keeping identity and controls…

A lightweight page header that pairs a clear title with a short supporting description. Designed for settings or configuration screens where users need immedia…

A 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 n…

An 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 c…

An 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…