{ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "shadcn-ui-blocks", "homepage": "https://your-registry.com", "items": [ { "name": "hero-01", "type": "registry:block", "title": "Hero 01", "description": "Two-column hero section with an announcement badge, headline, subtitle, and primary/secondary CTA buttons. Place it as the first section of your landing page to immediately communicate your product value and drive sign-ups.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "badge" ], "categories": [ "hero" ], "meta": { "image": "/r/previews/hero-01.webp", "imageDark": "/r/previews/hero-01-dark.webp", "prose": { "about": "Hero 01 is a two-column hero section built with shadcn/ui and Tailwind CSS for Next.js 15 landing pages. The left column holds an announcement badge, a large headline, a subtitle, and two CTA buttons (primary and secondary). The right column displays a product screenshot or image placeholder. The layout is fully responsive: it stacks vertically on mobile and splits into two equal columns on desktop. Both light and dark modes are supported out of the box through shadcn/ui's theming system.", "whenToUse": [ "SaaS product landing pages where you need a clear value proposition above the fold", "Startup homepages that require a headline + screenshot layout", "Marketing pages where you want two CTAs — one primary (sign up) and one secondary (learn more)", "Any Next.js 15 App Router project that needs a polished first section in minutes" ], "notes": "Swap the placeholder image for a real product screenshot by replacing the src prop on the Image component. The announcement badge text and CTA labels are props — no need to modify component internals.", "faqs": [ { "question": "Does Hero 01 ship with a real product screenshot?", "answer": "No, it ships with a placeholder image. Replace the src prop on the Image component with your own screenshot before shipping." }, { "question": "Can I use a single CTA instead of two?", "answer": "Yes. The secondary button is a separate prop — omit it and the layout collapses to one CTA without additional changes." }, { "question": "Does it support dark mode automatically?", "answer": "Yes. It uses shadcn/ui's theming system, so it inherits your project's light/dark tokens with no extra configuration." } ] } }, "files": [ { "path": "src/registry/blocks/hero-01/hero.tsx", "type": "registry:component", "target": "components/hero-01.tsx" } ] }, { "name": "hero-02", "type": "registry:block", "title": "Hero 02", "description": "Centered hero section with a grid background, headline, CTA buttons, and a featured product screenshot. Use it above the fold on app or SaaS landing pages to visually showcase your product and guide visitors toward action.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "badge" ], "categories": [ "hero" ], "meta": { "image": "/r/previews/hero-02.webp", "imageDark": "/r/previews/hero-02-dark.webp", "prose": { "about": "Hero 02 is a centered hero section with a subtle grid background pattern, a bold headline, a subtitle, primary and secondary CTA buttons, and a full-width product screenshot below. Built with shadcn/ui and Tailwind CSS, it uses a centered single-column layout that works at any viewport width. The grid background is rendered via CSS and adds visual depth without any images or external assets. Dark mode is fully supported.", "whenToUse": [ "App landing pages where a centered layout feels more balanced than a two-column split", "SaaS homepages where the product screenshot is the main visual focus", "Situations where you want a single, unambiguous primary CTA without a competing column", "Products with a wide dashboard or app screenshot that benefits from full-width display" ], "notes": "The grid background is a pure CSS pattern — no SVG or image file required. Adjust the grid color via the CSS variable in the component to match your brand." } }, "files": [ { "path": "src/registry/blocks/hero-02/hero.tsx", "type": "registry:component", "target": "components/hero-02.tsx" } ] }, { "name": "hero-03", "type": "registry:block", "title": "Hero 03", "description": "Two-column hero with star rating social proof, key statistics card, and call-to-action buttons. Use it when you need to build immediate trust and highlight traction metrics on SaaS or agency landing pages.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "badge", "separator" ], "categories": [ "hero" ], "meta": { "image": "/r/previews/hero-03.webp", "imageDark": "/r/previews/hero-03-dark.webp", "prose": { "about": "Hero 03 is a two-column hero section designed to lead with social proof. The left column features a star rating display, a headline, a subtitle, CTA buttons, and a statistics card showing key business metrics. The right column holds a product image or screenshot. Built with shadcn/ui Cards and Tailwind CSS, it uses a responsive grid that collapses to a single column on mobile. The stats card is a nested shadcn Card component that can be updated with real numbers from any data source.", "whenToUse": [ "SaaS or agency landing pages where you want to lead with measurable traction (users, revenue, ratings)", "Products with strong review scores or notable growth metrics worth surfacing above the fold", "B2B landing pages where trust-building is the primary conversion lever", "Situations where a plain headline-and-CTA hero needs more credibility signals" ], "notes": "Replace the placeholder star rating and stats with real numbers. The stats card is a standalone shadcn Card — you can connect it to a live data source or keep it static." } }, "files": [ { "path": "src/registry/blocks/hero-03/hero.tsx", "type": "registry:component", "target": "components/hero-03.tsx" } ] }, { "name": "hero-05", "type": "registry:block", "title": "Hero 05", "description": "Minimal full-screen centered hero with headline, subtitle, and CTA buttons on a clean background. Use it as a distraction-free entry point for products that rely on strong copy rather than visuals.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "badge", "avatar" ], "categories": [ "hero" ], "meta": { "image": "/r/previews/hero-05.webp", "imageDark": "/r/previews/hero-05-dark.webp", "prose": { "about": "Hero 05 is a minimal, full-screen centered hero section with a bold headline, a short subtitle, and two CTA buttons on a clean background. There are no images, no decorative elements, and no sidebars — just typography and actions. Built entirely with shadcn/ui Button components and Tailwind CSS utility classes. It renders as a full-viewport-height section that centers its content both horizontally and vertically.", "whenToUse": [ "Products where the copy is the product — developer tools, writing apps, or API services", "Landing pages where a distraction-free first impression is more effective than a screenshot", "Situations where load performance is critical and images would slow the page", "Minimalist brand identities that rely on strong typography rather than visuals" ], "notes": "Because this hero has no image, the headline carries all the weight. Write a specific, benefit-driven headline rather than a generic tagline." } }, "files": [ { "path": "src/registry/blocks/hero-05/hero.tsx", "type": "registry:component", "target": "components/hero-05.tsx" } ] }, { "name": "feature-01", "type": "registry:block", "title": "Feature 01", "description": "Three-column feature grid displaying product benefits as icon cards with titles and descriptions. Use it to quickly communicate your product's key capabilities anywhere on a SaaS or marketing landing page.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "card" ], "categories": [ "feature" ], "meta": { "image": "/r/previews/feature-01.webp", "imageDark": "/r/previews/feature-01-dark.webp", "prose": { "about": "Feature 01 is a three-column icon card grid that displays product benefits with a Lucide icon, a short title, and a one-sentence description per card. Built with shadcn/ui Card components and Tailwind CSS grid, it automatically wraps to a single column on mobile and two columns on tablet. The icon, title, and description for each card are passed as data — no need to edit JSX to add or remove features. Dark mode is inherited from the shadcn/ui theme.", "whenToUse": [ "SaaS and marketing landing pages that need to communicate 3, 6, or 9 product benefits at a glance", "Sections that follow the hero and expand on the value proposition with supporting detail", "Products with distinct, independently valuable features that don't require visual screenshots", "Pages where load time matters and you want feature content without heavy images" ], "notes": "Stick to 3, 6, or 9 cards for a clean grid. Fewer than 3 or non-multiples of 3 will leave orphan cards on desktop — add a placeholder or use a different layout.", "faqs": [ { "question": "How many feature cards should I use?", "answer": "Stick to 3, 6, or 9 for a clean grid — other counts leave orphan cards on desktop." }, { "question": "Do I need to edit JSX to change the features?", "answer": "No, the icon, title, and description for each card are passed as data, not hardcoded in JSX." }, { "question": "Does it support custom icons?", "answer": "Yes, any Lucide icon can be passed per card." } ] } }, "files": [ { "path": "src/registry/blocks/feature-01/feature.tsx", "type": "registry:component", "target": "components/feature-01.tsx" } ] }, { "name": "feature-03", "type": "registry:block", "title": "Feature 03", "description": "Two-column image grid showcasing product features with visual screenshots and short descriptions. Use it to let your interface speak for itself while giving context for each feature shown.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button" ], "categories": [ "feature" ], "meta": { "image": "/r/previews/feature-03.webp", "imageDark": "/r/previews/feature-03-dark.webp", "prose": { "about": "Feature 03 is a two-column image grid that pairs product screenshots with short feature titles and descriptions. Each row places a screenshot on one side and descriptive text on the other, alternating alignment for visual rhythm. Built with Next.js Image and shadcn/ui layout utilities, it lazy-loads each screenshot and respects both light and dark mode. The component accepts an array of feature objects with image, title, and description fields.", "whenToUse": [ "Products with distinct UI screens or dashboards where showing the interface is more persuasive than describing it", "Feature sections that come after a brief overview and need to go deeper on individual capabilities", "SaaS landing pages where competitors rely on bullet lists and you want a more visual alternative", "Any page where a sequence of feature explanations benefits from alternating image-text layout" ], "notes": "Use real product screenshots at 1200×800px or similar for crisp rendering. Avoid using placeholder images in production — the visual quality of the screenshots determines the quality of this section." } }, "files": [ { "path": "src/registry/blocks/feature-03/feature.tsx", "type": "registry:component", "target": "components/feature-03.tsx" } ] }, { "name": "feature-04", "type": "registry:block", "title": "Feature 04", "description": "Three-column icon card grid for listing product features with icons, titles, and short descriptions. Use it as a lightweight, fast-loading feature showcase section that stays scannable on any screen size.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "card" ], "categories": [ "feature" ], "meta": { "image": "/r/previews/feature-04.webp", "imageDark": "/r/previews/feature-04-dark.webp", "prose": { "about": "Feature 04 is a three-column icon card grid similar to Feature 01 but with a lighter visual weight — smaller icons, tighter spacing, and a more compact card structure. Built with shadcn/ui and Tailwind CSS, it is designed for pages that need a fast-loading, text-first feature list without the visual heaviness of screenshots or large illustrations. Cards display a Lucide icon, a title, and a short description.", "whenToUse": [ "Pages that already have a heavy hero section and need a lighter feature list as a follow-up", "Feature sections lower on the page where users are scanning, not reading", "Products with more than 6 features where a compact layout keeps the section from becoming too long", "Mobile-first pages where a compact card grid performs better than full-width feature rows" ], "notes": "Works well in sets of 6 or 9. Use consistent icon sizes from the same Lucide icon family to maintain visual harmony across all cards." } }, "files": [ { "path": "src/registry/blocks/feature-04/feature.tsx", "type": "registry:component", "target": "components/feature-04.tsx" } ] }, { "name": "feature-05", "type": "registry:block", "title": "Feature 05", "description": "Interactive accordion feature section where clicking each item reveals a corresponding product screenshot. Use it to keep the section compact while letting users explore features at their own pace.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "accordion" ], "categories": [ "feature" ], "meta": { "image": "/r/previews/feature-05.webp", "imageDark": "/r/previews/feature-05-dark.webp", "prose": { "about": "Feature 05 is an interactive accordion feature section where each item in the list reveals a corresponding product screenshot when selected. The left column holds a vertical list of clickable feature titles with descriptions; clicking any item updates the screenshot displayed on the right. Built with shadcn/ui Accordion and Tailwind CSS, it keeps the section height controlled while allowing users to explore multiple features at their own pace.", "whenToUse": [ "Products with 4–8 distinct features that each have a unique UI screen to show", "Landing pages where vertical space is limited and a traditional image-per-row layout would be too long", "Interactive demos where letting users click through features increases engagement time", "SaaS products with a rich dashboard where showing the full UI for each feature is important" ], "notes": "Prepare one screenshot per feature item at a consistent aspect ratio. Mismatched image dimensions will cause the right column to jump in height as users click between items." } }, "files": [ { "path": "src/registry/blocks/feature-05/feature.tsx", "type": "registry:component", "target": "components/feature-05.tsx" } ] }, { "name": "pricing-01", "type": "registry:block", "title": "Pricing 01", "description": "Three-column pricing table with a monthly/yearly billing toggle, a highlighted recommended plan, and feature lists. Use it on dedicated pricing pages to help users choose the right plan and increase conversion.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "card", "switch", "separator" ], "categories": [ "pricing" ], "meta": { "image": "/r/previews/pricing-01.webp", "imageDark": "/r/previews/pricing-01-dark.webp", "prose": { "about": "Pricing 01 is a three-column pricing table with a monthly/yearly billing toggle, a visually highlighted recommended plan, and per-plan feature lists with checkmark indicators. Built with shadcn/ui Card, Badge, and Button components, it handles the toggle state client-side and updates all prices simultaneously. The highlighted plan uses a distinct border and background to draw the eye without requiring a custom design.", "whenToUse": [ "SaaS products with two or three distinct pricing tiers targeting different customer segments", "Dedicated pricing pages where conversion is the primary goal of the entire page", "Products with a meaningful discount for annual billing that you want to surface clearly", "Situations where you want to guide users toward a specific plan without hiding the alternatives" ], "notes": "The yearly/monthly toggle is fully client-side — no server requests needed. Connect the CTA buttons to your Stripe Checkout session creation endpoint or payment link.", "faqs": [ { "question": "Does the monthly/yearly toggle need a backend or state library?", "answer": "No. The toggle is local client-side React state — no server request, no global store. All prices update simultaneously when it's flipped." }, { "question": "How do I connect the plan buttons to Stripe?", "answer": "Point each plan's CTA button at your Stripe Checkout session creation endpoint or a Stripe Payment Link. The block only renders the UI — it doesn't call Stripe itself." }, { "question": "Can I use two tiers instead of three?", "answer": "Yes. The plans are passed as an array of props, so removing or adding a tier doesn't require touching the component's layout logic." } ] } }, "files": [ { "path": "src/registry/blocks/pricing-01/pricing.tsx", "type": "registry:component", "target": "components/pricing-01.tsx" } ] }, { "name": "pricing-02", "type": "registry:block", "title": "Pricing 02", "description": "Side-by-side pricing comparison table with feature rows and checkmark/cross indicators. Use it when your plans share many features and you want to make the differences crystal clear for potential buyers.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button" ], "categories": [ "pricing" ], "meta": { "image": "/r/previews/pricing-02.webp", "imageDark": "/r/previews/pricing-02-dark.webp", "prose": { "about": "Pricing 02 is a side-by-side feature comparison table with plan columns and feature rows. Each cell shows a checkmark for included features and a cross or dash for excluded ones. Built with a responsive HTML table styled with Tailwind CSS and shadcn/ui design tokens, it makes plan differences immediately scannable. The table scrolls horizontally on mobile to preserve the full comparison layout.", "whenToUse": [ "Products where plans share many features and users need to see exactly what they gain by upgrading", "Pricing pages that target technical buyers who evaluate features methodically before purchasing", "B2B SaaS with complex feature matrices where a card layout would be too long to compare visually", "Situations where a traditional three-column card pricing table has already been shown higher on the page" ], "notes": "Keep the feature list under 15 rows for mobile readability. Group features by category (core, advanced, support) and add a subtle separator row between groups to improve scannability." } }, "files": [ { "path": "src/registry/blocks/pricing-02/pricing.tsx", "type": "registry:component", "target": "components/pricing-02.tsx" } ] }, { "name": "pricing-03", "type": "registry:block", "title": "Pricing 03", "description": "Three-column pricing section with a tabbed billing toggle, feature lists with separators, and CTA buttons. Use it as an alternative pricing layout when you want to visually emphasize the most popular plan.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "card", "tabs", "badge", "separator" ], "categories": [ "pricing" ], "meta": { "image": "/r/previews/pricing-03.webp", "imageDark": "/r/previews/pricing-03-dark.webp", "prose": { "about": "Pricing 03 is a three-column pricing section with a tabbed billing toggle, per-plan feature lists with separator lines between groups, and clearly labeled CTA buttons. Built with shadcn/ui Tabs and Card components, it uses visual separators to organize feature lists by category rather than presenting a flat bullet list. The tab toggle updates all plan prices at once without a page reload.", "whenToUse": [ "Products that want a more structured feature list presentation than a flat checkmark grid", "Pricing pages where features naturally group into categories like Core, Advanced, and Support", "SaaS products with a strong upsell narrative where feature grouping guides the upgrade decision", "Alternative to Pricing 01 when you want the same layout with stronger visual feature organization" ], "notes": "Use the separator lines to create two or three named feature categories per plan. Grouping features by value (what it does for the user) rather than by technical category converts better." } }, "files": [ { "path": "src/registry/blocks/pricing-03/pricing.tsx", "type": "registry:component", "target": "components/pricing-03.tsx" } ] }, { "name": "pricing-04", "type": "registry:block", "title": "Pricing 04", "description": "Three-column pricing section with a highlighted popular plan featuring a dark gradient background, monthly/yearly billing toggle with a green indicator, and custom price display. Use it for SaaS products that want to visually differentiate the recommended plan.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "card", "tabs" ], "categories": [ "pricing" ], "meta": { "image": "/r/previews/pricing-04.webp", "imageDark": "/r/previews/pricing-04-dark.webp", "prose": { "about": "Pricing 04 is a three-column pricing section where the popular plan stands out with a dark radial-gradient background. A pill-shaped billing toggle with a green dot indicator switches between monthly and yearly pricing. Each card shows a large price display with a dollar-sign prefix, a short description, a CTA button, and a feature list with checkmarks. The popular card uses white-tinted button and text styles to stay readable on the dark background.", "whenToUse": [ "SaaS products with a clear recommended plan that should draw the user's eye immediately", "Pricing pages targeting creators or indie makers where a visually bold middle tier drives upgrades", "Products that offer a yearly discount and want to hint at it with a subtle green badge on the yearly tab", "Situations where you want each plan to feel distinct without using colored borders or badges" ], "notes": "Keep plan descriptions to one or two lines so all three cards stay the same height. The dark gradient on the popular card is purely CSS — no image assets required." } }, "files": [ { "path": "src/registry/blocks/pricing-04/pricing.tsx", "type": "registry:component", "target": "components/pricing-04.tsx" } ] }, { "name": "pricing-stripe-01", "type": "registry:block", "title": "Pricing Stripe 01", "description": "Connected pricing section that fetches products and prices live from the Stripe API and renders them as cards. Each card shows the plan name, description, amount, and a checkout button that creates a Stripe Checkout session.", "dependencies": [ "lucide-react", "stripe" ], "registryDependencies": [ "button", "card", "tabs" ], "categories": [ "pricing" ], "meta": { "image": "/r/previews/pricing-stripe-01.webp", "imageDark": "/r/previews/pricing-stripe-01-dark.webp", "isPro": true, "badges": [ "stripe" ], "prose": { "about": "Pricing Stripe 01 is a Server Component that calls the Stripe API at render time to list your active products. Only products with a default price set are displayed — this is the anchor used to resolve monthly and yearly prices. Plans are sorted by a metadata order field, falling back to price amount ascending. The card design matches pricing-04: a dark gradient header for the plan marked popular=true, an overlap body, and a monthly/yearly toggle that only appears when at least one product has both intervals. Feature lists are pulled from Stripe's native marketing_features field. The checkout button triggers a Server Action that creates a Stripe Checkout session and redirects the user to the hosted payment page.", "whenToUse": [ "SaaS products that manage pricing in Stripe and want the UI to stay in sync without a redeploy", "Apps that already use Stripe for billing and want a plug-and-play pricing page", "Teams that want to A/B test pricing tiers by updating Stripe products without touching code", "Next.js 15 App Router projects that prefer Server Components for data fetching" ], "notes": "Set a default price on every product you want to display — products without one are filtered out. Add marketing features directly on the product in the Stripe dashboard (no JSON metadata needed). Control the popular highlight, button label, and sort order via product metadata keys: popular=true, cta=Get started, order=1.", "faqs": [ { "question": "Where does the pricing data come from?", "answer": "Live from the Stripe API at render time — only products with a default price set are displayed." }, { "question": "How do I mark a plan as the popular/highlighted one?", "answer": "Set the popular=true metadata key on the product in the Stripe dashboard — no code changes needed." }, { "question": "What happens when I click the checkout button?", "answer": "A Server Action creates a Stripe Checkout session and redirects the user to Stripe's hosted payment page." } ] } }, "files": [ { "path": "src/registry/blocks/pricing-stripe-01/pricing.tsx", "type": "registry:component", "target": "components/pricing-stripe-01.tsx" }, { "path": "src/registry/blocks/pricing-stripe-01/stripe.ts", "type": "registry:component", "target": "components/pricing-stripe-01-stripe.ts" }, { "path": "src/registry/blocks/pricing-stripe-01/pricing-cards.tsx", "type": "registry:component", "target": "components/pricing-stripe-01-pricing-cards.tsx" }, { "path": "src/registry/blocks/pricing-stripe-01/pricing-card.tsx", "type": "registry:component", "target": "components/pricing-stripe-01-pricing-card.tsx" }, { "path": "src/registry/blocks/pricing-stripe-01/checkout-button.tsx", "type": "registry:component", "target": "components/pricing-stripe-01-checkout-button.tsx" }, { "path": "src/registry/blocks/pricing-stripe-01/actions.ts", "type": "registry:component", "target": "components/pricing-stripe-01-actions.ts" } ] }, { "name": "cta-01", "type": "registry:block", "title": "CTA 01", "description": "Horizontal call-to-action section with a heading, description, and primary/secondary CTA buttons. Use it at the end of landing page sections to nudge visitors toward sign-up or purchase at the right moment.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "https://shadcnship.com/r/social-icons.json" ], "categories": [ "cta" ], "meta": { "image": "/r/previews/cta-01.webp", "imageDark": "/r/previews/cta-01-dark.webp", "prose": { "about": "CTA 01 is a horizontal call-to-action banner with a headline, a short description, and two action buttons (primary and secondary) aligned on the same row. Built with Tailwind CSS flexbox, it adapts from a stacked mobile layout to an inline desktop layout. The section has no background image or decoration — it relies on contrast with the surrounding sections to draw attention. Both buttons are shadcn/ui Button components with configurable variants.", "whenToUse": [ "End of a landing page section where you want to catch users before they scroll past without converting", "Between major content sections to re-engage visitors who are reading but haven't clicked yet", "Products where a soft secondary CTA (learn more, see demo) complements the primary conversion action", "Pages that need a conversion prompt without the visual weight of a full card or modal" ], "notes": "The secondary button should reduce friction, not compete with the primary. Use it for demo requests, documentation links, or video previews — not a second sign-up path.", "faqs": [ { "question": "Does CTA 01 include a background image or illustration?", "answer": "No, it's intentionally plain — it relies on contrast with surrounding sections rather than decoration to draw attention." }, { "question": "What should the secondary button link to?", "answer": "Something low-friction like a demo, documentation, or video preview — not a second sign-up path, which would compete with the primary CTA." }, { "question": "Does it stack on mobile?", "answer": "Yes, the flexbox layout adapts from an inline row on desktop to a stacked column on mobile automatically." } ] } }, "files": [ { "path": "src/registry/blocks/cta-01/cta.tsx", "type": "registry:component", "target": "components/cta-01.tsx" } ] }, { "name": "cta-02", "type": "registry:block", "title": "CTA 02", "description": "CTA card with an app or device mockup image, headline, and action button. Use it to close a landing page with a visually driven conversion prompt that showcases your product in context.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "card", "https://magicui.design/r/iphone.json" ], "categories": [ "cta" ], "meta": { "image": "/r/previews/cta-02.webp", "imageDark": "/r/previews/cta-02-dark.webp", "prose": { "about": "CTA 02 is a full-width card with a device or app mockup image on one side and a headline and single action button on the other. Built with shadcn/ui Card and Next.js Image, it uses the product visual to do the selling and keeps the copy minimal. The layout is responsive: on mobile the image stacks above the text; on desktop both sit side by side within the card.", "whenToUse": [ "Page-closing CTAs for products with a strong, recognizable product interface worth showing", "Mobile app landing pages where a device frame mockup reinforces the native experience", "Products where the product screenshot itself is the most compelling selling argument", "Situations where you want a closing CTA that feels different from the hero — visual-first rather than copy-first" ], "notes": "Use a device frame mockup generator or Figma template to create a polished app-in-frame image. A raw screenshot without a device frame looks unfinished in this layout." } }, "files": [ { "path": "src/registry/blocks/cta-02/cta.tsx", "type": "registry:component", "target": "components/cta-02.tsx" } ] }, { "name": "cta-03", "type": "registry:block", "title": "CTA 03", "description": "Newsletter subscription CTA with an email input and a submit button. Use it to capture leads directly within your content by embedding a low-friction email signup anywhere on the page.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "input" ], "categories": [ "cta" ], "meta": { "image": "/r/previews/cta-03.webp", "imageDark": "/r/previews/cta-03-dark.webp", "prose": { "about": "CTA 03 is a newsletter or lead capture section with a short headline, a supporting description, an email input field, and a submit button. Built with shadcn/ui Input and Button components, it handles the form layout client-side and can be wired to any email marketing API or Supabase table. The layout is centered and compact, designed to sit inline within content pages rather than as a full-width section.", "whenToUse": [ "Blog posts and documentation pages where capturing the reader's email at the end converts well", "Coming-soon pages that need a lightweight waitlist form without a full waitlist section", "Product newsletters where embedding a signup form in the footer of content pages grows the list passively", "Any page where the primary goal is email capture rather than a direct product conversion" ], "notes": "Add a brief privacy note below the input ('No spam. Unsubscribe anytime.') to reduce friction. Connect the form to Resend, Loops, or a Supabase table to store and process submissions." } }, "files": [ { "path": "src/registry/blocks/cta-03/cta.tsx", "type": "registry:component", "target": "components/cta-03.tsx" } ] }, { "name": "cta-04", "type": "registry:block", "title": "CTA 04", "description": "Centered CTA card with a subtle grid background, bold headline, description, and action button. Use it as a section-closing block that re-engages visitors who scrolled past earlier conversion points.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "https://shadcnship.com/r/social-icons.json" ], "categories": [ "cta" ], "meta": { "image": "/r/previews/cta-04.webp", "imageDark": "/r/previews/cta-04-dark.webp", "prose": { "about": "CTA 04 is a centered full-width card with a subtle grid background pattern, a bold headline, a description paragraph, and a single primary action button. Built with shadcn/ui Card and Tailwind CSS, the grid background adds visual interest without competing with the call-to-action copy. It is designed as a section-closing block that re-engages visitors who scrolled past earlier CTAs.", "whenToUse": [ "Bottom of long landing pages as a final conversion prompt before the footer", "After a feature section or pricing table where users have seen enough information to decide", "Pages that need a visually distinct closing section that feels different from a flat horizontal CTA", "Situations where a single, unambiguous CTA without a secondary option performs better for your audience" ], "notes": "The grid background is a pure CSS pattern — no image files. The CTA headline here should be action-oriented and specific: 'Start your free trial' outperforms 'Get started' for conversion." } }, "files": [ { "path": "src/registry/blocks/cta-04/cta.tsx", "type": "registry:component", "target": "components/cta-04.tsx" } ] }, { "name": "faq-01", "type": "registry:block", "title": "FAQ 01", "description": "Single-column accordion FAQ section with expandable question and answer items. Use it on landing pages, pricing pages, or support sections to address common objections and reduce incoming support requests.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "accordion" ], "categories": [ "faq" ], "meta": { "image": "/r/previews/faq-01.webp", "imageDark": "/r/previews/faq-01-dark.webp", "prose": { "about": "FAQ 01 is a single-column accordion section built with the shadcn/ui Accordion component. Each item displays a question as the trigger and expands to reveal the answer on click. Only one item is open at a time by default. The section accepts an array of question/answer objects, making it easy to add, remove, or reorder items without editing the component structure. It renders correctly in both light and dark mode.", "whenToUse": [ "Pricing pages where addressing objections close to the CTA reduces drop-off", "Landing pages that receive recurring pre-sales questions that slow the sales cycle", "Support or help pages where a searchable FAQ is overkill but structured Q&A is needed", "Any section where you want to add content density without increasing visual noise" ], "notes": "FAQPage structured data (JSON-LD) is already implemented on the homepage and blog. Consider adding FAQPage schema to individual pages that use this component to maximize Google rich result eligibility.", "faqs": [ { "question": "Can more than one accordion item be open at the same time?", "answer": "By default only one item is open at a time. This is the standard shadcn/ui Accordion behavior and can be changed to allow multiple open items if needed." }, { "question": "Does this block add FAQPage schema automatically?", "answer": "No. The component only renders the UI. Pair it with the FaqJsonLd component on the page it's used on to get FAQPage structured data." }, { "question": "How many questions can the block handle?", "answer": "Any number — questions and answers are passed as an array prop, so adding, removing, or reordering items doesn't require editing the component." } ] } }, "files": [ { "path": "src/registry/blocks/faq-01/faq.tsx", "type": "registry:component", "target": "components/faq-01.tsx" } ] }, { "name": "faq-02", "type": "registry:block", "title": "FAQ 02", "description": "Two-column accordion FAQ grid for displaying a larger set of questions side by side. Use it when you have ten or more questions and want to keep the FAQ section compact and well-organized.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "accordion" ], "categories": [ "faq" ], "meta": { "image": "/r/previews/faq-02.webp", "imageDark": "/r/previews/faq-02-dark.webp", "prose": { "about": "FAQ 02 is a two-column accordion grid that displays questions and answers side by side, doubling the content density of FAQ 01. Built with shadcn/ui Accordion and Tailwind CSS grid, it collapses to a single column on mobile while maintaining the two-column layout on desktop. Like FAQ 01, it accepts a flat array of question/answer objects and operates one-open-at-a-time by default.", "whenToUse": [ "Pages with 8 or more FAQ items where a single-column layout would make the section uncomfortably long", "Dedicated FAQ pages where content density is the goal and users are actively looking for answers", "Pricing pages on wider layouts where a full-width single column leaves too much whitespace", "Products with two distinct user segments that each have their own set of questions" ], "notes": "On mobile this renders as a single column, identical to FAQ 01. If your primary audience is mobile users, FAQ 01 may be a better choice to avoid the two-column layout feeling cramped on small screens." } }, "files": [ { "path": "src/registry/blocks/faq-02/faq.tsx", "type": "registry:component", "target": "components/faq-02.tsx" } ] }, { "name": "testimonial-01", "type": "registry:block", "title": "Testimonial 01", "description": "Scrolling testimonial section with two animated marquee rows of customer review cards. Use it as a social proof belt on landing pages to continuously surface customer validation without requiring any user interaction.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "card", "avatar", "https://magicui.design/r/marquee.json" ], "categories": [ "social-proof" ], "meta": { "image": "/r/previews/testimonial-01.webp", "imageDark": "/r/previews/testimonial-01-dark.webp", "prose": { "about": "Testimonial 01 is a social proof section with two rows of customer review cards that animate continuously in opposite horizontal directions using CSS marquee animations. Each card displays a customer avatar, name, role, and quoted review text. Built with Tailwind CSS animations and shadcn/ui Card components, the marquee runs on CSS transforms rather than JavaScript — making it lightweight and performant. The animation pauses on hover to let users read individual cards.", "whenToUse": [ "Landing pages where continuous motion keeps the testimonial section engaging as users scroll past", "Products with a large number of reviews where a static grid would require truncation", "B2C products where peer validation is a primary conversion driver", "Pages where you want social proof visible without requiring the user to interact with a carousel" ], "notes": "Duplicate a few cards at the end of the array to prevent a visible gap when the marquee loops. The animation is paused via CSS on hover — no JavaScript event listeners needed.", "faqs": [ { "question": "Does the marquee animation use JavaScript?", "answer": "No. It runs on CSS transforms, which keeps it lightweight and performant compared to a JavaScript-driven carousel." }, { "question": "What happens when a user hovers over the testimonials?", "answer": "The marquee pauses on hover so users can read a card without it scrolling away, then resumes when the cursor leaves." }, { "question": "Do I need a lot of real testimonials to use this block?", "answer": "No, but duplicate a few cards at the end of your array — with too few unique cards the marquee loop shows a visible gap." } ] } }, "files": [ { "path": "src/registry/blocks/testimonial-01/testimonial.tsx", "type": "registry:component", "target": "components/testimonial-01.tsx" } ] }, { "name": "testimonial-02", "type": "registry:block", "title": "Testimonial 02", "description": "Masonry grid wall-of-love section displaying multiple customer reviews in a varied layout. Use it on marketing sites where you have rich social proof and want to display it in a visually engaging way.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "card", "avatar", "button" ], "categories": [ "social-proof" ], "meta": { "image": "/r/previews/testimonial-02.webp", "imageDark": "/r/previews/testimonial-02-dark.webp", "prose": { "about": "Testimonial 02 is a masonry grid wall-of-love section that displays customer testimonials in a varied, Pinterest-style column layout. Cards are distributed across three columns of varying heights, giving each review visual weight proportional to its length. Built with Tailwind CSS column layout and shadcn/ui Card components, it renders as a single column on mobile and expands to three columns on desktop. Each card shows avatar, name, role or company, and review text.", "whenToUse": [ "Products with rich, detailed testimonials that vary in length and deserve to be read in full", "Marketing sites where social proof is a primary differentiator and deserves its own dedicated section", "Agency or service businesses where named customer quotes carry more weight than anonymous ratings", "Pages targeting buyers who conduct thorough research before purchasing and read reviews carefully" ], "notes": "Use real names, real job titles, and real companies. Generic testimonials ('Great product! — John D.') reduce credibility rather than building it." } }, "files": [ { "path": "src/registry/blocks/testimonial-02/testimonial.tsx", "type": "registry:component", "target": "components/testimonial-02.tsx" } ] }, { "name": "stat-01", "type": "registry:block", "title": "Stat 01", "description": "Stats section displaying key product or business metrics in individual icon cards with labels. Use it to quantify your impact on landing pages and give visitors concrete, trust-building numbers.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "card" ], "categories": [ "social-proof" ], "meta": { "image": "/r/previews/stat-01.webp", "imageDark": "/r/previews/stat-01-dark.webp", "prose": { "about": "Stat 01 is a statistics section that displays key business or product metrics in individual icon cards. Each card shows a Lucide icon, a large numerical value, and a short label describing what the number represents. Built with shadcn/ui Card and Tailwind CSS grid, it renders in two columns on mobile and four columns on desktop. The icon and stat values are passed as component data, not hardcoded in JSX.", "whenToUse": [ "Landing pages where you have concrete growth or usage numbers worth surfacing (users, revenue, uptime)", "After the hero section to immediately back up the headline claim with quantified evidence", "Products in competitive markets where measurable scale builds trust faster than copy", "Pages targeting enterprise buyers who look for evidence of adoption before evaluating further" ], "notes": "Use real numbers. Round large numbers to the nearest clean unit (10k+, $2M+) rather than displaying exact figures — rounded numbers are more memorable and no less credible.", "faqs": [ { "question": "Should I show exact numbers or rounded ones?", "answer": "Rounded — figures like 10k+ or $2M+ are more memorable and no less credible than exact values." }, { "question": "Where should this section go on the page?", "answer": "Right after the hero, to back up the headline claim with quantified evidence immediately." }, { "question": "How many stats fit per row?", "answer": "Four columns on desktop, two on mobile, by default." } ] } }, "files": [ { "path": "src/registry/blocks/stat-01/stat.tsx", "type": "registry:component", "target": "components/stat-01.tsx" } ] }, { "name": "stat-02", "type": "registry:block", "title": "Stat 02", "description": "Horizontal stats section with large numbers and labels separated by dividers. Use it as a compact, eye-catching metrics strip that fits naturally between any two sections on a landing page.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://shadcnship.com/r/background-03.json" ], "categories": [ "social-proof" ], "meta": { "image": "/r/previews/stat-02.webp", "imageDark": "/r/previews/stat-02-dark.webp", "prose": { "about": "Stat 02 is a compact horizontal statistics strip with large numbers and supporting labels separated by vertical dividers. Unlike Stat 01, it has no icons or cards — it is a single row of metrics designed to sit between sections as a visual pause. Built with Tailwind CSS flexbox and dividers, it collapses gracefully from a four-column strip on desktop to a two-by-two grid on mobile.", "whenToUse": [ "Between major landing page sections as a trust-building interlude rather than a full section", "Below the hero to immediately quantify the product before diving into features", "Pages that already have a feature card section and need stats without the overhead of a full card grid", "Products where three or four headline metrics tell the story better than any feature list" ], "notes": "Choose four numbers maximum. More than four dilutes the impact and breaks the horizontal layout on mid-size screens. Lead with the most impressive or most relevant metric first." } }, "files": [ { "path": "src/registry/blocks/stat-02/stat.tsx", "type": "registry:component", "target": "components/stat-02.tsx" } ] }, { "name": "logo-01", "type": "registry:block", "title": "Logo 01", "description": "Logo cloud section with two infinite scrolling marquee rows showcasing partner or customer logos. Use it immediately after your hero section to build trust through brand association with recognized names.", "dependencies": [], "registryDependencies": [ "card", "https://magicui.design/r/marquee.json", "https://shadcnship.com/r/social-icons.json" ], "categories": [ "social-proof" ], "meta": { "image": "/r/previews/logo-01.webp", "imageDark": "/r/previews/logo-01-dark.webp", "prose": { "about": "Logo 01 is a logo cloud section with two rows of partner or customer logos that scroll continuously in a marquee, one row left and one right. Built with shadcn/ui Card and a Magic UI marquee component, the animation runs on CSS transforms rather than JavaScript, keeping it lightweight.", "whenToUse": [ "Placing directly after a hero section to build trust through brand association", "Products with several recognizable customers or integration partners worth displaying", "Landing pages where static logo grids feel dated and a subtle motion element adds polish", "Sites that want social proof without requiring visitors to read customer names individually" ], "notes": "Use consistent logo sizing and monochrome/greyscale versions where possible so the row reads as one cohesive strip rather than a mismatched collage. Duplicate a few logos at the end of each row to avoid a visible gap in the loop.", "faqs": [ { "question": "Does the marquee use JavaScript to animate?", "answer": "No, like Testimonial 01 it runs on CSS transforms, which keeps it lightweight and performant." }, { "question": "Can I use real customer logos, or does it require permission?", "answer": "Get permission or use logos you're authorized to display — Logo 01 doesn't include any placeholder brand assets, only the scrolling layout." }, { "question": "Why do the two rows scroll in opposite directions?", "answer": "Purely a visual choice — opposite directions read as more dynamic and help the section feel less like a static list." } ] } }, "files": [ { "path": "src/registry/blocks/logo-01/logo.tsx", "type": "registry:component", "target": "components/logo-01.tsx" } ] }, { "name": "contact-01", "type": "registry:block", "title": "Contact 01", "description": "Contact section with a card-wrapped form (name, email, message) alongside company contact information. Use it on contact or about pages to give visitors a direct, professional way to reach your team.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "card", "input", "label" ], "categories": [ "contact" ], "meta": { "image": "/r/previews/contact-01.webp", "imageDark": "/r/previews/contact-01-dark.webp", "prose": { "about": "Contact 01 is a contact page section with a shadcn/ui card containing a name, email, and message form on the left, alongside company contact information (address, phone, email) on the right. Built with shadcn/ui Form, Input, Textarea, and Card components, the form includes basic client-side validation. The layout uses a responsive two-column grid that stacks on mobile. It does not include a backend submission handler — wire the form action to your preferred API or server action.", "whenToUse": [ "Contact pages on marketing sites, agencies, or SaaS products that take support inquiries via email", "About pages that include a contact section below the team or company information", "Products that need a simple inbound inquiry form without a full helpdesk integration", "Any page where displaying direct contact information alongside a form increases response confidence" ], "notes": "Wire the form to a Resend email action or a Supabase table to persist and route submissions. Add a success state to the form after submission so users know their message was sent.", "faqs": [ { "question": "Does the form send emails by default?", "answer": "No, it's UI-only — wire the form action to a Resend email action, a Supabase table, or your own API." }, { "question": "Does it show company contact info too?", "answer": "Yes, address, phone, and email render alongside the form in a two-column layout that stacks on mobile." }, { "question": "Is there a success message after submitting?", "answer": "Not by default — add a success state to the form once you wire up the submission handler." } ] } }, "files": [ { "path": "src/registry/blocks/contact-01/contact.tsx", "type": "registry:component", "target": "components/contact-01.tsx" } ] }, { "name": "footer-01", "type": "registry:block", "title": "Footer 01", "description": "Multi-column footer with company branding, grouped navigation links, and social media icons. Use it on every page of your site to provide consistent navigation, important links, and legal information at the bottom.", "dependencies": [ "lucide-react" ], "registryDependencies": [], "categories": [ "navigation" ], "meta": { "image": "/r/previews/footer-01.webp", "imageDark": "/r/previews/footer-01-dark.webp", "prose": { "about": "Footer 01 is a multi-column site footer with a company logo and tagline in the first column, followed by grouped navigation link columns, and social media icon links in the final column. Built with shadcn/ui and Tailwind CSS, it uses a responsive grid that collapses to a stacked layout on mobile. The navigation links, social links, and column headings are all passed as data arrays — no hardcoded links in the JSX. A bottom bar displays copyright text.", "whenToUse": [ "Any multi-page marketing site or SaaS product that needs consistent bottom-of-page navigation", "Sites with four or more distinct link categories (product, resources, company, legal) that benefit from grouping", "Products where social media presence is part of the brand and deserves prominent placement", "Pages where the footer needs to carry SEO-relevant internal links to product and documentation pages" ], "notes": "Include links to Privacy Policy and Terms of Service in a legal column. Footers are one of the highest-value areas for internal linking — use them to link to your most important product pages.", "faqs": [ { "question": "Are the footer links hardcoded?", "answer": "No, navigation links, social links, and column headings are all passed as data arrays." }, { "question": "Should I include legal links?", "answer": "Yes, add Privacy Policy and Terms of Service to a legal column — footers are high-value real estate for those links." }, { "question": "Does it collapse on mobile?", "answer": "Yes, the multi-column grid stacks into a single column layout on smaller screens." } ] } }, "files": [ { "path": "src/registry/blocks/footer-01/footer.tsx", "type": "registry:component", "target": "components/footer-01.tsx" } ] }, { "name": "navbar-01", "type": "registry:block", "title": "Navbar 01", "description": "Responsive navbar with dropdown navigation menus on desktop and an accordion-based mobile menu. Use it as your site-wide header to provide clear, accessible navigation across all screen sizes and devices.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "sheet", "navigation-menu", "accordion" ], "categories": [ "navigation" ], "meta": { "image": "/r/previews/navbar-01.webp", "imageDark": "/r/previews/navbar-01-dark.webp", "prose": { "about": "Navbar 01 is a responsive site header with a logo, dropdown navigation menus on desktop, and a collapsible accordion-style mobile menu. Built with shadcn/ui NavigationMenu and Sheet components, the dropdown menus support multi-item groups with icons and descriptions. The mobile menu slides in as a Sheet from the left. Authentication state (logged in / logged out) is configurable via props to show different CTA buttons.", "whenToUse": [ "Multi-page marketing sites that need a top-level navigation with product, resources, and company sections", "SaaS products where the navbar needs to change between logged-in and logged-out states", "Sites with complex navigation hierarchies that benefit from grouped dropdown menus", "Any Next.js 15 App Router project that needs an accessible, mobile-first header with minimal setup" ], "notes": "The mobile menu uses a shadcn/ui Sheet component — it is accessible by default with proper focus trapping and aria attributes. Avoid nesting more than two levels of navigation items, as deep hierarchies are difficult to use on mobile.", "faqs": [ { "question": "Can the navbar show different content for logged-in users?", "answer": "Yes, authentication state is a prop that controls which CTA buttons render." }, { "question": "How deep can the dropdown menus nest?", "answer": "Keep it to two levels — deeper hierarchies are hard to use on the mobile accordion menu." }, { "question": "Is the mobile menu accessible?", "answer": "Yes, it uses the shadcn/ui Sheet component, which handles focus trapping and ARIA attributes by default." } ] } }, "files": [ { "path": "src/registry/blocks/navbar-01/navbar.tsx", "type": "registry:component", "target": "components/navbar-01.tsx" } ] }, { "name": "team-01", "type": "registry:block", "title": "Team 01", "description": "Team section displaying members in cards with profile photos, names, job roles, and social links. Use it on about pages to humanize your brand and help visitors connect with the people behind your product.", "dependencies": [], "registryDependencies": [ "https://shadcnship.com/r/social-icons.json" ], "categories": [ "team" ], "meta": { "image": "/r/previews/team-01.webp", "imageDark": "/r/previews/team-01-dark.webp", "prose": { "about": "Team 01 is a team member grid that displays people cards with a circular profile photo, name, job title, and social media icon links. Built with shadcn/ui Card, Avatar, and Button components, it uses a responsive three-column grid on desktop that collapses to two columns on tablet and one column on mobile. Social links support Twitter, LinkedIn, and GitHub by default. Members are defined as a data array — adding or removing a person requires only a data change, not a JSX edit.", "whenToUse": [ "About pages for startups, agencies, or SaaS companies where humanizing the team supports conversion", "Investor or press pages where team credentials and professional profiles matter", "Products where the founding team's background is a trust signal for the target audience", "Any page where you want to show the people behind the product without a custom design" ], "notes": "Use consistent photo dimensions and professional headshots for all team members. Mixed photo styles (casual vs formal, different backgrounds) make the section look unpolished.", "faqs": [ { "question": "Which social platforms are supported by default?", "answer": "Twitter, LinkedIn, and GitHub — additional platforms can be added by extending the social link data." }, { "question": "How do I add or remove a team member?", "answer": "Edit the members data array — no JSX changes needed." }, { "question": "How many columns does the grid use?", "answer": "Three on desktop, two on tablet, one on mobile." } ] } }, "files": [ { "path": "src/registry/blocks/team-01/team.tsx", "type": "registry:component", "target": "components/team-01.tsx" } ] }, { "name": "social-icons", "type": "registry:component", "title": "Social Icons", "description": "Collection of SVG social media brand icons (GitHub, Google, Twitter/X, LinkedIn, and more) as composable React components. Use them in login forms, footers, navbars, or any UI that references external social platforms.", "dependencies": [], "registryDependencies": [], "categories": [ "social-icons" ], "files": [ { "path": "src/registry/blocks/social-icons/icons.tsx", "type": "registry:component", "target": "components/social-icons.tsx" } ] }, { "name": "login-01", "type": "registry:block", "title": "Login 01", "description": "Split-screen login page with a gradient background on one side and an email/password form with OAuth buttons on the other. Use it as a drop-in authentication page when you need a polished login experience fast.", "dependencies": [ "lucide-react", "zod", "react-hook-form", "@hookform/resolvers" ], "registryDependencies": [ "button", "input", "label", "https://shadcnship.com/r/social-icons.json" ], "categories": [ "auth" ], "meta": { "image": "/r/previews/login-01.webp", "imageDark": "/r/previews/login-01-dark.webp", "prose": { "about": "Login 01 is a split-screen authentication page with a decorative gradient panel on the left and an email/password login form with OAuth provider buttons on the right. Built with shadcn/ui Form, Input, and Button components, it includes client-side validation and handles both credential and OAuth login flows. The form is static — you connect it to your authentication provider (Supabase, NextAuth, or any OAuth service) by wiring the form actions and OAuth redirect handlers.", "whenToUse": [ "Projects that need a polished login page without the setup overhead of a full auth block", "Applications where email/password and social OAuth are both required from day one", "Products where the split-screen layout matches an existing design system or brand aesthetic", "Any Next.js project where you want a production-ready login UI to wire to your own auth logic" ], "notes": "For a fully wired Supabase Auth login page with PKCE callback, OAuth support, and session handling out of the box, use Login 02 (Pro) instead.", "faqs": [ { "question": "Is Login 01 wired to a real authentication provider?", "answer": "No. It's a UI-only login page — you connect the form actions and OAuth redirect handlers to Supabase, NextAuth, or any provider yourself." }, { "question": "What handles the form validation?", "answer": "react-hook-form with zod schema validation, wired through @hookform/resolvers — both client-side, no server round-trip required to validate input shape." }, { "question": "Is there a version that comes pre-wired to Supabase?", "answer": "Yes — Login 02 (Pro) includes a fully wired Supabase Auth flow with PKCE callback and session handling out of the box." } ] } }, "files": [ { "path": "src/registry/blocks/login-01/login.tsx", "type": "registry:component", "target": "components/login-01.tsx" } ] }, { "name": "blog-01", "type": "registry:block", "title": "Blog 01", "description": "Blog section with post cards featuring cover images, category badges, titles, excerpts, and author info. Use it on content sites or product blogs to display articles in a clean, scannable grid layout.", "dependencies": [], "registryDependencies": [ "badge", "card", "avatar" ], "categories": [ "content" ], "meta": { "image": "/r/previews/blog-01.webp", "imageDark": "/r/previews/blog-01-dark.webp", "prose": { "about": "Blog 01 is a blog post grid section that displays article cards with a cover image, category badge, title, excerpt, and author avatar with name and date. Built with shadcn/ui Card, Badge, and Avatar components, it uses a three-column responsive grid that collapses to one column on mobile. The post data is passed as an array of objects — connect it to any CMS, MDX file system, or Supabase query to render real posts.", "whenToUse": [ "Product blogs that want to surface recent articles on the marketing homepage", "Content marketing sections on SaaS landing pages that demonstrate topical expertise", "Documentation sites that feature a 'latest updates' or 'from the blog' section", "Any page where linking to published content builds authority and keeps visitors engaged longer" ], "notes": "Display three posts maximum in this layout for clean grid alignment on desktop. For a full paginated blog index, build a dedicated blog listing page rather than using this block with more items.", "faqs": [ { "question": "Does Blog 01 fetch real posts automatically?", "answer": "No, post data is passed as an array of objects — connect it to a CMS, MDX files, or a Supabase query yourself." }, { "question": "How many posts should I display?", "answer": "Three, for clean grid alignment on desktop. For a full paginated index, build a dedicated blog listing page instead of adding more items here." }, { "question": "Does it support category badges?", "answer": "Yes, each post card includes a category badge field alongside the cover image, title, excerpt, and author avatar." } ] } }, "files": [ { "path": "src/registry/blocks/blog-01/blog.tsx", "type": "registry:component", "target": "components/blog-01.tsx" } ] }, { "name": "register-01", "type": "registry:block", "title": "Register 01", "description": "Centered registration card with full name, email, and password fields, including client-side validation. Use it as a clean sign-up page for any web application that requires user account creation.", "dependencies": [ "lucide-react", "zod", "react-hook-form", "@hookform/resolvers" ], "registryDependencies": [ "button", "input", "card", "form", "https://shadcnship.com/r/social-icons.json" ], "categories": [ "auth" ], "meta": { "image": "/r/previews/register-01.webp", "imageDark": "/r/previews/register-01-dark.webp", "prose": { "about": "Register 01 is a centered registration card with full name, email, and password fields and a confirmation password field, including client-side validation for all inputs. Built with shadcn/ui Form, Input, Label, and Card components using React Hook Form and Zod for validation. The form is UI-only — wire the submit handler to your user creation API, Supabase Auth signup, or NextAuth registration flow. A link to the login page is included at the bottom of the card.", "whenToUse": [ "Web applications that require user account creation with standard email and password credentials", "Projects where you need a clean registration UI to wire to your own backend auth logic", "Products that use Login 01 and need a matching registration page in the same visual style", "Any Next.js project where registration is a required step before accessing the product" ], "notes": "For a fully wired Supabase Auth registration page, pair this with the Supabase server client and the auth callback route from Login 02. The Zod schema is exported separately so you can extend it with additional fields.", "faqs": [ { "question": "Is Register 01 wired to a real signup backend?", "answer": "No, it's UI-only — wire the submit handler to Supabase Auth signup, your own API, or a NextAuth registration flow." }, { "question": "Does it include a matching login page?", "answer": "Yes, pair it with Login 01 for the same visual style, or Login 02 for a fully wired Supabase Auth version." }, { "question": "Can I add extra fields like a company name?", "answer": "Yes, the Zod validation schema is exported separately so you can extend it with additional fields without rewriting the form." } ] } }, "files": [ { "path": "src/registry/blocks/register-01/register.tsx", "type": "registry:component", "target": "components/register-01.tsx" } ] }, { "name": "background-01", "type": "registry:block", "title": "Square Grid Background", "description": "Customizable square grid background component with adjustable line color, grid size, and opacity props. Use it as a decorative backdrop for hero sections, cards, or any area that benefits from a subtle geometric texture.", "files": [ { "path": "src/registry/blocks/background-01/background.tsx", "type": "registry:component", "target": "components/background-01.tsx" } ], "categories": [ "background" ], "meta": { "image": "/r/previews/background-01.webp", "imageDark": "/r/previews/background-01-dark.webp" } }, { "name": "background-02", "type": "registry:block", "title": "Dot Pattern Background", "description": "Customizable dot pattern background with adjustable dot color, size, spacing, and opacity. Use it behind hero sections or feature areas to add visual depth without distracting from your main content.", "files": [ { "path": "src/registry/blocks/background-02/background.tsx", "type": "registry:component", "target": "components/background-02.tsx" } ], "categories": [ "background" ], "meta": { "image": "/r/previews/background-02.webp", "imageDark": "/r/previews/background-02-dark.webp" } }, { "name": "background-03", "type": "registry:block", "title": "Diagonal Stripes Background", "description": "Customizable diagonal stripes background with adjustable line color, width, spacing, and opacity. Use it to add a subtle textile-like pattern to sections, cards, or full-page backgrounds.", "files": [ { "path": "src/registry/blocks/background-03/background.tsx", "type": "registry:component", "target": "components/background-03.tsx" } ], "categories": [ "background" ], "meta": { "image": "/r/previews/background-03.webp", "imageDark": "/r/previews/background-03-dark.webp" } }, { "name": "background-04", "type": "registry:block", "title": "Vertical Lines Background", "description": "Customizable vertical lines background with adjustable line count, width, color, and opacity. Use it behind hero or pricing sections to create a structured, architectural visual backdrop.", "files": [ { "path": "src/registry/blocks/background-04/background.tsx", "type": "registry:component", "target": "components/background-04.tsx" } ], "categories": [ "background" ], "meta": { "image": "/r/previews/background-04.webp", "imageDark": "/r/previews/background-04-dark.webp" } }, { "name": "background-05", "type": "registry:block", "title": "Interactive Grid Background", "description": "Interactive grid background where individual cells highlight on hover with a configurable glow color. Use it behind hero sections or interactive showcases to add a playful, dynamic feel to an otherwise static layout.", "files": [ { "path": "src/registry/blocks/background-05/background.tsx", "type": "registry:component", "target": "components/background-05.tsx" } ], "categories": [ "background" ], "meta": { "image": "/r/previews/background-05.webp", "imageDark": "/r/previews/background-05-dark.webp" } }, { "name": "changelog-01", "type": "registry:block", "title": "Changelog 01", "description": "Timeline-style changelog listing product updates with version numbers, release dates, and descriptions. Use it on product or documentation sites to communicate release history and build trust with power users.", "dependencies": [], "registryDependencies": [ "badge" ], "categories": [ "content" ], "meta": { "image": "/r/previews/changelog-01.webp", "imageDark": "/r/previews/changelog-01-dark.webp", "prose": { "about": "Changelog 01 is a timeline-style product changelog section that lists releases with version numbers, dates, release titles, descriptions, and bullet-point highlights. Each entry is displayed as a card alongside a vertical timeline connector. Built with shadcn/ui Card and Badge components, it accepts an array of release objects and renders them in reverse chronological order. Release type badges (feature, fix, breaking) are configurable per entry.", "whenToUse": [ "Product pages or documentation sites that need a public release history to build transparency with users", "SaaS products where communicating shipping velocity builds trust and justifies subscription pricing", "Developer tools where power users care about version history and breaking change notices", "Open-source projects that want a polished public changelog without a third-party service" ], "notes": "Keep highlight bullet points to three or four items per release. Long release notes belong in a dedicated documentation page — link to it from the changelog entry rather than expanding the card." } }, "files": [ { "path": "src/registry/blocks/changelog-01/changelog.tsx", "type": "registry:component", "target": "components/changelog-01.tsx" } ] }, { "name": "integration-01", "type": "registry:block", "title": "Integration 01", "description": "Dark-themed integration showcase with a curved connection path drawn between tool logos. Use it on landing pages to visually communicate how your product fits into your users' existing toolchain.", "dependencies": [], "registryDependencies": [ "https://shadcnship.com/r/social-icons.json" ], "categories": [ "content" ], "meta": { "image": "/r/previews/integration-01.webp", "imageDark": "/r/previews/integration-01-dark.webp", "prose": { "about": "Integration 01 is a dark-themed integration showcase that displays a curved SVG connection path drawn between your product logo in the center and surrounding tool or partner logos. It visually communicates ecosystem compatibility and how your product sits at the center of a user's workflow. Built with SVG path animations and Tailwind CSS, the connection lines animate on load. Tool logos are configurable as image or inline SVG components.", "whenToUse": [ "Platform or middleware products where sitting between existing tools is the core value proposition", "Developer tools or APIs that integrate with a recognizable ecosystem of services", "Landing pages where showing logos of popular integrations is more persuasive than describing APIs", "Products competing in markets where integration breadth is a buying criterion" ], "notes": "Use official brand SVG logos sourced from the respective brand asset pages. Distorted or low-resolution logos undermine the credibility the section is designed to build.", "faqs": [ { "question": "Are the logos real brand assets?", "answer": "You should supply official SVG logos from each brand's asset page — low-resolution or distorted logos undermine the credibility the section builds." }, { "question": "Does the connection animation require JavaScript?", "answer": "It uses SVG path animations combined with Tailwind CSS, triggered on load." }, { "question": "How many integration logos can it display?", "answer": "Logos are configurable as image or inline SVG components arranged around the center path — keep the count reasonable to avoid visual clutter." } ] } }, "files": [ { "path": "src/registry/blocks/integration-01/integration.tsx", "type": "registry:component", "target": "components/integration-01.tsx" } ] }, { "name": "banner-01", "type": "registry:block", "title": "Banner 01", "description": "Full-width announcement banner with a short message, an arrow link, and a dismiss button. Use it at the top of any page to surface time-sensitive promotions, feature launches, or important product updates.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button" ], "categories": [ "cta" ], "meta": { "image": "/r/previews/banner-01.webp", "imageDark": "/r/previews/banner-01-dark.webp", "prose": { "about": "Banner 01 is a full-width announcement banner designed to appear at the very top of a page, above the navbar. It displays a short message with an inline arrow link and a dismiss button that hides the banner via local state. Built with shadcn/ui and Tailwind CSS, it is fully accessible with proper ARIA labels on the dismiss button. The banner text, link URL, and link label are all configurable via props.", "whenToUse": [ "Time-sensitive promotions such as launch discounts, limited offers, or seasonal sales", "Feature announcements where you want every site visitor to see a specific message for a period of time", "Important product notices like scheduled maintenance windows or policy changes", "Product Hunt launches where surfacing the launch link to all visitors for a 24-hour period drives votes" ], "notes": "Persist the dismissed state in localStorage rather than component state if you want the banner to stay hidden across page navigations. The current implementation resets on page reload.", "faqs": [ { "question": "Does the dismiss state persist across page reloads?", "answer": "No, by default it resets on reload since it uses component state. Persist it in localStorage in the dismiss handler if you want it to stay hidden." }, { "question": "Can I use it without the arrow link?", "answer": "Yes, the link URL and label are props — omit them and the banner renders as a plain message with just the dismiss button." }, { "question": "Where should it sit relative to my navbar?", "answer": "Above it. Banner 01 is designed to sit at the very top of the page, before the navbar." } ] } }, "files": [ { "path": "src/registry/blocks/banner-01/banner.tsx", "type": "registry:component", "target": "components/banner-01.tsx" } ] }, { "name": "waitlist-01", "type": "registry:block", "title": "Waitlist 01", "description": "Waitlist signup section with an email capture form and social proof avatars showing subscriber count. Use it on coming-soon pages to build an audience before your product launches and validate demand early.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "input", "badge" ], "categories": [ "waitlist" ], "meta": { "image": "/r/previews/waitlist-01.webp", "imageDark": "/r/previews/waitlist-01-dark.webp", "isPro": false, "prose": { "about": "Waitlist 01 is a coming-soon waitlist section with an email input form and a social proof strip showing avatar thumbnails and a subscriber count. Built with shadcn/ui Input, Button, and Avatar components, it captures email interest and displays existing subscriber momentum to encourage sign-ups. The form is UI-only — wire the submit handler to your email marketing tool, Supabase table, or any API endpoint.", "whenToUse": [ "Pre-launch landing pages where you want to build an email list before the product is ready", "New feature announcements where early access interest helps prioritize the roadmap", "Products validating demand before investing in full development", "Any page where social proof of existing interest (even a small number) accelerates sign-up decisions" ], "notes": "Update the avatar images and subscriber count as your real waitlist grows. Starting with a non-zero count (even 47 early testers) performs better than showing zero. For a Supabase-connected version that stores emails persistently, use Waitlist 02.", "faqs": [ { "question": "Does the email form send data anywhere by default?", "answer": "No. It's UI-only — wire the submit handler to your email marketing tool, a Supabase table, or any API endpoint." }, { "question": "Should I show a zero subscriber count when launching?", "answer": "No. Starting with a small non-zero count (even a few dozen early testers) performs better as social proof than showing zero." }, { "question": "Is there a version that persists emails to a database?", "answer": "Yes — Waitlist 02 is the Supabase-connected version that stores signups persistently instead of requiring you to wire your own storage." } ] } }, "files": [ { "path": "src/registry/blocks/waitlist-01/waitlist.tsx", "type": "registry:component", "target": "components/waitlist-01.tsx" } ] }, { "name": "waitlist-02", "type": "registry:block", "title": "Supabase Waitlist", "description": "Waitlist section with a Supabase-connected email form that stores submissions directly to your database. Use it when your backend is Supabase and you want a zero-config waitlist with persistent storage out of the box.", "dependencies": [ "lucide-react", "@supabase/ssr" ], "registryDependencies": [ "button", "input", "sonner" ], "categories": [ "waitlist" ], "meta": { "image": "/r/previews/waitlist-02.webp", "imageDark": "/r/previews/waitlist-02-dark.webp", "isPro": true, "badges": [ "supabase" ], "prose": { "about": "Waitlist 02 is a Supabase-connected waitlist section that stores email submissions directly to your database with duplicate prevention and real-time feedback. Built with a Next.js Server Action and the Supabase server client, it validates the email, inserts it into a waitlist table, and returns a success or error state to the form — all without a page reload. It installs with a single npx shadcn command and requires only your Supabase project credentials.", "whenToUse": [ "Pre-launch pages where you need persistent email storage without a third-party email marketing tool", "Projects where Supabase is already the backend and adding a waitlist table is a natural fit", "Products that want to query waitlist data directly from their database without an external service", "Teams that need a waitlist with deduplication logic out of the box rather than handling it manually" ], "notes": "Run the included SQL migration to create the waitlist table before deploying. The Server Action handles duplicate email detection and returns a specific error message when the email is already registered.", "faqs": [ { "question": "Does this store emails automatically?", "answer": "Yes, unlike Waitlist 01 it inserts submissions directly into a Supabase table via a Server Action, with duplicate-email detection built in." }, { "question": "Do I need to set up a database table first?", "answer": "Yes, run the included SQL migration to create the waitlist table before deploying." }, { "question": "What happens if someone submits an email twice?", "answer": "The Server Action detects the duplicate and returns a specific error message instead of inserting a second row." } ] } }, "files": [ { "path": "src/registry/blocks/waitlist-02/waitlist.tsx", "type": "registry:component", "target": "components/waitlist-02.tsx" } ] }, { "name": "feature-06", "type": "registry:block", "title": "Feature 06", "description": "Four-step process section with numbered badges, step titles, descriptions, and an optional screenshot. Use it to explain how your product works, step by step, on landing and onboarding pages.", "dependencies": [ "lucide-react" ], "registryDependencies": [], "categories": [ "feature" ], "meta": { "image": "/r/previews/feature-06.webp", "imageDark": "/r/previews/feature-06-dark.webp", "prose": { "about": "Feature 06 is a numbered step-by-step process section that explains how a product works in four sequential stages. Each step displays a number badge, a step title, and a short description. An optional product screenshot sits alongside the steps to reinforce the explanation visually. Built with shadcn/ui and Tailwind CSS, it uses a responsive two-column grid that collapses gracefully on mobile.", "whenToUse": [ "Products with a clear onboarding flow or setup process that benefits from a numbered walkthrough", "Landing pages that need to answer 'how does it work?' after the hero section", "SaaS tools with a distinct install-configure-use workflow that reduces perceived complexity", "Any page where breaking the product down into steps makes it feel more approachable to new visitors" ], "notes": "Keep each step description to one sentence. The numbered badge draws the eye — let the number do the structural work and keep the copy tight." } }, "files": [ { "path": "src/registry/blocks/feature-06/feature.tsx", "type": "registry:component", "target": "components/feature-06.tsx" } ] }, { "name": "feature-07", "type": "registry:block", "title": "Feature 07", "description": "Full-width video player section with a poster image and an animated play button overlay. Use it on landing pages to embed a product demo or explainer video where showing beats telling.", "dependencies": [ "lucide-react" ], "registryDependencies": [], "categories": [ "feature" ], "meta": { "image": "/r/previews/feature-07.webp", "imageDark": "/r/previews/feature-07-dark.webp", "prose": { "about": "Feature 07 is a full-width video embed section with a poster image and an animated play button overlay. Clicking the play button replaces the static poster with an embedded video player. Built with Tailwind CSS and a lightweight click-to-play pattern, it avoids loading the full video iframe until the user explicitly requests it — keeping page load fast. The poster image, video URL, and aspect ratio are all configurable.", "whenToUse": [ "Products where a 60-second demo video converts better than any written copy", "Landing pages for tools with a visual workflow that is hard to describe in text alone", "SaaS products where a founder walkthrough or product tour is a key part of the sales motion", "Pages where you want video content but can not afford the page-speed cost of an auto-loading embed" ], "notes": "Use a high-quality static poster image (ideally a frame from the video) so the section looks complete even if the user never clicks play. The lazy-load pattern prevents the YouTube or Vimeo iframe from blocking page rendering." } }, "files": [ { "path": "src/registry/blocks/feature-07/feature.tsx", "type": "registry:component", "target": "components/feature-07.tsx" } ] }, { "name": "comparison-01", "type": "registry:block", "title": "Comparison 01", "description": "Product comparison table with images, specification rows, and checkmark/cross value indicators. Use it on product or pricing pages to help users make confident purchase decisions by clearly highlighting key differences.", "dependencies": [ "lucide-react" ], "registryDependencies": [], "categories": [ "pricing" ], "meta": { "image": "/r/previews/comparison-01.webp", "imageDark": "/r/previews/comparison-01-dark.webp", "prose": { "about": "Comparison 01 is a product comparison table that displays two or more items side by side with product images, specification rows, and checkmark or cross indicators for each attribute. Built with shadcn/ui Table and Badge components, it uses a sticky first column on desktop to keep attribute labels visible while scrolling horizontally through product columns. The table data (products, attributes, values) is passed as structured data objects.", "whenToUse": [ "Product or pricing pages where users need to compare specific options before purchasing", "SaaS tools that want to compare themselves to competitors in a structured, credible way", "E-commerce or marketplace pages where side-by-side specification comparison reduces decision friction", "Documentation or feature matrix pages where a visual comparison table is more scannable than prose" ], "notes": "Keep the attribute list to 8–12 rows for readability. More than 12 attributes make the table scroll-heavy on mobile. Group attributes by category and separate groups with a subtle row divider.", "faqs": [ { "question": "How many attributes can the table handle?", "answer": "Keep it to 8–12 rows for readability — more than that gets scroll-heavy on mobile." }, { "question": "Does the first column stay visible while scrolling?", "answer": "Yes, on desktop the first column (attribute labels) is sticky while product columns scroll horizontally." }, { "question": "Can I use it to compare against competitors?", "answer": "Yes, that's a common use — pass competitor names and values as regular columns alongside your own product." } ] } }, "files": [ { "path": "src/registry/blocks/comparison-01/comparison.tsx", "type": "registry:component", "target": "components/comparison-01.tsx" } ] }, { "name": "dashboard-02", "type": "registry:block", "title": "Dashboard 02", "description": "Sales analytics dashboard with revenue KPI cards, interactive bar charts, and a recent orders table. Use it as a starting point for admin panels, analytics views, or any SaaS backend interface.", "dependencies": [ "lucide-react", "recharts" ], "registryDependencies": [ "button", "input", "card", "chart", "dropdown-menu", "avatar", "sidebar" ], "categories": [ "dashboard" ], "meta": { "image": "/r/previews/dashboard-02.webp", "imageDark": "/r/previews/dashboard-02-dark.webp", "isPro": true, "badges": [], "prose": { "about": "Dashboard 02 is a sales analytics dashboard layout with revenue KPI cards at the top, an interactive bar chart in the center, and a recent orders table at the bottom. Built with shadcn/ui Card, Table, and Chart components (wrapping Recharts), it supports both light and dark mode and handles responsive layout with a CSS grid. The KPI values, chart data, and table rows are all configurable via props — connect them to any data source or Supabase query.", "whenToUse": [ "SaaS admin panels that need a revenue or analytics overview as the main dashboard view", "Internal tools where key business metrics and recent activity need to be visible on one screen", "Prototypes and demos where a professional-looking dashboard is needed quickly without custom design", "Starter templates for B2B SaaS products where an analytics view is a core feature requirement" ], "notes": "The chart uses Recharts via the shadcn/ui Chart component wrapper, which provides consistent theming with the rest of your UI. Connect the chart data to a Supabase aggregation query or an API endpoint that returns time-series revenue data.", "faqs": [ { "question": "Does the chart come with real data?", "answer": "No, KPI values, chart data, and table rows are all passed as props — connect them to a Supabase aggregation query or any API endpoint." }, { "question": "What charting library does it use?", "answer": "Recharts, wrapped by the shadcn/ui Chart component for consistent theming with the rest of your UI." }, { "question": "Is this a Pro block wired to Supabase automatically?", "answer": "It's a Pro block for its polish and layout, but the data wiring is left to you — it's a static template, not a connected block." } ] } }, "files": [ { "path": "src/registry/blocks/dashboard-02/dashboard.tsx", "type": "registry:component", "target": "components/dashboard-02/dashboard.tsx" }, { "path": "src/registry/blocks/dashboard-02/components/index.ts", "type": "registry:component", "target": "components/dashboard-02/components/index.ts" }, { "path": "src/registry/blocks/dashboard-02/components/sidebar.tsx", "type": "registry:component", "target": "components/dashboard-02/components/sidebar.tsx" }, { "path": "src/registry/blocks/dashboard-02/components/nav-user.tsx", "type": "registry:component", "target": "components/dashboard-02/components/nav-user.tsx" }, { "path": "src/registry/blocks/dashboard-02/components/team-switcher.tsx", "type": "registry:component", "target": "components/dashboard-02/components/team-switcher.tsx" }, { "path": "src/registry/blocks/dashboard-02/components/stat-cards.tsx", "type": "registry:component", "target": "components/dashboard-02/components/stat-cards.tsx" }, { "path": "src/registry/blocks/dashboard-02/components/analytics-chart.tsx", "type": "registry:component", "target": "components/dashboard-02/components/analytics-chart.tsx" }, { "path": "src/registry/blocks/dashboard-02/components/projects-table.tsx", "type": "registry:component", "target": "components/dashboard-02/components/projects-table.tsx" } ] }, { "name": "logo-02", "type": "registry:block", "title": "Logo 02", "description": "Client logo grid with clickable industry and technology category filters and featured logo cards. Use it on portfolio or case study pages to showcase logos while allowing visitors to filter by what matters to them.", "dependencies": [ "lucide-react" ], "registryDependencies": [], "categories": [ "social-proof" ], "meta": { "image": "/r/previews/logo-02.webp", "imageDark": "/r/previews/logo-02-dark.webp" }, "files": [ { "path": "src/registry/blocks/logo-02/logo.tsx", "type": "registry:component", "target": "components/logo-02.tsx" } ] }, { "name": "login-02", "type": "registry:block", "title": "Supabase Login", "description": "Full-stack split-screen auth page with Supabase email/password login and OAuth provider support. Use it as a complete, ready-to-ship login page when your backend is powered by Supabase Auth.", "dependencies": [ "@supabase/ssr", "@supabase/supabase-js", "lucide-react", "zod", "react-hook-form", "@hookform/resolvers" ], "registryDependencies": [ "button", "input", "label", "https://shadcnship.com/r/social-icons.json" ], "categories": [ "auth" ], "meta": { "image": "/r/previews/login-02.webp", "imageDark": "/r/previews/login-02-dark.webp", "isPro": true, "badges": [ "supabase" ], "prose": { "about": "Login 02 is a full-stack split-screen authentication page pre-connected to Supabase Auth. It includes email/password login with server-side validation, OAuth buttons for GitHub and Google, a PKCE callback route, and session refresh middleware — all wired and ready to ship. Built with shadcn/ui components and the Supabase SSR client, it installs with a single npx shadcn command and requires only your Supabase project URL and publishable key to run. No additional configuration is needed.", "whenToUse": [ "Next.js 15 App Router projects using Supabase as the authentication backend", "SaaS products that need email/password and social OAuth without spending days wiring auth", "Projects where auth is a commodity requirement and developer time is better spent on product features", "Teams that want a reference implementation of Supabase SSR auth patterns they can extend" ], "notes": "Requires NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY environment variables. The PKCE callback route is included in the installed files — add /auth/callback to your Supabase allowed redirect URLs." } }, "files": [ { "path": "src/registry/blocks/login-02/login.tsx", "type": "registry:component", "target": "components/login-02.tsx" }, { "path": "src/lib/supabase/client.ts", "type": "registry:lib", "target": "lib/supabase/client.ts" }, { "path": "src/lib/supabase/server.ts", "type": "registry:lib", "target": "lib/supabase/server.ts" }, { "path": "src/app/auth/callback/route.ts", "type": "registry:page", "target": "app/auth/callback/route.ts" }, { "path": "src/lib/supabase/proxy.ts", "type": "registry:lib", "target": "lib/supabase/proxy.ts" }, { "path": "src/proxy.ts", "type": "registry:file", "target": "~/proxy.ts" } ] }, { "name": "data-table-01", "type": "registry:block", "title": "Supabase Data Table", "description": "Paginated data table with global search and sortable columns. Two modes: pass a data array for client-side rendering, or a Supabase table name for server-side pagination. Supports text, date, badge, tags, and status cell types.", "dependencies": [ "lucide-react", "@tanstack/react-table" ], "registryDependencies": [ "table", "badge", "button", "input", "dropdown-menu" ], "categories": [ "dashboard" ], "meta": { "isPro": true, "badges": [ "supabase" ], "image": "/r/previews/data-table-01.webp", "imageDark": "/r/previews/data-table-01-dark.webp", "prose": { "about": "Data Table 01 is a paginated, sortable, and searchable data table with two rendering modes: client-side (pass a data array) and server-side (pass a Supabase table name for automatic server-side pagination, sorting, and search). Built with TanStack Table and shadcn/ui Table components, it supports text, date, badge, tags, and status cell types configurable per column. In server-side mode, a Next.js Server Action handles all Supabase queries — no API route needed.", "whenToUse": [ "Admin panels and dashboards that need to display and navigate large datasets from a Supabase database", "SaaS back-offices where sorting and searching table data are core user workflows", "Internal tools where a production-ready data table saves days of TanStack Table configuration", "Any Next.js 15 project that needs server-side pagination without writing a custom data-fetching layer" ], "notes": "In server-side mode, pass your Supabase table name and column definitions — the Server Action handles count queries, range pagination, and search filters automatically. For client-side mode, pass the full dataset as a prop and pagination happens in the browser.", "faqs": [ { "question": "Do I need Supabase to use this block?", "answer": "No, it supports a client-side mode where you pass a plain data array. Supabase is only required for the server-side pagination mode." }, { "question": "How does server-side pagination work?", "answer": "Pass your Supabase table name and column definitions — a Next.js Server Action handles count queries, range pagination, and search filters automatically, no API route needed." }, { "question": "What column types does it support?", "answer": "Text, date, badge, tags, and status cell types, configurable per column." } ] } }, "files": [ { "path": "src/registry/blocks/data-table-01/data-table.tsx", "type": "registry:component", "target": "components/data-table-01/data-table.tsx" }, { "path": "src/registry/blocks/data-table-01/data-table-actions.ts", "type": "registry:component", "target": "components/data-table-01/data-table-actions.ts" }, { "path": "src/registry/blocks/data-table-01/lib/utils.ts", "type": "registry:component", "target": "components/data-table-01/lib/utils.ts" }, { "path": "src/registry/blocks/data-table-01/components/client.tsx", "type": "registry:component", "target": "components/data-table-01/components/client.tsx" }, { "path": "src/registry/blocks/data-table-01/components/cell-renderers.tsx", "type": "registry:component", "target": "components/data-table-01/components/cell-renderers.tsx" }, { "path": "src/registry/blocks/data-table-01/components/table.tsx", "type": "registry:component", "target": "components/data-table-01/components/table.tsx" }, { "path": "src/registry/blocks/data-table-01/components/searchbar.tsx", "type": "registry:component", "target": "components/data-table-01/components/searchbar.tsx" }, { "path": "src/registry/blocks/data-table-01/components/pagination.tsx", "type": "registry:component", "target": "components/data-table-01/components/pagination.tsx" }, { "path": "src/registry/blocks/data-table-01/data/demo.ts", "type": "registry:component", "target": "components/data-table-01/data/demo.ts" } ] }, { "name": "feature-09", "type": "registry:block", "title": "Feature 09", "description": "An integrations grid with icon cards in a 3x2 layout and social proof ratings", "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://shadcnship.com/r/social-icons.json" ], "categories": [ "feature" ], "meta": { "image": "/r/previews/feature-09.webp", "imageDark": "/r/previews/feature-09-dark.webp", "prose": { "about": "Feature 09 is an integrations grid that displays partner or tool logos in a 3×2 card layout alongside a social proof rating strip. Each integration card shows a logo, a product name, and a short description. The rating strip communicates aggregate review scores or user counts to reinforce trust. Built with shadcn/ui Card components and Tailwind CSS grid, it renders cleanly at all viewport sizes.", "whenToUse": [ "Products that integrate with popular tools and want to communicate compatibility above the fold", "Platforms or marketplaces where the breadth of integrations is a key buying signal", "SaaS tools that compete on ecosystem fit — showing logos builds trust faster than describing APIs", "Landing pages targeting users of specific tools who need to see their stack is supported" ], "notes": "Use SVG logos at a consistent size for crisp rendering at all display densities. If you have more than 6 integrations, consider a marquee or paginated grid — too many cards dilute the trust signal." } }, "files": [ { "path": "src/registry/blocks/feature-09/feature.tsx", "type": "registry:component", "target": "components/feature-09.tsx" } ] }, { "name": "feature-08", "type": "registry:block", "title": "Feature 08", "description": "A bento-style feature grid with a large featured card and icon-based feature cards", "dependencies": [ "lucide-react" ], "registryDependencies": [ "card" ], "categories": [ "feature" ], "meta": { "image": "/r/previews/feature-08.webp", "imageDark": "/r/previews/feature-08-dark.webp", "prose": { "about": "Feature 08 is a bento-style feature grid with one large featured card on the left and a column of smaller icon-based feature cards on the right. The large card can hold a screenshot, illustration, or rich description; the smaller cards display Lucide icons with short labels. Built with Tailwind CSS grid and shadcn/ui Card components, it creates visual hierarchy within the feature section by giving your most important feature more space than the rest.", "whenToUse": [ "Products with one flagship feature that deserves more visual weight than the others", "Landing pages that want a bento grid aesthetic without a complex multi-card mosaic layout", "Feature sections where the primary capability has a strong screenshot and the secondary features are best as icon cards", "Pages that need variety in section layout to maintain scroll interest" ], "notes": "Choose the large card content carefully — it gets roughly three times more visual attention than any single small card. Reserve it for your most differentiated or compelling feature." } }, "files": [ { "path": "src/registry/blocks/feature-08/feature.tsx", "type": "registry:component", "target": "components/feature-08.tsx" } ] }, { "name": "hero-04", "type": "registry:block", "title": "Hero 04", "description": "A centered hero with multi-image cards below at varying heights", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "badge" ], "categories": [ "hero" ], "meta": { "image": "/r/previews/hero-04.webp", "imageDark": "/r/previews/hero-04-dark.webp" }, "files": [ { "path": "src/registry/blocks/hero-04/hero.tsx", "type": "registry:component", "target": "components/hero-04.tsx" } ] }, { "name": "stat-03", "type": "registry:block", "title": "Stat 03", "description": "A bento-grid stats section mixing images and metric cards", "dependencies": [ "lucide-react" ], "registryDependencies": [], "categories": [ "social-proof" ], "meta": { "image": "/r/previews/stat-03.webp", "imageDark": "/r/previews/stat-03-dark.webp" }, "files": [ { "path": "src/registry/blocks/stat-03/stat.tsx", "type": "registry:component", "target": "components/stat-03.tsx" } ] }, { "name": "navbar-02", "type": "registry:block", "title": "Navbar 02", "description": "A responsive navbar with mega menu, grouped columns, featured panel, and mobile accordion", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "badge", "sheet", "navigation-menu" ], "categories": [ "navbar" ], "meta": { "image": "/r/previews/navbar-02.webp", "imageDark": "/r/previews/navbar-02-dark.webp", "prose": { "about": "Navbar 02 is a responsive navbar with a mega menu: desktop dropdowns expand into grouped columns with a featured panel, while mobile collapses into an accordion menu. Built with shadcn/ui NavigationMenu, Sheet, Badge, and Button components, it suits sites with deep or wide navigation hierarchies that a simple dropdown can't organize cleanly.", "whenToUse": [ "Products with many navigation items that need grouping into columns rather than a single dropdown list", "Marketing sites that want to feature a specific page or promotion inside the mega menu panel", "SaaS products with multiple feature categories or use-case pages to surface in navigation", "Sites where Navbar 01's simple dropdown menu isn't enough to organize the content" ], "notes": "Keep each mega menu column focused on one topic (e.g. Product, Resources, Company) and limit the featured panel to a single highlighted link or promotion — overloading either dilutes the navigation's usefulness.", "faqs": [ { "question": "How is this different from Navbar 01?", "answer": "Navbar 01 uses simple dropdown menus; Navbar 02 organizes items into grouped columns with a featured panel, better suited for sites with more navigation items." }, { "question": "Does the mobile menu use the same mega menu layout?", "answer": "No, mobile collapses into an accordion menu — the mega menu columns are a desktop-only pattern." }, { "question": "What's the featured panel for?", "answer": "A dedicated spot inside the mega menu to highlight one link — a promotion, a flagship feature, or a key resource." } ] } }, "files": [ { "path": "src/registry/blocks/navbar-02/navbar.tsx", "type": "registry:component", "target": "components/navbar-02/navbar.tsx" }, { "path": "src/registry/blocks/navbar-02/components.tsx", "type": "registry:component", "target": "components/navbar-02/components.tsx" }, { "path": "src/registry/blocks/navbar-02/types.ts", "type": "registry:component", "target": "components/navbar-02/types.ts" } ] }, { "name": "cookie-01", "type": "registry:block", "title": "Cookie 01", "description": "A floating cookie consent card with accept button and learn more link", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "card" ], "categories": [ "cookie" ], "meta": { "image": "/r/previews/cookie-01.webp", "imageDark": "/r/previews/cookie-01-dark.webp", "prose": { "about": "Cookie 01 is a floating cookie-consent card fixed to a corner of the viewport, with an accept button and a learn-more link to your privacy policy. Built with shadcn/ui Button and Card components, it renders on top of page content without blocking interaction elsewhere on the page.", "whenToUse": [ "Any site serving EU or UK visitors where GDPR/ePrivacy cookie consent is required", "Products that set analytics or marketing cookies and need a visible opt-in before doing so", "Sites that want a lightweight, non-blocking consent pattern instead of a full-page modal", "Projects where the consent choice needs to persist across page loads" ], "notes": "The component doesn't persist the accept choice by itself — store it in localStorage or a cookie after the accept handler fires, and check that value before rendering the card again.", "faqs": [ { "question": "Does Cookie 01 block cookies until the user accepts?", "answer": "No, it's a UI-only consent prompt — you still need to gate your analytics/marketing scripts behind the accept event yourself for actual compliance." }, { "question": "Does it remember the user's choice after they accept?", "answer": "Not by default. Persist the choice in localStorage or a cookie in the accept handler, and check that value before rendering the card on future page loads." }, { "question": "Can I link it to my own privacy policy page?", "answer": "Yes, the learn-more link URL is a prop — point it at your /legal or /privacy page." } ] } }, "files": [ { "path": "src/registry/blocks/cookie-01/cookie.tsx", "type": "registry:component", "target": "components/cookie-01.tsx" } ] }, { "name": "feature-11", "type": "registry:block", "title": "Feature 11", "description": "A feature section with a split left-aligned header and two large image cards with text below", "dependencies": [ "lucide-react" ], "registryDependencies": [ "badge" ], "categories": [ "feature" ], "meta": { "image": "/r/previews/feature-11.webp", "imageDark": "/r/previews/feature-11-dark.webp" }, "files": [ { "path": "src/registry/blocks/feature-11/feature.tsx", "type": "registry:component", "target": "components/feature-11.tsx" } ] }, { "name": "testimonial-03", "type": "registry:block", "title": "Testimonial 03", "description": "A two-column testimonial carousel with prev/next navigation and portrait image cards", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button" ], "categories": [ "social-proof" ], "meta": { "image": "/r/previews/testimonial-03.webp", "imageDark": "/r/previews/testimonial-03-dark.webp" }, "files": [ { "path": "src/registry/blocks/testimonial-03/testimonial.tsx", "type": "registry:component", "target": "components/testimonial-03.tsx" } ] }, { "name": "feature-12", "type": "registry:block", "title": "Feature 12", "description": "A feature section with a large clickable title list on the left and an image with description on the right that updates on selection", "dependencies": [], "registryDependencies": [], "categories": [ "feature" ], "meta": { "image": "/r/previews/feature-12.webp", "imageDark": "/r/previews/feature-12-dark.webp" }, "files": [ { "path": "src/registry/blocks/feature-12/feature.tsx", "type": "registry:component", "target": "components/feature-12.tsx" } ] }, { "name": "image-compare", "type": "registry:block", "title": "Image Compare", "description": "A before/after image slider — drag the divider to compare both sides in real time", "dependencies": [ "lucide-react" ], "registryDependencies": [], "categories": [ "feature" ], "meta": { "image": "/r/previews/image-compare.webp", "imageDark": "/r/previews/image-compare-dark.webp" }, "files": [ { "path": "src/registry/blocks/image-compare/output-showcase.tsx", "type": "registry:component", "target": "components/image-compare.tsx" } ] }, { "name": "hero-06", "type": "registry:block", "title": "Hero 06", "description": "A full-screen centered hero with background image, announcement badge, and CTA buttons", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "badge" ], "categories": [ "hero" ], "meta": { "image": "/r/previews/hero-06.webp", "imageDark": "/r/previews/hero-06-dark.webp" }, "files": [ { "path": "src/registry/blocks/hero-06/hero.tsx", "type": "registry:component", "target": "components/hero-06.tsx" } ] }, { "name": "cta-05", "type": "registry:block", "title": "CTA 05", "description": "A centered CTA with a fanned stack of rotated photos, badge, contrast title, and pill button", "dependencies": [ "lucide-react" ], "registryDependencies": [ "badge", "button" ], "categories": [ "cta" ], "meta": { "image": "/r/previews/cta-05.webp", "imageDark": "/r/previews/cta-05-dark.webp" }, "files": [ { "path": "src/registry/blocks/cta-05/cta.tsx", "type": "registry:component", "target": "components/cta-05.tsx" } ] }, { "name": "stat-04", "type": "registry:block", "title": "Stat 04", "description": "A stats section with minimal navbar, large headline, and icons orbiting a center avatar", "dependencies": [], "registryDependencies": [ "avatar", "https://shadcnship.com/r/social-icons.json" ], "categories": [ "stat" ], "meta": { "image": "/r/previews/stat-04.webp", "imageDark": "/r/previews/stat-04-dark.webp" }, "files": [ { "path": "src/registry/blocks/stat-04/stat.tsx", "type": "registry:component", "target": "components/stat-04.tsx" } ] }, { "name": "stat-05", "type": "registry:block", "title": "Stat 05", "description": "A split stats section with badge, title, CTA link, and avatars on the left and an asymmetric grid of metric cards on the right", "dependencies": [ "lucide-react" ], "registryDependencies": [ "badge", "avatar" ], "categories": [ "stat" ], "meta": { "image": "/r/previews/stat-05.webp", "imageDark": "/r/previews/stat-05-dark.webp" }, "files": [ { "path": "src/registry/blocks/stat-05/stat.tsx", "type": "registry:component", "target": "components/stat-05.tsx" } ] }, { "name": "stat-06", "type": "registry:block", "title": "Stat 06", "description": "A stats section in a rounded card with intro paragraph, dark hatched metric cards, and an outline pill button", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button" ], "categories": [ "stat" ], "meta": { "image": "/r/previews/stat-06.webp", "imageDark": "/r/previews/stat-06-dark.webp" }, "files": [ { "path": "src/registry/blocks/stat-06/stat.tsx", "type": "registry:component", "target": "components/stat-06.tsx" } ] }, { "name": "feature-13", "type": "registry:block", "title": "Feature 13", "description": "A how-it-works section with a 3-card carousel, progress tab bar, and active step details", "dependencies": [ "lucide-react" ], "registryDependencies": [], "categories": [ "feature" ], "meta": { "image": "/r/previews/feature-13.webp", "imageDark": "/r/previews/feature-13-dark.webp" }, "files": [ { "path": "src/registry/blocks/feature-13/feature.tsx", "type": "registry:component", "target": "components/feature-13.tsx" } ] }, { "name": "feature-14", "type": "registry:block", "title": "Feature 14", "description": "A how-it-works section with centered header and a 2-column grid of image cards", "dependencies": [], "registryDependencies": [], "categories": [ "feature" ], "meta": { "image": "/r/previews/feature-14.webp", "imageDark": "/r/previews/feature-14-dark.webp" }, "files": [ { "path": "src/registry/blocks/feature-14/feature.tsx", "type": "registry:component", "target": "components/feature-14.tsx" } ] }, { "name": "feature-15", "type": "registry:block", "title": "Feature 15", "description": "A centered feature section with badge, phone mockup on a dot pattern background, and highlighted description", "dependencies": [ "lucide-react" ], "registryDependencies": [ "badge", "https://magicui.design/r/iphone.json" ], "categories": [ "feature" ], "meta": { "image": "/r/previews/feature-15.webp", "imageDark": "/r/previews/feature-15-dark.webp" }, "files": [ { "path": "src/registry/blocks/feature-15/feature.tsx", "type": "registry:component", "target": "components/feature-15.tsx" } ] }, { "name": "feature-16", "type": "registry:block", "title": "Feature 16", "description": "A two-column feature section with labels, titles, learn-more links, and visual cards below", "dependencies": [ "lucide-react" ], "registryDependencies": [], "categories": [ "feature" ], "meta": { "image": "/r/previews/feature-16.webp", "imageDark": "/r/previews/feature-16-dark.webp" }, "files": [ { "path": "src/registry/blocks/feature-16/feature.tsx", "type": "registry:component", "target": "components/feature-16.tsx" } ] }, { "name": "feature-17", "type": "registry:block", "title": "Feature 17", "description": "An alternating 2-column feature grid with thin borders, text and illustration cells, and category tags", "dependencies": [ "lucide-react" ], "registryDependencies": [], "categories": [ "feature" ], "meta": { "image": "/r/previews/feature-17.webp", "imageDark": "/r/previews/feature-17-dark.webp" }, "files": [ { "path": "src/registry/blocks/feature-17/feature.tsx", "type": "registry:component", "target": "components/feature-17.tsx" } ] }, { "name": "feature-18", "type": "registry:block", "title": "Feature 18", "description": "A dark case-studies section with gradient title, white cards with category labels and plus buttons, and a view-all link", "dependencies": [ "lucide-react" ], "registryDependencies": [], "categories": [ "feature" ], "meta": { "image": "/r/previews/feature-18.webp", "imageDark": "/r/previews/feature-18-dark.webp" }, "files": [ { "path": "src/registry/blocks/feature-18/feature.tsx", "type": "registry:component", "target": "components/feature-18.tsx" } ] }, { "name": "testimonial-04", "type": "registry:block", "title": "Testimonial 04", "description": "A testimonial gallery with a dominant featured landscape card and three narrow portrait brand cards", "dependencies": [ "lucide-react" ], "registryDependencies": [ "card" ], "categories": [ "social-proof" ], "meta": { "image": "/r/previews/testimonial-04.webp", "imageDark": "/r/previews/testimonial-04-dark.webp" }, "files": [ { "path": "src/registry/blocks/testimonial-04/testimonial.tsx", "type": "registry:component", "target": "components/testimonial-04.tsx" } ] }, { "name": "contact-02", "type": "registry:block", "title": "Contact 02", "description": "A pro contact form with split layout, tour select, image slot, and contact info strip", "dependencies": [ "lucide-react", "react-hook-form", "zod", "sonner" ], "registryDependencies": [ "badge", "button", "form", "input", "select", "textarea", "sonner" ], "categories": [ "contact" ], "meta": { "image": "/r/previews/contact-02.webp", "imageDark": "/r/previews/contact-02-dark.webp" }, "files": [ { "path": "src/registry/blocks/contact-02/contact.tsx", "type": "registry:component", "target": "components/contact-02/contact.tsx" } ] }, { "name": "feature-19", "type": "registry:block", "title": "Feature 19", "description": "An editorial split section with large title, two compared image panels, circular arrow button, and footer bar", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button" ], "categories": [ "feature" ], "meta": { "image": "/r/previews/feature-19.webp", "imageDark": "/r/previews/feature-19-dark.webp" }, "files": [ { "path": "src/registry/blocks/feature-19/feature.tsx", "type": "registry:component", "target": "components/feature-19.tsx" } ] }, { "name": "feature-20", "type": "registry:block", "title": "Feature 20", "description": "A 3-card feature section with decorative UI mockups (form, call, pricing) and split header", "dependencies": [ "lucide-react" ], "registryDependencies": [ "card", "button", "checkbox", "avatar" ], "categories": [ "feature" ], "meta": { "image": "/r/previews/feature-20.webp", "imageDark": "/r/previews/feature-20-dark.webp" }, "files": [ { "path": "src/registry/blocks/feature-20/feature.tsx", "type": "registry:component", "target": "components/feature-20.tsx" } ] } ] }