# Beste UI > Production-ready shadcn/ui blocks, pages, pieces and components for React, Next.js and Tailwind CSS. Install any of them with the shadcn CLI, or let an AI agent search and install them over MCP. Most of the catalog is free; a one-time Pro license unlocks the rest. Canonical host: https://beste.dev. The short map of this site is https://beste.dev/llms.txt. Every page is also readable as Markdown: add `.md` to any address or send `Accept: text/markdown`. ## What Beste UI is Beste UI is a catalog of production-ready UI built on shadcn/ui and Tailwind CSS. Everything is typed React that installs straight into your project with the shadcn CLI, so what lands in your repository is source you own: no runtime dependency, nothing to upgrade. It is made by [beste.co](https://beste.co), an opinionated block-based site builder, and the same blocks power sites built there. The catalog has four tiers: - **Blocks** (https://beste.dev/blocks): full page sections such as heroes, pricing, features, testimonials and footers. Drop one in and you have a finished section, wired with realistic demo content. 2,236 blocks in 48 categories; 168 are free and 2,068 are Pro. - **Pages** (https://beste.dev/pages): whole screens composed from the blocks. Installing a page installs every block, piece and primitive behind it in one command. 23 pages. - **Pieces** (https://beste.dev/pieces): small, self-contained UI parts such as stat cards, prompt inputs and media rows. They drop into the media slots inside a block or into your own layouts. 1,325 pieces in 46 categories, all free. - **Components** (https://beste.dev/components): styled primitives built on shadcn/ui, with extra variants and tones beyond the defaults: buttons, badges, cards, text effects, chart and inspector controls. 292 components in 41 categories, all free. Every asset has a detail page with a live preview, the install command in both flavors, its props and a README. Blocks live at `/block/{name}`, pages at `/page/{name}`, pieces at `/piece/{name}` and components at `/component/{name}`. ## What an asset looks like - **One file, named exports.** A block is a single `.tsx` file that exports the component (`Hero7`) and its demo props (`hero7Demo`), the exact data behind the preview. Spread the demo to get a working section in one line, then replace it with your own props. - **Props, not slots.** Headings, descriptions, buttons, images and lists are all props with plain types (`ActionButton`, `Avatar`, `Fact`). Arrays default to empty and every part is optional, so a block collapses gracefully when a prop is left out. - **Installs where shadcn puts it.** The CLI writes blocks to `components/beste/block/{name}.tsx`, pieces to `components/beste/piece/{name}.tsx` and components to `components/beste/component/{name}.tsx`, and pulls in the shadcn primitives (button, input, tabs) and Beste components the block imports. - **Theme tokens only.** No literal colors: every surface reads `bg-background`, `text-foreground`, `bg-muted` and friends, so a block matches your theme the moment it lands. - **Demo content is realistic.** Copy, photographs and figures are written for the block's purpose so the preview shows what the section is for, not lorem ipsum. - **README on every page.** Installation, quick start, a props table and behaviour notes derived from the source, rendered on the asset page and available as Markdown. ## Two flavors: Radix and Base UI shadcn/ui is moving its default primitive layer to Base UI. Every Beste asset ships in both flavors: a Base UI variant served from `/r-base/…` (the default) and a Radix variant served from `/r/…`. The markup and design are identical; only the underlying primitive differs. The install command on each asset page lets you switch flavor before you copy it. ## Installation Two paths, same result: copy the install command from any asset page and run it with the shadcn CLI, or connect the MCP server and ask an agent for the UI you want. ### 1. Initialise shadcn/ui ```bash npx shadcn@latest init # Vite projects npx shadcn@latest init -t vite ``` ### 2. Install an asset Each asset is available at a predictable URL in both flavors: ```bash # Base UI (default) npx shadcn@latest add "https://beste.dev/r-base/hero7.json" # Radix npx shadcn@latest add "https://beste.dev/r/hero7.json" ``` Pages, pieces and components follow the same pattern under `/page/r/{name}`, `/piece/r/{name}` and `/component/r/{name}`. Or add the registry once and install by a short name. The namespace currently resolves to the Radix variant only: ```bash npx shadcn@latest registry add @beste-ui npx shadcn@latest add @beste-ui/hero7 ``` ### 3. Pro assets Pro assets require a license. Add your account email and license key as query parameters and the CLI fetches the real source. Signed-in Pro users get this exact command pre-filled on every asset page; the key lives on the account page. ```bash npx shadcn@latest add "https://beste.dev/r-base/hero7.json?email=you@example.com&license_key=YOUR_LICENSE_KEY" ``` Full docs: https://beste.dev/docs/installation and the CLI reference at https://beste.dev/docs/cli. ## Theming Beste assets are styled entirely with shadcn/ui theme tokens, so they inherit your theme. Instead of literal colors, components reference CSS variables such as `--background`, `--foreground`, `--primary` and `--muted` that live in your global stylesheet; change the variables and every block updates with you. Dark mode is the same variables under a `.dark` class, and radius is one token. Some pieces and components expose a `tone` prop (for example `neutral`) that swaps a small set of token classes so the same component can read as quiet or prominent without new CSS. Docs: https://beste.dev/docs/theming. ## MCP server Beste UI ships a hosted MCP server at https://beste.dev/api/mcp over Streamable HTTP, so it drops into any compliant client with a single URL: Claude Code, Cursor, Windsurf, VS Code and others. Searching, previews, metadata, install commands and every free source work with no account. A Pro license is only needed to pull the source of Pro blocks. ### Setup Add the server to your MCP config: ```json { "mcpServers": { "beste-ui": { "url": "https://beste.dev/api/mcp" } } } ``` Claude Code can add it with one command: `npx shadcn@latest mcp init --client claude`. To let the agent pull Pro sources, put your license on the endpoint: `https://beste.dev/api/mcp?email=you@example.com&license_key=YOUR_LICENSE_KEY`. ### Tools | Tool | Arguments | License | What it does | | --- | --- | --- | --- | | search_blocks | query, type?, category?, collection?, limit? | Open | Semantic and keyword search across the whole catalog. Returns ranked matches with name, title, category, Pro status and URL. | | get_block | name, type?, flavor? | Open | Metadata for one asset: description, category, preview URL and the shadcn install command. | | get_block_source | name, type?, flavor? | License for Pro sources | The full .tsx source. Free items return immediately; Pro blocks require a valid license. | | list_categories | none | Open | Every category with its title and description. | | list_collections | none | Open | The studio collections: sets of blocks that share one design language, with a slug to pass to search_blocks or compose_page. | | install_block | name, type?, flavor? | Open | The exact shadcn CLI command to drop an asset into a project. | | compose_page | intent, collection?, limit? | Open | Give it a page intent and it returns an ordered set of blocks that compose a full page. Name a collection and every section comes from that one set. | ### Try asking - Add a pricing section with three tiers and a monthly/yearly toggle. - Find a hero with a product screenshot and a waitlist form. - Compose a landing page for a developer CLI tool. - Swap this testimonials block for a marquee of logos. - Build me a page using blocks from the Sirius collection. ### How it works Every block, piece and component is embedded at build time with a small open model, and queries are embedded the same way on the server, so search matches intent rather than keywords. No third-party AI service is in the path. Pro sources use the exact license check the CLI and the site use. Docs: https://beste.dev/docs/mcp. ### Questions - **Which AI tools does it work with?** Any MCP-capable client, including Claude Code, Cursor, Windsurf and VS Code. It speaks the standard Streamable HTTP transport, so no custom plugin is needed. - **Do I need a license?** No. Searching, previews, metadata, install commands and all free sources work with no license. A Pro license is only required to pull the source of Pro blocks through get_block_source. - **How is it different from shadcn's own MCP?** shadcn's MCP resolves registry items by name. Beste's understands intent: it searches a catalog of thousands of finished sections by meaning, composes whole pages from them, and keeps every section inside one collection when asked. ## Reading this site as Markdown Every page has a Markdown rendition at the same address with a `.md` suffix, or by sending an `Accept: text/markdown` header. The renditions carry `X-Robots-Tag: noindex` so they stay out of search results. The block registry index is at https://beste.dev/r/registry.json (Base UI: https://beste.dev/r-base/registry.json), the changelog feed at https://beste.dev/rss.xml, and the sitemap at https://beste.dev/sitemap.xml. robots.txt allows answer engines to crawl and cite, and declares `ai-train=no`. ## Pricing and Pro Most of Beste UI is free: a large slice of the blocks plus every page, piece and component, and all previews, metadata, search, install commands and the MCP server for every asset. A Pro license unlocks the full source of Pro blocks. It is a one-time purchase, yours forever, including everything added later, for unlimited personal, commercial and client projects with no attribution required. Pro licenses are what keep a small team maintaining a large catalog in two flavors as shadcn, React and Tailwind evolve. ### Plans - **Lifetime**: $159. Pay once, access forever. Covers a single developer. - **Team**: $359. Up to 8 developers; the license owner invites the seats from their account. Both are a single payment, never a subscription. Nothing renews. What a license includes: - Every Pro block, now and later: the whole Pro catalog and every block added after you buy. New ones ship every week. - Every full page, one command: whole pages composed from the blocks. - Pro sources in the CLI and MCP: pull them with the shadcn CLI or let your agent pull them through the MCP server with your license key. - Typed source you own outright: React and Tailwind copied into your repository, no runtime dependency. - Radix and Base UI flavors of every block. Students: write from a school email address and you get a discount. Missing an asset: tell the team what you are building and request a block, piece or component. Plans and checkout: https://beste.dev/pricing. Background: https://beste.dev/docs/pricing. ### License Permission is granted to use, copy, modify and merge the software in personal and commercial projects, with three restrictions: no resale of the components or derivatives as a standalone product or UI kit, no redistribution of the source on other marketplaces or component stores, and no rebranding. Full text: https://beste.dev/license. ### Referral programme Signed-in users get a referral link. You earn 30% commission on every payment a referred new user makes for 12 months after they sign up, renewals included. Referrals are tracked for 30 days after the click, commissions are confirmed 30 days after payment, and payouts go out monthly two months in arrears with a $100 minimum. Details: https://beste.dev/referrals. ## Block categories Each category has its own page with every block in it. Counts are blocks; "free" is how many of them install without a license. The examples are a few block names to give a sense of the range; every block has a detail page at `/block/{name}`. ### Feature - URL: https://beste.dev/blocks/feature - 237 blocks, 31 free - Highlight your product features with stunning layouts. - Examples: Accordion With Live Media (feature1), Icon-Centered Grid Cards (feature107), Split Layout with Checklist Box (feature108), Masonry Gallery Layout (feature109), Tabbed Feature Cards (feature112) ### Hero - URL: https://beste.dev/blocks/hero - 237 blocks, 11 free - Eye-catching hero sections to make a strong first impression. - Examples: Fullscreen Hero with Browser Mockup (hero100), Split Hero with Terminal Card (hero101), Split Hero with Timeline Steps (hero102), Mobile App Hero with Phone Mockup (hero103), IDE Mockup Split Hero (hero104) ### CTA - URL: https://beste.dev/blocks/cta - 103 blocks, 5 free - Conversion-focused call-to-action sections and banners. - Examples: Newsletter CTA with Social Proof (cta10), Founder Quote CTA (cta100), Soft Panel CTA (cta101), Ruled Proof CTA (cta102), Ink Band CTA (cta103) ### FAQ - URL: https://beste.dev/blocks/faq - 92 blocks, 6 free - Interactive question-answer sections that expand on click. Perfect for support pages, knowledge bases, and product documentation. - Examples: Tabbed Categories (faq10), Searchable Accordion (faq11), Grouped Sections (faq12), Side-by-Side Image (faq13), With CTA Card (faq14) ### About - URL: https://beste.dev/blocks/about - 84 blocks, 2 free - Company identity, mission statements, team grids, and trust-building sections. - Examples: Team & Mission (about1), Bento Grid About (about10), Hero Banner with Avatars (about11), Process Steps (about12), Company Profile (about13) ### Coming Soon - URL: https://beste.dev/blocks/coming-soon - 81 blocks, 5 free - Launch countdown pages and pre-launch components. - Examples: Countdown Timer Launch (comingsoon1), Dev Log Feed (comingsoon10), Notification Channel Picker (comingsoon11), Before vs After Comparison (comingsoon12), Launch FAQ Accordion (comingsoon13) ### Pricing - URL: https://beste.dev/blocks/pricing - 81 blocks, 0 free - Pricing tables, plan comparisons, and subscription components. - Examples: Horizontal Tier Cards (pricing10), Usage-Based Slider (pricing11), Enterprise Contact Sales (pricing12), Per-Seat Calculator (pricing13), Lifetime Deal (pricing14) ### Stats - URL: https://beste.dev/blocks/stats - 81 blocks, 2 free - Key metrics, counters, and achievement sections for social proof. - Examples: Right-Aligned Stats Cards (stats1), Scrolling Stats Marquee (stats10), Ring Progress Stats (stats11), Spotlight Stat with Supporting Metrics (stats12), Floating Stats over Image (stats13) ### Post - URL: https://beste.dev/blocks/post - 75 blocks, 0 free - Blog post layouts and article components. - Examples: Article with Triple Sidebar (post10), Center-Aligned Floating TOC (post11), Article with Related Posts (post12), Hero Image Dominant (post13), Centered Essay Pull Quotes (post14) ### Workflow - URL: https://beste.dev/blocks/workflow - 61 blocks, 1 free - No-code automation and workflow builder UI components with live recipe assets. - Examples: Hero with Workflow Recipe (workflow1), Tabbed Use Cases (workflow10), Hero With Workflow Pieces Strip (workflow11), Workflow Canvas Hero (workflow12), Trigger Marketplace (workflow13) ### Legal - URL: https://beste.dev/blocks/legal - 59 blocks, 1 free - Legal and compliance UI components. - Examples: Cookie Consent Banner (legal1), DMCA Takedown Notice (legal10), Compliance Checklist (legal11), NDA Template Card (legal12), Software License Card (legal13) ### Careers - URL: https://beste.dev/blocks/careers - 58 blocks, 2 free - Job listings, career pages, and open positions sections. - Examples: Job Listings List (careers1), Hiring Process Timeline (careers10), Culture & Values (careers11), Career Growth Ladder (careers12), Office Locations Grid (careers13) ### Auth - URL: https://beste.dev/blocks/auth - 54 blocks, 10 free - Sign in, sign up, and verification screens for authentication flows. - Examples: Centered Sign In Card (auth1), Face ID Sign In (auth10), Account Type Selection (auth11), Email Confirmed Success (auth12), Centered Sign Up Card (auth13) ### Navigation - URL: https://beste.dev/blocks/navigation - 54 blocks, 1 free - Navbar components and menus. - Examples: Mega Menu Navbar (navbar19), Centered Logo Split Nav (navbar30), Animated Underline Navbar (navbar31), Search-Focused Navbar (navbar32), Multi-Level Dropdown Nav (navbar33) ### Showcase - URL: https://beste.dev/blocks/showcase - 51 blocks, 2 free - Interactive product showcases with hotspots and detailed views. - Examples: Interactive Hotspot Image (showcase1), Video Demo Thumbnail (showcase10), Features with Stats and Image (showcase12), Bento Code Editor Trio (showcase13), Code Editor With Upload Drawer (showcase14) ### Footer - URL: https://beste.dev/blocks/footer - 50 blocks, 5 free - Footer sections with navigation, social links, and CTAs. - Examples: Split Brand Footer (footer10), App Showcase Footer (footer100), Four Column Footer with Partner Badge (footer101), Mega Footer (footer102), CTA Footer (footer103) ### Blog - URL: https://beste.dev/blocks/blog - 47 blocks, 5 free - Blog list layouts and post grid components. - Examples: Alternating Feature Cards (blog10), Compact Thumbnail List (blog11), Masonry Pinterest Grid (blog12), Sidebar with Categories (blog13), Grid with Newsletter Card (blog14) ### Use Case - URL: https://beste.dev/blocks/use-case - 45 blocks, 8 free - Showcase different use cases and applications of your product. - Examples: Interactive Tab Showcase (usecase1), Split Content Card (usecase10), Platform Tabs Showcase (usecase11), Workflow Stage Tabs (usecase12), Segmented Control Tabs (usecase14) ### Onboarding - URL: https://beste.dev/blocks/onboarding - 44 blocks, 6 free - Onboarding pages and flows. - Examples: Welcome Hero with Step Indicator (onboarding1), Accordion Steps with Expandable Actions (onboarding10), Side Navigation Wizard (onboarding11), Circular Progress with Checklist (onboarding12), Role Persona Selector (onboarding13) ### News - URL: https://beste.dev/blocks/news - 43 blocks, 1 free - Breaking news tickers, headline grids, and live feed sections. Perfect for news sites, dashboards, and content platforms. - Examples: Breaking News Ticker (news1), Video News Feature (news10), Masonry News Grid (news11), World News by Region (news12), Stock Market News (news13) ### Testimonial - URL: https://beste.dev/blocks/testimonial - 40 blocks, 3 free - Customer testimonials and social proof sections. - Examples: Carousel Testimonials (testimonial1), Split Image Testimonial (testimonial11), Video Testimonials (testimonial12), Stats and Quote (testimonial14), Logo Cloud with Quote (testimonial15) ### Error - URL: https://beste.dev/blocks/error - 39 blocks, 8 free - Error pages that give the visitor a way forward: 404, 500, 403, maintenance and expired-link screens with search, suggested destinations, and support links. - Examples: Centered 404 Message (error1), Fullscreen 404 With Background (error10), 404 With Product Recommendations (error11), 404 With Popular Articles (error12), 404 With Site Directory (error13) ### Event - URL: https://beste.dev/blocks/event - 37 blocks, 1 free - Conference, workshop, and event landing page components. - Examples: Event Hero with Social Proof (event10), Event Recap Report (event100), Slot By Slot Day Builder (event101), Open Hours Session Rows (event102), Seasonal Gatherings (event103) ### Ecommerce - URL: https://beste.dev/blocks/ecommerce - 35 blocks, 8 free - Shopping cart, product cards, and checkout components. - Examples: Product Card Grid (ecommerce1), Size Guide Table (ecommerce11), Related Products Grid (ecommerce14), Shipping Info Cards (ecommerce15), Payment Methods Display (ecommerce16) ### Social - URL: https://beste.dev/blocks/social - 35 blocks, 2 free - Social media and community UI components. - Examples: Profile Card with Cover (social1), Messages Inbox (social10), Trending Topics (social11), Stories Carousel (social12), Interactive Poll (social13) ### Changelog - URL: https://beste.dev/blocks/changelog - 34 blocks, 1 free - Release notes, version history, and product update sections. - Examples: Dense Inline Release Log (changelog10), Two-Column Date Changelog (changelog11), Large Version Changelog (changelog12), Accordion Release Changelog (changelog13), Year-Grouped Accordion Changelog (changelog14) ### Booking - URL: https://beste.dev/blocks/booking - 33 blocks, 4 free - Reservation flows, calendar pickers, time slot selectors, and booking confirmation components. - Examples: Date & Time Picker (booking1), Meeting Room Booking (booking10), Price Calendar (booking11), Search Bar Hero (booking12), Live Social Proof Bar (booking13) ### Portfolio - URL: https://beste.dev/blocks/portfolio - 33 blocks, 3 free - Personal portfolio and resume UI components. - Examples: Contact Call-to-Action Footer (portfolio100), Project Showcase Grid (portfolio101), Work Marquee (portfolio102), Bento Gallery (portfolio103), Interactive Work Index (portfolio104) ### DevTools - URL: https://beste.dev/blocks/devtools - 31 blocks, 1 free - Developer tools and API response examples. - Examples: API Endpoint Explorer (devtools1), Cron Job Scheduler (devtools10), Audit Activity Log (devtools11), Rate Limit Dashboard (devtools12), Environment Config Viewer (devtools13) ### Food - URL: https://beste.dev/blocks/food - 29 blocks, 0 free - Restaurant and food service UI components. - Examples: Wine List Menu (food10), Chef (food11), Drinks Menu (food12), Set Menu Pricing Cards (food13), Dietary Filter Menu (food14) ### Gallery - URL: https://beste.dev/blocks/gallery - 29 blocks, 1 free - Photo galleries, masonry grids, lightboxes, and image carousels for visual pages. - Examples: Masonry Caption Gallery (gallery1), Overview Toggle Viewer (gallery10), Full Bleed Strip With Sheet Viewer (gallery11), Exhibition Wall Hang (gallery12), Catalogue Index Plates (gallery13) ### Chat - URL: https://beste.dev/blocks/chat - 28 blocks, 0 free - AI chat interfaces, prompt playgrounds, and conversation UI components. - Examples: Floating Chat Widget with Expandable Window (chat10), Complete AI Chat Interface (chat11), Conversational Thread with Reactions (chat12), AI Reasoning Steps with Collapsible Thinking (chat13), Side-by-Side AI Model Comparison (chat14) ### Travel - URL: https://beste.dev/blocks/travel - 22 blocks, 3 free - Travel and tourism focused UI components. - Examples: Featured Trip Hero (travel1), Destination Comparison (travel12), Trip Itinerary Timeline (travel17), Travel Guides Team (travel18), Tour Type Categories (travel19) ### SaaS - URL: https://beste.dev/blocks/saas - 21 blocks, 3 free - SaaS dashboard and application UI components. - Examples: Billing Split (saas100), Three Tier Pricing (saas101), Big Number Metrics Band (saas102), Onboarding Split (saas103), Plan Comparison Table (saas104) ### Education - URL: https://beste.dev/blocks/education - 19 blocks, 4 free - Educational platforms and learning management components. - Examples: Institutional Quick Facts (education100), Academy Course Cards (education101), Lesson Check Quiz (education102), Learning Roadmap Accordion (education103), Long Guide Chapter Index (education104) ### Agency - URL: https://beste.dev/blocks/agency - 16 blocks, 1 free - Agency and creative studio UI components. - Examples: Case Study Hero (agency10), Studio Manifesto (agency11), Studio Values (agency12), How We Think (agency13), Studio Team (agency14) ### Bento - URL: https://beste.dev/blocks/bento - 16 blocks, 0 free - Bento grid layouts that mix multiple visual assets into a unified showcase. - Examples: Studio Bento Grid (bento1), Visit The Studio Bento (bento10), Product Surface Mosaic (bento11), Evidence Mosaic (bento12), Onboarding Mosaic (bento13) ### Logos - URL: https://beste.dev/blocks/logos - 15 blocks, 2 free - Trusted-by logo clouds, client walls, and partner strips for social proof. - Examples: Logos Split (logos10), Logos With Stat (logos11), Hairline Client Wall (logos12), Ruled Client Roster (logos13), Logo Marquee Panel (logos14) ### Dashboard - URL: https://beste.dev/blocks/dashboard - 14 blocks, 0 free - Application UI for admin panels: sidebars, topbars, KPI rows, data tables, charts, and activity feeds. - Examples: Admin Shell (dashboard1), Support Inbox (dashboard10), Fitness Overview (dashboard11), Service Monitoring (dashboard12), Account Settings (dashboard13) ### Health - URL: https://beste.dev/blocks/health - 13 blocks, 8 free - Health and wellness focused UI components. - Examples: Transformation Gallery (fitness33), Vitals Dashboard (health1), Health Statistics Display (health16), Care Overview Dashboard (health17), Care Programme Cards (health18) ### Reveal - URL: https://beste.dev/blocks/reveal - 13 blocks, 2 free - Before/after comparisons and reveal animations. - Examples: Before/After Image Slider (reveal1), Self Sweeping Compare (reveal10), Diagonal Peel Compare (reveal11), Tile Flip Compare (reveal12), Hold To Compare (reveal13) ### Podcast - URL: https://beste.dev/blocks/podcast - 12 blocks, 1 free - Podcast and audio content UI components. - Examples: Hero with Cover Art and Video Modal (podcast1), Episode Grid with Video Modals (podcast14), Player Card with Waveform Visualization (podcast2), Creator Profile with Shows Grid (podcast38), Episode Detail with Show Notes (podcast4) ### Product - URL: https://beste.dev/blocks/product - 12 blocks, 1 free - Product showcase and introduction sections that present features, details, and value: no cart or checkout. - Examples: Centered Product Showcase (product1), Product Macro Detail Grid (product10), Split Product Highlights Plain (product11), Live Made To Order Configurator (product12), Product Anatomy Callouts (product2) ### Settings - URL: https://beste.dev/blocks/settings - 6 blocks, 1 free - Account settings, billing, and preferences components. - Examples: Subscription Plan Card (settings59), Invoice History Table (settings64), Invoice Detail View (settings65), Workspace Preferences Panel (settings66), Email Preferences With Live Volume (settings67) ### Fitness - URL: https://beste.dev/blocks/fitness - 5 blocks, 2 free - Fitness and gym focused UI components. - Examples: Gym Location Finder (fitness32), Training Program Cards (fitness39), Honest Programme Match (fitness40), Class Schedule Hero (fitness5), Personal Trainer Profile (fitness6) ### Product List - URL: https://beste.dev/blocks/product-list - 5 blocks, 0 free - Filterable, sortable, and paginated product listing sections with sidebar filters for shop category pages. - Examples: Filterable Product Grid (productlist1), Product Grid With Filter Drawer (productlist2), Marketplace Toolbar Product Grid (productlist3), Quick-Shop Product Grid (productlist4), Load More Feed With Category Pills (productlist5) ### Crypto - URL: https://beste.dev/blocks/crypto - 4 blocks, 3 free - Cryptocurrency and Web3 focused UI components. - Examples: Token Price Hero (crypto1), DAO Governance Proposals (crypto24), Airdrop Claim Card (crypto29), Contract Address List (crypto35) ### Terminal - URL: https://beste.dev/blocks/terminal - 3 blocks, 1 free - Terminal-style components with typewriter animations. - Examples: CLI Installation Typewriter (terminal1), Code Snippet with Marketing Split (terminal2), One Command Install (terminal3) ## Tags Cross-category tag pages, each collecting the blocks across the catalog that share one purpose: - [Articles](https://beste.dev/blocks/tag/articles) - [Dashboard](https://beste.dev/blocks/tag/dashboard) - [Header](https://beste.dev/blocks/tag/header) - [Posts](https://beste.dev/blocks/tag/posts) - [Product](https://beste.dev/blocks/tag/product) - [Questionnaire](https://beste.dev/blocks/tag/questionnaire) - [Showcase](https://beste.dev/blocks/tag/showcase) ## Collections Studio collections are sets of blocks that share one design language: type, spacing, motion and button style agree across every section, so a page composed from one collection reads as one piece. Pass a collection slug to the MCP server's search_blocks or compose_page to stay inside it. ### Altair - URL: https://beste.dev/blocks/collection/altair - 160 blocks - Full-height photography that drifts under the page, serif headlines that settle in word by word, soft light and film grain, and gently rounded pills. Calm, fluid pages for practices built on care. ### Auralis - URL: https://beste.dev/blocks/collection/auralis - 265 blocks - Oversized display type on monochrome surfaces, with a monospace parenthetical eyebrow and a pill CTA that carries its own seal. Editorial layouts for studio, agency and portfolio sites. ### Polaris - URL: https://beste.dev/blocks/collection/polaris - 247 blocks - A square accent eyebrow over bold uppercase labels, hairline rules under every section header, and a two-tone seal button. Structured, high-contrast layouts for creative studios. ### Sirius - URL: https://beste.dev/blocks/collection/sirius - 221 blocks - Light-weight display headings on white, a single accent colour, and media tiles that float a live piece of product UI. Calm, spacious pages for a modern SaaS. ### Vega - URL: https://beste.dev/blocks/collection/vega - 140 blocks - Heroes that move: live WebGL and canvas surfaces, photographs that relight and assemble as you scroll, and features that run sideways or reveal word by word. For launches and portfolios that want the first screen to be the thing people remember. ## Pages Complete, ready-to-ship screens composed from the block catalog. Install a page and get every block, piece and primitive behind it in one command. Listing: https://beste.dev/pages. Each page also belongs to a collection, at `/pages/collection/{slug}`. ### Landing - [Type Release Landing](https://beste.dev/page/landing1): A single-page product launch for a typeface: a poster navbar anchored to every section below it, a fact-led hero, a centred manifesto, a ruled index of the work it is set in, three licence tiers, a buyer's FAQ, an inverted newsletter band and a ruled index footer that repeats the same anchors. - [Sourdough Bakery Landing](https://beste.dev/page/landing10): A single page for a neighbourhood sourdough bakery: an announcement bar over a navbar anchored to the sections below it, a half-photo hero, three loaves as alternating rows, four kinds of customer, the three-day rhythm of a loaf drawn as an icon line, four starred reviews from the doorstep, two subscription plans, the questions asked at the counter, a weekly email band, and a centred footer with one statement. - [Print Lab Landing](https://beste.dev/page/landing11): A single page for a fine-art print lab and darkroom: a navbar with two column mega menus anchored to the sections below it, a split hero with a frosted proof card over the portrait, the three steps from file to frame as photo steps, an honest comparison against a high-street print shop, two editions as case studies, six papers in a light masonry with a lightbox, an ink band of counting figures, three short quotes from photographers, a half-photo call for a first free proof, and a columns footer with a paper newsletter. - [Studio One-Page Landing](https://beste.dev/page/landing2): A whole studio on one page: a mega navbar whose panel and links are anchors into the page itself, a cross-fading photo hero, a stats-led studio band, a capabilities accordion with lead times and figures, a two-row quote marquee, an inverted closing panel and a contact footer that repeats the anchors. - [Workshop Campaign Landing](https://beste.dev/page/landing3): A single-page campaign for a two-day workshop: a tab bar navbar whose tabs are the sections below it, a cinematic hero with the date, a four-tab agenda with a photograph per half day, one ticket price with three add-ons, four accounts from past attendees, a booking FAQ and a newsletter footer carrying the same anchors. - [Agency One-Page Landing](https://beste.dev/page/landing4): A whole agency on one page: a floating card navbar anchored to the sections below it, an editorial split hero closing on a client strip, a stats-led studio band, four projects with what each was for, an inverted band of client-reported numbers, an inline contact form and a mega footer repeating the anchors. - [Switching Campaign Landing](https://beste.dev/page/landing5): A single-page switching campaign: an announcement navbar anchored to the sections below it, a hero floating a live saving calculation, an evidence band with the method written out, five objections answered with proof against each, two closing paths on an inverted band, and a footer carrying the same anchors. - [Multi-Site Group Landing](https://beste.dev/page/landing6): A single page aimed at multi-site groups: a capsule navbar anchored to the sections below it, a full-bleed hero floating a live intake figure, three site cards showing what stays local, the daily weekly and monthly cadence written out, an inverted customer quote with a rating, four documents to read before booking, and a minimal footer carrying the same anchors. - [Family Vineyard Landing](https://beste.dev/page/landing7): A single page for a family vineyard that takes visitors: a frosted navbar anchored to the sections below it, a full-bleed parallax hero, four ways to visit as drifting portrait cards, the estate's history told as a slow timeline, a year on the terraces in a scrolling strip of six frames, three tastings and stays with the featured one on a photograph, the questions people ask before driving up, a parallax harvest panel, and a footer standing on a photograph of the valley. - [Pottery Studio Landing](https://beste.dev/page/landing8): A single page for a working ceramics studio: a centred-wordmark navbar anchored to the sections below it, a hero with two portraits drifting at different speeds, the three steps from a taster evening to a membership over a wide photograph, five courses in a hover list that swaps a pinned photo, two long student stories, monthly-or-yearly membership pricing, four kiln days as a dated list, two ways to begin, and a quiet light footer with a back-to-top link. - [Lakeside Guesthouse Landing](https://beste.dev/page/landing9): A single page for a six-room farmhouse on a lake: a navbar whose one mega item shows the rooms with a photograph that swaps on hover, a hero that unveils a wide photograph with three facts under it, a day at the house told as four pinned chapters, the rooms in an uneven photo grid with practical details, the walks from the door with counting figures, three guests rotating in turn, a visit sheet with address and hours, a full-bleed winter-rates band, and a columns footer with a seasonal letter. ### Home - [Care Platform Home](https://beste.dev/page/home1): A full marketing home page for a light editorial SaaS: pill navbar, split hero with a full-bleed image band, an interactive capability selector, outcome metrics, an editorial quote with proof, a closing call to action, and a newsletter footer. - [Design Studio Home](https://beste.dev/page/home2): A monochrome studio home page: a navbar carrying availability and contact details, a split-screen statement hero with a full-height photograph, a ruled project index, an oversized client quote, a booking panel with engagement details, and an oversized wordmark footer. - [Creative Agency Home](https://beste.dev/page/home3): A high-contrast agency home page: masthead navbar with status and location, a hero with twin scrolling image reels, a four-phase process flow, a project showcase grid, a rotating client quote, a statement call to action, and a footer that opens with its own CTA. ### Contact - [Studio Contact Page](https://beste.dev/page/contact1): A contact page for a studio that answers before you write: masthead navbar, a contact panel with the address and reply time, a FAQ with a booking aside, three rated accounts of the first call, and a mega footer. ### Gallery - [Gallery Exhibition Page](https://beste.dev/page/exhibition1): An exhibition page for a working studio: a navbar running the visiting details as a marquee, a framed poster hero, a salon wall hang with a lightbox, an archive ledger of works by year, a visiting FAQ, a framed closing invitation and a footer showing whether the room is open right now. ### Careers - [Studio Careers Page](https://beste.dev/page/jobs1): A careers page in seven sections: a hiring hero with the open roles listed, a culture band with studio photographs, an icon grid of benefits, a roles table with published pay bands, the hiring process step by step, an open-application call to action and a CTA footer. ### Platform - [SaaS Platform Tour Page](https://beste.dev/page/platform1): A product page that shows the software rather than listing it: a media-first hero floating a live appointment card, a three-tab tour of the screens a team lives in, a three-phase rollout timeline, an inverted band of customer quotes, a closing call to action and a newsletter footer. ### Pricing - [SaaS Pricing Page](https://beste.dev/page/pricing1): A light editorial pricing page: pill navbar, three per-seat tiers on a monthly and yearly toggle, a sticky split FAQ answering the billing questions, a closing panel floating a live plan card, and a newsletter footer. ### Security - [Trust and Security Page](https://beste.dev/page/security1): A trust page that answers the review before it is sent: an inverted hero floating a live uptime record, the hosting and retention facts in plain rows, a full security questionnaire with partial answers marked as partial, a public ask-and-answer panel, a booking panel for the engineer who wrote it, and a minimal footer. ### Services - [Studio Services Page](https://beste.dev/page/services1): A services page that prices the work in the fold: a reel hero, four principles beside a studio photograph, a nine-week timeline with an owner on every stage, two engagement plans, a two-column FAQ, a contact panel and a CTA footer. ### About - [Studio Story Page](https://beste.dev/page/story1): A monochrome about page in eight sections: a studio bar navbar, a fact-led statement hero, a studio split with a photograph, a team grid on a soft band, a decade of milestones, an inverted client quote ledger, a two-path closing panel and a footer that lists the studio's addresses. ### Work - [Studio Work Index](https://beste.dev/page/work1): A portfolio index page: a floating pill navbar overlaid on a full-bleed hero whose photographs cross-fade on a timer, a featured project above a project grid, a client engagement grid, a dark contact band, and a big-logotype newsletter footer. ## Pieces 1,325 small widgets, all free. Listing: https://beste.dev/pieces. Each category page lists every piece in it. - [Isometric](https://beste.dev/pieces/isometric): 250 pieces - [Shapes](https://beste.dev/pieces/shapes): 80 pieces - [Editor](https://beste.dev/pieces/editor): 56 pieces - [AI](https://beste.dev/pieces/ai): 52 pieces - [Form](https://beste.dev/pieces/form): 40 pieces - [Chat](https://beste.dev/pieces/chat): 39 pieces - [Browser](https://beste.dev/pieces/browser): 38 pieces - [Card](https://beste.dev/pieces/card): 37 pieces - [Commerce](https://beste.dev/pieces/commerce): 35 pieces - [Dashboard](https://beste.dev/pieces/dashboard): 35 pieces - [Calendar](https://beste.dev/pieces/calendar): 34 pieces - [Input](https://beste.dev/pieces/input): 33 pieces - [Upload](https://beste.dev/pieces/upload): 33 pieces - [Health](https://beste.dev/pieces/health): 31 pieces - [Nav](https://beste.dev/pieces/nav): 31 pieces - [Travel](https://beste.dev/pieces/travel): 31 pieces - [Education](https://beste.dev/pieces/education): 30 pieces - [Legal](https://beste.dev/pieces/legal): 30 pieces - [Media](https://beste.dev/pieces/media): 27 pieces - [Search](https://beste.dev/pieces/search): 25 pieces - [Monitoring](https://beste.dev/pieces/monitoring): 24 pieces - [Notification](https://beste.dev/pieces/notification): 23 pieces - [Social Proof](https://beste.dev/pieces/social-proof): 23 pieces - [Toolbar](https://beste.dev/pieces/toolbar): 22 pieces - [Automation](https://beste.dev/pieces/automation): 21 pieces - [Finance](https://beste.dev/pieces/finance): 21 pieces - [Stats](https://beste.dev/pieces/stats): 19 pieces - [Progress](https://beste.dev/pieces/progress): 18 pieces - [Code](https://beste.dev/pieces/code): 17 pieces - [Keyboard](https://beste.dev/pieces/keyboard): 17 pieces - [Indicator](https://beste.dev/pieces/indicator): 15 pieces - [Terminal](https://beste.dev/pieces/terminal): 15 pieces - [Ticket](https://beste.dev/pieces/ticket): 14 pieces - [Event](https://beste.dev/pieces/event): 13 pieces - [Food](https://beste.dev/pieces/food): 11 pieces - [Tooltip](https://beste.dev/pieces/tooltip): 11 pieces - [Weather](https://beste.dev/pieces/weather): 11 pieces - [Fitness](https://beste.dev/pieces/fitness): 10 pieces - [Logo](https://beste.dev/pieces/logo): 10 pieces - [Realestate](https://beste.dev/pieces/realestate): 10 pieces - [Location](https://beste.dev/pieces/location): 9 pieces - [Money](https://beste.dev/pieces/money): 7 pieces - [Tag](https://beste.dev/pieces/tag): 5 pieces - [Socialproof](https://beste.dev/pieces/socialproof): 5 pieces - [Chart](https://beste.dev/pieces/chart): 4 pieces - [Receipt](https://beste.dev/pieces/receipt): 3 pieces ## Components 292 styled primitives, all free. Listing: https://beste.dev/components. - [Background](https://beste.dev/components/background): 46 components - [Inspector](https://beste.dev/components/inspector): 46 components - [Card](https://beste.dev/components/card): 28 components - [Text](https://beste.dev/components/text): 27 components - [Media](https://beste.dev/components/media): 26 components - [Button](https://beste.dev/components/button): 21 components - [Badge](https://beste.dev/components/badge): 18 components - [Filter](https://beste.dev/components/filter): 14 components - [Dashboard](https://beste.dev/components/dashboard): 8 components - [Chart](https://beste.dev/components/chart): 6 components - [Confirm](https://beste.dev/components/confirm): 3 components - [Field](https://beste.dev/components/field): 3 components - [Nav](https://beste.dev/components/nav): 3 components - [Reaction](https://beste.dev/components/reaction): 3 components - [Code](https://beste.dev/components/code): 2 components - [File](https://beste.dev/components/file): 2 components - [Heatmap](https://beste.dev/components/heatmap): 2 components - [Loupe](https://beste.dev/components/loupe): 2 components - [Keyboard](https://beste.dev/components/keyboard): 2 components - [List](https://beste.dev/components/list): 2 components - [Meter](https://beste.dev/components/meter): 2 components - [Player](https://beste.dev/components/player): 2 components - [Price](https://beste.dev/components/price): 2 components - [Readout](https://beste.dev/components/readout): 2 components - [Steps](https://beste.dev/components/steps): 2 components - [Time](https://beste.dev/components/time): 2 components - [Tree](https://beste.dev/components/tree): 2 components - [Activity](https://beste.dev/components/activity): 1 components - [Carousel](https://beste.dev/components/carousel): 1 components - [Chat](https://beste.dev/components/chat): 1 components - [Dock](https://beste.dev/components/dock): 1 components - [Marquee](https://beste.dev/components/marquee): 1 components - [Composer](https://beste.dev/components/composer): 1 components - [Notice](https://beste.dev/components/notice): 1 components - [Pager](https://beste.dev/components/pager): 1 components - [Scroll](https://beste.dev/components/scroll): 1 components - [Draw](https://beste.dev/components/draw): 1 components - [Snippet](https://beste.dev/components/snippet): 1 components - [Status](https://beste.dev/components/status): 1 components - [Toolbar](https://beste.dev/components/toolbar): 1 components - [Tour](https://beste.dev/components/tour): 1 components ## Free tools 72 browser-based developer tools at https://beste.dev/tools. Every tool runs in the browser, is free and needs no account; nothing is uploaded. ### Tailwind & shadcn - [Tailwind color scale generator](https://beste.dev/tools/tailwind-color-scale): Turn one hex color into a full 50 to 950 Tailwind scale in OKLCH, with the @theme block and the shadcn tokens ready to paste. - [Tailwind class merge playground](https://beste.dev/tools/tailwind-class-merge): See exactly what cn() keeps and what it throws away when a caller's className meets a component's own classes, with the losing classes listed. - [CSS to Tailwind](https://beste.dev/tools/css-to-tailwind): Turn CSS declarations into Tailwind v4 utilities, with the spacing scale worked out and arbitrary values where there is no named class. - [Tailwind v3 config to v4](https://beste.dev/tools/tailwind-config-migrator): Paste a tailwind.config.js and get the v4 CSS it becomes: an @theme block with the right variable namespaces, and a note for every part that needs a decision. - [CVA variant builder](https://beste.dev/tools/cva-builder): Write variants as one line each and get the cva() call, the defaults and the VariantProps type, in the shape shadcn components use. - [shadcn registry.json builder](https://beste.dev/tools/shadcn-registry): Fill in a form and get a valid registry item and registry.json, with the file types inferred and the rules the shadcn CLI enforces checked as you type. - [Tailwind class sorter](https://beste.dev/tools/tailwind-class-sorter): Put a class list back in order: layout first, then the box, then what is inside it, with variants after the base classes they modify. - [Tailwind class diff](https://beste.dev/tools/tailwind-class-diff): Paste two Tailwind class strings and see exactly which classes were added, removed and kept, plus which of the old ones cn() would silently override if the new string were merged on top. ### CSS generators - [CSS gradient generator](https://beste.dev/tools/css-gradient): Build a linear, radial or conic gradient by dragging its stops, then copy it as plain CSS, as a Tailwind arbitrary value, or as a theme variable. - [Box shadow generator](https://beste.dev/tools/box-shadow): Build a layered box-shadow the way real interfaces use it, a tight edge under a wide soft lift, then copy it as CSS, a Tailwind class or a theme token. - [Cubic bezier easing editor](https://beste.dev/tools/cubic-bezier): Drag the curve, watch it race a linear square, and copy the easing as CSS, as a Tailwind arbitrary value or as a theme token. - [Clip path generator](https://beste.dev/tools/clip-path): Cut a real photo into a hexagon, circle, chevron or inset, tune the amount, then copy the clip-path as CSS or as a Tailwind arbitrary value. - [CSS filter playground](https://beste.dev/tools/css-filter): Stack blur, brightness, contrast, saturation and the rest over a real photograph, and copy the result as filter, as backdrop-filter or as a Tailwind class. - [Border radius generator](https://beste.dev/tools/border-radius): Set each corner on its own, read the shorthand as it collapses, and copy it as CSS, a Tailwind arbitrary value or a theme token. - [Glassmorphism generator](https://beste.dev/tools/glassmorphism): Build a frosted panel over a real backdrop: tint, blur, saturation, border and radius, copied as CSS or as a full set of Tailwind utilities. - [Fluid type clamp() calculator](https://beste.dev/tools/clamp-fluid-type): Pick a size at a small viewport and a size at a wide one and get the clamp() that glides between them, as CSS, a Tailwind arbitrary value or an @theme token, read out at five real widths. ### Color - [Color contrast checker](https://beste.dev/tools/contrast-checker): Check a text and background pair against every WCAG 2 threshold at once, with a live sample in both sizes and the ratio as you adjust the colors. - [Color converter](https://beste.dev/tools/color-converter): Paste a color in any notation and read it back in all of them, including OKLCH, Lab and Display P3, each one a click from your clipboard. - [Color mixer](https://beste.dev/tools/color-mixer): Blend two colors across as many steps as you need, in OKLCH or sRGB, and copy the ramp as color-mix() declarations or as plain hex. - [Color palette generator](https://beste.dev/tools/color-palette): Build a palette from one color using the classic hue relationships, each hue shown at five lightness steps and exported as @theme variables. - [Color blindness simulator](https://beste.dev/tools/color-blindness): See a palette the way readers with protanopia, deuteranopia, tritanopia or achromatopsia see it, and get told which pairs collapse into each other. - [OKLCH gradient comparison](https://beste.dev/tools/oklch-gradient): Put the same two colors through both interpolation spaces side by side, see where sRGB loses its chroma, and copy the gradient that keeps it. ### Converters & codegen - [JSON to Zod schema](https://beste.dev/tools/json-to-zod): Paste a JSON payload and get a Zod v4 schema with the inferred TypeScript type, ready for a form resolver or an API route. - [JSON to TypeScript](https://beste.dev/tools/json-to-typescript): Paste a JSON payload and get a TypeScript interface, with optional fields worked out from the records that disagree. - [JSON to Go struct](https://beste.dev/tools/json-to-go): Turn a JSON payload into a Go struct with json tags, gofmt-aligned columns and omitempty where the sample says a field is optional. - [JSON to Python dataclass](https://beste.dev/tools/json-to-python): Generate Python dataclasses from a JSON payload, with nested objects lifted into their own classes and snake_case field names. - [JSON to YAML](https://beste.dev/tools/json-to-yaml): Convert JSON into readable YAML: quotes only where they are needed, block scalars for multi-line strings, and sequences written the way people write them. - [JSON to CSV](https://beste.dev/tools/json-to-csv): Turn an array of objects into a spreadsheet-ready CSV, with nested objects flattened into dotted columns and quoting handled by the rules. - [CSV to JSON](https://beste.dev/tools/csv-to-json): Read a CSV into JSON records, including quoted fields holding separators or line breaks, with numbers and booleans converted or kept as text. - [HTML to JSX](https://beste.dev/tools/html-to-jsx): Paste HTML and get JSX React accepts: class becomes className, inline styles become objects, comments and void elements are handled. - [SVG to JSX component](https://beste.dev/tools/svg-to-jsx): Turn an SVG into a typed React component that forwards props, with hard-coded fills swapped for currentColor so the icon takes the text color. - [CSS to JS object](https://beste.dev/tools/css-to-js): Convert CSS rules or a bare declaration list into JavaScript style objects, camelCased and quoted, ready for a style prop or a CSS-in-JS file. - [curl to fetch](https://beste.dev/tools/curl-to-fetch): Paste a curl command and get the fetch or axios call it stands for, with headers, JSON bodies and basic auth carried across. - [YAML to JSON](https://beste.dev/tools/yaml-to-json): Read a YAML config into JSON: nested maps, sequences, block scalars, inline collections and comments, with the ambiguous parts refused rather than guessed. - [HTML to Markdown](https://beste.dev/tools/html-to-markdown): Turn a page or a fragment into clean Markdown: headings, lists, tables, code blocks and links, with the script tags left behind. - [XML to JSON](https://beste.dev/tools/xml-to-json): Convert XML, an RSS feed or an SVG into JSON, with attributes kept as @name and repeated siblings collected into arrays. - [Query string to JSON](https://beste.dev/tools/query-string): Read a URL's parameters as JSON, or build a query string from an object, with repeated keys handled as the arrays they are. - [JSON diff](https://beste.dev/tools/json-diff): Compare two JSON documents by what they hold rather than how they are written, and get every added, removed and changed path. ### Text - [Case converter](https://beste.dev/tools/case-converter): Turn any text into every case at once, with the words found properly so XMLHttpRequest and user_id both come out right. - [Slug generator](https://beste.dev/tools/slugify): Turn titles into URL slugs in bulk, with accents folded to their Latin letters rather than dropped, and an optional length limit that cuts on a word. - [Word counter](https://beste.dev/tools/word-counter): Count words, characters, sentences and paragraphs as you type, with reading and speaking time, and characters counted the way a person counts them. - [Lorem ipsum generator](https://beste.dev/tools/lorem-ipsum): Generate placeholder paragraphs, sentences, words or list items, with the classic opening line if you want it. - [Line tools](https://beste.dev/tools/line-tools): Sort A to Z, deduplicate, reverse, shuffle, trim or number a list of lines in one pass, then copy the result without opening a spreadsheet. - [Text diff](https://beste.dev/tools/text-diff): Compare two versions of text or code line by line, see exactly what was added and what was removed, and copy the result as a unified diff patch. - [Markdown table generator](https://beste.dev/tools/markdown-table): Paste rows from a spreadsheet, a CSV or any delimited text and get a padded Markdown table back, with the header and alignment row written for you. - [Find and replace](https://beste.dev/tools/find-replace): Replace across a whole block of text, literally or by regular expression, with the capture groups available in the replacement. - [Unicode inspector](https://beste.dev/tools/unicode-inspector): Break text into characters and read each one's code points, byte length and escapes, with the invisible characters called out. - [Markdown table of contents generator](https://beste.dev/tools/markdown-toc): Paste a Markdown document and get a nested table of contents with GitHub-style anchor links, headings inside code fences ignored, and the depth range and list style under your control. ### Encoding & security - [Base64 encoder and decoder](https://beste.dev/tools/base64): Encode text to base64 or decode it back, with UTF-8 handled correctly and a URL-safe variant for tokens and query strings. - [JWT decoder](https://beste.dev/tools/jwt-decoder): Paste a JSON Web Token and read its header, payload and expiry. Decoding only, in your browser, with no secret asked for and nothing sent anywhere. - [UUID generator](https://beste.dev/tools/uuid-generator): Generate UUID v4, time-sortable UUID v7 or Nano IDs in bulk, from your browser's own cryptographic random source. - [Hash generator](https://beste.dev/tools/hash-generator): Hash any text with MD5, SHA-1, SHA-256, SHA-384 and SHA-512 at once, in hex or base64, computed in your browser. - [HMAC generator](https://beste.dev/tools/hmac-generator): Sign a message with a shared secret and read the HMAC in hex or base64, with the Web Crypto code to verify it on the other side. - [Password generator](https://beste.dev/tools/password-generator): Generate passwords from your browser's cryptographic random source, with the character sets you choose and the entropy shown as you change them. - [URL encoder and decoder](https://beste.dev/tools/url-encoder): Percent-encode a value or decode one back, choosing between a single query value and a whole URL, with the parts listed out when the input is a URL. - [HTML entity encoder](https://beste.dev/tools/html-entities): Escape markup so it renders as text, or decode entities back, with an option to escape every non-ASCII character for older pipelines. - [Number base converter](https://beste.dev/tools/number-base-converter): Convert between binary, octal, decimal, hex and base 36 with exact BigInt arithmetic, a two's complement view at 8 to 64 bits, and prefixes like 0x and 0b understood on input. ### Time - [Unix timestamp converter](https://beste.dev/tools/timestamp-converter): Turn a Unix timestamp into ISO, UTC and your own time zone at once, or paste a date and read the epoch back. Seconds and milliseconds both. - [Cron expression editor](https://beste.dev/tools/cron-expression): Read a cron expression in a sentence, see the next six times it fires in your own zone, and start from a preset if the fields are the part you never remember. - [Time zone converter](https://beste.dev/tools/timezone-converter): Pick a time in one zone and read it in all the others at once, with the offsets shown and daylight saving handled by the browser's own database. ### Code & project - [JSON formatter and validator](https://beste.dev/tools/json-formatter): Format, validate, sort or minify JSON. Unquoted keys, trailing commas and comments are accepted, so a pasted console log works as well as a strict file. - [Regex tester](https://beste.dev/tools/regex-tester): Test a JavaScript regular expression against real text, see every match highlighted in place, and read the capture groups out one by one. - [SQL formatter](https://beste.dev/tools/sql-formatter): Turn a one-line query into something reviewable: clauses on their own lines, joins indented under them, keywords in capitals. - [gitignore generator](https://beste.dev/tools/gitignore-generator): Build a .gitignore from the stacks you actually run, with the lines that matter and none of the historical noise. - [Meta tag generator](https://beste.dev/tools/meta-tags): Write the title, description and image once and get the full head, the Next.js metadata object, and a preview of the card people will actually see. - [HTTP status codes](https://beste.dev/tools/http-status-codes): Every HTTP status code worth knowing, from 200 and 301 to 429 and 503, with a line on when to reach for it rather than a paraphrase of the RFC. ### Design reference - [px to rem converter](https://beste.dev/tools/px-rem-converter): Convert between px and rem at any root size, both ways, with the sizes you actually use listed out underneath. - [Type scale generator](https://beste.dev/tools/type-scale): Build a modular type scale from a base size and a ratio, see every step set in the real face, and copy it as Tailwind theme variables. - [Device viewport sizes](https://beste.dev/tools/device-sizes): The viewport of every device you are asked to support, in the CSS pixels a media query actually reads, with the Tailwind breakpoint each one lands in. - [Icon search](https://beste.dev/tools/icon-search): Search Lucide and Hugeicons by name, preview every match at the size you will ship it at, and copy the import and the JSX tag each set expects. - [Aspect ratio calculator](https://beste.dev/tools/aspect-ratio): Turn any width and height into a reduced ratio, a decimal and the Tailwind class, resize to a new width while keeping the shape, and copy the aspect-ratio rule that reserves the space before the image loads. ### AI - [llms.txt generator](https://beste.dev/tools/llms-txt): Write the file that tells a language model what your site is and which pages matter, in the shape the convention asks for. ## Blog Long-form posts at https://beste.dev/blog. Feed: https://beste.dev/blog/feed.xml. - [68 shadcn Pricing Blocks: Tier Grids, Calculators, Comparison Tables, and the Psychology Underneath Them](https://beste.dev/blog/68-shadcn-pricing-blocks) (2026-08-09): 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. - [16 shadcn Questionnaire Blocks: Ask One Question at a Time and Answer With Something Useful](https://beste.dev/blog/16-shadcn-questionnaire-blocks) (2026-08-07): 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. - [33 shadcn Error Page Blocks: 404, 500, 403 and Every Other Way a Request Can End](https://beste.dev/blog/33-shadcn-error-page-blocks) (2026-07-23): 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. - [75 shadcn Coming Soon Blocks: Waitlists, Countdowns, and Launch Pages for Next.js](https://beste.dev/blog/75-shadcn-coming-soon-blocks) (2026-07-22): 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. - [32 shadcn Onboarding Blocks: Welcome Screens, Setup Wizards, and Tailored First-Run Flows for Next.js](https://beste.dev/blog/32-shadcn-onboarding-blocks) (2026-07-22): 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. - [The Anatomy of a shadcn Theme: OKLCH, Design Tokens, and Shipping a Whole System in One Install](https://beste.dev/blog/anatomy-of-a-shadcn-theme) (2026-07-21): 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. - [Meet the Beste UI MCP Server: Semantic Block Search and Page Composition for Your AI Agent](https://beste.dev/blog/beste-ui-mcp-server) (2026-07-12): 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. - [13 shadcn/ui Dashboard Blocks: Admin Panels, Analytics, CRM, and More for Next.js](https://beste.dev/blog/13-shadcn-ui-dashboard-blocks) (2026-07-12): 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/ui Forms: React Hook Form, TanStack Form, and Formisch on One Field System](https://beste.dev/blog/shadcn-forms-react-hook-form-tanstack-formisch) (2026-07-05): 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. - [Base UI Is the New shadcn/ui Default: A Complete Radix Migration Guide](https://beste.dev/blog/base-ui-the-new-default) (2026-07-04): 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. - [A Landing Page in Ten Blocks](https://beste.dev/blog/landing-page-in-ten-blocks) (2026-07-03): 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. - [Container Queries Make Section Components Honest](https://beste.dev/blog/container-queries-for-blocks) (2026-07-03): 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. - [Why the Copy-Paste Component Model Beats the Library](https://beste.dev/blog/copy-paste-vs-library) (2026-07-02): 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. - [Where the use client Boundary Actually Goes](https://beste.dev/blog/use-client-boundary) (2026-07-02): 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. ## Recent releases The full changelog is at https://beste.dev/changelog; the latest releases: - v1.33.0 (2026-10-04): Blocks built on pieces and components - v1.32.0 (2026-10-02): Isometric pieces - v1.31.0 (2026-09-28): Gradient heroes - v1.30.0 (2026-09-28): Gradient backgrounds and interface components - v1.29.0 (2026-09-26): Motion heroes and scroll features - v1.28.0 (2026-09-26): Backgrounds, media and motion components - v1.27.0 (2026-09-10): Pieces drop: settings, consent, catalogue, tools - v1.26.0 (2026-09-08): Blocks where the card is the link - v1.25.0 (2026-09-05): Install commands, changelogs and yearly pricing - v1.24.0 (2026-09-04): Animated pieces - v1.23.0 (2026-09-04): Altair: 108 blocks for a practice that listens - v1.22.0 (2026-09-04): Text: 19 ways a line of type can arrive ## Links - Homepage: https://beste.dev - Site builder: https://beste.co - GitHub: https://github.com/beste-co/beste-ui - X: https://x.com/withbeste - Short map: https://beste.dev/llms.txt