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.
An extension of the avatar component with more details on the individual. Good for blog posts etc.
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 text below it. The connecting line is subtle and continuous, keeping focus on sequence rather than state. It reads left to right at a glance and works well as a high-level orientation pattern rather than an active control.
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, connected by a thin vertical line to reinforce sequence. The layout reads top to bottom, making it easy to scan and well suited for sidebars or onboarding flows where space is constrained.
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 icons, while the current or pending step uses a neutral indicator. Each step includes a short title and supporting description beneath it, balancing status clarity with explanatory context. Best suited for onboarding or checkout flows where users benefit from seeing what’s done and what’s left.
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 reinforce sequence. Titles are bold, with short descriptions beneath in muted text. The layout reads like a checklist rather than a tracker, signaling completion and closure rather than ongoing progress. Works well for review states, confirmations, or “you’re all set” screens.
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 active, pending, and completed states. Designed to stack vertically for onboarding flows, checklists, and multi-step processes where clarity and scanability matter.
A project data table: project, lead, milestone, progress, status and target date, with row selection, sortable project and progress columns, row actions and rows-per-page pagination. Takes an optional `statuses` filter so a header Filter menu can narrow it, and collapses to project names in a narrow container. Includes loading, empty and error states. Built on TanStack Table.
Where the week's time went: the total, a stacked bar sized by each project's share, and a table of projects with share bars and tracked time. Includes loading, empty and error states. Adapt it for clients, projects or categories.
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 and keyboard shortcuts. A tool rather than a data part, so the answers return as that tool call's output and survive a reload. Answered, it collapses to a summary of what was chosen.
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 the step closes. Takes an AI SDK reasoning part.
A recipient directory split into Recents and All, with avatars, names and payment identifiers such as PayID, bank details or BPAY. Businesses show an icon, and clearing the recents gives one flat list. Search, the page heading and navigation sit outside it.
An HR request queue: request, priority, due date (today in destructive), status (pending, approved, rejected), requester with avatar and email, and submitted date. All requests, Awaiting me and Due today views switch the list; a filter field, status, priority and column filters narrow it. Row actions approve or reject, with row selection, a sortable submitted column, drag-and-drop reordering and rows-per-page pagination. Includes loading, empty and error states. Built on TanStack Table.
A review cycle summary: complete, not started and in-progress counts, a segmented meter across the whole cycle, and a table of reviews with progress and stage. Includes loading, empty and error states. Adapt it for reviews, audits or applications.
A horizontal divider with optional inline content like labels, tabs, or actions. Used to separate sections while keeping context visible, not just a visual break. Works well in dense layouts like settings pages, docs, and dashboards where structure matters without adding noise.
A complete Next.js sales and marketing app with overview, analytics, campaigns, deals, leads, customers and settings. Installs under app/sales using independently installable registry blocks and your existing Pro license.
A savings-goal card with a half-ring progress gauge, saved amount and percentage, auto-save schedule, next deposit, remaining amount and target, plus edit and pause actions. Progress comes from the saved amount and the target.
A schedule card pairing a month calendar with the selected day's meetings. Each meeting expands to show attendees, the platform and a category badge, and days without meetings show an empty state. Use it on personal dashboards, booking tools or team schedules.
A scheduled-transfer overview with a filter for payments to others or between your accounts, 7 and 30 day totals, recipient rows with recurrence and next date, and a Schedule action that moves below the list in narrow slots.
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 restrained spacing to keep the footer unobtrusive, with responsive behavior that stacks actions vertically on smaller screens. Best suited for product or app surfaces where the footer supports navigation and actions without competing with page content.
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, designed to extend a page flow rather than close it. Adapts cleanly to smaller screens by stacking the action styles vertically. Best used when the footer's job is to prompt the next step, not provide site-wide links.
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 compact search input on the other, creating a balanced, tool-like feel. Scales down cleanly by stacking controls vertically on small screens. Best suited for product or admin contexts where the footer supports ongoing interaction rather than navigation or conversion.
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 indicator. Adapts for smaller screens by simplifying to basic navigation while keeping context about the current page. Best suited for data-heavy views like tables, feeds, or search results where navigation continuity matters.
A component that standardizes heading typography and spacing. This component includes a pre-heading label, main heading, and body text in different layout variants.
(No description)
A recipient card with identity and trust status, the last payment amount and note, and Pay again and Make regular actions. Use one per person in a recent-payees row; pass your own buttons to wire the actions.
Publishes a conversation to a link. Picking who can see it is the act of sharing, so there is no second confirm button and the link is one click from the clipboard. Opens from the control you already render, a header button or a row in a thread menu. Works with no backend behind it, and takes a real one when you have it.
A functional slide-out cart interface that appears as an overlay on the right side of the screen. It features a clear itemized list of added products, including thumbnail images, titles, brief descriptions, quantities, and prices. The layout is completed by a subtotal calculation at the bottom and a prominent button, providing a seamless transition from browsing to final purchase without leaving the current page.
A comprehensive checkout page featuring a two-column layout. The larger left column displays a detailed list of cart items with quantity adjusters and removal options. The right column serves a sidebar containing a promo code input field and a breakdown of subtotal, shipping, and taxes. This design provides an overview of the order total, ensuring a frictionless transition to the final checkout stage.
A streamlined and focused shopping cart layout where all elements are stacked in a single centered column. The page displays the list of items with full management controls (quantity and removal), followed directly by the promotional code input and the financial breakdown (subtotal, shipping, and taxes). This design minimizes eye travel and provides a clear, linear path toward the final checkout action.
A highly organized shopping cart page that utilizes three distinct white cards on a light gray background to separate functional areas. The main card on the left manages the product list and inventory controls. On the right, two smaller stacked cards isolate the Discount and Summary sections. This modular structure provides visual hierarchy and makes the information of the final checkout stage easy to digest.
A minimal social proof pattern that presents partner or customer logos in a single horizontal row. It builds trust without interrupting flow, using uniform sizing and muted styling so the section supports the page rather than competing with primary content.
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 or want the section to feel more alive. Keep the speed slow and subtle so it reads as credibility, not decoration.
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 subtle, but stronger at first glance.
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 attention away from the main content.
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 relying on testimonials or copy-heavy proof.
Centered headline with a strict, even grid below. Strong symmetry, lots of white space, and clear hierarchy. Feels calm, credible, and deliberate. Works well when you want restraint and clarity over motion or visual noise.
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 inside a search tool's output, and this gathers both into one list with the duplicates dropped.
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 before details. It answers “how much did I spend and where did it go” at a glance.
A column chart comparing spending across your tags, with a dollar axis and a tooltip showing each tag's payment count and total.
A monthly limits panel with a tick gauge of how much of your tracked limits is spent and the spent and left to spend (or over budget) totals. Pass trackers to add a gauge card per limit, which turns red once over; the cards sit in two columns beside the totals and stack below them in narrow slots.
A monthly net-spending summary with a tick meter split by category, matching legend values, a month selector and a link to insights. Use it as a compact overview of where money went.
A component that displays ratings with stars and an optional label. This component builds trust with visual feedback.
A team presence card: counts for in today, away and absent, then who is absent and who is away with the reason and when they are back. Includes loading, empty and error states. Use it on manager dashboards and team pages.
A market snapshot block 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.