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.
A component that displays ratings with stars and an optional label. This component builds trust with visual feedback.
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 supporting stats. Good for dashboards where you want trend first, details second.
(No description)
A component that presents a smaller feature layout for a dialled-back look. This component balances detail with simplicity.
Product performance leaderboard for e-commerce, catalogue and analytics dashboards. Use for ranking products by sales with a thumbnail and category, price, units sold, a star rating with review count and revenue. Includes a period selector and export, led by a heading. Read-oriented ranking; prefer when surfacing top sellers rather than editing a catalogue.
Market and asset-tracking table for crypto, stock and finance dashboards. Use for listing assets with an icon and ticker, price, a colour-coded change value, volume and market cap, and an inline sparkline trend. Includes a search field and time-range toggle in the header. Prefer when each row is a tradable asset needing an at-a-glance trend. Rows can be reordered by drag and drop via a per-row grip handle.
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 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 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.
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 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, centered testimonial layout that tightens the hierarchy around the quote and author. Compared to Testimonial 1, this version reduces visual weight and brings the attribution closer to the content, making it feel more compact and versatile. Works well when you want strong social proof without the section dominating the page.
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, attribution, and star rating sit in a clean text column for clarity. Works best when you want testimonials to feel premium and emotive, not just informational.
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 stacked visuals reinforce momentum and make the pattern feel interactive, while the layout keeps the testimonial readable and anchored. Best used when you want testimonials to feel dynamic without turning into a full slider section.
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 overlapping cards add depth and motion, while the fixed quote keeps the message readable and stable. Works well when you want strong visual presence without letting the imagery overpower the testimonial itself.
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 quote to collective validation, using repetition and ratings to build credibility at scale. Best used when you want to show breadth of adoption rather than spotlight one individual voice.
A testimonial layout that anchors on a long-form quote with clear brand attribution, then reinforces credibility using a horizontal strip of individual profiles. The composition balances authority and social density, making it effective when you want a strong narrative supported by visible team adoption rather than a single spokesperson.
A testimonial layout built around small, self-contained story cards, each representing a different team or use case. The grid creates quick scanability while still allowing depth per card, making it well suited to showcasing breadth of adoption across industries rather than a single standout quote.
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 header and controls. A question is rendered literally, because its asterisks are asterisks. Takes an AI SDK text part.
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 quietly in headers, dashboards, or feeds without pulling focus. Good for stocks, metrics, or any rolling signal.
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 either prints what went in or came back, as a code block you can copy in one click. Takes an AI SDK tool part, whichever tool it is.