(blog)
Deep, practical writing on shadcn/ui, Tailwind CSS, React Server Components, and shipping production UI faster.
The pricing category is sixty-eight production-ready blocks built on shadcn/ui: tier grids with billing toggles, per-seat and usage calculators, comparison tables, credit packs, service ranges, and enterprise panels. Plus what the research actually says about anchoring, decoys and choice overload, the exact point where pricing UX turns deceptive, and the law that now draws that line.
Sixteen free blocks built on the shadcn questionnaire primitive: support routers, product finders, intake forms, configurators, and shortlists that narrow as you answer. Each installs with one CLI command and turns a long form into a short conversation.
A production error page is a status code plus a way forward. This is the new Error category: thirty-three drop-in blocks built on shadcn/ui for 404, 500, 403, 410, 429, 451, 503 and offline states, with a guide to which status code each one belongs to. Eleven of the best, explained by use case.
The coming-soon category reaches seventy-five production-ready blocks built on shadcn/ui: working waitlist and notify forms, live countdowns, referral mechanics, and full launch pages. Here are sixteen of the best of the newest, across two studio sets. Each installs with one CLI command and exposes every visible value as a typed prop.
Thirty-two production-ready onboarding blocks built on shadcn/ui: welcome heroes, progress steppers, multi-step form wizards, persona and goal selectors, integration and billing setup, and completion screens. Each installs with one CLI command and exposes every visible value as a typed prop.
A shadcn theme is not a color palette, it is a small token graph. Here is the whole anatomy: the two-layer CSS variable system, why the values are OKLCH, the semantic naming that survives a redesign, one variable that drives every corner radius, dark mode without the flash, and how registry:base ships the entire thing behind a single install command.
Beste UI ships a hosted MCP server. Connect it to Claude Code, Cursor, VS Code, or Windsurf with one URL and your AI agent can search 1,500+ shadcn/ui blocks by intent, pull sources with license-aware access, and compose entire pages from a single prompt. No API key, no local process.
Thirteen production-ready dashboard blocks built on shadcn/ui and Recharts: an admin shell, analytics consoles, a sales pipeline, a support inbox, finance, monitoring, and settings screens. Each installs with one CLI command, brings its own data table, charts, and sidebar, and exposes every visible value as a typed prop.
shadcn no longer ships a form abstraction. It ships form markup, a library-agnostic Field primitive set, and lets you bring your own state engine. Here is the shared substrate explained once, then React Hook Form, TanStack Form, and Formisch wired into the exact same components, with the validation, array, and server-boundary details the official docs leave out.
shadcn/ui now ships on Base UI instead of Radix. This is the precise migration map: the asChild to render shift, the Portal-Positioner-Popup model, every renamed part, the call-site props that change, the behavior deltas to watch, and how Beste UI serves both libraries from one source.
Not a listicle. This is the anatomy of a complete SaaS landing page built from ten registry blocks: the narrative arc that orders them, the rhythm rules that make them feel like one page, and every section rendered live as we go.
Viewport breakpoints answer the wrong question: they tell a component how wide the screen is, not how much room it actually has. Here's the full container queries workflow in Tailwind v4, the containment gotchas nobody mentions, and a rule for when md: is still correct.
Most React Server Components advice stops at 'add use client when you need hooks.' That's how entire pages end up client-rendered by accident. Here's the real mental model: two module graphs, one serialization line, and a set of rules for keeping UI sections server-first.
shadcn/ui didn't win by shipping prettier buttons. It won by changing the unit of distribution from a package you depend on to source code you own. Here's the architecture underneath it, and the honest trade-offs.