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.
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.
Four key metrics in a single strip: spend, revenue, cost per lead, and conversion rate.
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.
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.
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.
(No description)
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 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 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 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.
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 establish brand presence. Works well as a primary landing hero when you want clarity first and visual impact second.
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 social proof reinforcing credibility. Best used when you want an emotional first impression and strong brand presence right at the top.
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 placed directly beneath the primary action. Works well for product-led sites that want clarity and reassurance without heavy visual weight.