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 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.
An action queue for managers: a summary of pending approvals, signatures and reviews, then the most pressing tasks with their due date, a category badge and inline actions that resolve each task. Adapts to its column: badges and a footer when narrow, one row per task when wide. Includes loading, empty and error states. Adapt it for approvals, reviews, signatures or exceptions.
A new joiners table led by a heading, a search field and an Import action: joiner with avatar and email, role and department, onboarding progress as a badge (percent and tasks done, a start date for upcoming joiners, or completed), start date, row actions and pagination. Includes loading, empty and error states. Built on TanStack Table.
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 compact notes card listing recent notes with a title, preview, date and category tag. Add note opens a dialog for the title, note and tag. Adapt it for personal notes, meeting notes or account context on a dashboard.
An org chart card that draws reporting lines from a nested tree of people, with avatar, name and role on each node. Scrolls sideways on narrow screens. Includes loading, empty and error states. Adapt it for ownership or any hierarchy.
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 timeline of upcoming bills and transfers between today and the next payday, with the total set aside, payment dates and a suggested regular payment. Runs across wide slots and lists vertically in narrow ones. Use it for short-term cash planning.
A payment conversation with one recipient: a profile header, date-grouped sent and received payment bubbles with amounts, notes and timestamps, and an amount and message composer. It fills its container, so the history scrolls and the composer stays in reach. The card drops away in narrow slots.
A responsive grid of people cards: avatar, name and role, a team badge and location with time zone. Columns follow the width of the container. Includes loading, empty and error states. Adapt it for members, collaborators or contacts.
Recent recipients with each person's identity, last payment amount and note, and Pay again and Make regular actions. Cards sit side by side in wide slots and stack in narrow ones.
A performance reviews table: employee, manager with avatar and email, review stage (not started, self-review, manager review, calibrated), a progress bar with percentage and a sortable due date. A filter field, stage and assignee filters, column visibility, row selection, row actions, drag-and-drop reordering and pagination. Includes loading, empty and error states. Built on TanStack Table.
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 two-option pricing pattern that pairs a neutral free tier with a strongly emphasized paid plan. The visual contrast clearly establishes an upgrade path, using color and emphasis to guide attention toward the paid option while still allowing easy side-by-side comparison.
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.
A two-column pricing pattern that pairs contextual framing on the left with vertically stacked plans on the right. One plan is visually elevated using contrast to guide choice, making this pattern effective when you want to anchor users toward a recommended tier while still supporting comparison.
A single grouped pricing container where all plans share the same visual treatment and hierarchy. This pattern emphasizes fairness and easy comparison, making it suitable when no plan is intentionally promoted and users are expected to evaluate options side by side.
A component for Figma that compares plans with layout variants, including a 'Most Popular' highlight. This component makes pricing clear and actionable.
A three-column current-versus-target plan comparison using native Table primitives. Headers have symmetric Pro padding and the target column has a continuous muted highlight. Fluid columns wrap at mobile widths.
TBD
TBD
A visually driven category section featuring a three-column grid. Each card uses large, high-impact photography as a background, with the category title and a brief descriptive subtext positioned in the bottom-left corner. This layout is designed to inspire users through lifestyle imagery
A minimalist category navigation section featuring a balanced three-column grid. Unlike overlay styles, this layout places category titles and descriptive subtext directly below each image, ensuring maximum legibility. Using high-quality lifestyle and product photography, it provides a professional and airy entry point to specific store sections.
A visually engaging category section featuring an asymmetric three-column layout. The left column showcases a large, vertical hero image for while the right side is split into two stacked horizontal cards. This varied grid structure creates a modern, editorial feel that emphasizes priority collections through size while maintaining a clean and organized aesthetic with bottom-aligned text overlays.
A dynamic category section featuring an asymmetric three-card grid. The layout highlights "New Arrivals" with a large, full-width horizontal hero card at the top, while "Accessories" and "Last Pieces" are displayed in two smaller, side-by-side cards below. All categories utilize immersive photography with bottom-left text overlays, creating a modern and editorial navigation experience.
A clean and balanced category section featuring a four-column grid of tall, vertical cards. Each card uses high-impact photography with a subtle dark gradient at the bottom to enhance the legibility of the centered white labels. This layout is ideal for stores with multiple key departments, providing a uniform and highly structured entry point to the entire collection.
TBD
A clean and professional product detail section featuring a large primary image on the left and functional configuration tools on the right. The information hierarchy includes the product title, star ratings, price, and a brief description. Below, users can interact with size selection tiles, color swatches, and a quantity selector before adding the item to the cart. This layout is designed for maximum clarity, guiding the user through the customization process toward a final purchase.
A comprehensive product layout featuring a top breadcrumb navigation for easy store browsing. The left side showcases a large product image, while the right side organizes purchase details: rating, price, size tiles, and color swatches. Below the primary button, a vertical accordion provides detailed information keeping the page clean while offering deep product insights.
A content-rich product detail section that prioritizes technical information. The layout features a primary text area on the left detailing fabric composition and design features, balanced by a configuration sidebar on the right for size and color selection. Below, a four-column gallery showcases the product in every available color variant, providing a visual overview that aids the customer's final decision.
A streamlined product section featuring a multi-image navigation system. The layout includes a vertical column of clickable thumbnails on the left, which updates the large primary image in the center. The right side is dedicated to product information, including a detailed list, price, size selection tiles, and color swatches. This design is ideal for products that require viewing from multiple angles or in different colors.
A product detail layout featuring an interactive image gallery. The main product image is supported by a row of four thumbnails at the bottom for multi-angle viewing, along with directional arrows and a zoom icon for deep-dive inspection. The right-hand column maintains a clean hierarchy with product details, pricing, size selection tiles, and color swatches, providing an informative shopping interface.
A comprehensive product layout featuring a centered hero image flanked by essential purchase controls like price, size selection tiles, and a button. The lower section of the page is dedicated to a high-density information area. This design uses expandable accordions for topics like shipping, returns, and terms, providing a one-stop-shop experience for all customer inquiries.
A clean e-commerce section featuring a left-aligned collection header and a four-column product grid. Each card includes a badge, high-quality product imagery, star ratings, pricing, and a brief description. The layout is finalized with a primary button for each product, designed to streamline the shopping experience through a clear and repetitive visual structure.
A balanced e-commerce section featuring a centered headline. The products are displayed in a clean four-column grid, where each card follows a vertical stack: high-quality product image, centered title, brief description, price, and a primary button. This minimalist approach removes distractions like ratings or badges, focusing entirely on product aesthetics and direct action.
A modern e-commerce grid featuring products housed in individual white cards with subtle borders. In addition to the badge, star ratings, and button, each card includes interactive color swatches for product customization. This layout is optimized for high-engagement retail, providing users with more options and a clear visual containment for each item.
A streamlined e-commerce layout featuring a centered collection header and a four-column grid of bordered product cards. Each card prioritizes clear information hierarchy: category badge, star rating, product title, and description, followed by prominent price labels and interactive color swatches. This design is optimized for brands that want to provide a detailed yet airy shopping experience.
A clean e-commerce section featuring a left-aligned collection header and a four-column product layout. Each item includes a badge, star rating, pricing, and a primary button. The distinctive feature is the inclusion of directional arrow buttons at the bottom-left, allowing users to scroll through a larger inventory within a single, space-efficient horizontal row.