# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/blog. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-08-09

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
(blog)

# Insights

Deep, practical writing on shadcn/ui, Tailwind CSS, React Server Components, and shipping production UI faster.

[Aug 9, 202668 shadcn Pricing Blocks: Tier Grids, Calculators, Comparison Tables, and the Psychology Underneath ThemThe 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.27 min readpricingshadcnreact](/blog/68-shadcn-pricing-blocks)[Aug 7, 202616 shadcn Questionnaire Blocks: Ask One Question at a Time and Answer With Something UsefulSixteen 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.11 min readquestionnaireformsshadcn](/blog/16-shadcn-questionnaire-blocks)[Jul 23, 202633 shadcn Error Page Blocks: 404, 500, 403 and Every Other Way a Request Can EndA 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.13 min readerror404shadcn](/blog/33-shadcn-error-page-blocks)[Jul 22, 202675 shadcn Coming Soon Blocks: Waitlists, Countdowns, and Launch Pages for Next.jsThe 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.10 min readcoming-soonwaitlistshadcn](/blog/75-shadcn-coming-soon-blocks)[Jul 22, 202632 shadcn Onboarding Blocks: Welcome Screens, Setup Wizards, and Tailored First-Run Flows for Next.jsThirty-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.12 min readonboardingshadcnreact](/blog/32-shadcn-onboarding-blocks)[Jul 21, 2026The Anatomy of a shadcn Theme: OKLCH, Design Tokens, and Shipping a Whole System in One InstallA 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.15 min readshadcnthemingoklch](/blog/anatomy-of-a-shadcn-theme)[Jul 12, 2026Meet the Beste UI MCP Server: Semantic Block Search and Page Composition for Your AI AgentBeste 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.10 min readmcpshadcnai](/blog/beste-ui-mcp-server)[Jul 12, 202613 shadcn/ui Dashboard Blocks: Admin Panels, Analytics, CRM, and More for Next.jsThirteen 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.10 min readdashboardshadcnreact](/blog/13-shadcn-ui-dashboard-blocks)[Jul 5, 2026shadcn/ui Forms: React Hook Form, TanStack Form, and Formisch on One Field Systemshadcn 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.19 min readshadcnformsreact-hook-form](/blog/shadcn-forms-react-hook-form-tanstack-formisch)[Jul 4, 2026Base UI Is the New shadcn/ui Default: A Complete Radix Migration Guideshadcn/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.15 min readbase-uiradixshadcn](/blog/base-ui-the-new-default)[Jul 3, 2026A Landing Page in Ten BlocksNot 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.9 min readshadcnlanding-pagedesign](/blog/landing-page-in-ten-blocks)[Jul 3, 2026Container Queries Make Section Components HonestViewport 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.7 min readtailwindcsscontainer-queries](/blog/container-queries-for-blocks)[Jul 2, 2026Where the use client Boundary Actually GoesMost 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.10 min readreactserver-componentsnextjs](/blog/use-client-boundary)[Jul 2, 2026Why the Copy-Paste Component Model Beats the Libraryshadcn/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.9 min readshadcnarchitecturereact](/blog/copy-paste-vs-library)

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.