---
name: "@shadcncraft"
slug: "shadcncraft"
description: "Free, open-source shadcn/ui registry shipping polished, production-ready components and marketing blocks, part of a larger Shadcncraft ecosystem that also includes a matched Figma UI kit and a premium React design system. The free tier covers landing-page building blocks (Hero, Feature, CTA, and similar marketing sections) aligned to shadcn/ui conventions and Tailwind CSS. Installable via the shadcn CLI using the @shadcncraft namespace. Use for: adding high-quality landing-page sections to a Next.js or React project without installing a heavyweight template."
category: "Blocks & sections (marketing/SaaS)"
tags: ["animation", "blocks", "buttons", "cards", "cms", "design-system", "e-commerce", "icons", "loaders", "marketing", "media", "mobile", "navigation", "onboarding", "overlays", "pro-available", "saas", "tables"]
framework: "react"
license: "Apache-2.0"
author: "shadcncraft"
website: "https://shadcncraft.com"
github: "https://github.com/shadcncraft/shadcncraft-free"
registry: "https://shadcncraft.com/r/registry.json"
pro: true
pro_url: "https://shadcncraft.com/pricing"
github_stars: 30
component_count: 250
generated_at: "2026-09-21T01:50:16.753Z"
---

# @shadcncraft

Free, open-source shadcn/ui registry shipping polished, production-ready components and marketing blocks, part of a larger Shadcncraft ecosystem that also includes a matched Figma UI kit and a premium React design system. The free tier covers landing-page building blocks (Hero, Feature, CTA, and similar marketing sections) aligned to shadcn/ui conventions and Tailwind CSS. Installable via the shadcn CLI using the @shadcncraft namespace. Use for: adding high-quality landing-page sections to a Next.js or React project without installing a heavyweight template.

## Links

