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.
Checkout interface that uses a multi-card layout to prioritize order transparency. It features a "Summary" of items and an "Overview" of costs (including a promo code field) on the left side, while the more extensive "Shipping Information" and "Payment" forms are grouped in a primary card on the right. This arrangement allows users to keep their order details constantly in sight while navigating through the data entry process.
A checkout layout that separates order details from data entry through a clean, vertical split. The left column is dedicated to a high-visibility "Summary" of cart items and a secondary "Overview" card for financial totals and promo codes. The right side contains the primary "Shipping Information" and "Payment" sections, using a vertically stacked form design that maintains a clear, linear path for the user to complete their purchase.
A component that combines small text with an icon for quick callouts. This component highlights key values such as benefits, attributes, or job details.
A complete seven-page SaaS marketing site with animated sections, careers, a validated demo contact form and legal content. Installs under /clearflow using your existing project theme.
A command or a short file, shown so it can be taken. Comes as an inline chip for code inside a sentence and as a block for code that stands on its own, with an optional filename header. Copying is one click and reports itself, and the block holds its shape whether the copy button rides in the header or beside the code.
The prompt input, and the hardest part of a chat to get right. Files arrive by picker, drag or paste, each reporting its own upload state; a menu switches tools and connectors on for the turn; the model picker carries reasoning effort with it; and dictation swaps the field for a live waveform without shifting the layout. The unsent draft survives leaving and coming back. Speaks the AI SDK's message shape, and drops into a chat you already have.
A high-contrast contact block using a wide primary panel paired with a secondary sidebar. The layout is designed to showcase an embedded scheduling or booking interface, balancing strong visual weight with a clear, task-focused interaction. Works well when the primary action is time-based or appointment-driven.
A balanced contact layout with a primary, centered form and a secondary sidebar that mirrors or reinforces the same interaction. The main column keeps focus on the form, while the sidebar provides a persistent fallback or alternative entry point. Useful when you want a calm, symmetrical layout with built-in redundancy for conversion.
A centered contact form with a clear headline and stacked inputs. Uses a simple, linear flow that keeps focus on completion. Best for general inquiries where you want minimal distraction and a calm, neutral presentation.
A centered contact form wrapped in a card with clear visual boundaries. The card adds emphasis and contrast while keeping the layout simple and focused. Good when the form should feel contained and slightly elevated from the page background.
A two-column layout pairing a contact form with a large supporting image. The image adds personality and visual balance while the form stays clear and readable. Works well when you want the contact section to feel more human and less transactional.
A centered layout that surfaces multiple ways to get in touch without a form. Uses icon-led contact methods laid out horizontally, with clear labels and availability details. Best when you want to push people to the right channel fast rather than collect messages.
A wide, visual-first layout that pairs a world map with key contact channels. Uses location markers to signal global reach, with email, phone, and live chat grouped below for quick access. Good for companies that want to show scale or multiple offices without pushing a form.
A contact layout built around a large location map, with clear contact methods shown below and in a compact side panel. Works well for businesses with a physical presence where location and availability matter as much as the form itself.
A contact layout anchored by a large, friendly image, with key contact options displayed clearly below and in a side panel. Good for brands that want to feel personal and approachable without using a full form upfront.
A contact layout that pairs a large, edge-to-edge image with stacked contact channels. The image creates visual weight at the top, while card-based options below make it easy to scan and choose how to get in touch. Works well when you want a strong visual anchor without using a form.
A minimal contact block built around a single, centered call to action. Uses a contained panel with clear hierarchy and one primary button, making it ideal for low-friction contact moments at the end of a page or between sections.
A learning card with a completion ring for the current course, a short progress summary, the next lesson and a resume action. Use it on employee portals, LMS dashboards and onboarding programs.
An assigned-courses card: a table of courses with a completion bar and a status badge that follows from it (not started, in progress, completed). Includes loading, empty and error states. Use it on employee profiles and learning dashboards.
A weekly coverage planner: each person's shifts and leave per day, scheduled against required headcount, and a detail panel for the selected day that lists available backups to add one by one or all at once, with undo. Gaps show in the warning tint and the panel opens on the first gap. Includes week navigation and loading, empty and error states. Reuse it for staffing, project allocation, equipment or bookings.
A centered call to action with a strong headline, short supporting copy, and side-by-side buttons. The layout feels more editorial and blends naturally into content-heavy pages. Works well when the CTA should feel integrated rather than isolated.
A left-aligned call to action with a strong headline, short supporting copy, and side-by-side buttons. The layout feels more editorial and blends naturally into content-heavy pages. Works well when the CTA should feel integrated rather than isolated.
A bold, high-contrast CTA presented inside a contained panel, with a centered headline and stacked primary and secondary actions. The strong visual separation makes this ideal for end-of-page moments where the CTA should clearly stand apart from surrounding content.
A wide, high-contrast CTA panel with left-aligned content and inline primary and secondary actions. The asymmetric layout creates a strong visual anchor while leaving room for surrounding content, making it well suited for mid-page transitions or section breaks.
A two-column CTA layout combining structured text and a visual panel. Uses a feature list to add scannability and depth, paired with a supporting image or illustration. Works well when the CTA needs a bit more explanation without becoming a full section.
A split CTA layout anchored by a dominant visual panel, with supporting copy and a short feature list alongside. Emphasizes imagery first, then reinforces the action with structured text and clear primary and secondary buttons. Suitable when visual tone or brand feel needs to carry more weight than the copy.
A split CTA layout that pairs structured copy and a short feature list with a live product preview or dashboard screenshot. The layout leads with value explanation, then reinforces credibility through a concrete UI example. Works well when showing real product depth without turning the section into a full feature block.
A wide, left-aligned CTA paired with a large, offset product screenshot that bleeds toward the edge of the container. The layout creates a sense of depth and scale, making the product feel substantial while keeping the call to action simple and focused. Good for high-confidence CTAs where the UI itself does most of the convincing.
A currency exchange form with exchange and receive amounts, a swap control between them, currency pickers listing your balances, the rate, fee and converted amount, and a Review action. Either amount can be typed, and narrow slots also show the balances involved.
A currency exchange widget combining a 30-day rate chart with a converter: amount fields, currency selectors, a swap control, the fee and an Exchange action. The received amount updates as you type.
A single-project overview: name, status, timeline and team on the left, milestone progress and task completion counts on the right. Adapt it for projects, campaigns or initiatives on a personal or team dashboard.
A quick daily check-in: five mood options, an optional comment and an anonymous submit, with a thank-you state after sending. Use it for pulse surveys and engagement tracking on employee dashboards.
Revenue credited by first touch vs last touch, per channel.
Live sliders modeling monthly spend against projected pipeline.
Month-to-date attainment against monthly targets as bullet bars.
Open-rate heatmap by send day and hour.
Closed revenue against target and forecast as a tick meter.
Open pipeline value and share across deal stages as a funnel.
Reps ranked by quota attainment with target markers.
Open deals with owner, stage, value, and close date.
Win rate with stage-to-stage conversion bars.
Average days in stage by segment as a heatmap.
Four key metrics in a single strip: spend, revenue, cost per lead, and conversion rate.
Marketing-to-sales handoff as concentric ring progress.
Leads and pipeline value by country, with list and map views.
Average customer health as an arc gauge with score bands.
Alerts and opportunities surfaced automatically across the funnel.
Hero area chart comparing this period against the previous period.