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 centered hero set on a subtle gradient background, using stacked CTAs to support different commitment levels. Includes lightweight credibility with an inline rating, making it well suited to waitlists, previews, or early-access launches where trust and softness matter more than urgency.
A balanced split hero that pairs left-aligned messaging with a strong visual on the right. Uses an inline email field and single primary CTA to support early-access or waitlist flows. Works well when the image carries mood or concept, while the layout keeps conversion front and center without feeling heavy.
A practical split hero that pairs a strong visual with a short benefits list. Designed to quickly explain value through scannable points, with a clear primary CTA. Works well for product-led pages where clarity and speed to understanding matter more than mood alone.
A narrative-led hero that explains the problem before selling the solution. Uses longer-form copy, author attribution, and a strong visual to build trust and context. Best suited to thought leadership, launch posts, or product pages where education and credibility come before conversion.
A stripped-back hero for secondary pages. Focuses on a clear page title, short supporting copy, and a simple primary action. Best for pricing, docs, feature detail pages, or anywhere the goal is clarity over impact.
A balanced hero that pairs a clear page title and primary actions with a strong supporting image. Works well when you want more visual context than a minimal header, without going full marketing hero. Ideal for feature overviews, product detail pages, or campaign landing pages where clarity still comes first.
Image zoom is a component that allows you to zoom in on an image.
(No description)
A small, inline call to action that pairs a short title and description with one or two buttons. Designed to sit naturally within content flows to prompt the next step without breaking layout or stealing focus from the primary task. Works well for upgrades, secondary actions, or gentle nudges inside pages.
An inline call to action that pairs a visual with a short title and description to add context and emotional weight. The image helps draw attention while the compact copy and buttons keep the action clear. Best used mid-page to highlight featured content, announcements, or moments that benefit from visual reinforcement.
An inline call to action designed for simple email capture. Combines a short title and description with a single input and primary action, keeping friction low. Works well mid-page or near content boundaries to collect signups for newsletters, updates, or early access without breaking the reading flow.
An Inline Hint is a lightweight, non-intrusive UI pattern that provides helpful guidance, clarification, or best-practice advice directly within or immediately adjacent to a form field, input, or interactive element, without requiring the user to leave the current context.
A component that displays open roles in a card format with a badge, title, short body, and feature chips. This component brings structure and clarity to careers pages.
Pipeline board with a column per stage, each carrying its deal count, total value, and an add action. Cards show the account and motion, the owner, a win probability bar, location, close date, and value, with a status badge that tints the bar. Cards drag between stages or reorder within one, and the stages themselves can be reordered by their header handle.
A smooth, endlessly looping scroller ideal for showcasing logos, testimonials, images, or sponsor lists. Features auto-play with customizable speed, pause-on-hover, reverse direction, and seamless loop behavior.
A compact summary component for individual messages or threads. Shows sender, subject, timestamp, and a short preview of the content. Designed for inboxes, notifications, and lists where users need to scan and prioritize messages quickly without opening the full conversation.
A flexible messaging component for displaying conversational threads. Supports sent and received messages, timestamps, reactions, and file attachments. Built to handle short exchanges or longer conversations while keeping message hierarchy and sender context clear.
A component that displays large stats with a sub-label for context. This component is designed to highlight performance or usage data.
A compact summary block for highlighting a single key metric. Combines a label, primary value, and supporting context like trend direction or time range. Designed to be used alone or in grids to give quick, scannable insight without needing a full chart.
A compact summary block for highlighting a single key metric. Combines a label, primary value, and supporting context like trend direction or time range. Designed to be used alone or in grids to give quick, scannable insight without needing a full chart.
A horizontally distributed metrics layout that pairs large headline numbers with short labels, anchored by a subtle world map background. The pattern emphasizes scale and credibility without heavy visuals. On mobile, the metrics collapse into a vertical list, keeping each stat easy to scan while preserving hierarchy.
A metrics layout built around a strong centered heading, followed by evenly spaced stat columns with short supporting labels and optional inline links. The pattern emphasizes balance and readability, using clear vertical dividers to separate each metric. On mobile, the stats stack into a single-column list while keeping the headline and hierarchy intact.
A two-column metrics layout that pairs a text-led stats group with a strong visual anchor. The pattern uses a left-aligned heading and compact metric blocks, balanced by a fixed-aspect image on the opposite side to create visual weight. On mobile, the image drops below the metrics and the stats stack vertically, preserving hierarchy and scanability.
A symmetric metrics layout built around a centered headline and a single horizontal row of key stats. Each metric is evenly spaced to create a calm, balanced rhythm and equal visual weight. The pattern emphasizes comparability and quick scanning. On mobile, the metrics stack vertically into a single column while keeping the headline centered to maintain hierarchy and focus.
A metrics layout where each stat is wrapped in a lightweight card. The cards create clear boundaries, making each metric feel discrete and scannable while still reading as a group. The pattern works well when metrics need visual emphasis without heavy decoration. On mobile, cards stack vertically with consistent spacing, preserving rhythm and hierarchy.
A single-row metrics layout that uses subtle vertical dividers instead of cards. This keeps the section feeling light and flat while still giving each metric clear separation. Works well when metrics are supporting evidence rather than the main focal point. On smaller screens, the metrics stack into a clean vertical list with the same divider rhythm preserved.
A centered section header paired with a single horizontal row of key stats. Uses generous whitespace and consistent column widths to make the numbers feel calm and easy to scan. On smaller screens, the row collapses into a clean vertical stack without changing the overall rhythm.
A Mobile Navigation Menu component that provides expandable menus for small screens. Built based on shadcn/ui Navigation Menu component, but optimized for small screens and touch navigation.
A centered modal with a fixed width and clear visual separation from the page using a dimmed backdrop. The layout is stacked and simple: a compact header with icon, title, description, and a close action, followed by a flexible content area. Actions sit at the bottom, aligned horizontally, with a clear primary and secondary button. Designed to focus attention, block background interaction, and work well for confirmations, forms, or short tasks.
A centered dialog modal with a dimmed backdrop, similar in structure to Modal 1 but visually weighted toward caution. The header includes an icon, title, description, and a close action. The content area remains flexible and neutral, while the footer clearly emphasizes the primary action using a high-contrast, destructive button style, paired with a lower-priority secondary action. Designed to signal risk, confirm irreversible actions, and slow the user just enough to avoid mistakes.
A centered, medium-width modal designed specifically for sign-in flows. It uses a clear vertical layout with a strong heading, supporting text, and stacked form fields. Primary actions are visually anchored at the bottom with a full-width button, while secondary auth options are separated by a subtle divider to reduce cognitive load. Includes an inline close control, generous spacing, and soft elevation to keep focus on the task without feeling heavy. Optimized for quick entry, scanning, and repeated use.
A wide, two-column layout that pairs the active step with clear progress context. The left column contains a centered card with soft elevation and rounded corners, acting as the focus area for the current step. The right column shows a vertical step list with numbered markers, current step emphasized and future steps visually muted. Spacing is generous and calm, with strong alignment between columns so the flow reads left to right. The structure sets expectations early, reduces uncertainty, and keeps users oriented without overwhelming them.
A three-column composition that blends form, visual, and progress. The left column uses a contained card for the active step, with clear hierarchy and strong primary action. The center column introduces a full-height media panel with rounded corners, used as visual breathing room and brand tone rather than instruction. The right column repeats the vertical step indicator, keeping progress visible and consistent. The layout feels more editorial and expressive, while still keeping the task flow clear and anchored.
A strong two-panel layout that leans editorial. The left side is a full-height visual panel with soft motion blur, used purely for mood and brand expression. The right side is a clean, contained column that stacks a horizontal step indicator above a centered form card. The contrast is intentional: expressive on the left, structured on the right. Progress is visible but lightweight, and the form remains the clear focal point without competing with the imagery.
A newsletter signup pattern that pairs a simple email capture with a strong visual anchor. The form stays lightweight and prominent, while the adjacent product visual adds context and credibility. On smaller screens, the layout stacks to keep the signup action clear and friction-free.
A newsletter signup pattern that leads with clear value before the email field. Short bullet points set expectations and reduce hesitation, while the form remains simple and easy to scan. The supporting visual reinforces product context without competing with the primary signup action, and the layout stacks cleanly on smaller screens.
A compact newsletter signup pattern that places the email field inline with the headline. The layout minimizes friction and keeps attention focused on a single action, making it suitable for low-commitment sections or repeated placements. On smaller screens, the form stacks cleanly while preserving hierarchy and clarity.
A centered newsletter signup pattern that emphasizes balance and clarity. The headline and form are vertically stacked to create a clear focal point, with supporting microcopy reinforcing trust without competing for attention. The layout works well as a primary conversion section and scales cleanly to mobile by preserving alignment and spacing.
A horizontal newsletter signup pattern presented inside a soft container to separate it from surrounding content. The headline and description anchor the left side while the inline form sits to the right, creating a clear scan path and compact footprint. Works well as an embedded callout within long pages and collapses cleanly to a stacked layout on smaller screens.
A component that acts as the text-focused version of a hero banner. This component combines a pre-heading label, an H1 heading, supporting description text, and call-to-action buttons.
A component for that can be replaced with your brand's main logo. This component ensures layouts stay consistent before brand assets are applied.
A classic three-column pricing layout with equal-weight plan cards for easy comparison. Each card follows the same vertical rhythm with plan name, price, primary action, and feature list, making differences scannable at a glance. The pattern scales cleanly to mobile as a horizontal carousel or stacked cards, keeping one plan in focus at a time.
A simplified pricing layout that presents two plans side by side to reduce choice overload. The shared header anchors context, while the paired cards make differences easy to scan without overwhelming the user. This pattern works well when offerings are intentionally limited or when you want to guide users toward a primary upgrade path, and it adapts cleanly to a swipeable carousel on smaller screens.
A centered, single-card pricing layout that puts all attention on one plan. Removing comparisons reduces decision friction and works well for early-stage products, default plans, or checkout-focused pages. The pattern scales cleanly by adding secondary plans later without changing the core structure.
A classic three-tier pricing layout with a clearly emphasized middle plan to guide choice. The visual weight, border treatment, and "most popular" marker steer users toward a recommended option while still allowing easy comparison. Works well when you want flexibility without overwhelming the decision.
A two-plan layout where one option is visually emphasized through stronger borders and hierarchy, even when the plans are similar. This pattern is useful for steering users toward a preferred choice while still showing a clear alternative, without introducing extra complexity or tiers.
A minimal pricing pattern that centers on a single plan, removing comparison to reduce decision friction. This works well when there is only one offering, or when you want to validate pricing without distracting users with alternatives.
A dense pricing pattern that pairs plans with a side-by-side feature matrix. This works when buyers need to evaluate capability differences in detail and are willing to scan vertically to compare limits, access levels, and inclusions across tiers.