- Website: https://shadcncraft.com
- GitHub: https://github.com/shadcncraft/shadcncraft-free
- Registry JSON: https://shadcncraft.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/shadcncraft
- This file: https://sh4dcn.vercel.app/md/shadcncraft.md
- Pro / pricing: https://shadcncraft.com/pricing

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://shadcncraft.com/r/registry.json
pnpm dlx shadcn@latest add https://shadcncraft.com/r/registry.json
bunx shadcn@latest add https://shadcncraft.com/r/registry.json
# clone the source repo
git clone https://github.com/shadcncraft/shadcncraft-free.git
# fetch the raw registry index
curl -s https://shadcncraft.com/r/registry.json
```

## Components (250)

| name | type | description | install |
| --- | --- | --- | --- |
| index | registry:style | — | `npx shadcn@latest add https://shadcncraft.com/r/index.json` |
| style | registry:style | — | `npx shadcn@latest add https://shadcncraft.com/r/style.json` |
| avatar-stack | registry:ui | A compact, visually appealing component for displaying multiple user avatars in an overlapping stack. Perfect for showing participants in a group chat, team me… | `npx shadcn@latest add https://shadcncraft.com/r/avatar-stack.json` |
| blog-blockquote | registry:ui | 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. | `npx shadcn@latest add https://shadcncraft.com/r/blog-blockquote.json` |
| blog-image | registry:ui | A component that displays an inline or full-width image with an optional caption. This component makes blog articles more engaging and visually appealing. | `npx shadcn@latest add https://shadcncraft.com/r/blog-image.json` |
| chip | registry:ui | A component that combines small text with an icon for quick callouts. This component highlights key values such as benefits, attributes, or job details. | `npx shadcn@latest add https://shadcncraft.com/r/chip.json` |
| feature-stack | registry:ui | A component that arranges an icon, header, body text, and CTA in different layout styles. This component makes features clear and actionable. | `npx shadcn@latest add https://shadcncraft.com/r/feature-stack.json` |
| featured-icon | registry:ui | A component that places an icon inside a styled square or circle frame for extra prominence. This component makes supporting visuals stand out in marketing lay… | `npx shadcn@latest add https://shadcncraft.com/r/featured-icon.json` |
| job-listing | registry:ui | 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 career… | `npx shadcn@latest add https://shadcncraft.com/r/job-listing.json` |
| marquee | registry:ui | A smooth, endlessly looping scroller ideal for showcasing logos, testimonials, images, or sponsor lists. Features auto-play with customizable speed, pause-on-h… | `npx shadcn@latest add https://shadcncraft.com/r/marquee.json` |
| metric | registry:ui | A component that displays large stats with a sub-label for context. This component is designed to highlight performance or usage data. | `npx shadcn@latest add https://shadcncraft.com/r/metric.json` |
| mobile-navigation-menu | registry:ui | A Mobile Navigation Menu component that provides expandable menus for small screens. Built based on shadcn/ui Navigation Menu component, but optimized for smal… | `npx shadcn@latest add https://shadcncraft.com/r/mobile-navigation-menu.json` |
| page-heading | registry:ui | 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, an… | `npx shadcn@latest add https://shadcncraft.com/r/page-heading.json` |
| placeholder-logo | registry:ui | A component for that can be replaced with your brand's main logo. This component ensures layouts stay consistent before brand assets are applied. | `npx shadcn@latest add https://shadcncraft.com/r/placeholder-logo.json` |
| profile-card | registry:ui | An extension of the avatar component with more details on the individual. Good for blog posts etc. | `npx shadcn@latest add https://shadcncraft.com/r/profile-card.json` |
| section-heading | registry:ui | A component that standardizes heading typography and spacing. This component includes a pre-heading label, main heading, and body text in different layout vari… | `npx shadcn@latest add https://shadcncraft.com/r/section-heading.json` |
| star-rating | registry:ui | A component that displays ratings with stars and an optional label. This component builds trust with visual feedback. | `npx shadcn@latest add https://shadcncraft.com/r/star-rating.json` |
| sub-feature | registry:ui | A component that presents a smaller feature layout for a dialled-back look. This component balances detail with simplicity. | `npx shadcn@latest add https://shadcncraft.com/r/sub-feature.json` |
| tagline | registry:ui | A component that displays a tagline with different variants. | `npx shadcn@latest add https://shadcncraft.com/r/tagline.json` |
| ui-showcase | registry:ui | A Placeholder that displays content in a device-style frame. This component helps showcase product UI. | `npx shadcn@latest add https://shadcncraft.com/r/ui-showcase.json` |
| announcement | registry:ui | A lightweight announcement component for highlighting updates, releases, or important notices without interrupting the main flow. Uses a compact label and titl… | `npx shadcn@latest add https://shadcncraft.com/r/announcement.json` |
| data-table-pagination | registry:ui | A pagination footer for TanStack Table data tables. Combines a summary line, a rows-per-page select, a page indicator, and first, previous, next and last navig… | `npx shadcn@latest add https://shadcncraft.com/r/data-table-pagination.json` |
| inline-hint | registry:ui | An Inline Hint is a lightweight, non-intrusive UI pattern that provides helpful guidance, clarification, or best-practice advice directly within or immediately… | `npx shadcn@latest add https://shadcncraft.com/r/inline-hint.json` |
| messaging | registry:ui | A flexible messaging component for displaying conversational threads. Supports sent and received messages, timestamps, reactions, and file attachments. Built t… | `npx shadcn@latest add https://shadcncraft.com/r/messaging.json` |
| rich-separator | registry:ui | A horizontal divider with optional inline content like labels, tabs, or actions. Used to separate sections while keeping context visible, not just a visual bre… | `npx shadcn@latest add https://shadcncraft.com/r/rich-separator.json` |
| tags | registry:ui | A multi-select tag picker for filtering or categorizing content. Supports search, selected-state chips, and a clear active state. Simple, compact, and meant to… | `npx shadcn@latest add https://shadcncraft.com/r/tags.json` |
| ticker | registry:ui | A compact, inline ticker for live or near-real-time values. Shows an identifier, current value, and delta with clear up or down signaling. Designed to sit quie… | `npx shadcn@latest add https://shadcncraft.com/r/ticker.json` |
| badge | registry:ui | Displays a badge or a component that looks like a badge. | `npx shadcn@latest add https://shadcncraft.com/r/badge.json` |
| image-zoom | registry:ui | Image zoom is a component that allows you to zoom in on an image. | `npx shadcn@latest add https://shadcncraft.com/r/image-zoom.json` |
| blog-listing-card-1 | registry:component | A component that displays a blog listing card in a vertical or horizontal orientation. | `npx shadcn@latest add https://shadcncraft.com/r/blog-listing-card-1.json` |
| blog-listing-card-2 | registry:component | A component that displays a blog listing card in a card format in a vertical or horizontal orientation. | `npx shadcn@latest add https://shadcncraft.com/r/blog-listing-card-2.json` |
| blog-listing-featured-card-1 | registry:component | A large featured blog card intended for featuring a blog post. With a floating overlay on the bottom left side of the card. | `npx shadcn@latest add https://shadcncraft.com/r/blog-listing-featured-card-1.json` |
| blog-listing-featured-card-2 | registry:component | 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 car… | `npx shadcn@latest add https://shadcncraft.com/r/blog-listing-featured-card-2.json` |
| blog-listing-featured-card-3 | registry:component | 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. | `npx shadcn@latest add https://shadcncraft.com/r/blog-listing-featured-card-3.json` |
| pricing-card-1 | registry:component | A component for Figma that compares plans with layout variants, including a 'Most Popular' highlight. This component makes pricing clear and actionable. | `npx shadcn@latest add https://shadcncraft.com/r/pricing-card-1.json` |
| team-card-1 | registry:component | A component that displays a user's image alongside their name, a supporting detail such as role or date and social links. This component is useful for adding i… | `npx shadcn@latest add https://shadcncraft.com/r/team-card-1.json` |
| team-card-2 | registry:component | A component that displays a user's image alongside their name, a description and social links. This component is useful for adding identity and context to cont… | `npx shadcn@latest add https://shadcncraft.com/r/team-card-2.json` |
| activity-feed-item-1 | registry:component | A flexible feed item for displaying recent activity in a clear, scannable format. Combines an avatar, primary action text, optional supporting text, and contex… | `npx shadcn@latest add https://shadcncraft.com/r/activity-feed-item-1.json` |
| avatar-upload-1 | registry:component | A focused component for adding or updating a user profile image. Handles empty, uploaded, and removable states with clear affordances, including file requireme… | `npx shadcn@latest add https://shadcncraft.com/r/avatar-upload-1.json` |
| avatar-upload-2 | registry:component | A focused component for adding or updating a user profile image. Handles empty, uploaded, and removable states with clear affordances, including file requireme… | `npx shadcn@latest add https://shadcncraft.com/r/avatar-upload-2.json` |
| balance-1 | registry:component | A data-rich component for showing an account balance at a glance, with supporting context over time. Combines a primary balance summary with trend indicators a… | `npx shadcn@latest add https://shadcncraft.com/r/balance-1.json` |
| balance-2 | registry:component | A data-rich component for showing an account balance at a glance, with supporting context over time. Combines a primary balance summary with trend indicators, … | `npx shadcn@latest add https://shadcncraft.com/r/balance-2.json` |
| balance-3 | registry:component | A data-rich component for showing an account balance at a glance, with supporting context over time. Combines a primary balance summary and a chart to help use… | `npx shadcn@latest add https://shadcncraft.com/r/balance-3.json` |
| expenses-1 | registry:component | A compact data visualization component for showing spending by category over a selected time range. Uses simple bars and inline values to make comparisons easy… | `npx shadcn@latest add https://shadcncraft.com/r/expenses-1.json` |
| message-card-1 | registry:component | A compact summary component for individual messages or threads. Shows sender, subject, timestamp, and a short preview of the content. Designed for inboxes, not… | `npx shadcn@latest add https://shadcncraft.com/r/message-card-1.json` |
| spending-balance-1 | registry:component | 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 … | `npx shadcn@latest add https://shadcncraft.com/r/spending-balance-1.json` |
| stock-market-1 | registry:component | A market snapshot card that shows current value, change over time, and basic context. The chart is the focus, with quick filters for time range and a couple of… | `npx shadcn@latest add https://shadcncraft.com/r/stock-market-1.json` |
| transactions-1 | registry:component | A compact transaction list for recent activity. Shows status filters, clear labels, amounts, and dates at a glance. Works well in dashboards where users need q… | `npx shadcn@latest add https://shadcncraft.com/r/transactions-1.json` |
| metric-card-1 | registry:component | A compact summary block for highlighting a single key metric. Combines a label, primary value, and supporting context like trend direction or time range. Desig… | `npx shadcn@latest add https://shadcncraft.com/r/metric-card-1.json` |
| metric-card-2 | registry:component | A compact summary block for highlighting a single key metric. Combines a label, primary value, and supporting context like trend direction or time range. Desig… | `npx shadcn@latest add https://shadcncraft.com/r/metric-card-2.json` |
| progress-item-1 | registry:component | 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 a… | `npx shadcn@latest add https://shadcncraft.com/r/progress-item-1.json` |
| file-upload-card-1 | registry:component | A self-contained upload item that shows the status of an individual file during and after upload. Supports clear states for uploading, completed, and failed fi… | `npx shadcn@latest add https://shadcncraft.com/r/file-upload-card-1.json` |
| file-upload-area-1 | registry:component | A dedicated drop zone for selecting files via drag-and-drop or manual browsing. Communicates accepted file types and size limits up front, with clear hover and… | `npx shadcn@latest add https://shadcncraft.com/r/file-upload-area-1.json` |
| code-snippet-2 | registry:component | 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… | `npx shadcn@latest add https://shadcncraft.com/r/code-snippet-2.json` |
| cart-item-1 | registry:component | TBD | `npx shadcn@latest add https://shadcncraft.com/r/cart-item-1.json` |
| product-category-card-1 | registry:component | TBD | `npx shadcn@latest add https://shadcncraft.com/r/product-category-card-1.json` |
| product-card-1 | registry:component | TBD | `npx shadcn@latest add https://shadcncraft.com/r/product-card-1.json` |
| product-card-2 | registry:component | TBD | `npx shadcn@latest add https://shadcncraft.com/r/product-card-2.json` |
| file-part-1 | registry:component | The file a message was sent with, drawn as a card rather than left as a link. An image previews in place, anything else falls back to an icon beside its name a… | `npx shadcn@latest add https://shadcncraft.com/r/file-part-1.json` |
| reasoning-part-1 | registry:component | 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… | `npx shadcn@latest add https://shadcncraft.com/r/reasoning-part-1.json` |
| text-part-1 | registry:component | A message's text. An answer is parsed as markdown by Streamdown, which copes with the half-finished syntax a stream produces and gives code blocks their own he… | `npx shadcn@latest add https://shadcncraft.com/r/text-part-1.json` |
| tool-part-1 | registry:component | One tool call, through all four of its states: running, done, failed and refused. A denied call reads differently from one that simply errored, and expanding e… | `npx shadcn@latest add https://shadcncraft.com/r/tool-part-1.json` |
| web-search-part-1 | registry:component | The line saying a search happened: objective and a spinner while it runs, a warning when it fails. What it found is not rendered here, because the citations un… | `npx shadcn@latest add https://shadcncraft.com/r/web-search-part-1.json` |
| questionnaire-part-1 | registry:component | 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 a… | `npx shadcn@latest add https://shadcncraft.com/r/questionnaire-part-1.json` |
| sources-part-1 | registry:component | 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 ins… | `npx shadcn@latest add https://shadcncraft.com/r/sources-part-1.json` |
| banner-1 | registry:block | A low-height horizontal banner with an icon, short message, and inline input with primary action. Designed to sit between sections without breaking page flow. … | `npx shadcn@latest add https://shadcncraft.com/r/banner-1.json` |
| banner-2 | registry:block | A compact banner presented as a card with icon, short message, input field, and primary action, plus a close control. Designed to float within a layout or sit … | `npx shadcn@latest add https://shadcncraft.com/r/banner-2.json` |
| banner-3 | registry:block | A low-height horizontal banner with an icon, short announcement text, and multiple call-to-action buttons, plus a dismiss control. Designed to span the content… | `npx shadcn@latest add https://shadcncraft.com/r/banner-3.json` |
| banner-4 | registry:block | A horizontal announcement banner with an icon, single-line message, two clearly ranked actions, and a dismiss control. Designed to sit inline within a page and… | `npx shadcn@latest add https://shadcncraft.com/r/banner-4.json` |
| banner-5 | registry:block | A horizontal banner with an icon, short explanatory text, and a grouped set of actions including primary, secondary, and tertiary options, plus a dismiss contr… | `npx shadcn@latest add https://shadcncraft.com/r/banner-5.json` |
| banner-6 | registry:block | A consent banner that pairs a low-height inline message with a stacked action layout in the card variant. Actions are vertically ordered to clearly separate pr… | `npx shadcn@latest add https://shadcncraft.com/r/banner-6.json` |
| banner-7 | registry:block | A low-contrast, single-line banner with centered text and a close action. No icon or buttons, designed to sit quietly at the top or within content. Use for lig… | `npx shadcn@latest add https://shadcncraft.com/r/banner-7.json` |
| banner-8 | registry:block | A compact announcement banner with inline link styling and a dismiss action. Designed for subtle product updates or release notes where the primary action is a… | `npx shadcn@latest add https://shadcncraft.com/r/banner-8.json` |
| banner-9 | registry:block | A high-contrast, full-width banner for urgent or high-intent messages like hiring, launches, or announcements. Uses a single clear line of copy with an inline … | `npx shadcn@latest add https://shadcncraft.com/r/banner-9.json` |
| banner-10 | registry:block | A minimal announcement banner for low-friction updates. Renders as simple inline text with an optional icon and link, plus a close action. Best for subtle prod… | `npx shadcn@latest add https://shadcncraft.com/r/banner-10.json` |
| benefits-1 | registry:block | A benefits section with a headline and intro, followed by multiple feature rows that alternate text and visual previews. Each row includes an icon, feature tit… | `npx shadcn@latest add https://shadcncraft.com/r/benefits-1.json` |
| benefits-2 | registry:block | A benefits section with a headline and intro, followed by multiple feature cards arranged in a staggered grid. Each card includes an icon, feature title, short… | `npx shadcn@latest add https://shadcncraft.com/r/benefits-2.json` |
| benefits-3 | registry:block | A benefits section with a headline and intro, followed by stacked feature sections that alternate text and large visual panels. Each feature includes a title, … | `npx shadcn@latest add https://shadcncraft.com/r/benefits-3.json` |
| benefits-4 | registry:block | A simple benefits block that displays a small set of features as icon-led items with short titles and descriptions. Use when you need to quickly communicate co… | `npx shadcn@latest add https://shadcncraft.com/r/benefits-4.json` |
| benefits-5 | registry:block | A benefits block with a headline and short intro, followed by a grid of icon-led features arranged in two rows. Each item includes an icon, feature name, and s… | `npx shadcn@latest add https://shadcncraft.com/r/benefits-5.json` |
| benefits-6 | registry:block | A benefits block with a headline and short intro, followed by large visual feature cards. Each card pairs a strong image with a feature title and short descrip… | `npx shadcn@latest add https://shadcncraft.com/r/benefits-6.json` |
| benefits-7 | registry:block | A benefits block with a headline and intro, followed by two primary feature highlights with large images. Secondary benefits are listed below as a compact icon… | `npx shadcn@latest add https://shadcncraft.com/r/benefits-7.json` |
| benefits-8 | registry:block | A benefits block with a headline and intro, followed by a single large hero image. Supporting benefits are listed below as icon-led items with short descriptio… | `npx shadcn@latest add https://shadcncraft.com/r/benefits-8.json` |
| benefits-9 | registry:block | A benefits block with a strong headline and supporting text split across two columns. Use to clearly explain a single core value or positioning statement when … | `npx shadcn@latest add https://shadcncraft.com/r/benefits-9.json` |
| benefits-10 | registry:block | A benefits block built around a large, full-width image with short text overlaid directly on the visual. Use to make a single, emotionally driven point where t… | `npx shadcn@latest add https://shadcncraft.com/r/benefits-10.json` |
| benefits-11 | registry:block | A benefits block with a strong headline on the left and a longer supporting explanation on the right, with a clear visual hierarchy between primary and seconda… | `npx shadcn@latest add https://shadcncraft.com/r/benefits-11.json` |
| benefits-12 | registry:block | A two-column layout that displays a list of items, each paired with an icon, title, and short description. Items flow vertically within each column and adapt t… | `npx shadcn@latest add https://shadcncraft.com/r/benefits-12.json` |
| benefits-13 | registry:block | A layout with a section header followed by a grid of equal-height cards. Each card includes an icon, title, and short text, arranged in a consistent grid that … | `npx shadcn@latest add https://shadcncraft.com/r/benefits-13.json` |
| blog-listing-1 | registry:block | 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… | `npx shadcn@latest add https://shadcncraft.com/r/blog-listing-1.json` |
| blog-listing-2 | registry:block | 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 a… | `npx shadcn@latest add https://shadcncraft.com/r/blog-listing-2.json` |
| blog-listing-3 | registry:block | A blog layout anchored by a large featured post followed by a compact card grid. Emphasizes editorial hierarchy by spotlighting a primary article, then surfaci… | `npx shadcn@latest add https://shadcncraft.com/r/blog-listing-3.json` |
| blog-listing-4 | registry:block | 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 browsin… | `npx shadcn@latest add https://shadcncraft.com/r/blog-listing-4.json` |
| careers-1 | registry:block | 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… | `npx shadcn@latest add https://shadcncraft.com/r/careers-1.json` |
| careers-2 | registry:block | 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 … | `npx shadcn@latest add https://shadcncraft.com/r/careers-2.json` |
| careers-3 | registry:block | 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 h… | `npx shadcn@latest add https://shadcncraft.com/r/careers-3.json` |
| careers-4 | registry:block | 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 … | `npx shadcn@latest add https://shadcncraft.com/r/careers-4.json` |
| careers-5 | registry:block | 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 wit… | `npx shadcn@latest add https://shadcncraft.com/r/careers-5.json` |
| contact-1 | registry:block | 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 y… | `npx shadcn@latest add https://shadcncraft.com/r/contact-1.json` |
| contact-2 | registry:block | 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 w… | `npx shadcn@latest add https://shadcncraft.com/r/contact-2.json` |
| contact-3 | registry:block | 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… | `npx shadcn@latest add https://shadcncraft.com/r/contact-3.json` |
| contact-4 | registry:block | 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 availa… | `npx shadcn@latest add https://shadcncraft.com/r/contact-4.json` |
| contact-5 | registry:block | 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 gr… | `npx shadcn@latest add https://shadcncraft.com/r/contact-5.json` |
| contact-6 | registry:block | 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 physic… | `npx shadcn@latest add https://shadcncraft.com/r/contact-6.json` |
| contact-7 | registry:block | 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 p… | `npx shadcn@latest add https://shadcncraft.com/r/contact-7.json` |
| contact-8 | registry:block | 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 bel… | `npx shadcn@latest add https://shadcncraft.com/r/contact-8.json` |
| contact-9 | registry:block | 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… | `npx shadcn@latest add https://shadcncraft.com/r/contact-9.json` |
| contact-10 | registry:block | 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 … | `npx shadcn@latest add https://shadcncraft.com/r/contact-10.json` |
| contact-11 | registry:block | 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… | `npx shadcn@latest add https://shadcncraft.com/r/contact-11.json` |
| cta-1 | registry:block | 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 co… | `npx shadcn@latest add https://shadcncraft.com/r/cta-1.json` |
| cta-2 | registry:block | 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 int… | `npx shadcn@latest add https://shadcncraft.com/r/cta-2.json` |
| cta-3 | registry:block | A bold, high-contrast CTA presented inside a contained panel, with a centered headline and stacked primary and secondary actions. The strong visual separation … | `npx shadcn@latest add https://shadcncraft.com/r/cta-3.json` |
| cta-4 | registry:block | 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 … | `npx shadcn@latest add https://shadcncraft.com/r/cta-4.json` |
| cta-5 | registry:block | 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 illu… | `npx shadcn@latest add https://shadcncraft.com/r/cta-5.json` |
| cta-6 | registry:block | 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 … | `npx shadcn@latest add https://shadcncraft.com/r/cta-6.json` |
| cta-7 | registry:block | 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 explana… | `npx shadcn@latest add https://shadcncraft.com/r/cta-7.json` |
| cta-8 | registry: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 s… | `npx shadcn@latest add https://shadcncraft.com/r/cta-8.json` |
| faqs-1 | registry:block | Multi-column FAQ layout with short answers visible by default. Includes an optional CTA panel below. Scales down to a stacked list on mobile. | `npx shadcn@latest add https://shadcncraft.com/r/faqs-1.json` |
| faqs-2 | registry:block | Single-column, centered accordion for longer answers. Optimized for reading and scanning. Collapses into a stacked accordion on mobile. | `npx shadcn@latest add https://shadcncraft.com/r/faqs-2.json` |
| faqs-3 | registry:block | A responsive FAQ section with a wide, centered accordion for desktop, plus a compact stacked version shown as a mobile preview. Built for clean scanning, with … | `npx shadcn@latest add https://shadcncraft.com/r/faqs-3.json` |
| faqs-4 | registry:block | A clean, centered FAQ accordion paired with a narrow sidebar version. Uses a strong section header and clear dividers for easy scanning, with an optional suppo… | `npx shadcn@latest add https://shadcncraft.com/r/faqs-4.json` |
| footer-1 | registry:block | A wide, multi-column footer with grouped navigation links and a compact legal row. Designed for content-heavy sites that need clear link categorization and qui… | `npx shadcn@latest add https://shadcncraft.com/r/footer-1.json` |
| footer-2 | registry:block | A multi-column sitemap footer with a prominent newsletter signup band. Combines navigation, legal links, and email capture in a single layout. Designed for mar… | `npx shadcn@latest add https://shadcncraft.com/r/footer-2.json` |
| footer-3 | registry:block | A clean, low-profile sitemap footer with evenly spaced link columns and a minimal brand and legal row. Designed for content-heavy sites that need clear navigat… | `npx shadcn@latest add https://shadcncraft.com/r/footer-3.json` |
| footer-4 | registry:block | A sitemap footer anchored by a short brand statement and logo, followed by structured link columns and legal links. Gives more context about the company while … | `npx shadcn@latest add https://shadcncraft.com/r/footer-4.json` |
| hero-1 | registry:block | A classic centered hero with a strong headline, short supporting copy, and a primary call to action. Anchored by a large visual or video to set tone and establ… | `npx shadcn@latest add https://shadcncraft.com/r/hero-1.json` |
| hero-2 | registry:block | A bold, immersive hero that places the headline and call to action directly on a full-bleed visual background. Designed to create mood and instant impact, with… | `npx shadcn@latest add https://shadcncraft.com/r/hero-2.json` |
| hero-3 | registry:block | A calm, airy hero that centers the headline and call to action over a soft, low-contrast background. Designed to feel open and approachable, with social proof … | `npx shadcn@latest add https://shadcncraft.com/r/hero-3.json` |
| hero-4 | registry:block | A centered hero set on a subtle gradient background, using stacked CTAs to support different commitment levels. Includes lightweight credibility with an inline… | `npx shadcn@latest add https://shadcncraft.com/r/hero-4.json` |
| hero-5 | registry:block | 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-a… | `npx shadcn@latest add https://shadcncraft.com/r/hero-5.json` |
| hero-6 | registry:block | 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 … | `npx shadcn@latest add https://shadcncraft.com/r/hero-6.json` |
| hero-7 | registry:block | 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 c… | `npx shadcn@latest add https://shadcncraft.com/r/hero-7.json` |
| hero-8 | registry:block | 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 de… | `npx shadcn@latest add https://shadcncraft.com/r/hero-8.json` |
| hero-9 | registry:block | 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 h… | `npx shadcn@latest add https://shadcncraft.com/r/hero-9.json` |
| hero-10 | registry:block | A bold, image-led hero with text overlaid on photography. Best when you want an emotional hook first and the message second. Works well for marketing pages, br… | `npx shadcn@latest add https://shadcncraft.com/r/hero-10.json` |
| metrics-1 | registry:block | A horizontally distributed metrics layout that pairs large headline numbers with short labels, anchored by a subtle world map background. The pattern emphasize… | `npx shadcn@latest add https://shadcncraft.com/r/metrics-1.json` |
| metrics-2 | registry:block | A metrics layout built around a strong centered heading, followed by evenly spaced stat columns with short supporting labels and optional inline links. The pat… | `npx shadcn@latest add https://shadcncraft.com/r/metrics-2.json` |
| metrics-3 | registry:block | 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, b… | `npx shadcn@latest add https://shadcncraft.com/r/metrics-3.json` |
| metrics-4 | registry:block | 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 r… | `npx shadcn@latest add https://shadcncraft.com/r/metrics-4.json` |
| metrics-5 | registry:block | 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 stil… | `npx shadcn@latest add https://shadcncraft.com/r/metrics-5.json` |
| metrics-6 | registry:block | 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 c… | `npx shadcn@latest add https://shadcncraft.com/r/metrics-6.json` |
| metrics-7 | registry:block | 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… | `npx shadcn@latest add https://shadcncraft.com/r/metrics-7.json` |
| newsletter-signup-1 | registry:block | 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… | `npx shadcn@latest add https://shadcncraft.com/r/newsletter-signup-1.json` |
| newsletter-signup-2 | registry:block | A newsletter signup pattern that leads with clear value before the email field. Short bullet points set expectations and reduce hesitation, while the form rema… | `npx shadcn@latest add https://shadcncraft.com/r/newsletter-signup-2.json` |
| newsletter-signup-3 | registry:block | 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… | `npx shadcn@latest add https://shadcncraft.com/r/newsletter-signup-3.json` |
| newsletter-signup-4 | registry:block | A centered newsletter signup pattern that emphasizes balance and clarity. The headline and form are vertically stacked to create a clear focal point, with supp… | `npx shadcn@latest add https://shadcncraft.com/r/newsletter-signup-4.json` |
| newsletter-signup-5 | registry:block | A horizontal newsletter signup pattern presented inside a soft container to separate it from surrounding content. The headline and description anchor the left … | `npx shadcn@latest add https://shadcncraft.com/r/newsletter-signup-5.json` |
| pricing-1 | registry:block | 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, prima… | `npx shadcn@latest add https://shadcncraft.com/r/pricing-1.json` |
| pricing-2 | registry:block | 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 diff… | `npx shadcn@latest add https://shadcncraft.com/r/pricing-2.json` |
| pricing-3 | registry:block | A centered, single-card pricing layout that puts all attention on one plan. Removing comparisons reduces decision friction and works well for early-stage produ… | `npx shadcn@latest add https://shadcncraft.com/r/pricing-3.json` |
| pricing-4 | registry:block | 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… | `npx shadcn@latest add https://shadcncraft.com/r/pricing-4.json` |
| pricing-5 | registry:block | 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 s… | `npx shadcn@latest add https://shadcncraft.com/r/pricing-5.json` |
| pricing-6 | registry:block | 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 w… | `npx shadcn@latest add https://shadcncraft.com/r/pricing-6.json` |
| pricing-7 | registry:block | 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 w… | `npx shadcn@latest add https://shadcncraft.com/r/pricing-7.json` |
| social-proof-1 | registry:block | A minimal social proof pattern that presents partner or customer logos in a single horizontal row. It builds trust without interrupting flow, using uniform siz… | `npx shadcn@latest add https://shadcncraft.com/r/social-proof-1.json` |
| social-proof-2 | registry:block | 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 o… | `npx shadcn@latest add https://shadcncraft.com/r/social-proof-2.json` |
| social-proof-3 | registry:block | 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 su… | `npx shadcn@latest add https://shadcncraft.com/r/social-proof-3.json` |
| social-proof-4 | registry:block | 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 att… | `npx shadcn@latest add https://shadcncraft.com/r/social-proof-4.json` |
| social-proof-5 | registry:block | 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 … | `npx shadcn@latest add https://shadcncraft.com/r/social-proof-5.json` |
| social-proof-6 | registry:block | Centered headline with a strict, even grid below. Strong symmetry, lots of white space, and clear hierarchy. Feels calm, credible, and deliberate. Works well w… | `npx shadcn@latest add https://shadcncraft.com/r/social-proof-6.json` |
| team-1 | registry:block | A centered section with a clear headline and supporting line, followed by an evenly spaced grid of profile tiles. The layout keeps attention on the faces, uses… | `npx shadcn@latest add https://shadcncraft.com/r/team-1.json` |
| team-2 | registry:block | A two-column layout where a compact intro block anchors the section on the left while a dense, evenly spaced avatar grid fills the remaining width. The structu… | `npx shadcn@latest add https://shadcncraft.com/r/team-2.json` |
| team-3 | registry:block | Team 3 – Mixed-shape avatar mosaic | `npx shadcn@latest add https://shadcncraft.com/r/team-3.json` |
| team-4 | registry:block | A split layout that pairs large, candid team photos with a clean, tabular roster below. The imagery adds warmth and context, while the list anchors the section… | `npx shadcn@latest add https://shadcncraft.com/r/team-4.json` |
| team-5 | registry:block | A gallery-style layout built around large, consistent portrait cards with subtle overlays. Emphasizes visual uniformity and hierarchy, using generous spacing a… | `npx shadcn@latest add https://shadcncraft.com/r/team-5.json` |
| testimonials-1 | registry:block | A centered, long-form testimonial designed to feel calm and authoritative. Uses generous whitespace, oversized quotation marks, and a single focal block to giv… | `npx shadcn@latest add https://shadcncraft.com/r/testimonials-1.json` |
| testimonials-2 | registry:block | A minimal, centered testimonial layout that tightens the hierarchy around the quote and author. Compared to Testimonial 1, this version reduces visual weight a… | `npx shadcn@latest add https://shadcncraft.com/r/testimonials-2.json` |
| testimonials-3 | registry:block | Testimonial 3 – Split quote with featured profile | `npx shadcn@latest add https://shadcncraft.com/r/testimonials-3.json` |
| testimonials-4 | registry:block | A bold split layout that gives equal weight to a large portrait and the testimonial copy. The oversized image anchors the section visually, while the quote, at… | `npx shadcn@latest add https://shadcncraft.com/r/testimonials-4.json` |
| testimonials-5 | registry:block | A carousel-style testimonial where the quote and controls sit in a fixed text column, paired with layered image cards that suggest depth and progression. The s… | `npx shadcn@latest add https://shadcncraft.com/r/testimonials-5.json` |
| testimonials-6 | registry:block | A split testimonial layout with the quote anchored in a static text column and a horizontal carousel of large profile cards running alongside it. The overlappi… | `npx shadcn@latest add https://shadcncraft.com/r/testimonials-6.json` |
| testimonials-7 | registry:block | A testimonial layout that leads with a strong headline and brand marker, followed by a dense grid of profile cards. The structure shifts emphasis from a single… | `npx shadcn@latest add https://shadcncraft.com/r/testimonials-7.json` |
| testimonials-8 | registry:block | A testimonial layout that anchors on a long-form quote with clear brand attribution, then reinforces credibility using a horizontal strip of individual profile… | `npx shadcn@latest add https://shadcncraft.com/r/testimonials-8.json` |
| testimonials-9 | registry:block | A testimonial layout built around small, self-contained story cards, each representing a different team or use case. The grid creates quick scanability while s… | `npx shadcn@latest add https://shadcncraft.com/r/testimonials-9.json` |
| testimonials-10 | registry:block | A compact testimonial layout that surfaces many short quotes at once using a uniform card grid. Designed for volume and credibility, it emphasizes breadth of f… | `npx shadcn@latest add https://shadcncraft.com/r/testimonials-10.json` |
| testimonials-11 | registry:block | A structured testimonial layout that combines a clear section header with a multi-column grid of short quotes. It balances scannability and depth by presenting… | `npx shadcn@latest add https://shadcncraft.com/r/testimonials-11.json` |
| top-navigation-1 | registry:block | A classic left-aligned top navigation with horizontal links and inline dropdown menus for larger screens. Primary actions are grouped on the right for clear vi… | `npx shadcn@latest add https://shadcncraft.com/r/top-navigation-1.json` |
| top-navigation-2 | registry:block | A center-aligned top navigation that places the primary links in the middle of the header, creating a more balanced, symmetrical layout. Dropdown menus open di… | `npx shadcn@latest add https://shadcncraft.com/r/top-navigation-2.json` |
| top-navigation-3 | registry:block | A compact top navigation that keeps the large-screen layout minimal and low-profile, with primary links arranged in a single horizontal bar. Dropdowns reveal r… | `npx shadcn@latest add https://shadcncraft.com/r/top-navigation-3.json` |
| top-navigation-4 | registry:block | A centered top navigation where primary links sit inside a pill-style container, creating a strong visual anchor across large screens. Dropdown menus open from… | `npx shadcn@latest add https://shadcncraft.com/r/top-navigation-4.json` |
| top-navigation-5 | registry:block | A stripped-back, center-aligned top navigation that prioritizes clarity and whitespace. Primary links sit in a single horizontal row with the brand anchored to… | `npx shadcn@latest add https://shadcncraft.com/r/top-navigation-5.json` |
| 404-1 | registry:block | A clean and centered error page design for handling "Page not found" scenarios. The layout features a clear information hierarchy starting with the "404" statu… | `npx shadcn@latest add https://shadcncraft.com/r/404-1.json` |
| 404-2 | registry:block | A modern and emotionally engaging error page that uses a split-screen composition. The left side provides clear, left-aligned information: the "404" status cod… | `npx shadcn@latest add https://shadcncraft.com/r/404-2.json` |
| 404-3 | registry:block | A comprehensive error recovery page designed to provide immediate assistance. The top section maintains the standard 404 messaging and primary navigation butto… | `npx shadcn@latest add https://shadcncraft.com/r/404-3.json` |
| 404-4 | registry:block | A creative balanced error page that uses a custom illustration to communicate a technical disconnect. The layout features a two-column split: on the left, a st… | `npx shadcn@latest add https://shadcncraft.com/r/404-4.json` |
| 404-5 | registry:block | A highly functional error page that utilizes a balanced grid system. The layout is dominated on the right by a large, atmospheric image with rounded corners. T… | `npx shadcn@latest add https://shadcncraft.com/r/404-5.json` |
| 404-6 | registry:block | A modern error page that utilizes an inverted split-screen layout. A large, stylized editorial image with rounded corners is positioned on the left. The right … | `npx shadcn@latest add https://shadcncraft.com/r/404-6.json` |
| activity-feed-1 | registry:block | A chronological activity feed presented as a vertical timeline, combining user avatars, action summaries, and timestamps for quick scanning. Includes a top sea… | `npx shadcn@latest add https://shadcncraft.com/r/activity-feed-1.json` |
| app-shell-1 | registry:block | App shell with a standard sidebar, header, and content slot. Collapsed variant included. | `npx shadcn@latest add https://shadcncraft.com/r/app-shell-1.json` |
| app-shell-2 | registry:block | App shell with a floating sidebar, header, and content slot. Collapsed variant included. | `npx shadcn@latest add https://shadcncraft.com/r/app-shell-2.json` |
| app-shell-3 | registry:block | App shell with an inset sidebar, header, and content slot. Collapsed variant included. | `npx shadcn@latest add https://shadcncraft.com/r/app-shell-3.json` |
| app-shell-header-1 | registry:block | App shell header with a page selector, date range presets, filters, and search. | `npx shadcn@latest add https://shadcncraft.com/r/app-shell-header-1.json` |
| app-shell-header-2 | registry:block | App shell header with a breadcrumb, faceted filters, and a search field. | `npx shadcn@latest add https://shadcncraft.com/r/app-shell-header-2.json` |
| app-shell-header-3 | registry:block | App shell header with a page selector, applied filters as removable chips, and a search field. | `npx shadcn@latest add https://shadcncraft.com/r/app-shell-header-3.json` |
| app-shell-header-4 | registry:block | App shell header with a page selector, filters, and a primary action. | `npx shadcn@latest add https://shadcncraft.com/r/app-shell-header-4.json` |
| app-shell-header-5 | registry:block | App shell header with a page selector, a period select, and a date range stepper. | `npx shadcn@latest add https://shadcncraft.com/r/app-shell-header-5.json` |
| metric-cards-1 | registry:block | Four key metrics in a single strip: spend, revenue, cost per lead, and conversion rate. | `npx shadcn@latest add https://shadcncraft.com/r/metric-cards-1.json` |
| hero-time-series-1 | registry:block | Hero area chart comparing this period against the previous period. | `npx shadcn@latest add https://shadcncraft.com/r/hero-time-series-1.json` |
| traffic-by-channel-1 | registry:block | Total traffic with a segmented share bar and per-channel breakdown. | `npx shadcn@latest add https://shadcncraft.com/r/traffic-by-channel-1.json` |
| channel-performance-1 | registry:block | Clicks received vs leads converted, by channel, as grouped bars. | `npx shadcn@latest add https://shadcncraft.com/r/channel-performance-1.json` |
| cost-per-acquisition-trend-1 | registry:block | Daily cost per acquisition as an area trend with period comparison. | `npx shadcn@latest add https://shadcncraft.com/r/cost-per-acquisition-trend-1.json` |
| paid-media-allocation-1 | registry:block | Donut breakdown of spend across paid channels. | `npx shadcn@latest add https://shadcncraft.com/r/paid-media-allocation-1.json` |
| campaign-performance-1 | registry:block | Top campaigns by leads generated, as a compact data table. | `npx shadcn@latest add https://shadcncraft.com/r/campaign-performance-1.json` |
| top-landing-pages-1 | registry:block | Pages ranked by sessions with visitor share. | `npx shadcn@latest add https://shadcncraft.com/r/top-landing-pages-1.json` |
| marketing-funnel-1 | registry:block | Stage-by-stage conversion across the marketing funnel. | `npx shadcn@latest add https://shadcncraft.com/r/marketing-funnel-1.json` |
| attribution-breakdown-1 | registry:block | Revenue credited by first touch vs last touch, per channel. | `npx shadcn@latest add https://shadcncraft.com/r/attribution-breakdown-1.json` |
| growth-simulator-1 | registry:block | Live sliders modeling monthly spend against projected pipeline. | `npx shadcn@latest add https://shadcncraft.com/r/growth-simulator-1.json` |
| goal-progress-1 | registry:block | Month-to-date attainment against monthly targets as bullet bars. | `npx shadcn@latest add https://shadcncraft.com/r/goal-progress-1.json` |
| engagement-by-day-hour-1 | registry:block | Open-rate heatmap by send day and hour. | `npx shadcn@latest add https://shadcncraft.com/r/engagement-by-day-hour-1.json` |
| revenue-vs-target-1 | registry:block | Closed revenue against target and forecast as a tick meter. | `npx shadcn@latest add https://shadcncraft.com/r/revenue-vs-target-1.json` |
| pipeline-by-stage-1 | registry:block | Open pipeline value and share across deal stages as a funnel. | `npx shadcn@latest add https://shadcncraft.com/r/pipeline-by-stage-1.json` |
| rep-leaderboard-1 | registry:block | Reps ranked by quota attainment with target markers. | `npx shadcn@latest add https://shadcncraft.com/r/rep-leaderboard-1.json` |
| deals-table-1 | registry:block | Open deals with owner, stage, value, and close date. | `npx shadcn@latest add https://shadcncraft.com/r/deals-table-1.json` |
| win-rate-1 | registry:block | Win rate with stage-to-stage conversion bars. | `npx shadcn@latest add https://shadcncraft.com/r/win-rate-1.json` |
| deal-velocity-by-segment-1 | registry:block | Average days in stage by segment as a heatmap. | `npx shadcn@latest add https://shadcncraft.com/r/deal-velocity-by-segment-1.json` |
| lead-to-customer-funnel-1 | registry:block | Marketing-to-sales handoff as concentric ring progress. | `npx shadcn@latest add https://shadcncraft.com/r/lead-to-customer-funnel-1.json` |
| leads-by-region-1 | registry:block | Leads and pipeline value by country, with list and map views. | `npx shadcn@latest add https://shadcncraft.com/r/leads-by-region-1.json` |
| customer-health-score-1 | registry:block | Average customer health as an arc gauge with score bands. | `npx shadcn@latest add https://shadcncraft.com/r/customer-health-score-1.json` |
| ai-insights-1 | registry:block | Alerts and opportunities surfaced automatically across the funnel. | `npx shadcn@latest add https://shadcncraft.com/r/ai-insights-1.json` |
| header-1 | registry:block | A standard page header that anchors the page title with optional breadcrumbs, primary actions, and inline search. Designed for app and dashboard pages where us… | `npx shadcn@latest add https://shadcncraft.com/r/header-1.json` |
| header-2 | registry:block | A page header that pairs a visual cover with navigation context and search. Uses an image to set tone or brand while keeping the page title, breadcrumbs, and c… | `npx shadcn@latest add https://shadcncraft.com/r/header-2.json` |
| header-3 | registry:block | A compact page header that combines breadcrumbs, a clear page title, and inline tabs for switching between related sections. Keeps navigation close to the cont… | `npx shadcn@latest add https://shadcncraft.com/r/header-3.json` |
| header-4 | registry:block | A richer page header that pairs breadcrumbs and a page title with a visual cover image and inline tabs. Useful for profile, settings, or sectioned pages where … | `npx shadcn@latest add https://shadcncraft.com/r/header-4.json` |
| header-5 | registry:block | A compact header designed for user or account pages. Combines avatar, name, and secondary details with inline actions and search, keeping identity and controls… | `npx shadcn@latest add https://shadcncraft.com/r/header-5.json` |
| header-6 | registry:block | A lightweight page header that pairs a clear title with a short supporting description. Designed for settings or configuration screens where users need immedia… | `npx shadcn@latest add https://shadcncraft.com/r/header-6.json` |
| inline-cta-1 | registry:block | 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 n… | `npx shadcn@latest add https://shadcncraft.com/r/inline-cta-1.json` |
| inline-cta-2 | registry:block | 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 c… | `npx shadcn@latest add https://shadcncraft.com/r/inline-cta-2.json` |
| inline-cta-3 | registry:block | 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… | `npx shadcn@latest add https://shadcncraft.com/r/inline-cta-3.json` |
| kanban-1 | registry:block | 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 proba… | `npx shadcn@latest add https://shadcncraft.com/r/kanban-1.json` |
| modal-1 | registry:block | 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 … | `npx shadcn@latest add https://shadcncraft.com/r/modal-1.json` |
| modal-2 | registry:block | 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, descr… | `npx shadcn@latest add https://shadcncraft.com/r/modal-2.json` |
| modal-3 | registry:block | 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 for… | `npx shadcn@latest add https://shadcncraft.com/r/modal-3.json` |
| section-footer-1 | registry:block | 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 restrain… | `npx shadcn@latest add https://shadcncraft.com/r/section-footer-1.json` |
| section-footer-2 | registry:block | 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… | `npx shadcn@latest add https://shadcncraft.com/r/section-footer-2.json` |
| section-footer-3 | registry:block | 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 com… | `npx shadcn@latest add https://shadcncraft.com/r/section-footer-3.json` |
| section-footer-4 | registry:block | 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 indic… | `npx shadcn@latest add https://shadcncraft.com/r/section-footer-4.json` |
| progress-1 | registry:block | 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 te… | `npx shadcn@latest add https://shadcncraft.com/r/progress-1.json` |
| progress-2 | registry:block | 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, con… | `npx shadcn@latest add https://shadcncraft.com/r/progress-2.json` |
| progress-3 | registry:block | 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 i… | `npx shadcn@latest add https://shadcncraft.com/r/progress-3.json` |
| progress-4 | registry:block | 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… | `npx shadcn@latest add https://shadcncraft.com/r/progress-4.json` |
| file-upload-1 | registry:block | A compact file upload layout with a prominent drag-and-drop zone and clear fallback action. Uploaded files are listed inline with filename, size, status, and p… | `npx shadcn@latest add https://shadcncraft.com/r/file-upload-1.json` |
| file-upload-2 | registry:block | A streamlined file upload layout that pairs a drag-and-drop zone with a clean, minimal upload list. Each file item focuses on status and progress only, reducin… | `npx shadcn@latest add https://shadcncraft.com/r/file-upload-2.json` |
| file-upload-3 | registry:block | A structured file upload layout that separates completed and in-progress uploads into clear sections. Uses lightweight headers to group states, making it easy … | `npx shadcn@latest add https://shadcncraft.com/r/file-upload-3.json` |
| multistep-1 | registry:block | 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 corn… | `npx shadcn@latest add https://shadcncraft.com/r/multistep-1.json` |
| multistep-2 | registry:block | 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 p… | `npx shadcn@latest add https://shadcncraft.com/r/multistep-2.json` |
| multistep-3 | registry:block | 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. T… | `npx shadcn@latest add https://shadcncraft.com/r/multistep-3.json` |
| table-1 | registry:block | Full-featured data table for admin and SaaS back-office views: customers, users, records, list management. Use for dense, editable lists with a per-row selecti… | `npx shadcn@latest add https://shadcncraft.com/r/table-1.json` |
| table-2 | registry:block | Invoice management table for billing and finance dashboards. Use for listing invoices with paid, pending and overdue status badges, document icons and issued, … | `npx shadcn@latest add https://shadcncraft.com/r/table-2.json` |
| table-3 | registry:block | Paginated transactions table with global search, multi-select method and status filters, sortable date and amount columns, row selection and per-row actions. U… | `npx shadcn@latest add https://shadcncraft.com/r/table-3.json` |
| table-4 | registry:block | Team and workspace member directory for admin and settings pages. Use for listing people with an avatar, name and email, plus role, status (active, offline, in… | `npx shadcn@latest add https://shadcncraft.com/r/table-4.json` |
| table-5 | registry:block | Task and project-tracking table for project management and sprint views. Use for listing work items with an assignee avatar, a status badge (todo, in progress,… | `npx shadcn@latest add https://shadcncraft.com/r/table-5.json` |

## For AI agents

```text
You are adding components from @shadcncraft to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/shadcncraft.md) for the component list.
2. Fetch the machine-readable index: https://shadcncraft.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: shadcncraft).
```