Copy-paste Next.js blocks distributed via the shadcn CLI — shells for layout, feature blocks for data, and a shared db-client layer.
Layout only — pick one, drop feature blocks into its slots.
dashboard-shell
Layout-only shell built on shadcn Sidebar — collapsible on desktop, sheet drawer on mobile. Slots: sidebar nav, header actions, main content.
npx shadcn add dashboard-shellLive demodashboard-shell-topnav
Same slot contract as the sidebar shell, but with a full-width top bar and shadcn NavigationMenu instead of a sidebar.
npx shadcn add dashboard-shell-topnavLive demoecommerce-shell
Storefront header with logo, NavigationMenu, and cart Sheet trigger. Wraps children in CartProvider. Footer slot optional.
npx shadcn add ecommerce-shellLive demoFull-stack components written against db-client.
stat-card
Self-fetching KPI card. Runs a db-client aggregate (count, sum, avg, min, max) for any resource.
Shown in: Overview demo
npx shadcn add stat-cardLive demosearch-command
Debounced search input → server action → TanStack infinite query → virtualized result list.
Shown in: Overview demo
npx shadcn add search-commandLive demodata-table
Sortable, page-based table backed by db-client. Column render functions and server-side pagination.
Shown in: Top nav demo
npx shadcn add data-tableLive demoactivity-feed
Lightly-polled recent-items list in a Card. Good filler for a dashboard secondary column.
Shown in: Top nav demo
npx shadcn add activity-feedLive demoStorefront components — cart is client-only.
product-grid
Paginated grid of ProductCards backed by db-client. Pulls in resource-products automatically.
Shown in: Ecommerce demo
npx shadcn add product-gridLive demoproduct-card
Widget Pro
Presentational card with image placeholder, price, and Add to cart wired to useCart.
npx shadcn add product-cardLive democart-drawer
Cart icon with badge count + shadcn Sheet panel. Client-only — reads from useCart context.
npx shadcn add cart-drawerLive demoShared libs and hooks every block builds on.
db-client
ORM-agnostic data contract. Mock in-memory fake when DATABASE_URL is unset; Drizzle/Postgres when set.
npx shadcn add db-clientresource-orders
Drizzle schema + registry entry for resource="orders". Required for dashboard demo blocks.
npx shadcn add resource-ordersresource-products
Schema + registry for resource="products". Auto-installed with product-grid.
npx shadcn add resource-productsresource-users
Example users table for generic blocks pointed at resource="users".
npx shadcn add resource-usersquery-keys
Shared TanStack Query key factory used by every full-stack block.
npx shadcn add query-keysuse-debounce-value
Debounces fast-changing values — used by SearchCommand input.
npx shadcn add use-debounce-valueuse-virtual-list
Virtual scroll wrapper with onEndReached — powers SearchCommand infinite scroll.
npx shadcn add use-virtual-listuse-cart
Client cart state via React context + localStorage. Not db-backed by design.
npx shadcn add use-cartEvery full-stack block calls dbClient through a server action — never Drizzle directly. Install db-client, add resource-* items for the tables you need, set DATABASE_URL, and run drizzle-kit push. Leave env unset to use the in-memory mock (what powers the live previews).