A starter collection of polished shadcn/ui components and blocks built to production standards. Part of a larger Figma + React system designed to scale with your product.
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.
A review card of labelled payment details under a heading, in two columns that wrap to one in narrow slots, with an optional footer. By default it shows bank details for paying in from another bank, with copy and share actions.
A payment summary as label and value pairs in two columns, with an optional action such as Edit beside it, or above it under a Payment details label in narrow slots. Use it inside a review, confirmation or detail screen.
A transaction detail card with date and time, category, payment card and funding account in paired columns, followed by a category spending action that widens to full width in narrow slots.
A single-column list of labelled values for a payment or currency exchange summary, such as the amount paid, fee, rate, date and status. Sits inside a dialog or a narrow card.
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 navigation buttons. Renders a sensible default layout from a single table prop, and every part is exported so blocks can recompose the footer, swap the summary copy, or drop the edge buttons without duplicating the markup.
A 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.
(No description)
An 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.
An 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.
A 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.
A 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.
A personal banking summary: spendable money until payday with a countdown, account balance, send and move actions, savings jars, and a stacked card wallet: the cards rise out of the wallet as it comes into view, lift on hover, and slide back into the pocket or come to the front as you step through them or pick one. Balances can be hidden in one tap, and the panel stays dark in a light theme. Use it as the lead panel on a banking overview.
A currency-pair panel with a pair picker, the current rate and its change, 1W to 1Y range buttons, a rate chart with a hover tooltip, high, low and average figures, and a Set rate alert action. Narrow slots move the alert action under the rate and the range buttons under the chart.
A 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.
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 one expanded answer and the rest collapsed by default.
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 support link at the end. Works well for product or marketing pages where FAQs are a secondary section, not the main focus.
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 layouts.
A feature discovery card with an eyebrow, heading, supporting copy, one call to action and artwork. The artwork sits above the copy in narrow slots and beside it in wide ones.
A component that arranges an icon, header, body text, and CTA in different layout styles. This component makes features clear and actionable.
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 and type. Takes an AI SDK file part.
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 progress indicators, supporting multiple concurrent uploads. Designed to give immediate feedback and visibility into upload state without leaving the page.
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, 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.
A 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.
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 focus states to guide interaction. Designed to pair with upload lists or cards, making the start of the upload flow obvious and low-friction.
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 files, with inline progress, file metadata, and quick actions like cancel or remove. Designed to be stacked into lists for multi-file uploads while keeping each file’s state easy to scan.
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 quick scanning. Includes a stacked variant for mobile layouts.
A 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.
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 navigation without visual weight. Collapses into a single stacked list on mobile for fast scanning.
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 keeping navigation clear. Works well for marketing sites where brand positioning matters as much as wayfinding.
A 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.
Workforce 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.
Departments 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.
A 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.
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 controls clear and accessible. Works well for profile, settings, or content overview pages where light visual hierarchy helps without overpowering the UI.
A 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.
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 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.
A 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.
A 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.
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, brand stories, and team or culture-led sections where the image does most of the work.