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 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 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 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.
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 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 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.
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.