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 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.
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 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 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.
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.
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 component 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 component 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 component 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.
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.
A high-contrast, full-width banner for urgent or high-intent messages like hiring, launches, or announcements. Uses a single clear line of copy with an inline arrow to signal action, designed to span the page edge to edge without secondary actions or dismissal clutter.
A benefits block built around a large, full-width image with short text overlaid directly on the visual. Use to make a single, emotionally driven point where the image carries most of the meaning and the copy reinforces one clear benefit.
A benefits block with a strong headline on the left and a longer supporting explanation on the right, with a clear visual hierarchy between primary and secondary text. Use to reinforce a core positioning message when you want one idea to land clearly without images or feature lists.
A two-column layout that displays a list of items, each paired with an icon, title, and short description. Items flow vertically within each column and adapt to a single column on smaller screens. Use when you need a dense but scannable list with clear visual anchors.
A layout with a section header followed by a grid of equal-height cards. Each card includes an icon, title, and short text, arranged in a consistent grid that collapses responsively. Use when you need a structured, repeatable set of items with strong visual separation.
A benefits section with a headline and intro, followed by multiple feature rows that alternate text and visual previews. Each row includes an icon, feature title, short description, bullet points, and a supporting UI image. Use to explain a product's core value areas in a structured, scannable way on landing pages.
A benefits section with a headline and intro, followed by multiple feature cards arranged in a staggered grid. Each card includes an icon, feature title, short description, supporting UI image, and primary actions. Use to present key product capabilities when you want each feature to stand alone and drive clicks to demos or deeper pages.
A benefits section with a headline and intro, followed by stacked feature sections that alternate text and large visual panels. Each feature includes a title, short description, bullet points, and a strong illustrative image. Use when you want to tell a more visual, narrative story around key product benefits rather than drive quick scanning or clicks.
A simple benefits block that displays a small set of features as icon-led items with short titles and descriptions. Use when you need to quickly communicate core value points without images, interactions, or deep explanation, such as secondary sections or lower on a page.
A benefits block with a headline and short intro, followed by a grid of icon-led features arranged in two rows. Each item includes an icon, feature name, and short description. Use to present a broad set of product benefits at a glance without visuals or calls to action.
A benefits block with a headline and short intro, followed by large visual feature cards. Each card pairs a strong image with a feature title and short description. Use when visuals are doing most of the work and you want to communicate product value through imagery rather than text-heavy explanations.
A benefits block with a headline and intro, followed by two primary feature highlights with large images. Secondary benefits are listed below as a compact icon-and-text row. Use when you want to spotlight a small number of hero features while still covering supporting capabilities in the same section.
A benefits block with a headline and intro, followed by a single large hero image. Supporting benefits are listed below as icon-led items with short descriptions. Use when you want a strong visual anchor with concise, secondary benefit details for quick scanning.
A benefits block with a strong headline and supporting text split across two columns. Use to clearly explain a single core value or positioning statement when you need more depth than a short tagline but no visuals or feature lists.