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 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 responsive row of benefit plan cards: plan name and provider, monthly price with a note, a checklist of what is included, and a full-width action, with the current plan badged. One column on narrow containers, three side by side once there is room. Includes loading, empty and error states. Adapt it for pricing tiers, insurance or perks.
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 layout with a section header and large hero media element, followed by a horizontal row of icon-and-text items. The media anchors the section visually while the supporting items summarize key points in a compact, aligned row. Use when you want a strong visual lead with a short, structured follow-up list.
A layout with a section header, a media element on one side, and a vertically stacked icon-and-text list on the other. The media and list sit side by side on larger screens and stack responsively. Use when you want to pair a focused visual with a compact, structured list.
A layout with a prominent lead text area, a supporting media element alongside it, and a horizontal row of icon-and-text items below. The structure creates a clear reading order from explanation to visual context to summarized points, and stacks responsively on smaller screens. Use when you want a strong textual lead supported by media and a compact follow-up row.
A layout with a section header on one side and a vertical stack of uniform cards on the other. Each card contains an icon, title, and short text, creating a clear top-to-bottom scan pattern. Use when you want a simple, linear list with strong separation between items.
A layout with a section header and centered media element, followed by a horizontal divider and a row of evenly spaced text items. The structure creates a clear visual hierarchy from primary media to summarized points and stacks cleanly on smaller screens. Use when you want a strong central visual with a balanced, low-density summary underneath.
A layout with a section header, a vertically stacked text list marked by a left accent line, and a media element positioned to the side. The text and media sit side by side on larger screens and stack responsively. Use when you want a clean, editorial-style list paired with a supporting visual.
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 layout with a section header and a wide media element spanning most of the content area, paired with a narrow supporting panel to the side. The media acts as the primary visual focus while the side panel provides secondary context. Use when you want to emphasize a large interface or visual while keeping related content nearby without competing for attention.
A layout with a section header followed by a balanced grid of equal-size cards. Each card uses the same visual weight, creating a calm, uniform scan pattern. Use when all items are equally important and you want a clean, structured presentation without a primary highlight.
A two-column layout with structured text and a stacked feature list on one side, paired with a large supporting image on the other. The layout balances dense content with a strong visual anchor. Use when you want clear explanation alongside an expressive image without the image overpowering the content.
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.
A benefits data table: plan with provider and coverage, enrollment status (active, pending, waived), enrolled and renewal dates and monthly cost, with a filter field, a status filter, column-visibility controls, an Add benefit action, row selection, sortable plan and cost columns, row actions and numbered pagination. Includes loading, empty and error states. Built on TanStack Table.
A component that highlights a key excerpt or quote from an article. This component draws attention to important passages and breaks up long text blocks.
A component that displays an inline or full-width image with an optional caption. This component makes blog articles more engaging and visually appealing.
A responsive blog listing that highlights recent posts in a clean card grid. Includes category, title, read time, author, and date, with a clear section header and optional "See all" action. Works well for homepages or content hubs where you want to surface a small set of featured articles.
A card-based blog layout with a clear section header and a progressive "Load more" pattern. Uses consistent post cards with image, category, title, meta, and author, designed to scale as content grows. Suitable for blog index pages or homepages that need a lightweight, expandable feed without full pagination.
A blog layout anchored by a large featured post followed by a compact card grid. Emphasizes editorial hierarchy by spotlighting a primary article, then surfacing recent or related posts underneath. Works well for blog homepages where one story should lead, with the rest supporting discovery and ongoing reading.
A high-density card grid that surfaces many posts at once with equal visual weight. Uses consistent card sizing and rhythm to support fast scanning and browsing. Best for archive pages or content hubs where breadth and discovery matter more than a single featured story.
A component that displays a blog listing card in a vertical or horizontal orientation.
A component that displays a blog listing card in a card format in a vertical or horizontal orientation.
A large featured blog card intended for featuring a blog post. With a floating overlay on the bottom left side of the card.
A large featured blog card intended for featuring a blog post. It has a progressive gradient and blur effect stacked horizontally on the bottom side of the card.
A large featured blog card intended for featuring a blog post. It has a progressive gradient and blur effect, stacked vertically on the left side of the card.
A full calendar: a week time grid with timed event chips, overlapping events side by side and blocked time, a month grid with overflow popovers, and a day view that phones get automatically. Filter tabs count meetings, events, conflicts and cancellations, and each event opens a popover with attendees, place and a join button. Includes loading, empty and error states.
A payment-card tile with the card face, name, card type, and Manage and Freeze actions. Freezing dims the card face and marks it frozen.
A simple vertical job list focused on clarity and scannability. Uses a single-column layout with clear role titles and lightweight metadata like location, work type, and salary. Designed to help users quickly compare openings and jump into a role without visual noise.
A split layout that pairs a job list with a large supporting image. Uses the image to set tone and culture, while keeping roles and metadata clean and easy to scan alongside it. Suitable for careers landing pages where brand and roles need equal weight.
A multi-column grid of role cards with consistent metadata and actions. Designed for scanning and comparison across roles, with equal visual weight and clear hierarchy. Works well for larger job sets where breadth matters more than storytelling.
A careers layout anchored by a large lifestyle image, followed by a clean vertical job list. Uses imagery to set culture and tone first, then supports focused role scanning. Best when you want to sell the team and environment before the openings.
A careers layout with a left-aligned intro and a dense, stacked job list alongside it. Prioritizes fast scanning of roles over storytelling. Best for teams with multiple open positions where clarity and comparison matter more than brand imagery.
TBD
A list of the week's team celebrations: birthdays, work anniversaries and new joiners, each with a portrait, when it happens and a badge for the occasion. Includes loading, empty and error states. Use it on team dashboards and intranet home pages.
A chat that answers the moment it lands on a page, built on the Vercel AI SDK. The message list and the composer come with it, and text, reasoning, tool calls, citations and attachments each get a renderer of their own, so a stream arrives drawn rather than as raw JSON. A scripted conversation stands in until you point it at your own model.
The shell around a chat: workspace switcher, new chat, search, thread history grouped by recency with pinned threads on top, and an account menu at the foot. Renaming, pinning, sharing and deleting all work, on demo data you swap for your own backend. Not a generic app shell: everything in it exists for a chat product, and chat-1 is what mounts in the middle. It assumes no router, so it drops into the app you already have.
A comprehensive and professional checkout interface featuring a dual-column layout. The left column is dedicated to user data entry, the right column acts as a fixed "Summary" sidebar, providing a final review of cart items, detailed cost breakdowns (subtotal, shipping, taxes), and the primary action button.