Generic UI libraries have buttons and forms. They don't have a streaming message, a tool-call display, an agent timeline, a context-window meter, or a model picker that shows cost per 1k tokens. That's the gap this pack fills — every component you'd otherwise rebuild from scratch on every AI project, ready to copy-paste into any shadcn/ui codebase.
60 production-ready UI blocks across 7 categories — all built on shadcn/ui conventions (same CSS variables, same import patterns, same copy-paste approach), so they match your theme the moment you drop them in. Each block is a typed React component with sensible defaults.
A full Next.js 15 App Router project sits at the pack root and renders every block in a clean, browsable catalog (think shadcn's own site). Sidebar nav with live search, one route per block, light/dark theme toggle, and a Copy code button that returns the exact .tsx source via an API route. Use it as your local preview tool and as a demo you can show clients.
@/components/ui/*, uses the standard cn() helper, respects the shadcn HSL CSS variables. Drop a block into any shadcn project and it matches the theme instantly.tailwind.config.js. The pack ships styles/globals.css with the @theme block already set up.strict: true.next-themes integration; no surprises.tsc --noEmit clean. next build succeeds with 65 routes pre-rendered. Smoke-tested via next start against a sampling of routes (all 200 OK). Every interactive block has the right "use client" boundary.
Yes — they follow shadcn/ui conventions exactly. Same CSS variables (--primary, --foreground, --muted, etc.), same import patterns (@/components/ui/button, etc.), same copy-paste approach. Drop a block into any shadcn project and it picks up your theme instantly — no re-styling. INSTALL.md has a step-by-step walkthrough including which shadcn primitives each block needs.
Generic UI libraries — including shadcn/ui itself — give you buttons, forms, dropdowns. They don't have a streaming message with token-by-token reveal, an agent timeline showing reasoning steps with durations, a tool-call display with status pills, a citation card with relevance scores, a context-window meter with token-budget visualization, or a model picker that surfaces provider + context size + cost per 1k tokens. These are the AI-app components everyone rebuilds from scratch. This pack fills that gap.
A browsable Next.js 15 showcase app is included at the pack root. Run pnpm install + pnpm dev → localhost:3000 and you get a catalog of all 60 blocks with sidebar nav, live search, theme toggle (light/dark/system), and one route per block. Each block page has a Preview tab and a Code tab — the Code tab serves the raw .tsx source via /api/source so the Copy code button gives you the exact file contents to drop into your project.
Yes — every block. They use the standard shadcn/ui HSL CSS variables (--background, --foreground, --primary, --muted, --border, etc.), which means they respect whatever your theme provider sets. The pack ships a ThemeToggle block + next-themes integration so you can preview light/dark in the showcase, but the blocks themselves don't require next-themes — they just use the CSS variables.
Yes — the license covers unlimited personal AND client / agency use. Use blocks in projects you ship to clients, customize per project, rebrand the look entirely, bill normally. You can remove BuyCoded attribution from your derivative work. The one restriction: you can't resell the block pack itself or repackage it as a competing component library. See LICENSE.txt for the exact terms.
Verified: tsc --noEmit clean, next build succeeds with all 65 routes pre-rendered, runtime smoke test against next start (9/9 sampled routes returned 200). Every interactive block has the right 'use client' boundary so server-rendering works. Components import the right primitives from @/components/ui/*. What's not literally verified: every single one of the 60 blocks visually in every browser at every viewport — we tested the showcase end-to-end, but tweak anything you ship to production after a side-by-side check in your target environment. (No one ships a UI without that.)
The blocks themselves only use utility classes that exist in both v3 and v4 — the difference is the config style. The pack ships a Tailwind v4 CSS-first globals.css. If you're on v3, copy the shadcn CSS variable block out of globals.css into your own tailwind.config.js + globals.css and the blocks will work. Most blocks don't reference any v4-only features.
No — copy what you want, leave the rest. Each block is a single .tsx file with no inter-block dependencies. The full pack is ~1.5 MB on disk (mostly the showcase project structure). You can `cp` any individual block into your app and ignore the rest of the repo.
