S
Site Building SOPKnowledge Base
Search
← All topics

shadcn-blocks

runnable

Premium pre-built sections and components for shadcn/ui projects from shadcnuikit.com

site-buildingfrontendshadcnblocks
Agent trigger phrases: shadcn-blocks · shadcn guide · blocks guide · shadcn blocks · shadcnuikit · hero section

Trigger: Use when "shadcn blocks", "ShadcnUIKit", "hero section". Heroes, pricing, dashboards, and more.

Premium pre-built sections and components for shadcn/ui projects from shadcnuikit.com. Drop-in TSX components that work with any shadcn/ui setup.

Location

  • Installed: D:\ClaudeDev\00_GITHUB\_working-on\Templates\ui-blocks\shadcnuikit\
  • Backup zip: E:\LOC\Design Templates\shadcn\shadcn-ui-kit-dashboard-main.zip

Categories (23 folders, 950 TSX files)

Page Sections:

  • hero/ — Hero sections with multiple layouts and styles
  • cta/ — Call-to-action sections
  • feature/ — Feature grids, showcases, icon lists
  • pricing/ — Pricing tiers, comparison tables
  • testimonial/ — Customer testimonials, review cards
  • team/ — Team member grids and bios
  • newsletter/ — Email subscription forms
  • footer/ — Page footers
  • navbar/ — Navigation bars
  • stat-card/ — Statistics and metric displays
  • changelog/ — Version history / changelog sections
  • integrations/ — Integration showcase grids

E-Commerce:

  • product-list/ — Product listing grids
  • product-details/ — Single product detail pages
  • product-features/ — Product feature highlights
  • product-category/ — Category browsing layouts
  • product-quickview/ — Quick view modals/overlays

Application UI:

  • dashboard-template/ — Full Next.js admin dashboard app
  • chart/ — Chart components (bar, line, pie, area)
  • table/ — Data tables with sorting, filtering
  • card/ — Card components — info, action, stat
  • form-layout/ — Form layouts — login, register, multi-step
  • signin-form/ — Authentication forms

Registry API

GET https://shadcnuikit.com/r/{component-name}.json
Authorization: Bearer suk-BCWsXXPZqnb3mdRjPnQ8m7XKsnWwSJ5wQH6odMeR27EWpzJCJVLZGkNuFbVNNWbAKJ6Czaz1BooFxpszSKwTx

Dependencies

shadcn/ui (base), tailwindcss, lucide-react, recharts (charts), @radix-ui/* (primitives)

Most-Used Blocks (Quick Pick)

For most local business client sites, start with these:

  1. hero/ — hero1 or hero3 (clean, above-the-fold impact)
  2. pricing/ — pricing1 (3-tier comparison table)
  3. testimonial/ — testimonial2 (review cards)
  4. cta/ — cta1 (conversion-focused call to action)
  5. feature/ — feature3 (icon grid for services)
  6. footer/ — footer1 (standard footer with links)
  7. dashboard-template/ — full admin dashboard (for SaaS projects)