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 1:1 meeting card: who and when, a checklist of talking points and a checklist of action items, and an Add talking point action that opens an inline field. Includes loading, empty and error states. Use it for 1:1s, standups or any meeting agenda.
A clean and centered error page design for handling "Page not found" scenarios. The layout features a clear information hierarchy starting with the "404" status code, followed by a bold headline and a brief, friendly explanation. Below the text, two distinct call-to-action buttons—a primary "Back home" and a secondary "Go back" with an arrow icon—provide users with immediate paths to resume their browsing.
A modern and emotionally engaging error page that uses a split-screen composition. The left side provides clear, left-aligned information: the "404" status code, a bold headline, a supportive description, and two navigation recovery buttons. The right side features a high-impact, artistic image that reflects the brand's aesthetic, transforming a negative technical moment into a stylish brand experience.
A comprehensive error recovery page designed to provide immediate assistance. The top section maintains the standard 404 messaging and primary navigation buttons. Below, the layout features a horizontal grid of three informative cards, each offering a different support channel. This proactive design ensures that users who encounter a dead end can easily find a way to get help.
A creative balanced error page that uses a custom illustration to communicate a technical disconnect. The layout features a two-column split: on the left, a stylized illustration of two disconnected blue plugs; on the right, the "404" status code, a bold headline, and a friendly message explaining the potential reasons for the error. The recovery path is clearly defined by two primary action buttons.
A highly functional error page that utilizes a balanced grid system. The layout is dominated on the right by a large, atmospheric image with rounded corners. The left side is divided into two clear zones: a top section containing the "404" status code, headline, and primary buttons, and a bottom section featuring a three-column support directory. This directory provides direct links for Email, Phone, and Live Chat.
A modern error page that utilizes an inverted split-screen layout. A large, stylized editorial image with rounded corners is positioned on the left. The right side contains the focused messaging area, featuring the "404" status code, a bold headline, and the standard recovery buttons. This composition provides a high-end feel, turning a common navigation hurdle into a curated brand moment.
Sick and unplanned leave as a share of working days, month by month over the last year, as a line chart on a pinned percentage scale. Includes loading, empty and error states.
A compact balance-history card for a savings account or jar: a headline amount with a date-range control, a balance area chart with a point-in-time tooltip, and two supporting totals. Pass your own label, series and totals to reuse it for an account total.
A balance-history panel for a spending account: an area chart that opens on today's balance, a period control, View upcoming, and spendable, account balance and set-aside totals. The totals sit in a row on wide slots and stack as label and value rows on narrow ones.
A security settings card with rows for two-step verification, sign-in alerts and trusted devices, each with supporting text and an action. Actions sit beside their descriptions and drop below them in narrow slots.
A field-sized picker showing the selected account with its icon, currency and balance, opening a menu of accounts as wide as the field. Pass your own options to pick recipients the same way.
A compact account tile with an icon, account name and balance, for a savings-jar grid or account overview. Pass a link to make the whole tile clickable.
A horizontal account row with account media, name, currency and spendable details, and a right-aligned balance. Pass a link to make the whole row clickable.
A transfer form with From and To pickers, amount fields where either side can be typed, notes under each field, timing and a confirm action. Between your own accounts it adds a switch control and swaps when both sides match; pass recipients and a rate to send to someone else, in another currency if needed.
A chronological activity feed presented as a vertical timeline, combining user avatars, action summaries, and timestamps for quick scanning. Includes a top search field and segmented filters to switch between activity types. The layout adapts cleanly to smaller screens by tightening spacing and stacking controls while preserving the same linear reading order.
A flexible feed item for displaying recent activity in a clear, scannable format. Combines an avatar, primary action text, optional supporting text, and contextual metadata such as timestamps or attachments. Designed to stack cleanly in lists, adapt to different densities, and support both lightweight updates and richer activity states without visual noise.
A complete AI chat app with persistent demo conversations, projects, a file library and a docked assistant. Installs under /ai-chat with scripted streaming by default and optional AI Gateway connectivity.
A lightweight announcement component for highlighting updates, releases, or important notices without interrupting the main flow. Uses a compact label and title pairing to surface timely information, with optional linking for deeper context. Works well inline or in banners and scales from subtle status updates to more prominent callouts.
App shell with a standard sidebar, header, and content slot. Collapsed variant included.
App shell with a floating sidebar, header, and content slot. Collapsed variant included.
App shell with an inset sidebar, header, and content slot. Collapsed variant included.
App shell with an inset sidebar, a page selector and search header, and a content slot. Navigation rows are real links that highlight the current section, so it drives an app's routes directly. Collapsed variant included.
App shell header with a page selector, date range presets, filters, and search.
App shell header with a breadcrumb, faceted filters, and a search field.
App shell header with a page selector, applied filters as removable chips, and a search field.
App shell header with a page selector, filters, and a primary action.
App shell header with a page selector, a period select, and a date range stepper.
App shell header with a page selector that follows the current route, and search.
For products where the chat is a guest rather than the page: a panel docked to the right, opened from a button in your own header, with a menu of past conversations, rename and delete on the open one, and a way out from inside. It holds its open state itself rather than borrowing a SidebarProvider, so the sidebar your app already has keeps its trigger, its shortcut and its collapse. It brings a whole working chat with it, so what your app supplies is the page it sits beside.
Voluntary turnover by department as horizontal gradient bars on a fixed percentage scale, each rate labelled on the right. Includes loading, empty and error states. Use it to spot teams that need a closer look.
A compact, visually appealing component for displaying multiple user avatars in an overlapping stack. Perfect for showing participants in a group chat, team members, or active collaborators. Supports customizable size, max visible avatars, border styling, and optional '+n' indicator for overflow. Renders gracefully from 1 to dozens of users while maintaining a small footprint.
A focused component for adding or updating a user profile image. Handles empty, uploaded, and removable states with clear affordances, including file requirements and inline actions. Designed to feel lightweight and direct, so users can quickly set or change their avatar without breaking flow.
A focused component for adding or updating a user profile image. Handles empty, uploaded, and removable states with clear affordances, including file requirements and inline actions. Designed to feel lightweight and direct, so users can quickly set or change their avatar without breaking flow.
Displays a badge or a component that looks like a badge.
A data-rich block for showing an account balance at a glance, with supporting context over time. Combines a primary balance summary with trend indicators and a chart to help users quickly understand current state and recent movement without digging into detailed reports.
A data-rich block for showing an account balance at a glance, with supporting context over time. Combines a primary balance summary with trend indicators, a chart, and optional actions to help users quickly understand current state and recent movement without digging into detailed reports.
A data-rich block for showing an account balance at a glance, with supporting context over time. Combines a primary balance summary and a chart to help users quickly understand current state and recent movement without digging into detailed reports.
The Banking app for Next.js: an inset app shell with Overview, Upcoming, Accounts, Cards, Transactions, Insights with Trackers and Tags, Currency exchange, Transfers, Recipients, Settings and Help & support screens with their detail pages and payment flows, assembled from the individually installable Banking Dashboard blocks. Installs routes under `app/banking`, so the app lives at /banking beside your existing pages.
A minimal announcement banner for low-friction updates. Renders as simple inline text with an optional icon and link, plus a close action. Best for subtle product news or secondary announcements that shouldn't compete with primary page content.
A low-height horizontal banner with an icon, short message, and inline input with primary action. Designed to sit between sections without breaking page flow. Use for newsletter signups, announcements, or lightweight calls to action that should feel unobtrusive but visible.
A compact banner presented as a card with icon, short message, input field, and primary action, plus a close control. Designed to float within a layout or sit near content without spanning full width. Use when you want a more prominent call to action than an inline banner, but still lightweight and dismissible.
A low-height horizontal banner with an icon, short announcement text, and multiple call-to-action buttons, plus a dismiss control. Designed to span the content width and draw attention without blocking layout flow. Use for product updates, launches, or time-sensitive announcements that need clear next actions.
A horizontal announcement banner with an icon, single-line message, two clearly ranked actions, and a dismiss control. Designed to sit inline within a page and support quick decision-making without expanding vertically. Use when you need to promote an update or feature with both a soft action and a strong primary action.
A horizontal banner with an icon, short explanatory text, and a grouped set of actions including primary, secondary, and tertiary options, plus a dismiss control. Designed to sit inline or at page edges without dominating the layout. Use for consent, permissions, or policy-related prompts that require a clear choice hierarchy.
A consent banner that pairs a low-height inline message with a stacked action layout in the card variant. Actions are vertically ordered to clearly separate primary, secondary, and tertiary choices, with a dismiss control included. Use when consent or permission flows need stronger visual hierarchy and clearer decision separation.
A low-contrast, single-line banner with centered text and a close action. No icon or buttons, designed to sit quietly at the top or within content. Use for lightweight announcements or status messages where visibility is needed without drawing strong attention or interrupting flow.
A compact announcement banner with inline link styling and a dismiss action. Designed for subtle product updates or release notes where the primary action is a simple text link rather than a button. Works well when you want visibility without visual weight or layout disruption.