@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 data-rich component for showing an account balance at a glance, with supporting context over time. Combines a primary balance summary with trend indicators a…

A data-rich component for showing an account balance at a glance, with supporting context over time. Combines a primary balance summary with trend indicators, …

A data-rich component for showing an account balance at a glance, with supporting context over time. Combines a primary balance summary and a chart to help use…

A compact data visualization component for showing spending by category over a selected time range. Uses simple bars and inline values to make comparisons easy…

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

A market snapshot card 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…

A compact transaction list for recent activity. Shows status filters, clear labels, amounts, and dates at a glance. Works well in dashboards where users need q…

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

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…

Pipeline 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 proba…

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

A centered dialog modal with a dimmed backdrop, similar in structure to Modal 1 but visually weighted toward caution. The header includes an icon, title, descr…

A centered, medium-width modal designed specifically for sign-in flows. It uses a clear vertical layout with a strong heading, supporting text, and stacked for…

A compact footer layout built around a single horizontal row of lightweight links paired with a small set of primary actions. Uses clear alignment and restrain…

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

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

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

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

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

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

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

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

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

A structured file upload layout that separates completed and in-progress uploads into clear sections. Uses lightweight headers to group states, making it easy …

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

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

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

Full-featured data table for admin and SaaS back-office views: customers, users, records, list management. Use for dense, editable lists with a per-row selecti…

Invoice management table for billing and finance dashboards. Use for listing invoices with paid, pending and overdue status badges, document icons and issued, …

Paginated transactions table with global search, multi-select method and status filters, sortable date and amount columns, row selection and per-row actions. U…

Team and workspace member directory for admin and settings pages. Use for listing people with an avatar, name and email, plus role, status (active, offline, in…

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