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 component for Figma that compares plans with layout variants, including a 'Most Popular' highlight. This component makes pricing clear and actionable.
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.
An extension of the avatar component with more details on the individual. Good for blog posts etc.
A clean, linear progress bar that spreads steps evenly across the page. Each step is anchored by a numbered marker with a short title and supporting line of text below it. The connecting line is subtle and continuous, keeping focus on sequence rather than state. It reads left to right at a glance and works well as a high-level orientation pattern rather than an active control.
A stacked, vertical progress pattern with numbered steps aligned to a single axis. Each step uses a circular index, a clear title, and a short description, connected by a thin vertical line to reinforce sequence. The layout reads top to bottom, making it easy to scan and well suited for sidebars or onboarding flows where space is constrained.
A horizontal stepper that shows progress at a glance. Steps are laid out left to right with a thin connecting line. Completed steps use filled circular check icons, while the current or pending step uses a neutral indicator. Each step includes a short title and supporting description beneath it, balancing status clarity with explanatory context. Best suited for onboarding or checkout flows where users benefit from seeing what’s done and what’s left.
A vertical step list with all steps shown as completed. Each step uses a filled circular check icon aligned to the left, connected by a subtle vertical line to reinforce sequence. Titles are bold, with short descriptions beneath in muted text. The layout reads like a checklist rather than a tracker, signaling completion and closure rather than ongoing progress. Works well for review states, confirmations, or “you’re all set” screens.
A single step within a progress sequence used to show order, status, and context. Combines a step indicator with a title and optional description, supporting active, pending, and completed states. Designed to stack vertically for onboarding flows, checklists, and multi-step processes where clarity and scanability matter.
The agent asking before it commits to expensive work: a multi-step form rendered inside the message, with choices, multi-select, a freeform field, validation and keyboard shortcuts. A tool rather than a data part, so the answers return as that tool call's output and survive a reload. Answered, it collapses to a summary of what was chosen.
A model's thinking, folded away behind a disclosure so it never competes with the answer. The trigger shimmers while tokens are still arriving and settles once the step closes. Takes an AI SDK reasoning part.
A horizontal divider with optional inline content like labels, tabs, or actions. Used to separate sections while keeping context visible, not just a visual break. Works well in dense layouts like settings pages, docs, and dashboards where structure matters without adding noise.
A compact footer layout built around a single horizontal row of lightweight links paired with a small set of primary actions. Uses clear alignment and restrained spacing to keep the footer unobtrusive, with responsive behavior that stacks actions vertically on smaller screens. Best suited for product or app surfaces where the footer supports navigation and actions without competing with page content.
A stripped-back footer built around a single, prominent action rather than navigation. Uses a centered or edge-aligned call-to-action with minimal visual noise, designed to extend a page flow rather than close it. Adapts cleanly to smaller screens by stacking the action styles vertically. Best used when the footer's job is to prompt the next step, not provide site-wide links.
A functional footer layout that combines secondary actions with an inline utility element. Uses a horizontal bar to group button variants on one side and a compact search input on the other, creating a balanced, tool-like feel. Scales down cleanly by stacking controls vertically on small screens. Best suited for product or admin contexts where the footer supports ongoing interaction rather than navigation or conversion.
A footer layout focused on paging controls for long lists or tables. Combines previous and next actions with direct page selection and a clear page count indicator. Adapts for smaller screens by simplifying to basic navigation while keeping context about the current page. Best suited for data-heavy views like tables, feeds, or search results where navigation continuity matters.
A component that standardizes heading typography and spacing. This component includes a pre-heading label, main heading, and body text in different layout variants.
(No description)
Publishes a conversation to a link. Picking who can see it is the act of sharing, so there is no second confirm button and the link is one click from the clipboard. Opens from the control you already render, a header button or a row in a thread menu. Works with no backend behind it, and takes a real one when you have it.
A functional slide-out cart interface that appears as an overlay on the right side of the screen. It features a clear itemized list of added products, including thumbnail images, titles, brief descriptions, quantities, and prices. The layout is completed by a subtotal calculation at the bottom and a prominent button, providing a seamless transition from browsing to final purchase without leaving the current page.
A comprehensive checkout page featuring a two-column layout. The larger left column displays a detailed list of cart items with quantity adjusters and removal options. The right column serves a sidebar containing a promo code input field and a breakdown of subtotal, shipping, and taxes. This design provides an overview of the order total, ensuring a frictionless transition to the final checkout stage.
A streamlined and focused shopping cart layout where all elements are stacked in a single centered column. The page displays the list of items with full management controls (quantity and removal), followed directly by the promotional code input and the financial breakdown (subtotal, shipping, and taxes). This design minimizes eye travel and provides a clear, linear path toward the final checkout action.
A highly organized shopping cart page that utilizes three distinct white cards on a light gray background to separate functional areas. The main card on the left manages the product list and inventory controls. On the right, two smaller stacked cards isolate the Discount and Summary sections. This modular structure provides visual hierarchy and makes the information of the final checkout stage easy to digest.
A minimal social proof pattern that presents partner or customer logos in a single horizontal row. It builds trust without interrupting flow, using uniform sizing and muted styling so the section supports the page rather than competing with primary content.
A horizontally scrolling logo strip that loops automatically. It adds motion and density without taking more vertical space. Good when you have lots of logos or want the section to feel more alive. Keep the speed slow and subtle so it reads as credibility, not decoration.
A static row of full-color logos. Feels louder and more brand-forward than grayscale. Works best when the logos are well-known and visually consistent. Less subtle, but stronger at first glance.
A compact logo row paired with a short trust line. Very low visual weight and easy to drop between sections. Good when you want credibility without pulling attention away from the main content.
A logo strip paired with a strong visual. Adds credibility while creating a clear visual break between sections. Best used when you want trust signals without relying on testimonials or copy-heavy proof.
Centered headline with a strict, even grid below. Strong symmetry, lots of white space, and clear hierarchy. Feels calm, credible, and deliberate. Works well when you want restraint and clarity over motion or visual noise.
The citation list under an answer, collapsed to a count until asked for. Citations reach a chat by two different routes, streamed by the provider or buried inside a search tool's output, and this gathers both into one list with the duplicates dropped.
A summary card that shows total spend for a period, with a clear visual cue and a simple category breakdown. Good for dashboards where you want one quick read before details. It answers “how much did I spend and where did it go” at a glance.