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.
Compact 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.
Customer 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.
Members 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.
Role 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.
Geographic 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.
Empty / 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.
No-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.
Loading / 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.
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 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.
Error / 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.
Offline / 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.
Invoice 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.
Paginated 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.
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, 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.
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, 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.
Support 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.
Paginated 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.
Rich 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.
File 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.
A component that displays a tagline with different variants.
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 disappear once a choice is made. Good for forms, filters, and lightweight metadata input.
A 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.
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 consistent alignment and spacing for quick scanning, and collapses cleanly into fewer columns on smaller screens without changing the overall structure.
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 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 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 with clear hierarchy and scannability, balancing human presence with structured information.
A 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.
A 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.
A 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.
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 identity and context to content.
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 content in a vertically stacked format.
An 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.
A 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.
How 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.
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 feedback over individual storytelling, making it effective for scanning, comparison, and reinforcing widespread adoption.
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 many voices at once, using consistent cards and subtle hierarchy to reinforce trust without relying on a single standout story.
A 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.
A 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.
A 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.
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 want atmosphere and team presence to do some of the credibility work, not just the text.
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 to actually read, not skim. Good for mid-page trust reinforcement rather than a dense social proof wall.
This 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.
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 unless the context is clear. Works best as supporting social proof rather than a primary testimonial.
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. 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.
A 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.
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 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.
A 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.
A 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.