# beste-ui > A modern React component library built on shadcn/ui. Copy and paste beautiful, accessible UI blocks into your Next.js and React projects. Production-ready and free to start. ## About beste.co Beste is the site builder with strong constraints. No drag and drop, no inline chaos, no code. Just structured blocks designed to work together. - **Website**: [beste.co](https://beste.co) - **Philosophy**: Opinionated, block-based website building - **Approach**: Pre-designed blocks that compose into complete pages ## About beste-ui beste-ui is a curated collection of 1890 production-ready UI components designed for modern web applications. Built on top of shadcn/ui, each component combines the power of: - **React 19** - Latest React features and patterns - **Tailwind CSS 4** - Utility-first styling - **Radix UI** - Accessible component primitives - **Framer Motion** - Smooth animations - **TypeScript** - Full type safety ## Installation Components can be installed using the shadcn CLI. The default `/r-base/` URLs serve Base UI variants (shadcn's current default primitive library); projects still on Radix-based shadcn should use the `/r/` URLs instead. ```bash # Base UI (default) npx shadcn@latest add "https://ui.beste.co/r-base/{component-name}.json" # Radix npx shadcn@latest add "https://ui.beste.co/r/{component-name}.json" ``` For example, to install the hero7 component: ```bash npx shadcn@latest add "https://ui.beste.co/r-base/hero7.json" ``` ## Component Reference ### About #### Team & Mission - **URL**: https://ui.beste.co/block/about1 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about1.json"` (Radix: `/r/about1.json`) - **Description**: Two-column about section with mission statement, company stats, and team member grid. Perfect for company pages and landing sections. #### Values with Team Photo - **URL**: https://ui.beste.co/block/about2 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about2.json"` (Radix: `/r/about2.json`) - **Description**: Full-width team photo with a three-column values grid below. Great for culture pages and brand storytelling. #### Timeline & Milestones - **URL**: https://ui.beste.co/block/about3 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about3.json"` (Radix: `/r/about3.json`) - **Description**: Two-column layout with company stats on the left and a vertical timeline of milestones on the right. Ideal for company history and growth stories. #### Founder Quote & Team - **URL**: https://ui.beste.co/block/about4 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about4.json"` (Radix: `/r/about4.json`) - **Description**: Founder blockquote with avatar, followed by a horizontal team member row. Ideal for leadership pages and company introductions. #### Image & Text Split - **URL**: https://ui.beste.co/block/about5 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about5.json"` (Radix: `/r/about5.json`) - **Description**: Side-by-side layout with a tall image on the left and company story, inline stats, and CTAs on the right. #### Numbered Principles - **URL**: https://ui.beste.co/block/about6 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about6.json"` (Radix: `/r/about6.json`) - **Description**: Asymmetric two-column layout with heading on the left and numbered company principles on the right. Clean and editorial. #### Team Cards with Bios - **URL**: https://ui.beste.co/block/about7 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about7.json"` (Radix: `/r/about7.json`) - **Description**: Three-column grid of team member cards with avatars, roles, and short bios. Great for leadership and team pages. #### Stats with Descriptions - **URL**: https://ui.beste.co/block/about8 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about8.json"` (Radix: `/r/about8.json`) - **Description**: Four-column stats grid with large numbers, titles, and supporting descriptions. Perfect for impact and results sections. #### Mission & Trust Logos - **URL**: https://ui.beste.co/block/about9 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about9.json"` (Radix: `/r/about9.json`) - **Description**: Centered mission statement with a logo strip of trusted partners below. Ideal for building credibility on landing and about pages. #### Bento Grid About - **URL**: https://ui.beste.co/block/about10 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about10.json"` (Radix: `/r/about10.json`) - **Description**: Asymmetric bento grid combining a mission card, team photo, stats, and stacked avatars. A modern, compact about section. #### Hero Banner with Avatars - **URL**: https://ui.beste.co/block/about11 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about11.json"` (Radix: `/r/about11.json`) - **Description**: Wide hero image with gradient overlay text, inline stats, and a stacked avatar strip of team members. #### Process Steps - **URL**: https://ui.beste.co/block/about12 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about12.json"` (Radix: `/r/about12.json`) - **Description**: Four-column numbered process cards showing how your company works. Each step has a large number, title, and description. #### Company Profile - **URL**: https://ui.beste.co/block/about13 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about13.json"` (Radix: `/r/about13.json`) - **Description**: Asymmetric layout with company story and image on the left, and a vertical list of company details on the right. Great for press and investor pages. #### Stats Bar with Story Card - **URL**: https://ui.beste.co/block/about14 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about14.json"` (Radix: `/r/about14.json`) - **Description**: Horizontal stats row at the top followed by a centered story card with heading, body text, and CTAs. #### Letter from the CEO - **URL**: https://ui.beste.co/block/about15 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about15.json"` (Radix: `/r/about15.json`) - **Description**: Editorial-style open letter with paragraphs, a personal signature with avatar, and a call-to-action. Great for founder stories. #### Vision Mission Values - **URL**: https://ui.beste.co/block/about16 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about16.json"` (Radix: `/r/about16.json`) - **Description**: Three-column cards for vision, mission, and values with labeled headers. Clean editorial layout for company positioning. #### Awards & Recognition - **URL**: https://ui.beste.co/block/about17 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about17.json"` (Radix: `/r/about17.json`) - **Description**: Vertical list of awards and accolades with icons, titles, organizations, and years. Ideal for press and credibility sections. #### Office Locations Grid - **URL**: https://ui.beste.co/block/about18 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about18.json"` (Radix: `/r/about18.json`) - **Description**: Four-column grid of office cards with city, country, address, and team size. Ideal for global companies. #### Company At a Glance - **URL**: https://ui.beste.co/block/about19 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about19.json"` (Radix: `/r/about19.json`) - **Description**: Full company overview with panoramic image, story paragraph, key facts list, leadership quote, and stats row. A rich, multi-section layout for company landing pages. #### Team Photo & List - **URL**: https://ui.beste.co/block/about20 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about20.json"` (Radix: `/r/about20.json`) - **Description**: Wide team photo, member list with avatars, team stats grid, and a culture quote. A rich team showcase layout. #### Checklist & Image Split - **URL**: https://ui.beste.co/block/about21 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about21.json"` (Radix: `/r/about21.json`) - **Description**: Two-column layout with checklist highlights on the left, featured image and testimonial quote on the right, plus a full-width stats row. #### Q&A About Us - **URL**: https://ui.beste.co/block/about22 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about22.json"` (Radix: `/r/about22.json`) - **Description**: Asymmetric two-column layout with heading on the left and question-answer pairs on the right. A conversational way to introduce your company. #### Story, Image & Team Row - **URL**: https://ui.beste.co/block/about23 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about23.json"` (Radix: `/r/about23.json`) - **Description**: Two-column layout with company story, stats, and leadership quote on the left, team photo and avatar row on the right. #### Company Heritage & Features - **URL**: https://ui.beste.co/block/about24 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about24.json"` (Radix: `/r/about24.json`) - **Description**: Company story with image, border-accented feature highlights, and stats row. Great for craft, heritage, and product-focused brands. #### Animated Stats & Value Cards - **URL**: https://ui.beste.co/block/about25 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about25.json"` (Radix: `/r/about25.json`) - **Description**: Side-by-side intro with animated number counters on scroll, expanding accent bars, and hover-lift value cards. For impact-driven companies. #### Interactive Pillar Tabs & Image - **URL**: https://ui.beste.co/block/about26 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about26.json"` (Radix: `/r/about26.json`) - **Description**: Centered header with interactive hover tabs that crossfade a side image. Accordion descriptions and sliding accent line. For studios and agencies. #### Split Intro & Animated Timeline - **URL**: https://ui.beste.co/block/about27 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about27.json"` (Radix: `/r/about27.json`) - **Description**: Left intro with image, right vertical timeline with staggered scroll-reveal animation. Numbered steps with sliding content. For startup journeys. #### Marquee Stats & Team Split - **URL**: https://ui.beste.co/block/about28 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about28.json"` (Radix: `/r/about28.json`) - **Description**: Full-width animated marquee stats ticker, split layout with intro text and leadership avatars on the left, full-height image on the right. For SaaS and product companies. #### Wide Banner & Product Cards - **URL**: https://ui.beste.co/block/about29 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about29.json"` (Radix: `/r/about29.json`) - **Description**: Centered header with wide panoramic image, product cards with layered attributes, and sourcing grid. #### Banner Split & Process Steps - **URL**: https://ui.beste.co/block/about30 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about30.json"` (Radix: `/r/about30.json`) - **Description**: Panoramic image with split header showing numbered process steps alongside. For studios and creative agencies. #### Hero Overlay & Suite Cards - **URL**: https://ui.beste.co/block/about31 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about31.json"` (Radix: `/r/about31.json`) - **Description**: Dark-overlay hero image with heading, suite/room cards with temperature and capacity badges. For hotels and hospitality. #### Two Image Layout - **URL**: https://ui.beste.co/block/about32 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about32.json"` (Radix: `/r/about32.json`) - **Description**: Centered heading with description, followed by two images side-by-side. Configurable image ratio (equal, left larger, right larger). Always horizontal on mobile. #### About With Stats Band - **URL**: https://ui.beste.co/block/about33 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about33.json"` (Radix: `/r/about33.json`) - **Description**: About section with an eyebrow label and read-more action on the left, a bold heading with two side-by-side images on the right, and a four-column stats band below. #### About Stats Grid - **URL**: https://ui.beste.co/block/about34 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about34.json"` (Radix: `/r/about34.json`) - **Description**: About section: eyebrow label, two-tone heading, two portraits beside a 2x2 stats grid. #### About Media Reel - **URL**: https://ui.beste.co/block/about35 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about35.json"` (Radix: `/r/about35.json`) - **Description**: About section with eyebrow, stacked stats and a read-more CTA beside a media card with a watch-reel play button. #### Edge Label About - **URL**: https://ui.beste.co/block/about36 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about36.json"` (Radix: `/r/about36.json`) - **Description**: Asymmetric about with a bleeding image, vertical edge label, offset copy and an inline stats row. #### Index Columns About - **URL**: https://ui.beste.co/block/about37 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about37.json"` (Radix: `/r/about37.json`) - **Description**: Three uneven columns: a studio fact index, an oversized statement, and a portrait with signature. #### Overlap Heading About - **URL**: https://ui.beste.co/block/about38 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about38.json"` (Radix: `/r/about38.json`) - **Description**: About where a large heading overlaps a portrait, with a paragraph, CTA and a bottom stat ribbon. #### Numeral About - **URL**: https://ui.beste.co/block/about39 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about39.json"` (Radix: `/r/about39.json`) - **Description**: About anchored by an oversized numeral with a paragraph and a horizontal image strip. #### Interleaved About - **URL**: https://ui.beste.co/block/about40 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about40.json"` (Radix: `/r/about40.json`) - **Description**: Magazine about where copy is interleaved between two staggered offset images. #### Story Rail About - **URL**: https://ui.beste.co/block/about41 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about41.json"` (Radix: `/r/about41.json`) - **Description**: Sticky eyebrow rail beside a story column and an offset captioned image. #### Framed Studio Card - **URL**: https://ui.beste.co/block/about42 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about42.json"` (Radix: `/r/about42.json`) - **Description**: About composed inside a bordered studio card with header marks, portrait and a stats strip. #### Heading Hero About - **URL**: https://ui.beste.co/block/about43 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about43.json"` (Radix: `/r/about43.json`) - **Description**: An oversized about statement hero above three heterogeneous zones: portrait, values and a CTA with stats. #### Marquee Accent About - **URL**: https://ui.beste.co/block/about44 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about44.json"` (Radix: `/r/about44.json`) - **Description**: Layered about over a faint scrolling studio-word marquee with offset images and stats. #### Founder Quote About - **URL**: https://ui.beste.co/block/about45 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about45.json"` (Radix: `/r/about45.json`) - **Description**: A founder-led pull-quote about with a portrait, signature and a facts strip. #### About Strip - **URL**: https://ui.beste.co/block/about46 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about46.json"` (Radix: `/r/about46.json`) - **Description**: An about intro followed by a horizontally scrollable strip mixing image, stat, quote and values cards. #### Split Panel About - **URL**: https://ui.beste.co/block/about47 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about47.json"` (Radix: `/r/about47.json`) - **Description**: A hard light/dark split about panel: dark statement side and a light image-and-facts side. #### Principles About - **URL**: https://ui.beste.co/block/about48 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about48.json"` (Radix: `/r/about48.json`) - **Description**: About pairing a sticky studio statement and image with a numbered list of operating principles. #### Founder Statement About - **URL**: https://ui.beste.co/block/about49 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about49.json"` (Radix: `/r/about49.json`) - **Description**: About built around a dark founder portrait card with a pull-quote, signature, and supporting stats. #### Chaptered About - **URL**: https://ui.beste.co/block/about50 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about50.json"` (Radix: `/r/about50.json`) - **Description**: A pinned studio image beside a numbered, chaptered about story. #### Beliefs About - **URL**: https://ui.beste.co/block/about51 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about51.json"` (Radix: `/r/about51.json`) - **Description**: A statement heading over a belief list punctuated by intermittent inline thumbnails. #### Spec Sheet About - **URL**: https://ui.beste.co/block/about52 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about52.json"` (Radix: `/r/about52.json`) - **Description**: About styled as a technical spec sheet with coordinate marks, a data column and a portrait. #### Pinned Photos About - **URL**: https://ui.beste.co/block/about53 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about53.json"` (Radix: `/r/about53.json`) - **Description**: About with two subtly rotated, captioned studio photos clustered beside the statement. #### Inset Card About - **URL**: https://ui.beste.co/block/about54 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about54.json"` (Radix: `/r/about54.json`) - **Description**: A cinematic wide image with an overlapping inset content card and a stat ribbon. #### Four Parts About - **URL**: https://ui.beste.co/block/about55 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about55.json"` (Radix: `/r/about55.json`) - **Description**: A type-led about with an oversized statement and a four-part Who/What/How/Why grid. #### Showcase Hero With Video - **URL**: https://ui.beste.co/block/about56 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about56.json"` (Radix: `/r/about56.json`) - **Description**: Large heading with dual CTAs and a rating card, a playable video with floating metric cards, and a labelled about block with large paragraphs. #### Values And Mission Statement - **URL**: https://ui.beste.co/block/about57 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about57.json"` (Radix: `/r/about57.json`) - **Description**: Two centered statements on a dark surface, each with an accent heading, an uppercase paragraph, and a small label beneath. #### About Statement Card - **URL**: https://ui.beste.co/block/about58 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about58.json"` (Radix: `/r/about58.json`) - **Description**: About section on a soft muted card with a monospace parenthetical eyebrow, a bold studio wordmark, a large centered statement, a logos strip, and a four-column stats band. #### About Statement With Pillars - **URL**: https://ui.beste.co/block/about59 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about59.json"` (Radix: `/r/about59.json`) - **Description**: Centered parenthetical eyebrow and a large statement heading, followed by a three-up row of icon pillars pairing a circular icon with a title and one-line description. #### Team Member Grid - **URL**: https://ui.beste.co/block/about60 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about60.json"` (Radix: `/r/about60.json`) - **Description**: Team section with an eyebrow, big heading, description and CTA above a responsive grid of people cards (portrait image, name, role). #### Belief Statement Values - **URL**: https://ui.beste.co/block/about61 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about61.json"` (Radix: `/r/about61.json`) - **Description**: Two-column about section with a sticky eyebrow and big heading on the left and a long belief paragraph above a border-separated values list on the right. #### Milestone Timeline - **URL**: https://ui.beste.co/block/about62 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about62.json"` (Radix: `/r/about62.json`) - **Description**: About section with a header and a vertical timeline of milestones on a left rail, each marked by a year, title, and description. #### Studio Story Split - **URL**: https://ui.beste.co/block/about63 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about63.json"` (Radix: `/r/about63.json`) - **Description**: Image-led about split with a tall portrait, an offset statement heading, supporting copy, mono studio facts, and a seal CTA. #### Principles Card Grid - **URL**: https://ui.beste.co/block/about64 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about64.json"` (Radix: `/r/about64.json`) - **Description**: Principles section with a header and a three-column grid of six bordered cards, each pairing a circular icon with a title and description. #### Centered Manifesto - **URL**: https://ui.beste.co/block/about65 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about65.json"` (Radix: `/r/about65.json`) - **Description**: Centered manifesto with a very large multi-line statement heading, muted emphasis phrases, a closing line, and a single CTA. #### About with Stats Grid - **URL**: https://ui.beste.co/block/about66 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about66.json"` (Radix: `/r/about66.json`) - **Description**: Two-column about with a tall image on one side and an eyebrow, heading, description, and 2x2 stats grid on the other. #### Founder Statement - **URL**: https://ui.beste.co/block/about67 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about67.json"` (Radix: `/r/about67.json`) - **Description**: Founder statement with a large blockquote followed by an avatar, name, role, and a monospace signature line. #### Team Portrait Grid - **URL**: https://ui.beste.co/block/about68 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about68.json"` (Radix: `/r/about68.json`) - **Description**: A team section with an eyebrow over a hairline rule, a two-column heading, and a grid of portrait cards each with a name and role. #### Mission Band With Principles - **URL**: https://ui.beste.co/block/about69 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about69.json"` (Radix: `/r/about69.json`) - **Description**: A company story section that runs a two-column heading over a wide photo band, then sets three founding principles as numbered hairline columns underneath. #### Company History Rows - **URL**: https://ui.beste.co/block/about70 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about70.json"` (Radix: `/r/about70.json`) - **Description**: A company story told as hairline rows keyed by a light year figure, set against a media column that sticks while they scroll and stacks an image tile floating a live growth metric over a captioned photograph. #### Founders' Letter - **URL**: https://ui.beste.co/block/about71 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about71.json"` (Radix: `/r/about71.json`) - **Description**: A long-form company letter set in a wide reading column with an accent-ruled pull quote and signed off by avatar bylines, beside a narrower column of captioned portraits. #### Open Company Facts - **URL**: https://ui.beste.co/block/about72 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/about72.json"` (Radix: `/r/about72.json`) - **Description**: An about section on a soft surface that opens on a light statement, then lays out eight company facts as a two-column hairline definition list beside an image tile floating a live locations card. ### Agency #### Case Study Hero - **URL**: https://ui.beste.co/block/agency10 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/agency10.json"` (Radix: `/r/agency10.json`) - **Description**: A case study header with project metadata grid, service tags, and featured image. Perfect for agency portfolio pages showcasing client work details. #### Studio Manifesto - **URL**: https://ui.beste.co/block/agency11 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/agency11.json"` (Radix: `/r/agency11.json`) - **Description**: Oversized editorial manifesto statement with emphasized phrases, principle chips and a founder signature. #### Studio Values - **URL**: https://ui.beste.co/block/agency12 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/agency12.json"` (Radix: `/r/agency12.json`) - **Description**: Studio values laid out with oversized ghost numerals, titles, descriptions and keywords. #### How We Think - **URL**: https://ui.beste.co/block/agency13 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/agency13.json"` (Radix: `/r/agency13.json`) - **Description**: Sticky studio intro with a portrait beside a stack of numbered principles. #### Studio Team - **URL**: https://ui.beste.co/block/agency14 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/agency14.json"` (Radix: `/r/agency14.json`) - **Description**: A studio team grid of member portraits with names and roles. #### Awards List - **URL**: https://ui.beste.co/block/agency15 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/agency15.json"` (Radix: `/r/agency15.json`) - **Description**: Editorial list of studio awards by year with project and recognition details. #### Studio At A Glance - **URL**: https://ui.beste.co/block/agency16 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/agency16.json"` (Radix: `/r/agency16.json`) - **Description**: Studio overview pairing facts, copy and highlight stats with a clean studio image. #### Principles Selector - **URL**: https://ui.beste.co/block/agency17 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/agency17.json"` (Radix: `/r/agency17.json`) - **Description**: Interactive principle list that swaps a detail panel with image as each is hovered. #### Studio Ethos - **URL**: https://ui.beste.co/block/agency18 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/agency18.json"` (Radix: `/r/agency18.json`) - **Description**: A bold ethos statement beside a list of concrete studio commitments. #### Why Polaris - **URL**: https://ui.beste.co/block/agency19 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/agency19.json"` (Radix: `/r/agency19.json`) - **Description**: A two-column comparison contrasting the Polaris way with a typical agency. #### Clients & Outcomes - **URL**: https://ui.beste.co/block/agency20 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/agency20.json"` (Radix: `/r/agency20.json`) - **Description**: Client logo cloud paired with measurable engagement outcomes. #### Capabilities Accordion - **URL**: https://ui.beste.co/block/agency21 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/agency21.json"` (Radix: `/r/agency21.json`) - **Description**: Ruled, expandable capability rows with oversized type, detail copy, and monospace tag chips. #### Horizontal Process Timeline - **URL**: https://ui.beste.co/block/agency22 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/agency22.json"` (Radix: `/r/agency22.json`) - **Description**: A connected left-to-right sequence of numbered project phases with a ruled timeline and step dots. #### Numbered Services List - **URL**: https://ui.beste.co/block/agency23 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/agency23.json"` (Radix: `/r/agency23.json`) - **Description**: A services section with an eyebrow over a hairline rule, a two-column heading, and an editorial list of monospace-numbered service rows split into title and description. #### Studio Brief With Changing Plate - **URL**: https://ui.beste.co/block/agency24 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/agency24.json"` (Radix: `/r/agency24.json`) - **Description**: A four-step studio brief where the tall photograph beside it changes with the question on screen, each with its own caption, and sending the brief swaps the plate for the studio and the form for a ledger of the answers. ### Auth #### Centered Sign In Card - **URL**: https://ui.beste.co/block/auth1 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth1.json"` (Radix: `/r/auth1.json`) - **Description**: Full-height centered sign-in screen with social login providers, email and password fields, a show/hide password toggle, remember-me checkbox, and forgot-password link. Perfect for SaaS apps, dashboards, and member portals. #### Split-Screen Sign Up - **URL**: https://ui.beste.co/block/auth2 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth2.json"` (Radix: `/r/auth2.json`) - **Description**: Two-column registration screen pairing a sign-up form (social providers, name, email, password with show/hide, terms checkbox) with a full-bleed image showcase and customer testimonial. Includes a left/right image position toggle. #### Email Verification Code - **URL**: https://ui.beste.co/block/auth3 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth3.json"` (Radix: `/r/auth3.json`) - **Description**: Full-height OTP verification screen with a centered icon, segmented six-digit code input, a verify button that unlocks once the code is complete, and a live resend countdown timer. Perfect for two-factor auth, magic links, and email confirmation flows. #### Forgot Password Request - **URL**: https://ui.beste.co/block/auth4 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth4.json"` (Radix: `/r/auth4.json`) - **Description**: Full-height password recovery screen with a centered icon, single email field built on the shadcn Field primitives, a send-reset-link button, and a back-to-sign-in link. Perfect for the first step of any password reset flow. #### Set New Password - **URL**: https://ui.beste.co/block/auth5 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth5.json"` (Radix: `/r/auth5.json`) - **Description**: Full-height reset-password screen with new and confirm password fields (each with a show/hide toggle) and a live requirements checklist that ticks off rules as the user types. Perfect for the final step of a password reset or invite flow. #### Magic Link Sign In - **URL**: https://ui.beste.co/block/auth6 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth6.json"` (Radix: `/r/auth6.json`) - **Description**: Full-height passwordless sign-in screen with a single email field, a send-magic-link button, a helper note, and social login providers below a divider. Perfect for passwordless and email-link authentication flows. #### Account Chooser - **URL**: https://ui.beste.co/block/auth7 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth7.json"` (Radix: `/r/auth7.json`) - **Description**: Full-height account picker that lists saved accounts with avatars, names, and emails, plus a use-another-account row. Perfect for multi-account apps, SSO hubs, and returning-user sign-in. #### Welcome Back Unlock - **URL**: https://ui.beste.co/block/auth8 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth8.json"` (Radix: `/r/auth8.json`) - **Description**: Full-height re-authentication screen showing the signed-in user's avatar, name, and email with a single password field, a forgot-password link, and a use-a-different-account option. Perfect for session unlock and returning-user prompts. #### Split-Screen Sign In - **URL**: https://ui.beste.co/block/auth9 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth9.json"` (Radix: `/r/auth9.json`) - **Description**: Two-column sign-in screen pairing a full sign-in form (social providers, email, password with show/hide, remember me) with a brand panel that lists product highlights. Includes a left/right panel position toggle. #### Face ID Sign In - **URL**: https://ui.beste.co/block/auth10 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth10.json"` (Radix: `/r/auth10.json`) - **Description**: Full-height biometric sign-in with an animated face-scan viewfinder that runs through idle, scanning, and recognized states, plus a continue action and a password fallback. Perfect for Face ID and biometric authentication. #### Account Type Selection - **URL**: https://ui.beste.co/block/auth11 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth11.json"` (Radix: `/r/auth11.json`) - **Description**: Full-height onboarding step where the user picks an account type from selectable radio cards with icons and descriptions, then continues. Perfect for tailoring sign-up flows by persona or plan. #### Email Confirmed Success - **URL**: https://ui.beste.co/block/auth12 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth12.json"` (Radix: `/r/auth12.json`) - **Description**: Full-height success screen with a large confirmation check, a heading and message, a primary continue button, and a support link. Perfect for the final step after email verification or account activation. #### Centered Sign Up Card - **URL**: https://ui.beste.co/block/auth13 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth13.json"` (Radix: `/r/auth13.json`) - **Description**: Full-height centered registration card with social providers, name, email, and password fields (with show/hide), a terms checkbox, and a sign-in link. Perfect for SaaS sign-up pages that don't need a split layout. #### Enterprise SSO Sign In - **URL**: https://ui.beste.co/block/auth14 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth14.json"` (Radix: `/r/auth14.json`) - **Description**: Full-height single sign-on screen with a work-email field, a continue-with-SSO button, and Google and Microsoft providers below a divider. Perfect for B2B and enterprise apps that authenticate via identity providers. #### Phone Number Sign In - **URL**: https://ui.beste.co/block/auth15 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth15.json"` (Radix: `/r/auth15.json`) - **Description**: Full-height phone-based sign-in with a country-code select paired to a phone number input, a send-code button, and an email fallback link. Perfect for SMS one-time-code authentication flows. #### Team Invitation Accept - **URL**: https://ui.beste.co/block/auth16 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth16.json"` (Radix: `/r/auth16.json`) - **Description**: Full-height invitation acceptance screen showing the inviter's avatar and team name, a pre-filled disabled email, and name and password fields to set up the account. Perfect for team onboarding and invite-link flows. #### Signed Out Confirmation - **URL**: https://ui.beste.co/block/auth17 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth17.json"` (Radix: `/r/auth17.json`) - **Description**: Full-height signed-out screen with a centered icon, a heading and message, a sign-back-in button, and a return-home link. Perfect for logout confirmations and expired-session pages. #### New Sign-In Security Alert - **URL**: https://ui.beste.co/block/auth18 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth18.json"` (Radix: `/r/auth18.json`) - **Description**: Full-height security notification screen listing the device, location, and time of a new sign-in, with confirm-it-was-me and secure-my-account actions. Perfect for suspicious-login alerts and account safety prompts. #### OAuth Authorize App - **URL**: https://ui.beste.co/block/auth19 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth19.json"` (Radix: `/r/auth19.json`) - **Description**: Full-height OAuth consent screen showing the requesting app, the permissions it needs as a scope list, and authorize and cancel actions. Perfect for third-party app authorization and developer platform connect flows. #### Check Your Inbox - **URL**: https://ui.beste.co/block/auth20 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth20.json"` (Radix: `/r/auth20.json`) - **Description**: Full-height confirmation screen shown after a magic link is sent, with a mail icon, the destination email, an open-email button, a live resend countdown, and a change-email link. Perfect for passwordless and email-link flows. #### Passkey Sign In - **URL**: https://ui.beste.co/block/auth21 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth21.json"` (Radix: `/r/auth21.json`) - **Description**: Full-height passwordless sign-in screen with a fingerprint icon, a continue-with-passkey button, and a password fallback below a divider. Perfect for WebAuthn and biometric authentication flows. #### Recovery Codes - **URL**: https://ui.beste.co/block/auth22 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth22.json"` (Radix: `/r/auth22.json`) - **Description**: Full-height two-factor backup screen that displays single-use recovery codes in a grid with copy and download actions, a warning callout, and a confirmation checkbox that gates the continue button. Perfect for 2FA setup and account recovery. #### Account Locked - **URL**: https://ui.beste.co/block/auth23 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth23.json"` (Radix: `/r/auth23.json`) - **Description**: Full-height lockout screen shown after too many failed attempts, with a live mm:ss countdown, a retry button that unlocks when the timer ends, and a reset-password link. Perfect for rate-limited sign-in protection. #### Complete Your Profile - **URL**: https://ui.beste.co/block/auth24 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth24.json"` (Radix: `/r/auth24.json`) - **Description**: Full-height profile setup step with an avatar uploader, a display name field, and a bio textarea, plus a skip option. Perfect for the post-sign-up onboarding step where users personalize their account. #### Claim Your Username - **URL**: https://ui.beste.co/block/auth25 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth25.json"` (Radix: `/r/auth25.json`) - **Description**: Full-height username picker with a prefixed input group, a live availability indicator, suggestion chips when a handle is taken, and a submit button that unlocks only when the name is free. Perfect for onboarding handle selection. #### Choose Your Plan - **URL**: https://ui.beste.co/block/auth26 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth26.json"` (Radix: `/r/auth26.json`) - **Description**: Full-height plan selection step with a monthly/annual billing toggle and selectable plan cards that update their pricing live, plus a continue button. Perfect for paid sign-up and upgrade flows. #### Sign-In Error - **URL**: https://ui.beste.co/block/auth27 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth27.json"` (Radix: `/r/auth27.json`) - **Description**: Full-height authentication error screen with a warning icon, an explanation, an optional error code, and try-again, back, and contact-support actions. Perfect for failed sign-in and OAuth callback errors. #### Link Expired - **URL**: https://ui.beste.co/block/auth28 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth28.json"` (Radix: `/r/auth28.json`) - **Description**: Full-height expired-link screen with a broken-link icon, an explanation, a request-a-new-link button, and a back-to-sign-in link. Perfect for stale magic links, password resets, and email confirmation tokens. #### Terminal Sign In - **URL**: https://ui.beste.co/block/auth29 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth29.json"` (Radix: `/r/auth29.json`) - **Description**: Full-height terminal-style sign-in rendered as a CLI window with a command prompt, a monospace email input, and a send-link action. Perfect for developer tools and CLI-first products. #### PIN Keypad Unlock - **URL**: https://ui.beste.co/block/auth30 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth30.json"` (Radix: `/r/auth30.json`) - **Description**: Full-height numeric keypad lock screen with PIN dots, a biometric shortcut, and a backspace key. Perfect for mobile app locks and quick re-authentication. #### QR Code Device Login - **URL**: https://ui.beste.co/block/auth31 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth31.json"` (Radix: `/r/auth31.json`) - **Description**: Full-height cross-device sign-in with a scannable QR code, a manual fallback code, and a live waiting-for-confirmation indicator. Perfect for signing in on desktop by scanning with a phone app. #### Editorial Split Sign In - **URL**: https://ui.beste.co/block/auth32 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth32.json"` (Radix: `/r/auth32.json`) - **Description**: Two-column editorial sign-in pairing an oversized typographic brand panel with a clean email and password form. Stacks the panel above the form on mobile. Perfect for brands that want a minimal, editorial first impression. #### Multi-Step Sign Up Wizard - **URL**: https://ui.beste.co/block/auth33 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth33.json"` (Radix: `/r/auth33.json`) - **Description**: Full-height multi-step registration with a numbered progress stepper that advances as the user moves through account, profile, and workspace steps, with back and continue controls. Perfect for guided onboarding sign-up. #### Email-First Sign In - **URL**: https://ui.beste.co/block/auth34 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth34.json"` (Radix: `/r/auth34.json`) - **Description**: Full-height progressive sign-in that asks for the email first, then reveals the password step with the chosen email shown and editable. Perfect for modern email-first and adaptive authentication flows. #### Number Match Approval - **URL**: https://ui.beste.co/block/auth35 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth35.json"` (Radix: `/r/auth35.json`) - **Description**: Full-height push-approval screen that shows a large number to match in your authenticator app, with a live waiting indicator and a cancel option. Perfect for number-matching two-factor authentication. #### Workspace Switcher - **URL**: https://ui.beste.co/block/auth36 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth36.json"` (Radix: `/r/auth36.json`) - **Description**: Full-height workspace picker listing organizations with logo initials, member details, and a create-workspace row, plus a signed-in-as footer. Perfect for multi-tenant apps after sign-in. #### Connect Wallet - **URL**: https://ui.beste.co/block/auth37 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth37.json"` (Radix: `/r/auth37.json`) - **Description**: Full-height web3 sign-in that lists wallet providers with icons, details, and a detected badge, plus a what-is-a-wallet helper link. Perfect for crypto and decentralized app authentication. #### Pattern Lock Unlock - **URL**: https://ui.beste.co/block/auth38 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth38.json"` (Radix: `/r/auth38.json`) - **Description**: Full-height pattern unlock screen with a tappable 3x3 dot grid that draws connecting lines as dots are selected, plus clear and unlock controls. Perfect for app lock screens and quick re-authentication. #### Enable Two-Factor - **URL**: https://ui.beste.co/block/auth39 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth39.json"` (Radix: `/r/auth39.json`) - **Description**: Full-height security setup step where the user picks a two-factor method from selectable cards (authenticator app, SMS, or security key), with a skip option. Perfect for guiding users through enabling 2FA. #### Change Password - **URL**: https://ui.beste.co/block/auth40 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth40.json"` (Radix: `/r/auth40.json`) - **Description**: Full-height change-password screen with current, new, and confirm password fields (show/hide toggles), a forgot-password link, and a cancel option. Perfect for account security settings. #### Delete Account - **URL**: https://ui.beste.co/block/auth41 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth41.json"` (Radix: `/r/auth41.json`) - **Description**: Full-height destructive confirmation screen that lists the consequences and requires the user to type a confirmation word before the delete button enables. Perfect for account deletion and other irreversible actions. #### Invite Code Gate - **URL**: https://ui.beste.co/block/auth42 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth42.json"` (Radix: `/r/auth42.json`) - **Description**: Full-height invite-only gate with a centered code field and a request-an-invite link. Perfect for closed betas, early access, and gated launches. #### Join the Waitlist - **URL**: https://ui.beste.co/block/auth43 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth43.json"` (Radix: `/r/auth43.json`) - **Description**: Full-height waitlist capture with an email field, a join button, a social-proof line, and a sign-in link for existing users. Perfect for pre-launch and early-access landing gates. #### Redirecting to SSO - **URL**: https://ui.beste.co/block/auth44 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth44.json"` (Radix: `/r/auth44.json`) - **Description**: Full-height loading screen shown while redirecting to an identity provider, with a spinner and a manual-continue fallback link. Perfect for SSO and OAuth handoff states. #### Human Verification - **URL**: https://ui.beste.co/block/auth45 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth45.json"` (Radix: `/r/auth45.json`) - **Description**: Full-height CAPTCHA-style check with an animated I'm-not-a-robot control that runs through verifying and verified states and unlocks the continue button. Perfect for bot protection before sign-in. #### Confirm It's You - **URL**: https://ui.beste.co/block/auth46 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth46.json"` (Radix: `/r/auth46.json`) - **Description**: Full-height step-up authentication screen that re-asks for the password before a sensitive action, showing the signed-in account and a cancel option. Perfect for protecting billing, security, and destructive actions. #### Recovery Phrase Entry - **URL**: https://ui.beste.co/block/auth47 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth47.json"` (Radix: `/r/auth47.json`) - **Description**: Full-height account recovery screen with a numbered grid of word inputs and paste-to-fill support, plus a restore button that unlocks once every word is entered. Perfect for seed phrase and recovery-phrase restore flows. #### Security Question Setup - **URL**: https://ui.beste.co/block/auth48 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth48.json"` (Radix: `/r/auth48.json`) - **Description**: Full-height security question setup with a question select and an answer field, plus a skip option. Perfect for account recovery setup and identity verification fallbacks. #### Split Sign In With Quote - **URL**: https://ui.beste.co/block/auth49 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth49.json"` (Radix: `/r/auth49.json`) - **Description**: A hairline sign-in panel with a lowercase wordmark, email and password fields, an inline forgot link, a remember toggle, and an SSO fallback, set beside a full-height photo carrying a gradient customer quote. #### Split Sign Up With Proof - **URL**: https://ui.beste.co/block/auth50 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth50.json"` (Radix: `/r/auth50.json`) - **Description**: A hairline sign-up panel carrying a lowercase wordmark, name, work email, and password fields with an SSO fallback and terms note, beside a soft column of checked benefits over an image tile that floats a live customer quote card. #### Passwordless Code Sign In - **URL**: https://ui.beste.co/block/auth51 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth51.json"` (Radix: `/r/auth51.json`) - **Description**: A centered passwordless card that advances in place from a work email step with an SSO fallback to a monospace one-time-code entry with resend and go-back controls. #### Password Reset With Live Strength - **URL**: https://ui.beste.co/block/auth52 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/auth52.json"` (Radix: `/r/auth52.json`) - **Description**: A centered password reset card whose segmented strength meter and checked requirement list update as the field is typed, with a confirmation field and a breach-check note underneath. ### Bento #### Studio Bento Grid - **URL**: https://ui.beste.co/block/bento1 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/bento1.json"` (Radix: `/r/bento1.json`) - **Description**: A hand-tiled monochrome bento grid mixing a statement, a stat, an image, a quote, and a CTA into one composition. #### Studio Summary Bento - **URL**: https://ui.beste.co/block/bento2 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/bento2.json"` (Radix: `/r/bento2.json`) - **Description**: Studio mosaic whose lead tile floats a mood-board media piece over a dotted field between its own eyebrow and statement, beside a photographic tile captioned on its scrim, an inverted figure tile, a soft quote tile and a bordered CTA tile. #### Selected Work Bento - **URL**: https://ui.beste.co/block/bento3 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/bento3.json"` (Radix: `/r/bento3.json`) - **Description**: Work mosaic on a six-column track mixing photographic tiles that carry their caption inside on a gradient scrim with a soft statement tile and an inverted figure tile, the lead project spanning four columns and two rows. #### Service Bento With Figure - **URL**: https://ui.beste.co/block/bento4 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/bento4.json"` (Radix: `/r/bento4.json`) - **Description**: Service mosaic whose lead tile floats a photo-strip media piece over a dotted field between its eyebrow and statement, beside a photographic tile captioned on its scrim, an inverted figure tile and three soft icon tiles. #### Phase Bento With Photographs - **URL**: https://ui.beste.co/block/bento5 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/bento5.json"` (Radix: `/r/bento5.json`) - **Description**: Process mosaic where the opening phase fills a two-row photographic tile with its eyebrow, explanation and duration on the scrim, beside an inverted summary tile and three smaller phase tiles carrying only their label and length. #### Object Study Bento - **URL**: https://ui.beste.co/block/bento6 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/bento6.json"` (Radix: `/r/bento6.json`) - **Description**: Product mosaic pairing a two-row hero photograph captioned on its scrim with a tall specification tile, then two square macro tiles that carry their caption inside and an inverted figure tile closing the row. #### Studio People Bento - **URL**: https://ui.beste.co/block/bento7 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/bento7.json"` (Radix: `/r/bento7.json`) - **Description**: Team mosaic where portraits carry their name and role inside the tile on a scrim, interleaved with an inverted quote tile and a wide soft tenure figure tile that closes the grid flush. #### Figures On Photographs Bento - **URL**: https://ui.beste.co/block/bento8 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/bento8.json"` (Radix: `/r/bento8.json`) - **Description**: Metrics mosaic where every figure sits on the photograph it came from behind a tinted scrim, the lead result spanning four columns and two rows, closed by a soft methodology tile explaining where the numbers come from. #### Editorial Issue Bento - **URL**: https://ui.beste.co/block/bento9 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/bento9.json"` (Radix: `/r/bento9.json`) - **Description**: Magazine mosaic whose cover story fills a two-row photographic tile with its category and page count on the scrim, beside an inverted figure tile, a bordered publication note and three soft article tiles. #### Visit The Studio Bento - **URL**: https://ui.beste.co/block/bento10 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/bento10.json"` (Radix: `/r/bento10.json`) - **Description**: Location mosaic mixing photographic tiles captioned on their own scrim with an inverted address tile carrying a directions link, a soft opening-hours tile and a full-width bordered visit row whose pill CTA sits opposite the copy. #### Product Surface Mosaic - **URL**: https://ui.beste.co/block/bento11 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/bento11.json"` (Radix: `/r/bento11.json`) - **Description**: A six-column bento mixing a lead card whose image tile floats a live metrics panel, a soft statement tile, an inverted figure tile, a second asset tile carrying an uptime strip, a hairline inclusion list, and a captioned photograph. #### Evidence Mosaic - **URL**: https://ui.beste.co/block/bento12 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/bento12.json"` (Radix: `/r/bento12.json`) - **Description**: A six-column bento of proof: a row of figure tiles with the first inverted, a tall card whose image tile floats a live breakdown chart, a tile carrying a customer quote card, and a soft note on method. #### Onboarding Mosaic - **URL**: https://ui.beste.co/block/bento13 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/bento13.json"` (Radix: `/r/bento13.json`) - **Description**: A six-column bento for getting started: a wide card floating a live step tracker, a numbered week list on hairlines, an inverted quote tile, and a capture card holding a working email row. ### Blog #### Card Grid with Authors - **URL**: https://ui.beste.co/block/blog3 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/blog3.json"` (Radix: `/r/blog3.json`) - **Description**: Three-column responsive grid of blog cards featuring author avatars, tag badges, and hover zoom effects. Clean card design with date and read time metadata. #### Featured Hero with Grid - **URL**: https://ui.beste.co/block/blog4 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/blog4.json"` (Radix: `/r/blog4.json`) - **Description**: Large featured article with side-by-side image and content, followed by a three-column grid of secondary posts. Read more buttons and author details included. #### Horizontal List with Icons - **URL**: https://ui.beste.co/block/blog5 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/blog5.json"` (Radix: `/r/blog5.json`) - **Description**: Vertical stack of horizontal blog cards with left-aligned thumbnails. Features calendar and clock icons for metadata, author titles, and tag badges. #### Category Tabs Filter - **URL**: https://ui.beste.co/block/blog8 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/blog8.json"` (Radix: `/r/blog8.json`) - **Description**: Filterable blog grid with tab navigation for categories. Posts automatically filter by category selection with smooth content switching. #### Alternating Feature Cards - **URL**: https://ui.beste.co/block/blog10 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/blog10.json"` (Radix: `/r/blog10.json`) - **Description**: Large alternating left-right blog cards with full article summaries. Image and content switch sides for visual variety. Read more buttons included. #### Compact Thumbnail List - **URL**: https://ui.beste.co/block/blog11 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/blog11.json"` (Radix: `/r/blog11.json`) - **Description**: Two-column compact blog list with small square thumbnails. Space-efficient design showing many posts at once with minimal metadata. #### Masonry Pinterest Grid - **URL**: https://ui.beste.co/block/blog12 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/blog12.json"` (Radix: `/r/blog12.json`) - **Description**: Pinterest-style masonry layout with varying content heights. CSS columns create organic flow with cards of different summary lengths. #### Sidebar with Categories - **URL**: https://ui.beste.co/block/blog13 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/blog13.json"` (Radix: `/r/blog13.json`) - **Description**: Main content area with horizontal post cards plus sidebar. Categories show post counts and popular tags section with clickable badges. #### Grid with Newsletter Card - **URL**: https://ui.beste.co/block/blog14 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/blog14.json"` (Radix: `/r/blog14.json`) - **Description**: Four-column grid mixing blog cards with an integrated newsletter signup card. Email input and subscribe button embedded in the layout. #### Minimal Text List - **URL**: https://ui.beste.co/block/blog15 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/blog15.json"` (Radix: `/r/blog15.json`) - **Description**: Clean text-only blog list with arrow icons. No images, just titles, dates, and authors. Lightweight design with hover arrow animation. #### Month-Grouped Archive - **URL**: https://ui.beste.co/block/blog18 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/blog18.json"` (Radix: `/r/blog18.json`) - **Description**: Blog archive organized by month with compact list entries. Small thumbnails and formatted dates create a scannable chronological view. #### Full-Width Stacked Cards - **URL**: https://ui.beste.co/block/blog22 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/blog22.json"` (Radix: `/r/blog22.json`) - **Description**: Vertically stacked blog cards with 2:1 aspect ratio images. Full article summaries with author avatars and read more buttons. Long-form content showcase. #### Split Image with List - **URL**: https://ui.beste.co/block/blog25 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/blog25.json"` (Radix: `/r/blog25.json`) - **Description**: Two-column layout with featured image on left and article list on right. Divider-separated entries with arrow hover effects. #### Polaroid Photo Gallery - **URL**: https://ui.beste.co/block/blog26 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/blog26.json"` (Radix: `/r/blog26.json`) - **Description**: Playful polaroid-style cards with random rotations and white borders. Cards straighten on hover for a fun, casual photo gallery feel. #### Newspaper Editorial Style - **URL**: https://ui.beste.co/block/blog27 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/blog27.json"` (Radix: `/r/blog27.json`) - **Description**: Classic newspaper layout with serif fonts and bordered headline. Large main story on left, stacked secondary stories on right with dividers. #### Hover Reveal Overlay - **URL**: https://ui.beste.co/block/blog30 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/blog30.json"` (Radix: `/r/blog30.json`) - **Description**: Grid of image cards with gradient overlays. Summaries expand on hover with smooth max-height animation. Titles always visible with white text. #### Full-Width Hero Banners - **URL**: https://ui.beste.co/block/blog31 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/blog31.json"` (Radix: `/r/blog31.json`) - **Description**: Wide cinematic banners with centered text overlay. Large bold titles on semi-transparent backgrounds. Immersive visual storytelling format. #### Tutorial Series Cards - **URL**: https://ui.beste.co/block/blog36 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/blog36.json"` (Radix: `/r/blog36.json`) - **Description**: Multi-part tutorial series with numbered parts. Book icon, part count, and progress-style list. Perfect for step-by-step learning content. #### Timeline Year Archive - **URL**: https://ui.beste.co/block/blog42 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/blog42.json"` (Radix: `/r/blog42.json`) - **Description**: Vertical timeline archive organized by year and month. Calendar icon with border line connecting entries. Compact text-only format. #### Editorial Article Grid - **URL**: https://ui.beste.co/block/blog43 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/blog43.json"` (Radix: `/r/blog43.json`) - **Description**: A blog listing with an eyebrow over a hairline rule, a two-column heading, and three linked article cards with a hover-zoom image, a category label, a title, an excerpt, and byline. #### Newsroom Lead and Index - **URL**: https://ui.beste.co/block/blog44 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/blog44.json"` (Radix: `/r/blog44.json`) - **Description**: A newsroom listing with a heading, a divider, and an eyebrow over a hairline rule, a two-column lead story with a large image, the remaining stories stacked as numbered ruled rows with square thumbnails, and a seal button to the full archive. #### Press Room Digest - **URL**: https://ui.beste.co/block/blog45 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/blog45.json"` (Radix: `/r/blog45.json`) - **Description**: A press room listing with a square eyebrow, a bold heading and intro over a hairline rule, a wide lead release with a panoramic image, and the remaining releases stacked as ruled rows that pair a date column with a release type, headline, dek, and a square arrow chip. #### Front Page Columns - **URL**: https://ui.beste.co/block/blog46 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/blog46.json"` (Radix: `/r/blog46.json`) - **Description**: A newsroom front page with a heading, a divider, and a square eyebrow over a hairline rule, a wide lead story whose headline and standfirst split across a twelve column band under a panoramic image, and the remaining articles set as three bordered text cards. #### Bulletin Columns - **URL**: https://ui.beste.co/block/blog47 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/blog47.json"` (Radix: `/r/blog47.json`) - **Description**: A newsroom bulletin with a square eyebrow, an image-free lead story split across a 7/5 grid with a standfirst, byline, and a seal button, then three illustrated columns with hover-zoom images below a single hairline rule. #### Quad Grid - **URL**: https://ui.beste.co/block/blog48 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/blog48.json"` (Radix: `/r/blog48.json`) - **Description**: A newsroom listing with a square eyebrow, a two-column heading band over a hairline rule, and four equally weighted stories as bordered cards, each linking through a hover-zoom image, a category kicker, a bold headline, a summary, and a byline pinned to the card foot. #### Quad Ledger - **URL**: https://ui.beste.co/block/blog49 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/blog49.json"` (Radix: `/r/blog49.json`) - **Description**: An image-free newsroom index with a square eyebrow, a two-column heading band over a hairline rule, four linked release cards that each pair an accent counter with a kicker, headline, dek, and byline, and a seal button to the full archive. #### Magazine Mosaic - **URL**: https://ui.beste.co/block/blog50 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/blog50.json"` (Radix: `/r/blog50.json`) - **Description**: A six-slot magazine mosaic with a parenthetical eyebrow and a large heading, pairing a dominant two-by-two tile with a tall tile, wide tiles, and unit tiles that each caption their photo over a graded scrim. #### Mixed Tile Mosaic - **URL**: https://ui.beste.co/block/blog51 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/blog51.json"` (Radix: `/r/blog51.json`) - **Description**: A six-slot mosaic under a parenthetical eyebrow and a large heading, mixing full-bleed photo tiles with flat text tiles on muted and inverted surfaces, where the treatment belongs to the slot and every tile advances one story through a larger article pool on a timer, staggered 100 milliseconds apart so the refresh reads as a wave running left to right, pausing on hover, focus, hidden tabs, and reduced motion. #### Newsroom Masonry - **URL**: https://ui.beste.co/block/blog52 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/blog52.json"` (Radix: `/r/blog52.json`) - **Description**: A CSS-columns masonry of linked newsroom cards under a parenthetical eyebrow and a large heading, where the image aspect ratio cycles by position so the wall keeps an uneven, magazine-like rhythm. #### Mixed Release Masonry - **URL**: https://ui.beste.co/block/blog53 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/blog53.json"` (Radix: `/r/blog53.json`) - **Description**: A press office masonry wall under a parenthetical eyebrow and a large heading, mixing photo cards with image-free release cards on soft muted surfaces, each release card closing on a read-through line with a corner arrow. #### Pinned Lead Newsroom - **URL**: https://ui.beste.co/block/blog54 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/blog54.json"` (Radix: `/r/blog54.json`) - **Description**: A twelve-column newsroom band under a parenthetical eyebrow, pairing one lead story carrying a pinned marker, a large image, and a byline block with a stack of four ruled secondary rows, closing on a pill button to the archive. #### Press Release Wall - **URL**: https://ui.beste.co/block/blog55 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/blog55.json"` (Radix: `/r/blog55.json`) - **Description**: A three-column wall of image-free press release cards on soft muted surfaces under a parenthetical eyebrow and a large heading, each card pairing a release type and date with a headline, dek, byline, and a ruled category row. #### Category Mosaic - **URL**: https://ui.beste.co/block/blog56 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/blog56.json"` (Radix: `/r/blog56.json`) - **Description**: A six-slot photo mosaic under a parenthetical eyebrow and a large heading, where every tile is bound to one newsroom category so the grid doubles as a section map, with a ruled legend naming the sections above it. #### Journal Lead And Index - **URL**: https://ui.beste.co/block/blog57 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/blog57.json"` (Radix: `/r/blog57.json`) - **Description**: Editorial journal preview pairing one lead entry with a wide image, category, title, excerpt and date against a ruled index of three shorter entries, headed by an eyebrow, a display heading and an outline pill CTA. #### Ruled Writing Index - **URL**: https://ui.beste.co/block/blog58 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/blog58.json"` (Radix: `/r/blog58.json`) - **Description**: Image-free article index where every entry is one ruled row carrying the date, the category, the title and the reading time with a corner arrow, stacking to a readable block on mobile. #### Journal Card Trio - **URL**: https://ui.beste.co/block/blog59 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/blog59.json"` (Radix: `/r/blog59.json`) - **Description**: Three linked journal cards, each with a four-by-three image, a category, a display title, an excerpt and a ruled byline pinned to the bottom of the card so uneven excerpts still align. #### Featured Article With Recent List - **URL**: https://ui.beste.co/block/blog60 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/blog60.json"` (Radix: `/r/blog60.json`) - **Description**: A blog section pairing one linked feature with a hover-zoom image, category label, and byline against a hairline list of five recent posts stamped with their date. #### Filterable Archive Index - **URL**: https://ui.beste.co/block/blog61 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/blog61.json"` (Radix: `/r/blog61.json`) - **Description**: A dense blog archive whose subject pills are derived from the posts themselves and carry live counts, filtering a two-column list of hairline rows stamped with a date and a reading time. #### Newsletter Panel With Back Issues - **URL**: https://ui.beste.co/block/blog62 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/blog62.json"` (Radix: `/r/blog62.json`) - **Description**: A blog section splitting a bordered container between the newsletter pitch with a cadence line on a hairline and an image tile holding a working subscribe row, over three linked back issues. ### Booking #### Date & Time Picker - **URL**: https://ui.beste.co/block/booking1 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/booking1.json"` (Radix: `/r/booking1.json`) - **Description**: Split-panel booking interface with interactive monthly calendar on the left and time slot grid on the right. Features today highlight, disabled dates, selected state, morning/afternoon grouping, and booking summary footer. #### Reservation Summary - **URL**: https://ui.beste.co/block/booking2 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/booking2.json"` (Radix: `/r/booking2.json`) - **Description**: Booking confirmation card with service details, date/time, provider info with avatar, price breakdown with subtotal/tax/discount/total, promo code input, cancellation policy, and confirm CTA. #### Appointment List - **URL**: https://ui.beste.co/block/booking3 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/booking3.json"` (Radix: `/r/booking3.json`) - **Description**: Upcoming and past appointments list grouped by date, with service name, provider avatar, time, duration, status badges (confirmed/pending/cancelled), and reschedule/cancel action buttons. #### Service Selector - **URL**: https://ui.beste.co/block/booking4 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/booking4.json"` (Radix: `/r/booking4.json`) - **Description**: Service selection grid with category filter tabs, service cards showing icon, name, description, duration, price, and selected state. Ideal for spa, salon, clinic, and fitness booking flows. #### Provider Picker - **URL**: https://ui.beste.co/block/booking5 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/booking5.json"` (Radix: `/r/booking5.json`) - **Description**: Staff/provider selection cards with avatar, name, specialty, star rating, review count, availability badge, experience years, and selected state. Grid layout with "Any Provider" option. #### Restaurant Reservation - **URL**: https://ui.beste.co/block/booking6 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/booking6.json"` (Radix: `/r/booking6.json`) - **Description**: Restaurant table reservation with guest count selector, date/time picker, seating preference (indoor/outdoor/bar), special requests textarea, and booking summary. Fine dining reservation flow. #### Hotel Room Booking - **URL**: https://ui.beste.co/block/booking7 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/booking7.json"` (Radix: `/r/booking7.json`) - **Description**: Hotel room selection with room type cards showing images, amenity icons, guest capacity, price per night, check-in/check-out date picker, guest counter, and total price summary. #### Flight Booking - **URL**: https://ui.beste.co/block/booking8 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/booking8.json"` (Radix: `/r/booking8.json`) - **Description**: Flight search results with airline logos, departure/arrival times, duration, stops, class selector (economy/business/first), baggage info, and price comparison. Airline ticket booking flow. #### Event Ticket Booking - **URL**: https://ui.beste.co/block/booking9 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/booking9.json"` (Radix: `/r/booking9.json`) - **Description**: Event ticket selection with event banner, date/venue info, ticket tier cards (General/VIP/Backstage) with perks list, quantity selector, and order total. Concert and conference ticket flow. #### Meeting Room Booking - **URL**: https://ui.beste.co/block/booking10 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/booking10.json"` (Radix: `/r/booking10.json`) - **Description**: Coworking meeting room reservation with room cards showing capacity, equipment icons, hourly pricing, time range selector, attendee count, and total cost. Office and coworking space booking flow. #### Price Calendar - **URL**: https://ui.beste.co/block/booking11 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/booking11.json"` (Radix: `/r/booking11.json`) - **Description**: Google Flights-style price calendar with per-day pricing, cheapest day highlights, expensive day indicators, date range selection, and best deal summary banner. Universal for hotels, flights, car rentals, and vacation bookings. #### Search Bar Hero - **URL**: https://ui.beste.co/block/booking12 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/booking12.json"` (Radix: `/r/booking12.json`) - **Description**: Airbnb/Booking.com-style search bar with location autocomplete, date range picker, guest counter dropdown, and search CTA. Responsive — inline on desktop, stacked on mobile. The universal booking hero section. #### Live Social Proof Bar - **URL**: https://ui.beste.co/block/booking13 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/booking13.json"` (Radix: `/r/booking13.json`) - **Description**: Booking.com-style social proof ticker with rotating messages: live viewers, recent bookings, scarcity alerts, and location-based activity. Animated transitions, urgency indicators, and trust signals that boost conversion. #### Activity Experience Booking - **URL**: https://ui.beste.co/block/booking14 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/booking14.json"` (Radix: `/r/booking14.json`) - **Description**: Tours and experiences booking card with hero image overlay, rating, duration, difficulty badge, date picker, traveler counter, language selector, highlights list, and reserve CTA. Perfect for guided tours, classes, and local experiences. #### Booking Confirmation Receipt - **URL**: https://ui.beste.co/block/booking15 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/booking15.json"` (Radix: `/r/booking15.json`) - **Description**: Post-booking success screen with animated check icon, confirmation number, booking summary (service, date/time, location, total), scannable QR code ticket, action buttons (calendar, receipt, directions), and email confirmation note. #### Home Cleaning Service Booking - **URL**: https://ui.beste.co/block/booking16 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/booking16.json"` (Radix: `/r/booking16.json`) - **Description**: Residential cleaning service booking with service type tabs (standard/deep/move-out), bedroom/bathroom selectors, recurring frequency pills, add-ons checklist, date picker, estimated duration, and price breakdown footer. #### Ride Booking - **URL**: https://ui.beste.co/block/booking17 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/booking17.json"` (Radix: `/r/booking17.json`) - **Description**: Ride-share style booking with pickup/dropoff address inputs, schedule now/later toggle, ride class selector (economy/comfort/xl) with ETA and fare, payment method row, and confirm ride CTA. Perfect for taxi, transfer, and shuttle apps. #### Cinema Seat Picker - **URL**: https://ui.beste.co/block/booking18 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/booking18.json"` (Radix: `/r/booking18.json`) - **Description**: Interactive seat selection grid for cinemas, theaters, and events. Row/column layout with an aisle gap, tier-based pricing (standard/premium/VIP), occupied seats, a live selection summary, and a legend. Includes screen indicator at the top. #### Multi-step Booking Wizard - **URL**: https://ui.beste.co/block/booking19 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/booking19.json"` (Radix: `/r/booking19.json`) - **Description**: Stepper-based booking flow with numbered progress dots, animated progress bar, and four steps: service selection, schedule, contact details, and review. Back/Next navigation, per-step validation, and a live summary. #### Car Rental Booking - **URL**: https://ui.beste.co/block/booking20 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/booking20.json"` (Radix: `/r/booking20.json`) - **Description**: Vehicle rental flow with pickup and return location fields, date range picker, car class grid (compact/suv/luxury) with image and specs, insurance tier selector, optional add-ons, and live price breakdown. #### Weekly Class Schedule - **URL**: https://ui.beste.co/block/booking21 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/booking21.json"` (Radix: `/r/booking21.json`) - **Description**: Gym or studio weekly schedule with day tabs, class list per day (instructor avatar, duration, spots remaining, difficulty), and quick reserve action. Tap a day to see its classes, tap a class to book a spot. #### Spa Day Package Builder - **URL**: https://ui.beste.co/block/booking22 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/booking22.json"` (Radix: `/r/booking22.json`) - **Description**: Multi-service booking composer. Customers assemble their own wellness day by adding services across categories (massage/facial/body/nails/add-ons), with live package summary, duration totals, animated bundle-discount progress bar, quick-start presets, and remove-from-package controls. #### Cancellation Flow - **URL**: https://ui.beste.co/block/booking23 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/booking23.json"` (Radix: `/r/booking23.json`) - **Description**: Booking cancellation screen with the original booking summary, cancellation reason picker (radio list with optional notes), live refund breakdown based on cancellation policy, confirmation checkbox, and destructive cancel action. #### Service And Slot Picker - **URL**: https://ui.beste.co/block/booking24 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/booking24.json"` (Radix: `/r/booking24.json`) - **Description**: An interactive appointment picker: a hairline panel pairing a selectable service list with a scrollable day strip and a time slot grid that marks unavailable times, beside a full-height provider photo with a gradient name card, closing on a live summary bar and confirm action. #### Booking Confirmed - **URL**: https://ui.beste.co/block/booking25 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/booking25.json"` (Radix: `/r/booking25.json`) - **Description**: A confirmation screen with an accent eyebrow, a two-column hairline table of the appointment details, a checked list of what to bring, and a sticky tile floating the live phone view the member also receives. #### Minimal Service Picker - **URL**: https://ui.beste.co/block/booking26 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/booking26.json"` (Radix: `/r/booking26.json`) - **Description**: A quiet booking picker whose left column lists each service as a single hairline row carrying only its length and price, swapping a sticky panel that floats a live week strip above the chosen service's detail and its book action. #### Choose Your Clinician - **URL**: https://ui.beste.co/block/booking27 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/booking27.json"` (Radix: `/r/booking27.json`) - **Description**: A clinician picker whose hairline list of practitioners, each showing their next opening, swaps an image tile floating a live availability card alongside their focus, background, and sites. #### Waiting List Capture - **URL**: https://ui.beste.co/block/booking28 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/booking28.json"` (Radix: `/r/booking28.json`) - **Description**: A no-availability state that answers with three hairline figures and a numbered explanation of how offers are made, beside a sticky square tile floating a live panel of the waiting list itself and an urgent fallback. #### Appointment Intake Match - **URL**: https://ui.beste.co/block/booking29 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/booking29.json"` (Radix: `/r/booking29.json`) - **Description**: Three intake questions that land on a real appointment type instead of a drop-down: the answers pick a route with its length, its facts, and the clinician you will sit with, and the image tile beside them swaps its floated availability card to match. ### Careers #### Job Listings List - **URL**: https://ui.beste.co/block/careers1 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers1.json"` (Radix: `/r/careers1.json`) - **Description**: Job listings section with role cards showing department, location, and employment type. Clean list layout with hover effects and apply buttons. #### Job Openings Grid - **URL**: https://ui.beste.co/block/careers2 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers2.json"` (Radix: `/r/careers2.json`) - **Description**: Job openings grid with department badges, location tags, and apply buttons. Card-based layout for career pages. #### Department-Grouped Positions - **URL**: https://ui.beste.co/block/careers3 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers3.json"` (Radix: `/r/careers3.json`) - **Description**: Department-grouped job listings with minimal row layout. Jobs organized by team with location and type indicators. #### Perks & Open Positions - **URL**: https://ui.beste.co/block/careers4 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers4.json"` (Radix: `/r/careers4.json`) - **Description**: Combined perks and job listings section with benefits grid and open positions list. Ideal for complete career pages. #### Featured Role with Positions - **URL**: https://ui.beste.co/block/careers5 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers5.json"` (Radix: `/r/careers5.json`) - **Description**: Highlighted featured position card with a compact list of additional openings below. Great for showcasing priority roles. #### Tab-Filtered Job Board - **URL**: https://ui.beste.co/block/careers6 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers6.json"` (Radix: `/r/careers6.json`) - **Description**: Tabbed job board with department filters using shadcn Tabs component. Browse positions by team with location and type details. #### Culture Stats with Positions - **URL**: https://ui.beste.co/block/careers7 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers7.json"` (Radix: `/r/careers7.json`) - **Description**: Team culture stats bar followed by detailed job position cards. Combines social proof with open roles listing. #### Job Detail Page - **URL**: https://ui.beste.co/block/careers8 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers8.json"` (Radix: `/r/careers8.json`) - **Description**: Single job posting detail with responsibilities, requirements, nice-to-haves, and apply CTA. Full position description layout. #### Employee Benefits Grid - **URL**: https://ui.beste.co/block/careers9 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers9.json"` (Radix: `/r/careers9.json`) - **Description**: Benefits and perks showcase with icon cards in a responsive grid. Highlights company offerings like health, remote work, and growth opportunities. #### Hiring Process Timeline - **URL**: https://ui.beste.co/block/careers10 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers10.json"` (Radix: `/r/careers10.json`) - **Description**: Step-by-step hiring process timeline with numbered stages. Shows candidates the interview journey from application to onboarding. #### Culture & Values - **URL**: https://ui.beste.co/block/careers11 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers11.json"` (Radix: `/r/careers11.json`) - **Description**: Company values grid with icon cards and employee testimonial quote. Showcases team culture and work philosophy. #### Career Growth Ladder - **URL**: https://ui.beste.co/block/careers12 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers12.json"` (Radix: `/r/careers12.json`) - **Description**: Career progression path with level indicators, role descriptions, and key skills. Shows growth framework from junior to principal level. #### Office Locations Grid - **URL**: https://ui.beste.co/block/careers13 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers13.json"` (Radix: `/r/careers13.json`) - **Description**: Global office locations grid with city photos, team size, and role taglines. Showcases company presence worldwide. #### Meet the Team Gallery - **URL**: https://ui.beste.co/block/careers14 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers14.json"` (Radix: `/r/careers14.json`) - **Description**: Team member photo grid with names and roles. Square portrait layout for showcasing leadership and team composition. #### Day in the Life Timeline - **URL**: https://ui.beste.co/block/careers15 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers15.json"` (Radix: `/r/careers15.json`) - **Description**: A typical workday timeline with time stamps, activity icons, and descriptions. Shows candidates what daily life looks like at the company. #### Employee Testimonials - **URL**: https://ui.beste.co/block/careers16 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers16.json"` (Radix: `/r/careers16.json`) - **Description**: Employee testimonial cards with quotes, avatars, and roles. Social proof grid showcasing team member experiences and company culture. #### Job Application Form - **URL**: https://ui.beste.co/block/careers17 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers17.json"` (Radix: `/r/careers17.json`) - **Description**: Job application form with input fields, file upload area, and position summary sidebar. Complete apply page layout for career sites. #### Department Overview Grid - **URL**: https://ui.beste.co/block/careers18 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers18.json"` (Radix: `/r/careers18.json`) - **Description**: Department cards with team lead, headcount, open roles badge, and links. Helps candidates explore teams before applying. #### Internship Program - **URL**: https://ui.beste.co/block/careers19 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers19.json"` (Radix: `/r/careers19.json`) - **Description**: Internship program section with highlights, mentorship details, program summary card, and apply CTA. For recruiting early-career talent. #### Diversity & Inclusion - **URL**: https://ui.beste.co/block/careers20 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers20.json"` (Radix: `/r/careers20.json`) - **Description**: Diversity and inclusion section with representation stats and initiative cards. Showcases company commitment to equity and belonging. #### Compensation & Total Rewards - **URL**: https://ui.beste.co/block/careers21 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers21.json"` (Radix: `/r/careers21.json`) - **Description**: Transparent compensation philosophy with salary, equity, bonus, and perks cards. Shows total rewards approach with highlighted details. #### Employee Spotlight Story - **URL**: https://ui.beste.co/block/careers22 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers22.json"` (Radix: `/r/careers22.json`) - **Description**: Featured employee profile with portrait photo, personal quote, and career milestone timeline. Showcases real growth stories. #### Employee Referral Program - **URL**: https://ui.beste.co/block/careers23 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers23.json"` (Radix: `/r/careers23.json`) - **Description**: Referral program section with step-by-step process, bonus highlight card, and submit CTA. Encourages employee referrals. #### Onboarding Journey Preview - **URL**: https://ui.beste.co/block/careers24 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers24.json"` (Radix: `/r/careers24.json`) - **Description**: First 90 days onboarding timeline with phase cards and activity checklists. Shows new hires what to expect from orientation to ownership. #### Remote Work Setup - **URL**: https://ui.beste.co/block/careers25 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers25.json"` (Radix: `/r/careers25.json`) - **Description**: Work environment section with equipment provisions and work policies. Two-column layout showing what the company provides and how the team operates. #### Hiring by the Numbers - **URL**: https://ui.beste.co/block/careers26 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers26.json"` (Radix: `/r/careers26.json`) - **Description**: Recruitment statistics dashboard with key metrics, trends, and detailed hiring process stats. Transparent data-driven hiring showcase. #### Speculative Application CTA - **URL**: https://ui.beste.co/block/careers27 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers27.json"` (Radix: `/r/careers27.json`) - **Description**: Bottom-of-page careers CTA for general applications with email, action buttons, and company highlight badges. Captures candidates without matching roles. #### Learning & Development - **URL**: https://ui.beste.co/block/careers28 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers28.json"` (Radix: `/r/careers28.json`) - **Description**: Professional development program cards with conference budget, courses, mentorship, and tech talks. Highlights company investment in employee growth. #### Team Events Gallery - **URL**: https://ui.beste.co/block/careers29 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers29.json"` (Radix: `/r/careers29.json`) - **Description**: Photo gallery of company events, offsites, and team activities in masonry layout. Visual showcase of team culture and community. #### Team Blog Highlights - **URL**: https://ui.beste.co/block/careers30 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers30.json"` (Radix: `/r/careers30.json`) - **Description**: Engineering and team blog article preview cards with images, excerpts, and authors. Showcases technical depth and knowledge sharing culture. #### Role Comparison Table - **URL**: https://ui.beste.co/block/careers31 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers31.json"` (Radix: `/r/careers31.json`) - **Description**: Side-by-side role comparison grid showing team, skills, experience, and salary for different positions. Responsive table-to-card layout. #### Alumni Network Showcase - **URL**: https://ui.beste.co/block/careers32 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers32.json"` (Radix: `/r/careers32.json`) - **Description**: Former employee showcase with career progression from company role to current position. Demonstrates the company as a career launchpad. #### HR Job Posting Detail - **URL**: https://ui.beste.co/block/careers33 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers33.json"` (Radix: `/r/careers33.json`) - **Description**: Formal HR job posting with responsibilities, qualifications, benefits, and sidebar summary. Corporate-style position detail page with apply CTA. #### Engineering Principles - **URL**: https://ui.beste.co/block/careers34 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers34.json"` (Radix: `/r/careers34.json`) - **Description**: Numbered engineering principles list with large counters and descriptions. Showcases team philosophy on shipping, ownership, and simplicity. #### Salary Bands Table - **URL**: https://ui.beste.co/block/careers35 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers35.json"` (Radix: `/r/careers35.json`) - **Description**: Transparent salary bands with level, role, visual range bars, and equity details. Pay transparency table with responsive card fallback. #### Hiring Manager Profiles - **URL**: https://ui.beste.co/block/careers36 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers36.json"` (Radix: `/r/careers36.json`) - **Description**: Team lead profiles with photos, bios, and department badges. Introduces future managers to candidates with detailed backgrounds. #### Job Alerts Signup - **URL**: https://ui.beste.co/block/careers37 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers37.json"` (Radix: `/r/careers37.json`) - **Description**: Email subscription form for job alerts with trust indicators. Captures candidate interest for future openings with clean card layout. #### Work Perks Bento Grid - **URL**: https://ui.beste.co/block/careers38 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers38.json"` (Radix: `/r/careers38.json`) - **Description**: Bento-style grid of work perks with featured image card and icon cards. Mixed layout showcasing PTO, wellness, equipment, and team events. #### Candidate Experience Guide - **URL**: https://ui.beste.co/block/careers39 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers39.json"` (Radix: `/r/careers39.json`) - **Description**: Two-column guide with preparation tips and company commitments to candidates. Sets expectations for the hiring process with contact info. #### Open Roles - **URL**: https://ui.beste.co/block/careers40 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers40.json"` (Radix: `/r/careers40.json`) - **Description**: A studio jobs list with role meta, salary and apply arrows. #### Benefits & Perks - **URL**: https://ui.beste.co/block/careers41 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers41.json"` (Radix: `/r/careers41.json`) - **Description**: Studio benefits grid with an accent highlight and icon cards. #### Studio Culture - **URL**: https://ui.beste.co/block/careers42 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers42.json"` (Radix: `/r/careers42.json`) - **Description**: Culture statement and tenets beside a three-image studio-life collage. #### Hiring Process - **URL**: https://ui.beste.co/block/careers43 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers43.json"` (Radix: `/r/careers43.json`) - **Description**: The studio's interview process as a connected, numbered step flow. #### Roles By Department - **URL**: https://ui.beste.co/block/careers44 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers44.json"` (Radix: `/r/careers44.json`) - **Description**: Department-tabbed open roles list using shadcn Tabs. #### Life At The Studio - **URL**: https://ui.beste.co/block/careers45 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers45.json"` (Radix: `/r/careers45.json`) - **Description**: A captioned masonry photo wall of studio life with an intro and a roles CTA. #### Role Spotlight - **URL**: https://ui.beste.co/block/careers46 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers46.json"` (Radix: `/r/careers46.json`) - **Description**: A full featured-role posting with responsibilities, requirements and a sticky apply card. #### Why Join Us - **URL**: https://ui.beste.co/block/careers47 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers47.json"` (Radix: `/r/careers47.json`) - **Description**: Team stats band paired with benefit highlights. #### Join The Studio - **URL**: https://ui.beste.co/block/careers48 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers48.json"` (Radix: `/r/careers48.json`) - **Description**: Sticky employer-value intro beside a scrollable open-roles list. #### Benefits Breakdown - **URL**: https://ui.beste.co/block/careers49 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers49.json"` (Radix: `/r/careers49.json`) - **Description**: Categorized studio benefits with checklists per category. #### Careers Gallery Header - **URL**: https://ui.beste.co/block/careers50 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers50.json"` (Radix: `/r/careers50.json`) - **Description**: Centered careers intro with eyebrow, highlighted heading and supporting copy above a three-image gallery — one wide frame beside two portraits. #### Filterable Open Roles List - **URL**: https://ui.beste.co/block/careers51 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers51.json"` (Radix: `/r/careers51.json`) - **Description**: A light editorial careers section with a monospace eyebrow over a hairline rule, a two-column heading, and a sticky culture photo with a gradient caption beside team filter pills and hairline job rows showing location, contract type, and a hover arrow. #### Single Role Detail - **URL**: https://ui.beste.co/block/careers52 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers52.json"` (Radix: `/r/careers52.json`) - **Description**: A job description laid out as a reading column with checked responsibility lists and a candid caveat panel, against a sticky rail carrying the published salary band, level, and location alongside the apply action. #### Hiring Process In Full - **URL**: https://ui.beste.co/block/careers53 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers53.json"` (Radix: `/r/careers53.json`) - **Description**: An interview process published as numbered hairline stages carrying length, who you meet, and an accent chip where the work is paid, closing on a soft promises panel beside a live card for the person who runs it. #### Benefits And Honest Omissions - **URL**: https://ui.beste.co/block/careers54 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers54.json"` (Radix: `/r/careers54.json`) - **Description**: A working-here section pairing a six-item icon benefits grid and a captioned full-bleed photograph with two closing cards that set what you get against what the company deliberately does not offer. #### Published Pay Bands - **URL**: https://ui.beste.co/block/careers55 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers55.json"` (Radix: `/r/careers55.json`) - **Description**: A pay transparency table whose track pills swap the band column while the levels, their scope, and the headcount at each stay in place, closing on the written rules that govern the numbers beside a soft panel carrying the call to action. #### Role Fit Finder - **URL**: https://ui.beste.co/block/careers56 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/careers56.json"` (Radix: `/r/careers56.json`) - **Description**: A hiring section that answers three questions instead of listing a job board: the answers land on one open role with its team, its location, and its published pay band, and the photograph beside it changes to the part of the studio that role sits in. ### Changelog #### Split Milestone Changelog - **URL**: https://ui.beste.co/block/changelog2 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/changelog2.json"` (Radix: `/r/changelog2.json`) - **Description**: Split-layout changelog with milestone context, highlights, metrics, and action buttons. #### Changelog Release Feed - **URL**: https://ui.beste.co/block/changelog3 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/changelog3.json"` (Radix: `/r/changelog3.json`) - **Description**: Release feed cards with aligned change labels, summaries, and optional CTA buttons. #### Grouped Changelog Board - **URL**: https://ui.beste.co/block/changelog4 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/changelog4.json"` (Radix: `/r/changelog4.json`) - **Description**: Month-grouped changelog board with aligned labels, release details, and optional links. #### Milestone Changelog Timeline - **URL**: https://ui.beste.co/block/changelog5 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/changelog5.json"` (Radix: `/r/changelog5.json`) - **Description**: Timeline-style changelog with version badges, dates, and color-coded change types. Ideal for release notes and version history. #### Minimal Text Changelog - **URL**: https://ui.beste.co/block/changelog6 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/changelog6.json"` (Radix: `/r/changelog6.json`) - **Description**: Ultra-minimal text-only changelog with version headers and dash-prefixed change lists. No badges, no cards, just clean typography. #### Categorized Release Notes - **URL**: https://ui.beste.co/block/changelog7 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/changelog7.json"` (Radix: `/r/changelog7.json`) - **Description**: Release notes with changes grouped by type — Added, Changed, Fixed — using color-coded category labels. #### Featured Release Changelog - **URL**: https://ui.beste.co/block/changelog8 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/changelog8.json"` (Radix: `/r/changelog8.json`) - **Description**: Latest release highlighted in a featured card with full details, followed by a compact list of previous releases. #### Release Card Grid - **URL**: https://ui.beste.co/block/changelog9 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/changelog9.json"` (Radix: `/r/changelog9.json`) - **Description**: Responsive card grid of releases with version badges, descriptions, and optional links. Great for browsable release archives. #### Dense Inline Release Log - **URL**: https://ui.beste.co/block/changelog10 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/changelog10.json"` (Radix: `/r/changelog10.json`) - **Description**: Compact single-line release rows with color-coded type dots, version tags, and a legend footer. Optimized for dense, scannable API changelogs. #### Two-Column Date Changelog - **URL**: https://ui.beste.co/block/changelog11 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/changelog11.json"` (Radix: `/r/changelog11.json`) - **Description**: Minimal two-column layout with fixed-width date column on the left and version heading with change list on the right. #### Large Version Changelog - **URL**: https://ui.beste.co/block/changelog12 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/changelog12.json"` (Radix: `/r/changelog12.json`) - **Description**: Poster-style changelog with oversized version numbers as visual anchors, followed by date, heading, and description text. #### Accordion Release Changelog - **URL**: https://ui.beste.co/block/changelog13 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/changelog13.json"` (Radix: `/r/changelog13.json`) - **Description**: Collapsible accordion changelog where each release expands to reveal description and change list. #### Year-Grouped Accordion Changelog - **URL**: https://ui.beste.co/block/changelog14 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/changelog14.json"` (Radix: `/r/changelog14.json`) - **Description**: Releases grouped by year in collapsible accordion panels with release count indicators. #### Stacked Release Cards - **URL**: https://ui.beste.co/block/changelog15 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/changelog15.json"` (Radix: `/r/changelog15.json`) - **Description**: Stacked release cards with heading, description, change list, and version footer. Clean vertical feed for product updates. #### Visual Release Notes - **URL**: https://ui.beste.co/block/changelog16 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/changelog16.json"` (Radix: `/r/changelog16.json`) - **Description**: Alternating split layout with feature screenshots on one side and release content on the other. Ideal for marketing-focused product update pages. #### Team Update Feed - **URL**: https://ui.beste.co/block/changelog17 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/changelog17.json"` (Radix: `/r/changelog17.json`) - **Description**: Author-attributed changelog feed with avatars, roles, rich descriptions, change lists, and tags. #### Full-Width Showcase Changelog - **URL**: https://ui.beste.co/block/changelog18 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/changelog18.json"` (Radix: `/r/changelog18.json`) - **Description**: Full-width hero images with rich release content below. Marketing-focused changelog for major product announcements. #### Developer Changelog with Code - **URL**: https://ui.beste.co/block/changelog19 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/changelog19.json"` (Radix: `/r/changelog19.json`) - **Description**: Technical changelog with code blocks showing API changes, migration examples, and usage snippets alongside release notes. #### Roadmap Status Changelog - **URL**: https://ui.beste.co/block/changelog20 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/changelog20.json"` (Radix: `/r/changelog20.json`) - **Description**: Hybrid roadmap and changelog with shipped, in-progress, and planned items. Includes status dots, tags, and optional feature images. #### Kanban Board Changelog - **URL**: https://ui.beste.co/block/changelog21 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/changelog21.json"` (Radix: `/r/changelog21.json`) - **Description**: Three-column kanban board grouping changes by type — Features, Fixes, and Improvements — with stacked cards. #### Terminal Git Log Changelog - **URL**: https://ui.beste.co/block/changelog22 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/changelog22.json"` (Radix: `/r/changelog22.json`) - **Description**: Dark terminal window styled as a git log output with commit hashes, version tags, color-coded change prefixes, and a blinking cursor. #### Striped Table Changelog - **URL**: https://ui.beste.co/block/changelog23 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/changelog23.json"` (Radix: `/r/changelog23.json`) - **Description**: Structured table view with column headers, alternating row backgrounds, color-coded type badges, and optional links. #### Callout Highlight Changelog - **URL**: https://ui.beste.co/block/changelog24 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/changelog24.json"` (Radix: `/r/changelog24.json`) - **Description**: Release feed with prominent callout blocks highlighting the most impactful change per release. #### Newspaper Changelog - **URL**: https://ui.beste.co/block/changelog25 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/changelog25.json"` (Radix: `/r/changelog25.json`) - **Description**: Broadsheet newspaper layout with masthead, featured headline story, sidebar briefs, and numbered patch notes in flowing columns. #### Version Rail Release Timeline - **URL**: https://ui.beste.co/block/changelog26 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/changelog26.json"` (Radix: `/r/changelog26.json`) - **Description**: A release feed with a sticky version rail that filters the list, and hairline entries carrying a version and date line, tone-coded tags, an accent-bulleted highlight list, and an optional release note link. #### Latest Release Spotlight - **URL**: https://ui.beste.co/block/changelog27 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/changelog27.json"` (Radix: `/r/changelog27.json`) - **Description**: A changelog that gives the newest version a split of its own, pairing a checked highlight list and two actions with an image tile floating live post-release figures, over the earlier versions as hairline rows. #### Full Release Notes By Month - **URL**: https://ui.beste.co/block/changelog28 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/changelog28.json"` (Radix: `/r/changelog28.json`) - **Description**: A complete changelog grouped by month, each version on a hairline row beside its entries, every line tagged added, changed, fixed, or removed with its own tone. #### Shipped Building Next Declined - **URL**: https://ui.beste.co/block/changelog29 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/changelog29.json"` (Radix: `/r/changelog29.json`) - **Description**: A roadmap board of four hairline columns carrying state icons, running from what shipped through what is building to what was turned down, crediting the practice that asked where there was one. #### Deprecations And Removals - **URL**: https://ui.beste.co/block/changelog30 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/changelog30.json"` (Radix: `/r/changelog30.json`) - **Description**: A deprecation register listing what is being withdrawn on hairline rows with a tone-coded stage chip, the removal date, how many are still affected, and the replacement, closing on the written notice policy. ### Chat #### Rich Prompt Input with Smart Suggestions - **URL**: https://ui.beste.co/block/chat4 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/chat4.json"` (Radix: `/r/chat4.json`) - **Description**: Sophisticated AI prompt input area with auto-expanding textarea, attachment and image upload buttons, model selector, and a grid of contextual prompt suggestion cards. Inspired by ChatGPT and Claude home screens. #### AI Streaming Response with Live Typing - **URL**: https://ui.beste.co/block/chat5 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/chat5.json"` (Radix: `/r/chat5.json`) - **Description**: Simulated streaming AI response with word-by-word typewriter animation, blinking cursor, skeleton loading state, and stop generating button. Demonstrates real-time AI output patterns. #### AI Response with Cited Sources - **URL**: https://ui.beste.co/block/chat6 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/chat6.json"` (Radix: `/r/chat6.json`) - **Description**: Perplexity-style AI response with inline numbered citation markers, a source panel showing referenced URLs with favicons and titles, and expandable source previews. Perfect for RAG-powered chat applications. #### Code Generation Chat with Syntax Highlighting - **URL**: https://ui.beste.co/block/chat7 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/chat7.json"` (Radix: `/r/chat7.json`) - **Description**: Developer-focused chat interface with syntax-highlighted code blocks, language badges, copy-to-clipboard buttons, and file name tabs. Optimized for code generation and programming assistance. #### AI Prompt Starter Grid - **URL**: https://ui.beste.co/block/chat8 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/chat8.json"` (Radix: `/r/chat8.json`) - **Description**: Beautiful grid of prompt template cards with icons, categories, and descriptions. Features category tabs for filtering and hover animations. Ideal for chat home screens and prompt libraries. #### AI Agent Profile Card - **URL**: https://ui.beste.co/block/chat9 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/chat9.json"` (Radix: `/r/chat9.json`) - **Description**: Showcase card for an AI agent or assistant with avatar, name, description, capability badges, sample conversation preview, stats row, and action buttons. Perfect for agent directories and AI product pages. #### Floating Chat Widget with Expandable Window - **URL**: https://ui.beste.co/block/chat10 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/chat10.json"` (Radix: `/r/chat10.json`) - **Description**: Compact floating chat bubble that expands into a mini chat window. Features smooth expand/collapse animation, pulsing notification dot, and a complete mini chat interface inside. Ideal for customer support overlays. #### Complete AI Chat Interface - **URL**: https://ui.beste.co/block/chat11 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/chat11.json"` (Radix: `/r/chat11.json`) - **Description**: Full-featured chatbot window with message thread, AI and user avatars, timestamp display, typing indicator, and rich input area with send button. Suitable as the primary chat experience. #### Conversational Thread with Reactions - **URL**: https://ui.beste.co/block/chat12 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/chat12.json"` (Radix: `/r/chat12.json`) - **Description**: Chat message thread with rich formatting, copy and thumbs-up/down action buttons on AI messages, and time-grouped message sections. Features hover-revealed action bars and smooth animations. #### AI Reasoning Steps with Collapsible Thinking - **URL**: https://ui.beste.co/block/chat13 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/chat13.json"` (Radix: `/r/chat13.json`) - **Description**: Claude-style thinking and reasoning display with collapsible thought process sections, numbered step indicators, elapsed time badges, and a polished final answer below. #### Side-by-Side AI Model Comparison - **URL**: https://ui.beste.co/block/chat14 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/chat14.json"` (Radix: `/r/chat14.json`) - **Description**: Compare responses from two different AI models side by side. Features a shared prompt input, dual response panels with model badges, and rating buttons for each response. #### Chat with Image Attachments - **URL**: https://ui.beste.co/block/chat15 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/chat15.json"` (Radix: `/r/chat15.json`) - **Description**: Chat interface with image attachment previews, file upload indicators, and image gallery display within messages. Supports both user-uploaded images and AI-generated image responses. #### Multi-Agent Chat with Personas - **URL**: https://ui.beste.co/block/chat16 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/chat16.json"` (Radix: `/r/chat16.json`) - **Description**: Chat interface featuring multiple AI agents with distinct personas, colored avatars, and role badges. Each agent has a unique personality and expertise area, creating a panel discussion experience. #### AI Search Hero - **URL**: https://ui.beste.co/block/chat17 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/chat17.json"` (Radix: `/r/chat17.json`) - **Description**: Centered hero section with a prominent AI search/prompt input bar and clickable suggestion pills. Perfect for AI product landing pages inspired by ChatGPT and Perplexity. #### AI Prompt Hero with Stats - **URL**: https://ui.beste.co/block/chat18 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/chat18.json"` (Radix: `/r/chat18.json`) - **Description**: Landing page hero with a prominent AI prompt input, trust stats bar, and a grid of popular prompt example cards. Designed for AI product homepages. #### AI Use Case Tabs - **URL**: https://ui.beste.co/block/chat19 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/chat19.json"` (Radix: `/r/chat19.json`) - **Description**: Tabbed showcase section where each tab displays a different AI use case with a prompt and response preview. Demonstrates AI versatility for landing pages. #### AI Prompt Playground Hero - **URL**: https://ui.beste.co/block/chat20 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/chat20.json"` (Radix: `/r/chat20.json`) - **Description**: Two-column hero with marketing copy on the left and an interactive prompt playground on the right. Users can type or click example prompts to see mock AI responses. #### AI Capabilities Feature Grid - **URL**: https://ui.beste.co/block/chat21 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/chat21.json"` (Radix: `/r/chat21.json`) - **Description**: Feature grid section showcasing AI capabilities. Each card includes an icon, title, description, and a mini chat bubble preview demonstrating the capability. #### Member Inbox And Thread - **URL**: https://ui.beste.co/block/chat22 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/chat22.json"` (Radix: `/r/chat22.json`) - **Description**: A two-pane messaging panel: a selectable conversation list with unread dots on the left, and the chosen thread on the right with member and staff bubbles, timestamps, and a composer row. #### Messaging Overview Split - **URL**: https://ui.beste.co/block/chat23 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/chat23.json"` (Radix: `/r/chat23.json`) - **Description**: A messaging section pairing a light heading, a hairline table of response figures, and two actions with an image tile that floats a live conversation thread. #### Support Channels Grid - **URL**: https://ui.beste.co/block/chat24 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/chat24.json"` (Radix: `/r/chat24.json`) - **Description**: A support section listing four linked contact channels as a hairline matrix, each with an icon tile, its response time, and its hours, beside a soft panel floating a live card for whoever is on shift. #### Ask Your Data Spotlight - **URL**: https://ui.beste.co/block/chat25 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/chat25.json"` (Radix: `/r/chat25.json`) - **Description**: An assistant section where question pills swap the image tile beneath them, each floating a live answer card that cites the records it read, closing on three hairline guarantees and one action. #### Shared Inbox Triage - **URL**: https://ui.beste.co/block/chat26 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/chat26.json"` (Radix: `/r/chat26.json`) - **Description**: A shared inbox laid out as hairline rows carrying the member, the subject, an assignee avatar, how long they have waited, and a tone-coded status pill, filtered by status chips with live counts. #### Inverted Out Of Hours Panel - **URL**: https://ui.beste.co/block/chat27 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/chat27.json"` (Radix: `/r/chat27.json`) - **Description**: A support section built as one dark panel, with a light heading, three hairline promises about who answers, two actions, and a bordered column floating a live on-call conversation. #### Conversation Handover Trail - **URL**: https://ui.beste.co/block/chat28 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/chat28.json"` (Radix: `/r/chat28.json`) - **Description**: One member conversation walked through as timestamped hairline rows inside a bordered panel, each naming what happened and either the person who picked it up or the step that ran on its own. #### Saved Reply Library - **URL**: https://ui.beste.co/block/chat29 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/chat29.json"` (Radix: `/r/chat29.json`) - **Description**: A messaging section where a hairline list of saved replies, each with what it is for and how often it is used, swaps a bordered preview card showing the message and the fields it fills in from the record. #### Message Automation Rules - **URL**: https://ui.beste.co/block/chat30 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/chat30.json"` (Radix: `/r/chat30.json`) - **Description**: An automation section listing each trigger against the message it sends on hairline rows with live switches, striking through the volume of any rule turned off and totalling the rest in a soft summary panel. #### Two Sides Of One Conversation - **URL**: https://ui.beste.co/block/chat31 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/chat31.json"` (Radix: `/r/chat31.json`) - **Description**: A messaging section splitting a hairline matrix between the staff view and the member view, each half floating its own live asset above a title and a list of what that side gets. ### Coming Soon #### Countdown Timer Launch - **URL**: https://ui.beste.co/block/comingsoon1 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon1.json"` (Radix: `/r/comingsoon1.json`) - **Description**: Coming soon section with a live countdown timer showing days, hours, minutes, and seconds until launch. Perfect for product launches, event announcements, or building anticipation for new features. #### Development Progress Milestones - **URL**: https://ui.beste.co/block/comingsoon2 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon2.json"` (Radix: `/r/comingsoon2.json`) - **Description**: Coming soon section with a progress bar and milestone tracker showing development stages like Design, Backend, Frontend, and Testing. Perfect for keeping users informed about product development progress. #### Social Connect Launch - **URL**: https://ui.beste.co/block/comingsoon3 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon3.json"` (Radix: `/r/comingsoon3.json`) - **Description**: Coming soon section featuring social media links with icons for Twitter, GitHub, LinkedIn, and Email in pill-style buttons. Perfect for building a community and keeping followers engaged before launch. #### Animated Icons Preview - **URL**: https://ui.beste.co/block/comingsoon4 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon4.json"` (Radix: `/r/comingsoon4.json`) - **Description**: Coming soon section with floating animated icons and a pulsing status indicator using Framer Motion animations. Perfect for creating visual excitement and a dynamic atmosphere before a product launch. #### Sneak Peek Feature Grid - **URL**: https://ui.beste.co/block/comingsoon5 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon5.json"` (Radix: `/r/comingsoon5.json`) - **Description**: Coming soon section with a grid of blurred sneak-peek feature cards and lock overlays that tease upcoming features. Perfect for building anticipation by showing what's coming without revealing full details. #### Waitlist with Avatars - **URL**: https://ui.beste.co/block/comingsoon6 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon6.json"` (Radix: `/r/comingsoon6.json`) - **Description**: Coming soon section with an email waitlist input, stacked subscriber avatars, and a live join count. Perfect for building early traction and social proof before launch. #### Launch Roadmap Timeline - **URL**: https://ui.beste.co/block/comingsoon7 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon7.json"` (Radix: `/r/comingsoon7.json`) - **Description**: Coming soon section with a vertical timeline showing launch phases, dates, and status indicators. Perfect for communicating a clear release plan and keeping users informed about upcoming milestones. #### Readiness Status Dashboard - **URL**: https://ui.beste.co/block/comingsoon8 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon8.json"` (Radix: `/r/comingsoon8.json`) - **Description**: Coming soon section with a status dashboard displaying service readiness with color-coded indicators for ready, in-progress, and planned states. Perfect for transparent launch communication. #### Bento Stats Dashboard - **URL**: https://ui.beste.co/block/comingsoon9 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon9.json"` (Radix: `/r/comingsoon9.json`) - **Description**: Coming soon section with a bento-grid of live build stats like commits, test coverage, uptime, and team size. Perfect for building in public with transparent engineering metrics. #### Dev Log Feed - **URL**: https://ui.beste.co/block/comingsoon10 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon10.json"` (Radix: `/r/comingsoon10.json`) - **Description**: Coming soon section with a chronological development log feed showing recent updates, commits, and milestones. Perfect for building in public and keeping the community engaged. #### Notification Channel Picker - **URL**: https://ui.beste.co/block/comingsoon11 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon11.json"` (Radix: `/r/comingsoon11.json`) - **Description**: Coming soon section with selectable notification channel cards for email, Slack, Twitter, and more. Perfect for letting users choose how they want to be notified at launch. #### Before vs After Comparison - **URL**: https://ui.beste.co/block/comingsoon12 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon12.json"` (Radix: `/r/comingsoon12.json`) - **Description**: Coming soon section with a side-by-side comparison table showing current limitations versus upcoming improvements. Perfect for SaaS upgrades and product relaunches. #### Launch FAQ Accordion - **URL**: https://ui.beste.co/block/comingsoon13 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon13.json"` (Radix: `/r/comingsoon13.json`) - **Description**: Coming soon section with an expandable FAQ accordion addressing common questions about the upcoming launch. Perfect for reducing pre-launch support queries and building user confidence. #### Early Access Tiers - **URL**: https://ui.beste.co/block/comingsoon14 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon14.json"` (Radix: `/r/comingsoon14.json`) - **Description**: Coming soon section with tiered early access plans showing benefits, features, and availability for each level. Perfect for building a monetized waitlist with founding member perks. #### Waitlist Coming Soon - **URL**: https://ui.beste.co/block/comingsoon15 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon15.json"` (Radix: `/r/comingsoon15.json`) - **Description**: A centered pre-launch section with an eyebrow, a large light heading, a paragraph, an image tile holding a working email-capture form with a success state, and a social-proof note. #### Image Split Waitlist - **URL**: https://ui.beste.co/block/comingsoon16 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon16.json"` (Radix: `/r/comingsoon16.json`) - **Description**: A two-column pre-launch section with a monospace parenthetical eyebrow, an oversized headline, a working rounded email-capture form with a success state, an avatar social-proof row, and a tall full-bleed image carrying a floating launch label. #### Waitlist Queue Position - **URL**: https://ui.beste.co/block/comingsoon17 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon17.json"` (Radix: `/r/comingsoon17.json`) - **Description**: A centered post-signup confirmation card on a soft muted surface with a monospace parenthetical eyebrow, an oversized queue-position number, a progress-to-front bar, and a referral row with a copy-invite pill button. #### Launch Season Reveal - **URL**: https://ui.beste.co/block/comingsoon18 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon18.json"` (Radix: `/r/comingsoon18.json`) - **Description**: A full-bleed image pre-launch hero with a dark overlay, a monospace parenthetical eyebrow, a small kicker, an oversized launch-date headline, a supporting line, and a light outline pill notify button. #### Pre-Launch Manifesto - **URL**: https://ui.beste.co/block/comingsoon19 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon19.json"` (Radix: `/r/comingsoon19.json`) - **Description**: A pre-launch manifesto section on a soft muted card with a monospace parenthetical eyebrow, a large statement heading, and a three-column ruled list of numbered building principles above a follow-along pill button. #### Maintenance Back Soon - **URL**: https://ui.beste.co/block/comingsoon20 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon20.json"` (Radix: `/r/comingsoon20.json`) - **Description**: A centered scheduled-maintenance section with a pulsing status dot, a monospace parenthetical eyebrow, a large heading, a reassuring paragraph, a ruled key-value list of status details, and a status-page pill button. #### Waitlist Signup Counter - **URL**: https://ui.beste.co/block/comingsoon21 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon21.json"` (Radix: `/r/comingsoon21.json`) - **Description**: A centered waitlist section with a square eyebrow, a bold accent-highlighted heading, a working rounded email-capture form with a success state, and an avatar row with a live signup counter. #### Coming Soon Notify Page - **URL**: https://ui.beste.co/block/comingsoon22 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon22.json"` (Radix: `/r/comingsoon22.json`) - **Description**: A centered coming-soon launch page with a brand wordmark, a square eyebrow, an accent-highlighted heading, a working email notify form with a success state, a launch note, and a row of social links. #### Founding Member Offer - **URL**: https://ui.beste.co/block/comingsoon23 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon23.json"` (Radix: `/r/comingsoon23.json`) - **Description**: A bordered pre-launch offer card with a square eyebrow, a heading, a checked benefit list, a seats-claimed progress bar, and a working rounded email-capture form with a success state. #### Mobile App Pre-Register - **URL**: https://ui.beste.co/block/comingsoon24 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon24.json"` (Radix: `/r/comingsoon24.json`) - **Description**: A two-column mobile-app pre-launch section with a square eyebrow, a heading, platform chips, and a dark seal pre-register button beside a portrait app preview tile carrying a floating pre-registration counter. #### Launch Day Announcement - **URL**: https://ui.beste.co/block/comingsoon25 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon25.json"` (Radix: `/r/comingsoon25.json`) - **Description**: An editorial launch-date announcement with a square eyebrow, a kicker, an oversized date headline paired with a supporting note and a dark seal remind-me button, above a three-column ruled list of launch facts. #### Countdown Studio Card - **URL**: https://ui.beste.co/block/comingsoon26 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon26.json"` (Radix: `/r/comingsoon26.json`) - **Description**: A pre-launch countdown on a soft muted card with a monospace parenthetical eyebrow, a bold wordmark, a heading, a live four-unit ruled countdown to a target date, and a reserve-seat pill button. #### Launch Roadmap Columns - **URL**: https://ui.beste.co/block/comingsoon27 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon27.json"` (Radix: `/r/comingsoon27.json`) - **Description**: A pre-launch roadmap laid out as three now-next-later columns with a monospace parenthetical eyebrow, a heading and changelog pill button on top, and ruled entry lists under each column header. #### Early Tester Quote - **URL**: https://ui.beste.co/block/comingsoon28 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon28.json"` (Radix: `/r/comingsoon28.json`) - **Description**: A quote-led pre-launch section on a soft muted card with a monospace parenthetical eyebrow, a large early-tester pull quote, an author row with avatar, and an invite pill button with a supporting note. #### Upcoming Writing Grid - **URL**: https://ui.beste.co/block/comingsoon29 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon29.json"` (Radix: `/r/comingsoon29.json`) - **Description**: A newsletter-forward pre-launch section with a monospace parenthetical eyebrow, a heading and subscribe pill button on top, and a three-card grid of upcoming articles each with a kind label, title, and summary. #### Interest Selector Waitlist - **URL**: https://ui.beste.co/block/comingsoon30 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon30.json"` (Radix: `/r/comingsoon30.json`) - **Description**: A centered full-bleed image waitlist section with a dark overlay and light text, a monospace parenthetical eyebrow, a heading, a set of toggleable interest chips, and a working rounded email-capture form with a success state. #### Typographic Wordmark - **URL**: https://ui.beste.co/block/comingsoon31 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon31.json"` (Radix: `/r/comingsoon31.json`) - **Description**: A monumental full-bleed image pre-launch statement with a dark overlay, a monospace parenthetical eyebrow, an oversized centered wordmark, a single supporting tagline, and a light outline notify pill button. #### Trusted By Waitlist - **URL**: https://ui.beste.co/block/comingsoon32 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon32.json"` (Radix: `/r/comingsoon32.json`) - **Description**: A centered pre-launch section with a monospace parenthetical eyebrow, a statement heading, a supporting paragraph, a waitlist pill button, and a captioned grayscale logo strip of early partners. #### Video Teaser Reveal - **URL**: https://ui.beste.co/block/comingsoon33 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon33.json"` (Radix: `/r/comingsoon33.json`) - **Description**: A full-bleed image pre-launch teaser with a dark overlay, a monospace parenthetical eyebrow, a central play button that opens the teaser video in a modal, a heading and supporting line, and a light outline waitlist pill button. #### Invite Code Access - **URL**: https://ui.beste.co/block/comingsoon34 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon34.json"` (Radix: `/r/comingsoon34.json`) - **Description**: An invite-only pre-launch card on a soft muted surface with a monospace parenthetical eyebrow, a heading, a working invite-code redemption form with a success state, and a fallback waitlist pill button. #### Add To Calendar Reminder - **URL**: https://ui.beste.co/block/comingsoon35 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon35.json"` (Radix: `/r/comingsoon35.json`) - **Description**: A centered launch-reminder section with a monospace parenthetical eyebrow, a kicker, an oversized launch-date heading, a supporting line, an add-to-calendar pill button, and a row of calendar-provider links. #### Countdown Clock Waitlist - **URL**: https://ui.beste.co/block/comingsoon36 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon36.json"` (Radix: `/r/comingsoon36.json`) - **Description**: A centered pre-launch section with a square eyebrow, an accent-highlighted heading, a large colon-separated live countdown clock, a working email-capture form with a success state, and an avatar social-proof row. #### Referral Leaderboard - **URL**: https://ui.beste.co/block/comingsoon37 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon37.json"` (Radix: `/r/comingsoon37.json`) - **Description**: A pre-launch referral leaderboard with a square eyebrow, a heading, and a bordered ranked list of members with avatars and invite counts, one row highlighted as the viewer, above a dark seal share button. #### Private Beta Apply - **URL**: https://ui.beste.co/block/comingsoon38 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon38.json"` (Radix: `/r/comingsoon38.json`) - **Description**: A two-column private-beta section with a square eyebrow, a heading, a supporting paragraph, and a dark seal apply button beside a bordered card listing accent-checked tester benefits. #### Feature Voting Roadmap - **URL**: https://ui.beste.co/block/comingsoon39 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon39.json"` (Radix: `/r/comingsoon39.json`) - **Description**: A pre-launch feature-voting section with a centered square eyebrow and heading, and a list of upcoming feature cards each with a title, description, and an interactive upvote control that updates the count. #### New Location Opening - **URL**: https://ui.beste.co/block/comingsoon40 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon40.json"` (Radix: `/r/comingsoon40.json`) - **Description**: A two-column location-launch section with an accent-badged image tile beside a square eyebrow, a city heading, a supporting line, a ruled details grid of opening facts, and a dark seal notify button. #### Pricing Plan Explorer - **URL**: https://ui.beste.co/block/comingsoon41 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon41.json"` (Radix: `/r/comingsoon41.json`) - **Description**: An interactive pricing-preview section with a centered square eyebrow and heading, a plan switcher that swaps a detail card showing a locked blurred price, accent-checked features, and a dark seal notify button. #### Podcast Launch Teaser - **URL**: https://ui.beste.co/block/comingsoon42 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon42.json"` (Radix: `/r/comingsoon42.json`) - **Description**: A two-column podcast-launch section with an accent-badged square cover image beside a square eyebrow, show title, description, a dark seal subscribe button, platform links, and a ruled list of first episodes. #### Survey Waitlist - **URL**: https://ui.beste.co/block/comingsoon43 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon43.json"` (Radix: `/r/comingsoon43.json`) - **Description**: A pre-launch survey card with a square eyebrow, a heading, a single-choice question with selectable radio options, and a working rounded email-capture form with a success state. #### Founder Note Waitlist - **URL**: https://ui.beste.co/block/comingsoon44 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon44.json"` (Radix: `/r/comingsoon44.json`) - **Description**: A personal pre-launch section with a square eyebrow, a statement heading, a short founder note in paragraphs, and a signature row with avatar beside a dark seal waitlist button. #### Animated Waitlist Stats - **URL**: https://ui.beste.co/block/comingsoon45 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon45.json"` (Radix: `/r/comingsoon45.json`) - **Description**: A centered pre-launch section with a square eyebrow, a heading, a supporting line, a row of accent statistics that count up when scrolled into view, and a dark seal claim-seat button. #### Split Screen Launch - **URL**: https://ui.beste.co/block/comingsoon46 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon46.json"` (Radix: `/r/comingsoon46.json`) - **Description**: A full-height split coming-soon page with a dark brand panel carrying a wordmark, a monospace parenthetical eyebrow, a heading and a working email notify form, beside a full-bleed image with a floating launch label. #### Marquee Launch Hero - **URL**: https://ui.beste.co/block/comingsoon47 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon47.json"` (Radix: `/r/comingsoon47.json`) - **Description**: A coming-soon hero with an oversized looping background marquee behind a centered monospace parenthetical eyebrow, a bold wordmark, a tagline, and a working email notify form with a success state. #### Bento Launch Grid - **URL**: https://ui.beste.co/block/comingsoon48 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon48.json"` (Radix: `/r/comingsoon48.json`) - **Description**: A coming-soon bento grid with a large panel holding a wordmark, a monospace parenthetical eyebrow, a heading and a working email notify form, an image tile, and a dark social-proof tile with an avatar stack and waitlist count. #### Framed Editorial Launch - **URL**: https://ui.beste.co/block/comingsoon49 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon49.json"` (Radix: `/r/comingsoon49.json`) - **Description**: A two-column coming-soon section with a vertical monospace edge label, an oversized wordmark, a tagline and a working email notify form, beside a framed portrait image tile. #### Launch Readiness Progress - **URL**: https://ui.beste.co/block/comingsoon50 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon50.json"` (Radix: `/r/comingsoon50.json`) - **Description**: A coming-soon section on a soft muted card with a monospace parenthetical eyebrow, a heading, a launch-readiness percentage that counts up with an animated progress bar, a build-status row, and a working email notify form. #### Launch Pass Ticket - **URL**: https://ui.beste.co/block/comingsoon51 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon51.json"` (Radix: `/r/comingsoon51.json`) - **Description**: A coming-soon section styled as a launch pass ticket with a square eyebrow, a heading and a working email notify form on the main stub, and a perforated tear-off stub carrying an admit-one tag, a barcode, and a pass code. #### Image Mosaic Notify - **URL**: https://ui.beste.co/block/comingsoon52 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon52.json"` (Radix: `/r/comingsoon52.json`) - **Description**: A coming-soon section with a full-bleed image mosaic background under a dark overlay and a centered card holding a square eyebrow, a heading, a description, and a working email notify form with a success state. #### Next Issue Magazine - **URL**: https://ui.beste.co/block/comingsoon53 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon53.json"` (Radix: `/r/comingsoon53.json`) - **Description**: A two-column coming-soon section styled as a magazine launch with an accent-badged cover image, a masthead, a square eyebrow, a heading, a numbered contents list, and a working email subscribe form. #### Locked Product Preview - **URL**: https://ui.beste.co/block/comingsoon54 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon54.json"` (Radix: `/r/comingsoon54.json`) - **Description**: A two-column coming-soon section with a square eyebrow, a heading and a working email notify form, beside a browser-window mockup showing a blurred, lock-badged product preview. #### Image Notify Bar - **URL**: https://ui.beste.co/block/comingsoon55 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon55.json"` (Radix: `/r/comingsoon55.json`) - **Description**: A full-bleed image coming-soon hero with a bottom gradient and light text, a square eyebrow, a large heading and a supporting line, beside a solid notify card holding a working email form with a success state. #### Restaurant Opening Soon - **URL**: https://ui.beste.co/block/comingsoon56 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon56.json"` (Radix: `/r/comingsoon56.json`) - **Description**: A hospitality coming-soon section with an interior image beside a venue name, a square eyebrow, a heading, an opening details grid with icons, and a working email list form with a success state. #### Event Tickets Coming Soon - **URL**: https://ui.beste.co/block/comingsoon57 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon57.json"` (Radix: `/r/comingsoon57.json`) - **Description**: An event coming-soon section with a square eyebrow, an event name and heading, a date and venue meta row with icons, a working ticket-alert email form, and a speaker avatar row. #### Store Drop Coming Soon - **URL**: https://ui.beste.co/block/comingsoon58 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon58.json"` (Radix: `/r/comingsoon58.json`) - **Description**: An e-commerce coming-soon section with a square eyebrow, a heading, a drop-date card, a grid of product teaser cards with blurred prices, and a working email notify form with a success state. #### App Waitlist Split - **URL**: https://ui.beste.co/block/comingsoon59 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon59.json"` (Radix: `/r/comingsoon59.json`) - **Description**: An app pre-launch split card with a muted panel holding a wordmark, a monospace parenthetical eyebrow, a heading, a working email waitlist form and platform chips, beside a full-bleed image covering the other half. #### Portfolio Under Construction - **URL**: https://ui.beste.co/block/comingsoon60 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon60.json"` (Radix: `/r/comingsoon60.json`) - **Description**: A personal coming-soon page with a monospace parenthetical eyebrow, an oversized name, a role and tagline, an email contact pill button, a row of social links, and an availability status line. #### Community Launch Waitlist - **URL**: https://ui.beste.co/block/comingsoon61 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon61.json"` (Radix: `/r/comingsoon61.json`) - **Description**: A community coming-soon section on a soft muted card with a monospace parenthetical eyebrow, a heading, a working email waitlist form, a secondary outline community pill button, and an avatar row with a member count. #### Course Enrollment Waitlist - **URL**: https://ui.beste.co/block/comingsoon62 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon62.json"` (Radix: `/r/comingsoon62.json`) - **Description**: An education coming-soon section with a square eyebrow, a course heading, a start/length/format details grid, a working waitlist email form, and a syllabus card listing numbered lessons. #### Product Pre-Order Teaser - **URL**: https://ui.beste.co/block/comingsoon63 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon63.json"` (Radix: `/r/comingsoon63.json`) - **Description**: A product launch coming-soon section with a full-height product image beside a monospace parenthetical eyebrow, a product name, a tagline, a ship date, a working notify email form, and a spec grid. #### Under Construction Contact - **URL**: https://ui.beste.co/block/comingsoon64 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon64.json"` (Radix: `/r/comingsoon64.json`) - **Description**: A B2B coming-soon section with a studio name, a square eyebrow, a heading, an icon contact-details list, and a working name, email, and message contact form with a success state. #### What Happens Next Waitlist - **URL**: https://ui.beste.co/block/comingsoon65 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon65.json"` (Radix: `/r/comingsoon65.json`) - **Description**: A waitlist coming-soon section with a monospace parenthetical eyebrow, a heading, a working email notify form, and a three-step numbered process explaining what happens after signing up. #### Property Register Interest - **URL**: https://ui.beste.co/block/comingsoon66 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon66.json"` (Radix: `/r/comingsoon66.json`) - **Description**: A real-estate coming-soon section with an accent-badged development image beside a project name, a square eyebrow, a heading, a key-facts grid, and a working register-interest email form. #### Fitness Studio Founding List - **URL**: https://ui.beste.co/block/comingsoon67 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon67.json"` (Radix: `/r/comingsoon67.json`) - **Description**: A fitness coming-soon section with a studio name, a square eyebrow, a heading and a working founding-membership email form, beside a card previewing a week of the class schedule. #### Album Release Pre-Order - **URL**: https://ui.beste.co/block/comingsoon68 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon68.json"` (Radix: `/r/comingsoon68.json`) - **Description**: A music release coming-soon section with a square cover image beside an artist name, a monospace parenthetical eyebrow, a title, a release date, a working pre-order email form, and a numbered tracklist. #### Careers Job Alerts - **URL**: https://ui.beste.co/block/comingsoon69 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon69.json"` (Radix: `/r/comingsoon69.json`) - **Description**: A hiring coming-soon section with a centered square eyebrow and heading, a working job-alert email form, and a list of upcoming roles with team and employment type. #### Newsletter Sample Issues - **URL**: https://ui.beste.co/block/comingsoon70 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon70.json"` (Radix: `/r/comingsoon70.json`) - **Description**: A newsletter coming-soon section with a centered monospace parenthetical eyebrow, a heading, a working subscribe email form, and a three-card grid previewing upcoming issues. #### Referral Rewards Tiers - **URL**: https://ui.beste.co/block/comingsoon71 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon71.json"` (Radix: `/r/comingsoon71.json`) - **Description**: A referral coming-soon section with a centered square eyebrow and heading, a referral progress bar, a list of reward tiers with locked and unlocked states, and a dark seal share button. #### Exhibition Opening RSVP - **URL**: https://ui.beste.co/block/comingsoon72 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon72.json"` (Radix: `/r/comingsoon72.json`) - **Description**: An art exhibition coming-soon section with an artwork image beside a monospace parenthetical eyebrow, a show title, an artist line, a preview and dates list, and a working RSVP email form. #### Sign The Wall Waitlist - **URL**: https://ui.beste.co/block/comingsoon73 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon73.json"` (Radix: `/r/comingsoon73.json`) - **Description**: An interactive waitlist coming-soon section with a monospace parenthetical eyebrow, a heading, a name and email form, and a live wall of member name chips that prepends your own entry on submit. #### Version Two Relaunch - **URL**: https://ui.beste.co/block/comingsoon74 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon74.json"` (Radix: `/r/comingsoon74.json`) - **Description**: A relaunch coming-soon section with a centered square eyebrow and heading, a working early-access email form, and a grid of what's-new feature cards with icons. #### Launch Party RSVP - **URL**: https://ui.beste.co/block/comingsoon75 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon75.json"` (Radix: `/r/comingsoon75.json`) - **Description**: A launch-event coming-soon section on a soft muted card with a monospace parenthetical eyebrow, a heading, a when and where row, a working RSVP email form, an outline add-to-calendar pill button, and an attendee avatar row. #### Coming Soon Client Marquee - **URL**: https://ui.beste.co/block/comingsoon76 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon76.json"` (Radix: `/r/comingsoon76.json`) - **Description**: A client wall with the clients withheld. Instead of logos, an oversized ghost-type marquee repeats a coming soon label behind edge fades, under a centered eyebrow, heading and note, with scroll direction and speed as props. #### Full-Bleed Launch Countdown - **URL**: https://ui.beste.co/block/comingsoon77 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon77.json"` (Radix: `/r/comingsoon77.json`) - **Description**: A pre-launch section on a full-bleed photograph under a dark gradient, with a light display heading, four oversized countdown figures between hairline rules, and a working email capture card. #### Public Roadmap Coming Soon - **URL**: https://ui.beste.co/block/comingsoon78 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon78.json"` (Radix: `/r/comingsoon78.json`) - **Description**: A pre-launch section that publishes remaining work instead of a date, with an image tile floating a live release tracker over hairline rows marked shipped, in testing, or queued. #### Maintenance Window Notice - **URL**: https://ui.beste.co/block/comingsoon79 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/comingsoon79.json"` (Radix: `/r/comingsoon79.json`) - **Description**: A scheduled downtime notice with a light heading, a hairline table of what is affected and what is not, two actions, and an image tile floating a live uptime strip. ### Crypto #### Token Price Hero - **URL**: https://ui.beste.co/block/crypto1 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/crypto1.json"` (Radix: `/r/crypto1.json`) - **Description**: Hero section with token price card showing live market stats. Price change indicator, market cap, volume, and circulating supply grid. Trending up/down icons. #### DAO Governance Proposals - **URL**: https://ui.beste.co/block/crypto24 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/crypto24.json"` (Radix: `/r/crypto24.json`) - **Description**: Governance proposal cards with for/against vote bars and quorum progress. Status badges (active, passed, rejected), countdown timers, and proposer addresses. #### Airdrop Claim Card - **URL**: https://ui.beste.co/block/crypto29 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/crypto29.json"` (Radix: `/r/crypto29.json`) - **Description**: Token airdrop claim interface with eligibility checklist. Shows allocation amount, criteria met count, expiration timer, and claim button with wallet connection. #### Contract Address List - **URL**: https://ui.beste.co/block/crypto35 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/crypto35.json"` (Radix: `/r/crypto35.json`) - **Description**: Smart contract addresses with copy-to-clipboard and explorer link buttons. Verified badge indicator, chain name, and truncated addresses with monospace font. ### CTA #### Centered Newsletter CTA - **URL**: https://ui.beste.co/block/cta8 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta8.json"` (Radix: `/r/cta8.json`) - **Description**: Minimal centered call-to-action with heading, description, and action buttons. Perfect for newsletter signups and conversion sections. #### Split Layout Newsletter CTA - **URL**: https://ui.beste.co/block/cta9 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta9.json"` (Radix: `/r/cta9.json`) - **Description**: Two-column call-to-action with decorative image on one side and feature list with action buttons on the other. Perfect for visually rich conversion sections. #### Newsletter CTA with Social Proof - **URL**: https://ui.beste.co/block/cta10 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta10.json"` (Radix: `/r/cta10.json`) - **Description**: Call-to-action with avatar stack, subscriber count, and testimonial quote for building trust and boosting conversions. #### Banner CTA - **URL**: https://ui.beste.co/block/cta11 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta11.json"` (Radix: `/r/cta11.json`) - **Description**: Horizontal banner call-to-action with heading and action buttons side by side. Perfect for inline conversion sections between content blocks. #### Stats CTA - **URL**: https://ui.beste.co/block/cta12 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta12.json"` (Radix: `/r/cta12.json`) - **Description**: Call-to-action section with impressive statistics and trust indicators above action buttons. Perfect for data-driven conversion sections. #### Multi-Card CTA - **URL**: https://ui.beste.co/block/cta13 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta13.json"` (Radix: `/r/cta13.json`) - **Description**: Multiple action cards with different tiers or options side by side. Perfect for offering multiple paths like free trial, demo booking, and enterprise contact. #### Checklist CTA - **URL**: https://ui.beste.co/block/cta14 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta14.json"` (Radix: `/r/cta14.json`) - **Description**: Call-to-action with a vertical list of benefit checkmarks and action buttons. Perfect for highlighting value propositions before conversion. #### Minimal CTA - **URL**: https://ui.beste.co/block/cta15 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta15.json"` (Radix: `/r/cta15.json`) - **Description**: Ultra-minimal call-to-action with a single bold heading and action button. Perfect for clean, distraction-free conversion sections. #### Logo Cloud CTA - **URL**: https://ui.beste.co/block/cta16 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta16.json"` (Radix: `/r/cta16.json`) - **Description**: Call-to-action with trusted-by logo cloud and action buttons. Perfect for building credibility with brand recognition before conversion. #### Split Comparison CTA - **URL**: https://ui.beste.co/block/cta17 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta17.json"` (Radix: `/r/cta17.json`) - **Description**: Side-by-side comparison cards showing before and after or free vs pro tiers with action buttons. Perfect for upgrade and upsell sections. #### Fullwidth Image CTA - **URL**: https://ui.beste.co/block/cta18 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta18.json"` (Radix: `/r/cta18.json`) - **Description**: Full-width call-to-action with background image overlay, heading, and action buttons. Perfect for bold, visually striking conversion sections. #### Steps CTA - **URL**: https://ui.beste.co/block/cta19 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta19.json"` (Radix: `/r/cta19.json`) - **Description**: Three-step process visualization with numbered steps and call-to-action. Perfect for showing how easy it is to get started. #### Quote-Led CTA - **URL**: https://ui.beste.co/block/cta20 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta20.json"` (Radix: `/r/cta20.json`) - **Description**: Large testimonial quote as the hero element with call-to-action buttons below. Perfect for social proof driven conversion. #### Notification CTA - **URL**: https://ui.beste.co/block/cta21 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta21.json"` (Radix: `/r/cta21.json`) - **Description**: Compact notification-style call-to-action card with icon, message, and inline action button. Perfect for subtle inline conversion prompts. #### Highlight Card CTA - **URL**: https://ui.beste.co/block/cta22 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta22.json"` (Radix: `/r/cta22.json`) - **Description**: Card-style call-to-action with value-driven highlight metrics in a bordered grid. Perfect for data-backed conversion sections. #### Two-Tier CTA - **URL**: https://ui.beste.co/block/cta23 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta23.json"` (Radix: `/r/cta23.json`) - **Description**: Stacked two-tier call-to-action with primary offer on top and secondary alternative below, separated by a divider. Perfect for presenting main and fallback conversion paths. #### Split Text CTA - **URL**: https://ui.beste.co/block/cta24 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta24.json"` (Radix: `/r/cta24.json`) - **Description**: Asymmetric two-column layout with large heading on the left and description with buttons on the right. Perfect for editorial-style conversion sections. #### Testimonial Grid CTA - **URL**: https://ui.beste.co/block/cta25 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta25.json"` (Radix: `/r/cta25.json`) - **Description**: Grid of short testimonial quotes with centered call-to-action below. Perfect for social proof driven conversion. #### Countdown CTA - **URL**: https://ui.beste.co/block/cta26 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta26.json"` (Radix: `/r/cta26.json`) - **Description**: Urgency-driven call-to-action with countdown numbers and limited-time offer messaging. Perfect for launches and time-sensitive promotions. #### Pill Tags CTA - **URL**: https://ui.beste.co/block/cta27 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta27.json"` (Radix: `/r/cta27.json`) - **Description**: Call-to-action with scattered topic pills and tags showing what subscribers receive. Perfect for newsletter and content subscription sections. #### Big Number CTA - **URL**: https://ui.beste.co/block/cta28 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta28.json"` (Radix: `/r/cta28.json`) - **Description**: Single massive statistic as the visual centerpiece with supporting text and action buttons. Perfect for impact-driven conversion sections. #### Dual CTA - **URL**: https://ui.beste.co/block/cta29 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta29.json"` (Radix: `/r/cta29.json`) - **Description**: Two equal side-by-side call-to-action cards offering different paths. Perfect for segmenting audiences like developers vs designers or free vs paid. #### FAQ Inline CTA - **URL**: https://ui.beste.co/block/cta30 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta30.json"` (Radix: `/r/cta30.json`) - **Description**: Expandable FAQ questions paired with an inline call-to-action. Perfect for addressing objections before conversion. #### Newsletter Preview CTA - **URL**: https://ui.beste.co/block/cta31 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta31.json"` (Radix: `/r/cta31.json`) - **Description**: Preview card showing a sample newsletter issue with subscribe call-to-action. Perfect for giving visitors a taste of content before subscribing. #### Metric Bars CTA - **URL**: https://ui.beste.co/block/cta32 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta32.json"` (Radix: `/r/cta32.json`) - **Description**: Horizontal progress bars with metric labels showing platform performance alongside call-to-action. Perfect for data-driven trust building. #### Compact Bar CTA - **URL**: https://ui.beste.co/block/cta33 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta33.json"` (Radix: `/r/cta33.json`) - **Description**: Single-line compact call-to-action bar with inline text and button. Perfect for subtle, non-intrusive conversion prompts between content sections. #### Bordered Stack CTA - **URL**: https://ui.beste.co/block/cta34 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta34.json"` (Radix: `/r/cta34.json`) - **Description**: Vertically stacked bordered sections with alternating content and a final call-to-action. Perfect for storytelling-driven conversion. #### Avatar Wall CTA - **URL**: https://ui.beste.co/block/cta35 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta35.json"` (Radix: `/r/cta35.json`) - **Description**: Dense grid of subscriber avatars with centered heading overlay and call-to-action. Perfect for community-driven conversion. #### Accent Sidebar CTA - **URL**: https://ui.beste.co/block/cta36 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta36.json"` (Radix: `/r/cta36.json`) - **Description**: Card with colored accent left border and inline call-to-action. Perfect for attention-grabbing inline conversion prompts. #### Feature Table CTA - **URL**: https://ui.beste.co/block/cta37 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta37.json"` (Radix: `/r/cta37.json`) - **Description**: Simple feature comparison table with checkmarks and call-to-action button below. Perfect for quick plan or feature comparison sections. #### Aurora Spotlight CTA - **URL**: https://ui.beste.co/block/cta38 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta38.json"` (Radix: `/r/cta38.json`) - **Description**: Interactive call-to-action card with animated aurora gradient blobs and mouse-following spotlight effect. Creates an immersive, eye-catching conversion section. #### Objection Buster CTA - **URL**: https://ui.beste.co/block/cta39 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta39.json"` (Radix: `/r/cta39.json`) - **Description**: Call-to-action addressing common objections with question-answer pairs and conversion button. Perfect for overcoming hesitation. #### Bento CTA - **URL**: https://ui.beste.co/block/cta40 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta40.json"` (Radix: `/r/cta40.json`) - **Description**: Bento grid layout with mixed content cards surrounding a central call-to-action. Perfect for showcasing multiple value props in a visually dynamic grid. #### Zigzag CTA - **URL**: https://ui.beste.co/block/cta41 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta41.json"` (Radix: `/r/cta41.json`) - **Description**: Alternating left-right content blocks building up to a final call-to-action. Perfect for narrative-driven conversion with progressive value reveal. #### Quote Carousel CTA - **URL**: https://ui.beste.co/block/cta42 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta42.json"` (Radix: `/r/cta42.json`) - **Description**: Rotating testimonial quotes with author info and persistent call-to-action buttons. Perfect for social proof that stays fresh. #### Numbered List CTA - **URL**: https://ui.beste.co/block/cta43 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta43.json"` (Radix: `/r/cta43.json`) - **Description**: Numbered reasons or benefits list with large ordinals and call-to-action at the bottom. Perfect for persuasive, structured conversion arguments. #### Image Marquee CTA - **URL**: https://ui.beste.co/block/cta44 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta44.json"` (Radix: `/r/cta44.json`) - **Description**: Eye-catching call-to-action with two rows of images scrolling in opposite directions. Creates a dynamic film-strip effect around centered content. #### 3D Tilt Card CTA - **URL**: https://ui.beste.co/block/cta45 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta45.json"` (Radix: `/r/cta45.json`) - **Description**: Interactive call-to-action card with 3D perspective tilt on mouse move, image background with zoom effect, and a sweeping shine animation on hover. #### Before/After Slider CTA - **URL**: https://ui.beste.co/block/cta46 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta46.json"` (Radix: `/r/cta46.json`) - **Description**: Interactive image comparison slider with draggable handle for before and after views. Supports both mouse and touch input. #### Stacked Photo Deck CTA - **URL**: https://ui.beste.co/block/cta47 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta47.json"` (Radix: `/r/cta47.json`) - **Description**: Split layout with a hoverable stacked photo deck that fans out on interaction. Includes shimmer sweep animation on each card for a polished reveal effect. #### Animated Border CTA - **URL**: https://ui.beste.co/block/cta48 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta48.json"` (Radix: `/r/cta48.json`) - **Description**: Split layout with a floating image wrapped in a rotating conic gradient border. Includes a soft glow backdrop and hover zoom for a premium, modern feel. #### Video Hero CTA - **URL**: https://ui.beste.co/block/cta49 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta49.json"` (Radix: `/r/cta49.json`) - **Description**: Cinematic call-to-action with a looping background video, gradient overlay, and bottom-aligned content for an immersive hero section. #### Diagonal Split Image CTA - **URL**: https://ui.beste.co/block/cta50 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta50.json"` (Radix: `/r/cta50.json`) - **Description**: Split layout with two images divided diagonally, each slowly panning in opposite directions. Creates a bold editorial feel with smooth animation. #### Vertical Marquee CTA - **URL**: https://ui.beste.co/block/cta51 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta51.json"` (Radix: `/r/cta51.json`) - **Description**: Two vertical image columns scrolling in opposite directions frame the centered call-to-action content. Creates a dynamic gallery wall effect. #### Media Accordion CTA - **URL**: https://ui.beste.co/block/cta52 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta52.json"` (Radix: `/r/cta52.json`) - **Description**: Interactive horizontal strips mixing images and videos that expand on hover, revealing labels and descriptions with staggered slide-up animation. Smooth flex-based transitions. #### Video Background CTA - **URL**: https://ui.beste.co/block/cta53 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta53.json"` (Radix: `/r/cta53.json`) - **Description**: Looping background video behind a frosted glass content card with badge, heading, description, and action buttons. Creates an immersive, cinematic feel. #### Split Video CTA - **URL**: https://ui.beste.co/block/cta54 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta54.json"` (Radix: `/r/cta54.json`) - **Description**: Two-column layout with content on the left and a looping video on the right. Features badge, heading, feature list, and action buttons alongside an embedded video panel. #### Cinematic Video Hero CTA - **URL**: https://ui.beste.co/block/cta55 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta55.json"` (Radix: `/r/cta55.json`) - **Description**: Ultra-wide cinematic video background with a dark gradient overlay. Content is positioned over the video for an immersive, movie-trailer-style hero section. #### Media Card Showcase CTA - **URL**: https://ui.beste.co/block/cta56 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta56.json"` (Radix: `/r/cta56.json`) - **Description**: Three media cards (images and videos) in a row, each with a hover-reveal label overlay. CTA content sits above the grid for a portfolio-style showcase section. #### Floating Video Circle CTA - **URL**: https://ui.beste.co/block/cta57 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta57.json"` (Radix: `/r/cta57.json`) - **Description**: Large circular video mask with a gentle floating animation alongside CTA content. The clipped video creates an eye-catching organic focal point. #### Video Grid Background CTA - **URL**: https://ui.beste.co/block/cta58 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta58.json"` (Radix: `/r/cta58.json`) - **Description**: A 2x2 grid of looping videos playing simultaneously behind a semi-transparent overlay card. Creates a dynamic, energetic backdrop for the call-to-action. #### Video Ticker Strip CTA - **URL**: https://ui.beste.co/block/cta59 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta59.json"` (Radix: `/r/cta59.json`) - **Description**: Centered CTA content above a continuously scrolling horizontal strip of looping video thumbnails. Creates an energetic, dynamic showcase feel. #### Video Blinds Reveal CTA - **URL**: https://ui.beste.co/block/cta60 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta60.json"` (Radix: `/r/cta60.json`) - **Description**: Staggered horizontal bars slide away in alternating directions on hover, revealing a looping video behind them like opening window blinds. Text transitions to white for readability over the video. #### Animated Border Video CTA - **URL**: https://ui.beste.co/block/cta61 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta61.json"` (Radix: `/r/cta61.json`) - **Description**: Split layout with a video card featuring a rotating conic gradient border and gentle floating animation. A glowing backdrop adds depth behind the video. #### Diagonal Video Split CTA - **URL**: https://ui.beste.co/block/cta62 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta62.json"` (Radix: `/r/cta62.json`) - **Description**: Two videos divided by a diagonal clip-path line with a frosted glass content card overlaid in the center. Bold, cinematic composition. #### Video Bento Grid CTA - **URL**: https://ui.beste.co/block/cta63 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta63.json"` (Radix: `/r/cta63.json`) - **Description**: Asymmetric bento-style grid with one large video spanning two rows alongside two stacked smaller videos. CTA content sits above the grid. #### Statement CTA - **URL**: https://ui.beste.co/block/cta64 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta64.json"` (Radix: `/r/cta64.json`) - **Description**: Bold full-width call to action on a dark panel with dual buttons. #### Newsletter CTA - **URL**: https://ui.beste.co/block/cta65 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta65.json"` (Radix: `/r/cta65.json`) - **Description**: Split card with a subscribe form beside an image. #### Marquee CTA - **URL**: https://ui.beste.co/block/cta66 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta66.json"` (Radix: `/r/cta66.json`) - **Description**: Centered call to action over a faint scrolling word-marquee background. #### Image CTA - **URL**: https://ui.beste.co/block/cta67 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta67.json"` (Radix: `/r/cta67.json`) - **Description**: Cinematic full-bleed image CTA with an overlaid content panel. #### Contact CTA - **URL**: https://ui.beste.co/block/cta68 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta68.json"` (Radix: `/r/cta68.json`) - **Description**: Centered contact call to action with an availability badge and big headline. #### Worth Keeping CTA - **URL**: https://ui.beste.co/block/cta69 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta69.json"` (Radix: `/r/cta69.json`) - **Description**: Full-bleed monochrome closing CTA with a giant scrolling marquee behind a single centered seal button. #### Editorial Asymmetric CTA - **URL**: https://ui.beste.co/block/cta70 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta70.json"` (Radix: `/r/cta70.json`) - **Description**: An oversized editorial CTA with a left-weighted heading, a pinned seal button, and a ruled baseline with monospace index marks. #### Framed Studio Call - **URL**: https://ui.beste.co/block/cta71 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta71.json"` (Radix: `/r/cta71.json`) - **Description**: A quiet, gallery-like CTA centered inside a bordered frame with corner tick marks, eyebrow, oversized heading, and a single pill action. #### Newsletter Letter Band - **URL**: https://ui.beste.co/block/cta72 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta72.json"` (Radix: `/r/cta72.json`) - **Description**: A monochrome newsletter CTA band pairing an oversized statement with an inline email-capture form and a reassurance note. #### Closing CTA Panel - **URL**: https://ui.beste.co/block/cta73 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta73.json"` (Radix: `/r/cta73.json`) - **Description**: A closing call to action on a soft panel, pairing an eyebrow, light heading, paragraph, and two accent buttons with an image tile that floats a live agenda micro-asset. #### Centered Closing CTA - **URL**: https://ui.beste.co/block/cta74 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta74.json"` (Radix: `/r/cta74.json`) - **Description**: A centered call to action with an eyebrow pill, a large light heading, a short paragraph, and two accent buttons on a clean surface. #### Split CTA With Thread - **URL**: https://ui.beste.co/block/cta75 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta75.json"` (Radix: `/r/cta75.json`) - **Description**: A split call to action pairing an eyebrow, light heading, paragraph, and two accent buttons with an image tile that floats a live team message thread. #### Plan-Led Centered CTA - **URL**: https://ui.beste.co/block/cta76 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta76.json"` (Radix: `/r/cta76.json`) - **Description**: A centered call to action led by a floating plan price card on an image tile, followed by an eyebrow, a large light heading, a paragraph, two accent buttons, and a reassurance note. #### Demo Request Split Form - **URL**: https://ui.beste.co/block/cta77 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta77.json"` (Radix: `/r/cta77.json`) - **Description**: A closing call to action that pairs a soft panel of promises, separated by hairlines, with an inline demo request form carrying name, work email, and team size fields plus fine print under the submit action. #### Studio Booking Split CTA - **URL**: https://ui.beste.co/block/cta78 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta78.json"` (Radix: `/r/cta78.json`) - **Description**: Closing call to action splitting a tall photo against an oversized heading, a short pitch, a pill CTA beside a plain email link, and a ruled two-column row stating reply time and next availability. #### Dark Contact Band - **URL**: https://ui.beste.co/block/cta79 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta79.json"` (Radix: `/r/cta79.json`) - **Description**: Inverted closing panel on a solid dark surface: an oversized invitation on the left, a paragraph and outline pill CTA on the right, then a ruled row of linked email, phone and studio address. #### Two Path Closing CTA - **URL**: https://ui.beste.co/block/cta80 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta80.json"` (Radix: `/r/cta80.json`) - **Description**: Closing section that offers two routes side by side, each a ruled column with a title, a short pitch, a dotted-rule list of what to expect and its own pill CTA, one solid and one outline. #### Launch Countdown CTA - **URL**: https://ui.beste.co/block/cta81 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta81.json"` (Radix: `/r/cta81.json`) - **Description**: A closing call to action with centered copy above two image tiles, one floating a live countdown and the other an inline email capture, closing on a line of fine print. #### Inverted Closing Band - **URL**: https://ui.beste.co/block/cta82 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta82.json"` (Radix: `/r/cta82.json`) - **Description**: A full-width dark closing band with a light display heading, a paragraph, two actions, and three reassurances sitting under a hairline rule. #### Two-Path Closing Cards - **URL**: https://ui.beste.co/block/cta83 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta83.json"` (Radix: `/r/cta83.json`) - **Description**: A closing call to action offering two routes as side-by-side cards, each with an icon tile, a short kicker, a checked list on hairlines, and its own action, with the recommended route outlined in the accent. #### Photo Band Story CTA - **URL**: https://ui.beste.co/block/cta84 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta84.json"` (Radix: `/r/cta84.json`) - **Description**: A closing call to action set on a photographic panel with a directional gradient, pairing an eyebrow badge, light heading, and two actions with a live customer quote card. #### Migration Process CTA - **URL**: https://ui.beste.co/block/cta85 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta85.json"` (Radix: `/r/cta85.json`) - **Description**: A closing call to action on a soft section that puts a live step tracker between centered copy and three hairline notes, then lands on a single action with its fine print. #### Contact And Availability CTA - **URL**: https://ui.beste.co/block/cta86 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta86.json"` (Radix: `/r/cta86.json`) - **Description**: A closing call to action splitting a bordered container between a hairline contact table and an inverted dark column that floats a live card naming the person you will meet above the booking action. #### Resource Rows CTA - **URL**: https://ui.beste.co/block/cta87 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta87.json"` (Radix: `/r/cta87.json`) - **Description**: A closing call to action that offers three downloadable resources as full-width hairline rows, each a link with a short kicker, a format note, and an arrow that shifts on hover. #### Slim Closing Bar - **URL**: https://ui.beste.co/block/cta88 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta88.json"` (Radix: `/r/cta88.json`) - **Description**: A short closing call to action held in one soft bar, with an eyebrow badge, a compact light heading and paragraph on the left, and the actions aligned to the right. #### Plain Terms Billing CTA - **URL**: https://ui.beste.co/block/cta89 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta89.json"` (Radix: `/r/cta89.json`) - **Description**: A closing call to action held in one bordered container, with the promise and action across the top and a hairline split below pairing an image tile that floats a live payment card with a full table of billing terms. #### Multi-Site Coverage CTA - **URL**: https://ui.beste.co/block/cta90 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta90.json"` (Radix: `/r/cta90.json`) - **Description**: A closing call to action on a soft section that sets an image tile floating a live coverage card against three labelled columns of places, with the action under a hairline. #### Handheld Reminder CTA - **URL**: https://ui.beste.co/block/cta91 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta91.json"` (Radix: `/r/cta91.json`) - **Description**: A closing call to action that leads with a narrow portrait tile floating a live phone frame, then sets centered copy and two actions beneath it over three hairline promises. #### Tailored Subscription - **URL**: https://ui.beste.co/block/cta92 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/cta92.json"` (Radix: `/r/cta92.json`) - **Description**: A newsletter CTA that asks before it asks for an address: subjects, then cadence, then the email, and the column swaps itself for a confirmation that reads back exactly what was chosen. ### Dashboard #### Admin Shell - **URL**: https://ui.beste.co/block/dashboard1 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/dashboard1.json"` (Radix: `/r/dashboard1.json`) - **Description**: A full admin dashboard shell: collapsible icon sidebar, topbar with a ⌘K command palette and account menu, a greeting header, a three-up KPI row with trend badges, and a recent-orders data table. The frame the rest of the dashboard blocks drop into. #### Customers Table - **URL**: https://ui.beste.co/block/dashboard2 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/dashboard2.json"` (Radix: `/r/dashboard2.json`) - **Description**: A customers management section powered by the data-table engine: avatar cells, status badges, sortable columns, keyword search, row selection with a live selected count, per-row action menus, pagination, and an export / add-customer toolbar. #### Commerce Analytics - **URL**: https://ui.beste.co/block/dashboard3 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/dashboard3.json"` (Radix: `/r/dashboard3.json`) - **Description**: An e-commerce analytics dashboard: sidebar + search topbar, a four-up KPI row with period deltas, a net-profit area chart, a repeat-rate radial gauge, a busiest-weekday bar chart, and a best-selling products data table. #### Project Workspace - **URL**: https://ui.beste.co/block/dashboard4 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/dashboard4.json"` (Radix: `/r/dashboard4.json`) - **Description**: A project-management dashboard: sidebar + search topbar, a four-up project stats row with one highlighted card, a weekly project-analytics bar chart, a reminder card with a start-meeting action, a team-collaboration list, a project-progress radial gauge, and a focus time-tracker card. #### Booking Workspace - **URL**: https://ui.beste.co/block/dashboard5 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/dashboard5.json"` (Radix: `/r/dashboard5.json`) - **Description**: A split booking dashboard: a left panel with a top nav, functional tab bar, a Manage menu, a bento of revenue/occupancy/metric tiles and an image, toggleable active-booking cards, and a room-availability timeline; a right rail with a real month calendar (selectable days, booked-day dots) and a time-slotted day agenda. #### Talent Sourcing - **URL**: https://ui.beste.co/block/dashboard6 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/dashboard6.json"` (Radix: `/r/dashboard6.json`) - **Description**: A project detail dashboard for staffing: sidebar + action topbar with a project actions menu, a project header with status pills, a five-up stat strip with project meta, functional pipeline sub-tabs, a search / recently-active toggle / filters-menu toolbar that live-filters the grid, and a responsive grid of nine talent cards with wishlist and invite toggles. #### Traffic Analytics - **URL**: https://ui.beste.co/block/dashboard7 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/dashboard7.json"` (Radix: `/r/dashboard7.json`) - **Description**: A web-analytics console: sidebar + search topbar, a live realtime strip, an hourly sessions area chart, a daily-goal radial gauge, a channel-audience radar chart, a new-vs-returning line chart, and a sortable top-pages table. #### Finance Overview - **URL**: https://ui.beste.co/block/dashboard8 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/dashboard8.json"` (Radix: `/r/dashboard8.json`) - **Description**: A personal-finance dashboard: sidebar + search topbar, a dark total-balance hero with account tiles, a budget radial gauge, income/expense/savings KPIs, a cashflow bar chart, a spending-mix donut, and a colored transactions table. #### Sales Pipeline - **URL**: https://ui.beste.co/block/dashboard9 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/dashboard9.json"` (Radix: `/r/dashboard9.json`) - **Description**: A sales-CRM dashboard: sidebar + search topbar, pipeline KPIs, a four-stage kanban board of deal cards with owners and hot-lead flags, a revenue-vs-forecast area chart, a team-quota radial gauge, and a rep leaderboard with progress bars. #### Support Inbox - **URL**: https://ui.beste.co/block/dashboard10 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/dashboard10.json"` (Radix: `/r/dashboard10.json`) - **Description**: A three-pane helpdesk inbox: an icon rail, a searchable ticket list with status filters and unread markers, and a live conversation pane. Clicking a ticket loads its thread, and the composer actually appends replies (⌘/Ctrl+Enter to send). #### Fitness Overview - **URL**: https://ui.beste.co/block/dashboard11 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/dashboard11.json"` (Radix: `/r/dashboard11.json`) - **Description**: A health dashboard with a top navigation bar (no sidebar): three activity-ring radial gauges, a steps area chart and a heart-rate line chart, and a recent-workouts list. A Today/Week/Month segmented control live-swaps the chart data and totals. #### Service Monitoring - **URL**: https://ui.beste.co/block/dashboard12 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/dashboard12.json"` (Radix: `/r/dashboard12.json`) - **Description**: An observability console with an icon rail and a live status ribbon: a service-health grid with status dots and latency/uptime, a latency line chart, a request-volume area chart, a 30-day uptime bar strip, and a recent-events feed. A 1h/24h/7d tab control live-swaps the chart data. #### Account Settings - **URL**: https://ui.beste.co/block/dashboard13 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/dashboard13.json"` (Radix: `/r/dashboard13.json`) - **Description**: A settings dashboard with a vertical section nav that live-switches panels: an editable profile, security with a two-factor toggle and active sessions, notification switches, a billing panel with plan/payment/invoices, and a team list with per-member role selects. ### DevTools #### API Endpoint Explorer - **URL**: https://ui.beste.co/block/devtools1 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/devtools1.json"` (Radix: `/r/devtools1.json`) - **Description**: Interactive REST API endpoint reference with method badges, expandable parameter details, and response types. Grouped by resource. #### Webhook Event Stream - **URL**: https://ui.beste.co/block/devtools2 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/devtools2.json"` (Radix: `/r/devtools2.json`) - **Description**: Real-time webhook event log with delivery status indicators, expandable JSON payloads, and response time tracking. #### Multi-Language Code Tabs - **URL**: https://ui.beste.co/block/devtools3 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/devtools3.json"` (Radix: `/r/devtools3.json`) - **Description**: Code block with language tabs (JavaScript, Python, cURL, Go) and Shiki syntax highlighting. Dark theme with copy-to-clipboard and active tab indicator. #### Error Monitoring Feed - **URL**: https://ui.beste.co/block/devtools4 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/devtools4.json"` (Radix: `/r/devtools4.json`) - **Description**: Application error tracking feed with severity indicators, occurrence counts, and source locations. Summary pills show error distribution. #### Feature Flags Manager - **URL**: https://ui.beste.co/block/devtools5 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/devtools5.json"` (Radix: `/r/devtools5.json`) - **Description**: Interactive feature flag management with toggle switches, rollout progress bars, and environment badges. #### Application Log Viewer - **URL**: https://ui.beste.co/block/devtools6 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/devtools6.json"` (Radix: `/r/devtools6.json`) - **Description**: Terminal-style structured log viewer with level filtering. Color-coded INFO, WARN, ERROR, and DEBUG entries with timestamps and source labels. #### API Response Examples - **URL**: https://ui.beste.co/block/devtools7 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/devtools7.json"` (Radix: `/r/devtools7.json`) - **Description**: API documentation cards showing response examples with color-coded status badges. Headers section, JSON body with copy button, success/error variants. #### API Key Manager - **URL**: https://ui.beste.co/block/devtools8 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/devtools8.json"` (Radix: `/r/devtools8.json`) - **Description**: API key management panel with masked credentials, reveal/copy controls, scope badges, and active/revoked status indicators. #### Database Migration Timeline - **URL**: https://ui.beste.co/block/devtools9 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/devtools9.json"` (Radix: `/r/devtools9.json`) - **Description**: Timeline-style database migration tracker with applied, pending, and failed status indicators. Shows migration names, descriptions, and timestamps. #### Cron Job Scheduler - **URL**: https://ui.beste.co/block/devtools10 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/devtools10.json"` (Radix: `/r/devtools10.json`) - **Description**: Scheduled task manager showing cron expressions, last/next run times, duration, and active/paused/failed status indicators. #### Audit Activity Log - **URL**: https://ui.beste.co/block/devtools11 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/devtools11.json"` (Radix: `/r/devtools11.json`) - **Description**: Filterable audit trail showing user actions with create, update, delete, and access type indicators. Includes resource, user, and timestamp info. #### Rate Limit Dashboard - **URL**: https://ui.beste.co/block/devtools12 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/devtools12.json"` (Radix: `/r/devtools12.json`) - **Description**: API rate limit monitor with color-coded usage bars per endpoint. Shows current usage, limits, and visual threshold indicators. #### Environment Config Viewer - **URL**: https://ui.beste.co/block/devtools13 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/devtools13.json"` (Radix: `/r/devtools13.json`) - **Description**: Tabbed environment variable viewer for comparing configuration across production, staging, and development environments. #### JSON Formatter Tool - **URL**: https://ui.beste.co/block/devtools14 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/devtools14.json"` (Radix: `/r/devtools14.json`) - **Description**: Interactive JSON editor with format, minify, and real-time validation. Valid/invalid status badge, copy button, and syntax error display. #### Package Dependency Health - **URL**: https://ui.beste.co/block/devtools15 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/devtools15.json"` (Radix: `/r/devtools15.json`) - **Description**: Dependency version tracker with update availability, security fix indicators, and version comparison arrows. #### Queue Monitor - **URL**: https://ui.beste.co/block/devtools16 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/devtools16.json"` (Radix: `/r/devtools16.json`) - **Description**: Background job queue monitor showing processed, pending, and failed counts with healthy, warning, and critical status indicators. #### Service Health Board - **URL**: https://ui.beste.co/block/devtools17 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/devtools17.json"` (Radix: `/r/devtools17.json`) - **Description**: Infrastructure status board showing service health with operational, degraded, and down indicators. Displays uptime percentages and latency metrics. #### Performance Waterfall - **URL**: https://ui.beste.co/block/devtools18 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/devtools18.json"` (Radix: `/r/devtools18.json`) - **Description**: Network request waterfall chart with cascading timing bars. Color-coded by duration — green for fast, amber for medium, red for slow. #### Keyboard Shortcuts Reference - **URL**: https://ui.beste.co/block/devtools19 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/devtools19.json"` (Radix: `/r/devtools19.json`) - **Description**: Grouped keyboard shortcuts with styled keycap visuals. Shows key combinations with shadow-styled kbd elements and descriptions. #### Code Diff Viewer - **URL**: https://ui.beste.co/block/devtools20 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/devtools20.json"` (Radix: `/r/devtools20.json`) - **Description**: Unified code diff viewer with dark terminal background. Green additions, red deletions, and gray context lines with file headers. #### Network Request Monitor - **URL**: https://ui.beste.co/block/devtools33 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/devtools33.json"` (Radix: `/r/devtools33.json`) - **Description**: Real-time HTTP request interceptor with recording controls. Method badges, status codes, duration timing, size info, and filterable by method/type. #### Load Test Dashboard - **URL**: https://ui.beste.co/block/devtools37 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/devtools37.json"` (Radix: `/r/devtools37.json`) - **Description**: API performance testing interface with start/stop controls and progress bar. Metric cards for RPS, success rate, P95/P99 latency, and error count. #### API Usage Analytics - **URL**: https://ui.beste.co/block/devtools38 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/devtools38.json"` (Radix: `/r/devtools38.json`) - **Description**: API analytics dashboard with endpoint usage table. Stats cards for requests, latency, error rate, and active users. Trend indicators and method badges. #### Code Coverage Report - **URL**: https://ui.beste.co/block/devtools49 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/devtools49.json"` (Radix: `/r/devtools49.json`) - **Description**: Test coverage dashboard with expandable file tree. Coverage metrics for statements, branches, functions, and lines with color-coded progress bars. #### Bundle Size Analyzer - **URL**: https://ui.beste.co/block/devtools52 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/devtools52.json"` (Radix: `/r/devtools52.json`) - **Description**: JavaScript bundle analysis with chunk breakdown. Visual size bars, module lists, and gzip comparisons. Color-coded by type: app code, vendor, assets. #### Database Schema Explorer - **URL**: https://ui.beste.co/block/devtools56 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/devtools56.json"` (Radix: `/r/devtools56.json`) - **Description**: Database table browser with expandable schema views. Shows columns, types, primary/foreign keys, and relationships. Row counts and nullable indicators. #### Bundle Chunk Analyzer - **URL**: https://ui.beste.co/block/devtools92 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/devtools92.json"` (Radix: `/r/devtools92.json`) - **Description**: Bundle breakdown with chunk list showing size, gzip, and module counts. Large chunk warnings, percentage bars, and change indicators for tracking growth. #### CI/CD Pipeline Status - **URL**: https://ui.beste.co/block/devtools93 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/devtools93.json"` (Radix: `/r/devtools93.json`) - **Description**: CI/CD pipeline monitor with build stages, status indicators, and branch/commit tracking. Shows multiple pipeline runs with success, failed, running, and pending states. #### API Endpoints With Sample Call - **URL**: https://ui.beste.co/block/devtools94 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/devtools94.json"` (Radix: `/r/devtools94.json`) - **Description**: A developer section that lists common endpoints as hairline rows pairing tone-coded method chips with monospace paths, beside a dark code panel holding a full sample request and its response. ### E-commerce #### Product Card Grid - **URL**: https://ui.beste.co/block/ecommerce1 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/ecommerce1.json"` (Radix: `/r/ecommerce1.json`) - **Description**: Responsive product grid with ratings, sale badges, and add to cart buttons. Perfect for shop pages and product catalogs. #### Product Detail with Variants - **URL**: https://ui.beste.co/block/ecommerce2 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/ecommerce2.json"` (Radix: `/r/ecommerce2.json`) - **Description**: Product page hero with color and size selectors, quantity picker, and wishlist button. Perfect for detailed product pages with multiple variants. #### Shopping Cart with Summary - **URL**: https://ui.beste.co/block/ecommerce3 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/ecommerce3.json"` (Radix: `/r/ecommerce3.json`) - **Description**: Cart page with item cards, quantity controls, and order summary with shipping calculation. Perfect for checkout flows and cart review pages. #### Shop by Category Grid - **URL**: https://ui.beste.co/block/ecommerce4 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/ecommerce4.json"` (Radix: `/r/ecommerce4.json`) - **Description**: Product category browsing with image cards, product counts, and featured badges. Responsive grid layout with hover effects. Perfect for storefront navigation and collection showcases. #### Featured Product Showcase - **URL**: https://ui.beste.co/block/ecommerce5 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/ecommerce5.json"` (Radix: `/r/ecommerce5.json`) - **Description**: Full-featured product presentation with pricing, ratings, feature list, and add to cart. Split layout with configurable image position. Perfect for highlighting premium products and limited editions. #### Product Reviews Section - **URL**: https://ui.beste.co/block/ecommerce6 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/ecommerce6.json"` (Radix: `/r/ecommerce6.json`) - **Description**: Customer reviews with star ratings, verified badges, helpful voting, and load more functionality. Displays average rating summary. Perfect for building trust and social proof on product pages. #### Wishlist Manager - **URL**: https://ui.beste.co/block/ecommerce7 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/ecommerce7.json"` (Radix: `/r/ecommerce7.json`) - **Description**: Saved items list with stock status, quick add to cart, and remove actions. Includes empty state with call to action. Perfect for user dashboards and saved items pages. #### Order Confirmation Page - **URL**: https://ui.beste.co/block/ecommerce8 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/ecommerce8.json"` (Radix: `/r/ecommerce8.json`) - **Description**: Post-purchase success screen with order summary, email confirmation, estimated delivery, and order tracking actions. Perfect for checkout completion and order receipt pages. #### Size Guide Table - **URL**: https://ui.beste.co/block/ecommerce11 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/ecommerce11.json"` (Radix: `/r/ecommerce11.json`) - **Description**: Measurement chart table with chest, waist, hips, and length columns. Perfect for clothing product pages and sizing reference. #### Related Products Grid - **URL**: https://ui.beste.co/block/ecommerce14 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/ecommerce14.json"` (Radix: `/r/ecommerce14.json`) - **Description**: Product recommendations grid with images, prices, and add to cart buttons. Perfect for cross-selling and upselling on product pages. #### Shipping Info Cards - **URL**: https://ui.beste.co/block/ecommerce15 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/ecommerce15.json"` (Radix: `/r/ecommerce15.json`) - **Description**: Icon cards displaying shipping, delivery, tracking, and returns policies. Perfect for product pages and checkout information. #### Payment Methods Display - **URL**: https://ui.beste.co/block/ecommerce16 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/ecommerce16.json"` (Radix: `/r/ecommerce16.json`) - **Description**: Payment options grid showing credit cards, digital wallets, and bank transfers. Perfect for checkout pages and footer trust signals. #### Order History List - **URL**: https://ui.beste.co/block/ecommerce17 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/ecommerce17.json"` (Radix: `/r/ecommerce17.json`) - **Description**: Order cards with status badges, dates, and item counts with view details links. Perfect for customer account dashboards and order tracking. #### Gift Card Redemption Form - **URL**: https://ui.beste.co/block/ecommerce19 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/ecommerce19.json"` (Radix: `/r/ecommerce19.json`) - **Description**: Code input form with loading states, validation, and balance display on success. Perfect for checkout pages and account credit sections. #### Sale Countdown Timer - **URL**: https://ui.beste.co/block/ecommerce23 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/ecommerce23.json"` (Radix: `/r/ecommerce23.json`) - **Description**: Live countdown with days, hours, minutes, and seconds in default, compact, or banner variants. Perfect for flash sales and limited-time promotions. #### Product Detail with Gallery - **URL**: https://ui.beste.co/block/ecommerce26 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/ecommerce26.json"` (Radix: `/r/ecommerce26.json`) - **Description**: Product page with thumbnail image gallery, color swatches, size buttons, and feature icons. Perfect for premium product showcases. #### Category Cards Grid - **URL**: https://ui.beste.co/block/ecommerce27 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/ecommerce27.json"` (Radix: `/r/ecommerce27.json`) - **Description**: Category collection grid with overlay images, item counts, and shop now links. Perfect for homepage category navigation and collection pages. #### Featured Products Grid - **URL**: https://ui.beste.co/block/ecommerce28 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/ecommerce28.json"` (Radix: `/r/ecommerce28.json`) - **Description**: Product cards with hover wishlist buttons, quick add to cart overlay, and star ratings. Perfect for featured sections and bestsellers. #### Deal of the Day Hero - **URL**: https://ui.beste.co/block/ecommerce29 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/ecommerce29.json"` (Radix: `/r/ecommerce29.json`) - **Description**: Featured product with live countdown timer, discount badge, feature list, and large CTA. Perfect for daily deals and promotional landing pages. #### Outfit Builder - **URL**: https://ui.beste.co/block/ecommerce31 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/ecommerce31.json"` (Radix: `/r/ecommerce31.json`) - **Description**: Mix-and-match product selector organized by category with running total and add all to cart. Perfect for fashion lookbooks and curated outfits. #### Shop by Brand Grid - **URL**: https://ui.beste.co/block/ecommerce32 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/ecommerce32.json"` (Radix: `/r/ecommerce32.json`) - **Description**: Brand logo cards with product counts and hover effects linking to brand pages. Perfect for multi-brand stores and brand discovery. #### Collection Showcase Grid - **URL**: https://ui.beste.co/block/ecommerce33 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/ecommerce33.json"` (Radix: `/r/ecommerce33.json`) - **Description**: Featured collection card with supporting collection tiles, image overlays, and product counts. Perfect for homepage collection highlights. #### Gift Finder by Budget - **URL**: https://ui.beste.co/block/ecommerce34 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/ecommerce34.json"` (Radix: `/r/ecommerce34.json`) - **Description**: Budget filter tabs with curated gift cards, wishlist buttons, and quick add to cart. Perfect for gift guides and seasonal shopping pages. #### Product Reviews Grid - **URL**: https://ui.beste.co/block/ecommerce35 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/ecommerce35.json"` (Radix: `/r/ecommerce35.json`) - **Description**: Review cards with star ratings, product thumbnails, verified badges, and helpfulness counts. Perfect for social proof and testimonial sections. #### Trust Badges Section - **URL**: https://ui.beste.co/block/ecommerce36 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/ecommerce36.json"` (Radix: `/r/ecommerce36.json`) - **Description**: Icon badges for shipping, returns, security, and support in default, compact, or detailed variants. Perfect for building trust near checkout buttons. #### Shop the Look - **URL**: https://ui.beste.co/block/ecommerce37 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/ecommerce37.json"` (Radix: `/r/ecommerce37.json`) - **Description**: Lifestyle image with clickable product hotspots and bundled add-all-to-cart pricing. Perfect for fashion editorial and styled outfit pages. #### Back in Stock Notification - **URL**: https://ui.beste.co/block/ecommerce38 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/ecommerce38.json"` (Radix: `/r/ecommerce38.json`) - **Description**: Product availability alerts with email and SMS signup options. Displays waitlist counter to create urgency and social proof. Perfect for out-of-stock product pages and inventory waitlists. #### Loyalty Program Dashboard - **URL**: https://ui.beste.co/block/ecommerce39 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/ecommerce39.json"` (Radix: `/r/ecommerce39.json`) - **Description**: Customer rewards interface showing tier progress, redeemable benefits, points balance, and earning opportunities. Perfect for member portals and gamified retention programs. #### Gift Card Balance Checker - **URL**: https://ui.beste.co/block/ecommerce40 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/ecommerce40.json"` (Radix: `/r/ecommerce40.json`) - **Description**: Gift card management interface with balance lookup, transaction history display, and quick reload functionality. Perfect for gift card landing pages and customer service portals. #### Product Detail Page - **URL**: https://ui.beste.co/block/ecommerce41 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/ecommerce41.json"` (Radix: `/r/ecommerce41.json`) - **Description**: Complete product view with image gallery thumbnails, variant selection controls, pricing, and add to cart functionality. Perfect for main product pages and quick view modals. #### Interactive Size Guide - **URL**: https://ui.beste.co/block/ecommerce42 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/ecommerce42.json"` (Radix: `/r/ecommerce42.json`) - **Description**: Clothing size selector with body measurement inputs, personalized fit scoring, and comprehensive size chart reference table. Perfect for apparel and footwear product pages. #### Product Information Tabs - **URL**: https://ui.beste.co/block/ecommerce43 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/ecommerce43.json"` (Radix: `/r/ecommerce43.json`) - **Description**: Tabbed product details with description, feature list, specifications table, customer reviews with ratings, and shipping information. Perfect for comprehensive product pages with detailed information. #### Flash Sale Countdown - **URL**: https://ui.beste.co/block/ecommerce44 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/ecommerce44.json"` (Radix: `/r/ecommerce44.json`) - **Description**: Limited-time deal showcase with live countdown timer, stock progress indicator, and discount pricing. Creates urgency with sold/available tracking. Perfect for daily deals and time-sensitive promotions. #### Advanced Variant Selector - **URL**: https://ui.beste.co/block/ecommerce45 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/ecommerce45.json"` (Radix: `/r/ecommerce45.json`) - **Description**: Customizable product configurator with color swatches, size selection, material options, and dynamic pricing. Real-time stock tracking per combination. Perfect for configurable products and custom merchandise. #### Product Finder Quiz - **URL**: https://ui.beste.co/block/ecommerce46 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/ecommerce46.json"` (Radix: `/r/ecommerce46.json`) - **Description**: A finder that replaces a filter sidebar: three questions score every product against the traits the answers ask for, and the winner takes over the plate beside them with its photograph, its price, and the reasons it came out on top. ### Education #### Video Lesson Hero - **URL**: https://ui.beste.co/block/education12 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/education12.json"` (Radix: `/r/education12.json`) - **Description**: A video lesson hero section with course info, thumbnail with play button, and lesson navigation. Perfect for online courses and video-based learning platforms. #### Lesson Content Reader - **URL**: https://ui.beste.co/block/education13 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/education13.json"` (Radix: `/r/education13.json`) - **Description**: A rich text lesson reader with structured content blocks including headings, paragraphs, lists, quotes, and code snippets. Perfect for text-based courses and educational documentation. #### Course Certificate Display - **URL**: https://ui.beste.co/block/education17 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/education17.json"` (Radix: `/r/education17.json`) - **Description**: A certificate showcase card with course name, issuer, completion date, skills earned, and credential ID. Perfect for celebrating course completions and displaying verifiable credentials. #### Faculty Profile Spotlight - **URL**: https://ui.beste.co/block/education22 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/education22.json"` (Radix: `/r/education22.json`) - **Description**: A faculty spotlight featuring professor photo, biography, research interests, publications count, and inspirational quote. Perfect for showcasing instructors and academic staff. #### Learner Leaderboard - **URL**: https://ui.beste.co/block/education25 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/education25.json"` (Radix: `/r/education25.json`) - **Description**: A gamified leaderboard displaying top learners with rankings, scores, and badges across weekly, monthly, and all-time periods. Perfect for competitive learning platforms and student engagement. #### Study Streak Tracker - **URL**: https://ui.beste.co/block/education26 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/education26.json"` (Radix: `/r/education26.json`) - **Description**: A gamified streak tracker showing current and longest streaks with a visual weekly activity calendar. Perfect for habit-forming learning apps and student motivation. #### Study Abroad Hero - **URL**: https://ui.beste.co/block/education48 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/education48.json"` (Radix: `/r/education48.json`) - **Description**: A study abroad hero section with destination image cards, program duration badges, and key features. Perfect for universities and international exchange programs. #### Professional Development Hero - **URL**: https://ui.beste.co/block/education53 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/education53.json"` (Radix: `/r/education53.json`) - **Description**: A professional development hero with certification programs list, success stats, and call-to-action buttons. Perfect for corporate training and upskilling platforms. #### Faculty Testimonials Grid - **URL**: https://ui.beste.co/block/education78 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/education78.json"` (Radix: `/r/education78.json`) - **Description**: A grid of faculty testimonials with instructor photos, quotes about their teaching philosophy, and years of experience. Perfect for building trust in educational institutions. #### Education Social Proof - **URL**: https://ui.beste.co/block/education79 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/education79.json"` (Radix: `/r/education79.json`) - **Description**: A social proof section displaying key stats like ratings, enrollment numbers, and completion rates alongside a featured student testimonial. Perfect for course landing pages and enrollment campaigns. #### Social Media Links Grid - **URL**: https://ui.beste.co/block/education86 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/education86.json"` (Radix: `/r/education86.json`) - **Description**: A social media connection section with platform cards showing handles and follower counts. Perfect for university marketing and student community building. #### Mission and Vision Statement - **URL**: https://ui.beste.co/block/education91 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/education91.json"` (Radix: `/r/education91.json`) - **Description**: A mission and vision statement section with side-by-side text blocks and an inspirational leadership quote. Perfect for university about pages and institutional branding. #### Global Partnerships Grid - **URL**: https://ui.beste.co/block/education99 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/education99.json"` (Radix: `/r/education99.json`) - **Description**: A global partnerships section showcasing partner institutions with location details and exchange statistics. Perfect for universities highlighting international collaborations. #### Institutional Quick Facts - **URL**: https://ui.beste.co/block/education100 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/education100.json"` (Radix: `/r/education100.json`) - **Description**: A quick facts grid displaying key institutional statistics with values, labels, and descriptions. Perfect for university at-a-glance pages and prospective student information. #### Academy Course Cards - **URL**: https://ui.beste.co/block/education101 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/education101.json"` (Radix: `/r/education101.json`) - **Description**: An academy section with an eyebrow over a hairline rule, a two-column heading, and three course cards that each float a live progress checklist above a category, title, and lesson count. #### Lesson Check Quiz - **URL**: https://ui.beste.co/block/education102 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/education102.json"` (Radix: `/r/education102.json`) - **Description**: An end-of-lesson knowledge check: a two-column header, a three-figure strip for questions, pass mark, and attempts, a graded quiz that swaps itself for a score and a per-question review, and a list of readings for whatever went wrong. ### Error #### Centered 404 Message - **URL**: https://ui.beste.co/block/error1 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/error1.json"` (Radix: `/r/error1.json`) - **Description**: Minimal centered 404 page with a large error code, a heading, a short explanation, two call-to-action buttons, and a divided row of popular page links underneath. #### 404 With Site Search - **URL**: https://ui.beste.co/block/error2 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/error2.json"` (Radix: `/r/error2.json`) - **Description**: Search-first 404 page: a controlled search field with a submit handler, plus a bordered list of suggested pages with titles, descriptions, and hover arrows. #### Split 404 With Image - **URL**: https://ui.beste.co/block/error3 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/error3.json"` (Radix: `/r/error3.json`) - **Description**: Two-column 404 page with the error code, heading, explanation, buttons, and a small note on one side, and a full-bleed image that scales on hover on the other. The image side can be flipped with a prop. #### 404 With Destination Cards - **URL**: https://ui.beste.co/block/error4 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/error4.json"` (Radix: `/r/error4.json`) - **Description**: 404 page that recovers the visit with a grid of destination cards, each with an icon, title, description, and hover arrow, followed by a centered row of fallback buttons. #### 404 Support Panel - **URL**: https://ui.beste.co/block/error5 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/error5.json"` (Radix: `/r/error5.json`) - **Description**: Card-style 404 panel that echoes the requested URL in monospace, pairs a browser-history back button with link actions, and closes with a support and status link row. #### Inline 404 Line - **URL**: https://ui.beste.co/block/error6 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/error6.json"` (Radix: `/r/error6.json`) - **Description**: The smallest possible 404: the status code and the message sit on one line separated by a vertical rule, stacking on mobile, with a single outline button underneath. #### 404 Notice Card - **URL**: https://ui.beste.co/block/error7 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/error7.json"` (Radix: `/r/error7.json`) - **Description**: Compact bordered 404 card with a circular icon, status label, heading, one-line explanation, and stacked full-width buttons. Sized for app shells and modals as well as full pages. #### 404 With Redirect Countdown - **URL**: https://ui.beste.co/block/error8 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/error8.json"` (Radix: `/r/error8.json`) - **Description**: 404 page that counts down to an automatic redirect and calls onRedirect once it reaches zero, with a cancel button that stops the timer and a manual go-now link. #### 404 Did You Mean - **URL**: https://ui.beste.co/block/error9 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/error9.json"` (Radix: `/r/error9.json`) - **Description**: Left-aligned 404 for documentation and marketing sites: the requested path is shown struck through in monospace above a did-you-mean box linking to the closest matching page. #### Fullscreen 404 With Background - **URL**: https://ui.beste.co/block/error10 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/error10.json"` (Radix: `/r/error10.json`) - **Description**: Screen-height 404 with a full-bleed background photo under a dark overlay, centered white messaging, and a solid plus outline button pair sized for marketing sites. #### 404 With Product Recommendations - **URL**: https://ui.beste.co/block/error11 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/error11.json"` (Radix: `/r/error11.json`) - **Description**: Store 404 for dead product URLs: the message and shopping buttons sit above a four-up product grid with square imagery, prices, and optional strikethrough compare-at prices. #### 404 With Popular Articles - **URL**: https://ui.beste.co/block/error12 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/error12.json"` (Radix: `/r/error12.json`) - **Description**: Blog 404 that turns a dead post URL into reading: centered messaging above a three-up article grid with cover images, category badges, dates, and read times. #### 404 With Site Directory - **URL**: https://ui.beste.co/block/error13 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/error13.json"` (Radix: `/r/error13.json`) - **Description**: 404 page that doubles as a sitemap: left-aligned messaging over four columns of grouped section links, so visitors on a large site can jump straight to the area they wanted. #### Editorial 404 Section Index - **URL**: https://ui.beste.co/block/error14 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/error14.json"` (Radix: `/r/error14.json`) - **Description**: Editorial 404 with a square eyebrow and status code over a hairline rule, an oversized accent-highlighted headline, and a ruled index of the sections visitors reach for next. #### 500 Incident Report - **URL**: https://ui.beste.co/block/error15 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/error15.json"` (Radix: `/r/error15.json`) - **Description**: Server error page with a square eyebrow and status code over a hairline rule, a bold accent headline, a bordered incident table of reference, timestamp and service rows, and a retry seal button beside a status page link. #### 403 Access Request - **URL**: https://ui.beste.co/block/error16 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/error16.json"` (Radix: `/r/error16.json`) - **Description**: Permission-denied page for team apps: an accent lock chip and bold headline on the left, the signed-in account card with an account switch link and a square-bullet list of access requirements on the right. #### Maintenance Window Notice - **URL**: https://ui.beste.co/block/error17 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/error17.json"` (Radix: `/r/error17.json`) - **Description**: Planned downtime page with a square eyebrow and status code, a bold accent headline, three bordered cells for the maintenance window, a working notify-me email form with a success state, and a live progress link. #### Expired Link Recovery - **URL**: https://ui.beste.co/block/error18 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/error18.json"` (Radix: `/r/error18.json`) - **Description**: Expired magic-link page with a square eyebrow and status code, a bold accent headline, the expiry timestamp in a bordered strip, a seal button that swaps to a sent confirmation, and a square-bullet list explaining the expiry. #### Typographic 404 Index - **URL**: https://ui.beste.co/block/error19 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/error19.json"` (Radix: `/r/error19.json`) - **Description**: Monochrome 404 built on oversized display type: a parenthetical eyebrow, a display headline with a muted emphasis clause, a pill call to action, and a ruled index of every section on the site. #### Editorial 404 With Portrait Image - **URL**: https://ui.beste.co/block/error20 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/error20.json"` (Radix: `/r/error20.json`) - **Description**: Two-column 404 in a quiet monochrome language: a parenthetical eyebrow, a two-line display headline, a pill call to action and an oversized report-the-link email on the left, a tall captioned photograph on the right. #### Server Error Record - **URL**: https://ui.beste.co/block/error21 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/error21.json"` (Radix: `/r/error21.json`) - **Description**: Monochrome server-error page: a parenthetical eyebrow over a display headline, a retry pill beside a status link, and a ruled two-column record of the reference, timestamp, subsystem and state. #### Planned Downtime Window - **URL**: https://ui.beste.co/block/error22 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/error22.json"` (Radix: `/r/error22.json`) - **Description**: Monochrome maintenance page: a parenthetical eyebrow over a display headline, the downtime window as a ruled three-column record, and a rounded notify-me field with a confirmed state. #### Invitation Only Access - **URL**: https://ui.beste.co/block/error23 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/error23.json"` (Radix: `/r/error23.json`) - **Description**: Monochrome permission page: a display headline over a request pill that swaps to a sent confirmation, a ruled record of the project, owner and visibility, and an overlapping avatar row of current members. #### 404 With Featured Work - **URL**: https://ui.beste.co/block/error24 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/error24.json"` (Radix: `/r/error24.json`) - **Description**: Studio 404 that recovers a dead project URL: a square eyebrow and status code over a hairline rule, an accent headline and seal button, then two large project cards with category lines and hover arrow chips. #### Rate Limit Cooldown - **URL**: https://ui.beste.co/block/error25 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/error25.json"` (Radix: `/r/error25.json`) - **Description**: Too-many-requests page with a square eyebrow and status code, an accent headline, three bordered usage cells, and a live cooldown counter that swaps itself for a retry seal button when it reaches zero. #### Payment Required Lockout - **URL**: https://ui.beste.co/block/error26 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/error26.json"` (Radix: `/r/error26.json`) - **Description**: Billing lockout page: an accent card chip and headline with an update-payment seal button on the left, an unpaid invoice table and a square-bullet list of what stays untouched on the right. #### Session Expired Sign In - **URL**: https://ui.beste.co/block/error27 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/error27.json"` (Radix: `/r/error27.json`) - **Description**: Timed-out session page: an accent headline over an account strip showing the avatar, address and sign-out timestamp, an autosave reassurance line, and a sign-in seal button beside an account switch link. #### Region Unavailable Notice - **URL**: https://ui.beste.co/block/error28 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/error28.json"` (Radix: `/r/error28.json`) - **Description**: Geo-restriction page: an accent globe chip and headline, the detected region in a bordered strip, a two-column ruled list of markets with their rollout status, and a notify-me seal button. #### Oversized Numeral 404 - **URL**: https://ui.beste.co/block/error29 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/error29.json"` (Radix: `/r/error29.json`) - **Description**: Monochrome 404 led by the status code set as an oversized numeral, with the statement and pill call to action on one side of a hairline rule and the explanation plus display-type links on the other. #### Search Led 404 - **URL**: https://ui.beste.co/block/error30 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/error30.json"` (Radix: `/r/error30.json`) - **Description**: Monochrome 404 that hands the visitor a search field: a display headline with a muted emphasis clause, a rounded search bar with a circular submit seal wired to a callback, and a ruled list of the most travelled routes. #### Offline Sync Queue - **URL**: https://ui.beste.co/block/error31 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/error31.json"` (Radix: `/r/error31.json`) - **Description**: Offline screen built around a live sync queue: a display headline with a retry pill and a self-restarting countdown that raises the attempt number, beside a soft panel listing every change held on the device with a pulsing listening indicator. #### 404 With Recent Writing - **URL**: https://ui.beste.co/block/error32 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/error32.json"` (Radix: `/r/error32.json`) - **Description**: Monochrome 404 for a renamed article: a display headline and pill call to action above three recent entries, each a full-colour image tile with a plain date line and a bold title. #### Retired Page Record - **URL**: https://ui.beste.co/block/error33 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/error33.json"` (Radix: `/r/error33.json`) - **Description**: Monochrome page for deliberately removed content: a display headline, a ruled record of when it was published, retired and why, then a pill link to the replacement beside an archive link. #### Editorial Not Found Split - **URL**: https://ui.beste.co/block/error34 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/error34.json"` (Radix: `/r/error34.json`) - **Description**: A calm not-found page with an error eyebrow, an oversized light heading and recovery actions on the left, beside a hairline list of the destinations people usually need instead. #### Server Error With Live Status - **URL**: https://ui.beste.co/block/error35 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/error35.json"` (Radix: `/r/error35.json`) - **Description**: A calm server-error page with a monospace code, an oversized light heading, recovery actions, an image tile floating a live uptime strip, and a hairline table carrying the incident reference. #### Not Found With Search - **URL**: https://ui.beste.co/block/error36 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/error36.json"` (Radix: `/r/error36.json`) - **Description**: A not-found page that offers a way forward rather than a way back, pairing an oversized light heading with an image tile floating a live search panel and a two-column hairline list of likely destinations. #### Access Denied With Request Path - **URL**: https://ui.beste.co/block/error37 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/error37.json"` (Radix: `/r/error37.json`) - **Description**: A permissions error that names the missing role, lists the people who can grant it with their portraits, and floats a live access request card on an image tile beside the copy. ### Event #### Conference Hero with Image - **URL**: https://ui.beste.co/block/event4 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/event4.json"` (Radix: `/r/event4.json`) - **Description**: Split-layout event hero displaying conference details with date, location, attendee count, and featured image. Perfect for developer conferences and tech summits. #### Minimal Event Hero - **URL**: https://ui.beste.co/block/event5 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/event5.json"` (Radix: `/r/event5.json`) - **Description**: Centered event hero with oversized typography, event date, and call-to-action buttons. Perfect for design conferences and annual summits. #### Event Hero with Ticket Pricing - **URL**: https://ui.beste.co/block/event7 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/event7.json"` (Radix: `/r/event7.json`) - **Description**: Centered event hero featuring prominent ticket price display with early bird discount and original price strikethrough. Perfect for tech summits and paid conferences. #### Event Hero with Social Proof - **URL**: https://ui.beste.co/block/event10 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/event10.json"` (Radix: `/r/event10.json`) - **Description**: Event hero displaying attendee count, speaker numbers, and country reach statistics with trusted company logos. Perfect for enterprise summits and industry conferences. #### Keynote Speaker Profile - **URL**: https://ui.beste.co/block/event13 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/event13.json"` (Radix: `/r/event13.json`) - **Description**: Featured speaker spotlight with large portrait, bio, session topic, and social media links. Perfect for highlighting conference keynote presenters. #### Speaker Sessions Schedule - **URL**: https://ui.beste.co/block/event14 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/event14.json"` (Radix: `/r/event14.json`) - **Description**: Speaker cards displaying multiple sessions per presenter with times, locations, and session types. Perfect for multi-track conferences with recurring speakers. #### Featured Keynotes Gallery - **URL**: https://ui.beste.co/block/event15 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/event15.json"` (Radix: `/r/event15.json`) - **Description**: Visual speaker grid with full-height portrait images, gradient overlays, and keynote topics. Perfect for showcasing headline speakers at major conferences. #### Panel Discussion Section - **URL**: https://ui.beste.co/block/event16 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/event16.json"` (Radix: `/r/event16.json`) - **Description**: Panel session card featuring moderator highlight, panelist grid, discussion topic, and scheduled time. Perfect for industry panels and expert roundtables. #### Event Hosts Section - **URL**: https://ui.beste.co/block/event17 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/event17.json"` (Radix: `/r/event17.json`) - **Description**: Host profiles with photos, bios, and social media links displayed in a two-column grid. Perfect for introducing conference MCs and event directors. #### Past Speakers Gallery - **URL**: https://ui.beste.co/block/event19 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/event19.json"` (Radix: `/r/event19.json`) - **Description**: Image gallery of previous conference speakers with year badges, topics, and hover zoom effects. Perfect for showcasing event history and alumni speakers. #### Call for Speakers - **URL**: https://ui.beste.co/block/event20 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/event20.json"` (Radix: `/r/event20.json`) - **Description**: Speaker submission CTA with submission deadline, benefits checklist, and proposal guidelines. Perfect for conferences seeking talk proposals. #### Featured Sessions Grid - **URL**: https://ui.beste.co/block/event25 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/event25.json"` (Radix: `/r/event25.json`) - **Description**: Session cards displaying talk titles, speakers, times, locations, and remaining capacity. Perfect for conference agendas and session discovery. #### Workshop Registration List - **URL**: https://ui.beste.co/block/event26 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/event26.json"` (Radix: `/r/event26.json`) - **Description**: Workshop cards with instructor profiles, skill levels, requirements, and live capacity tracking. Perfect for hands-on conference workshops and training sessions. #### Breaks and Networking Schedule - **URL**: https://ui.beste.co/block/event27 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/event27.json"` (Radix: `/r/event27.json`) - **Description**: Schedule cards for coffee breaks, lunch, and social events with timing, locations, and activity highlights. Perfect for showing networking opportunities. #### Live Session Now Playing - **URL**: https://ui.beste.co/block/event28 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/event28.json"` (Radix: `/r/event28.json`) - **Description**: Real-time session display with live indicator, viewer count, current speaker, and upcoming sessions queue. Perfect for conference live streams and virtual events. #### Personal Schedule Builder - **URL**: https://ui.beste.co/block/event29 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/event29.json"` (Radix: `/r/event29.json`) - **Description**: Interactive session picker with add/remove toggles, personal schedule summary, and calendar export. Perfect for multi-track conferences where attendees build agendas. #### Calendar Integration Section - **URL**: https://ui.beste.co/block/event30 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/event30.json"` (Radix: `/r/event30.json`) - **Description**: Event calendar sync with multiple export options including Google Calendar, email invite, and ICS download. Perfect for event reminders and schedule syncing. #### Team Discount Calculator - **URL**: https://ui.beste.co/block/event33 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/event33.json"` (Radix: `/r/event33.json`) - **Description**: Interactive pricing calculator with quantity selector, tiered discounts, and real-time savings display. Perfect for group ticket sales and team registrations. #### Ticket Selection Cart - **URL**: https://ui.beste.co/block/event36 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/event36.json"` (Radix: `/r/event36.json`) - **Description**: Multi-ticket type selector with quantity controls, availability tracking, and checkout total. Perfect for event ticketing with multiple pass options. #### Sold Out Waitlist Form - **URL**: https://ui.beste.co/block/event38 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/event38.json"` (Radix: `/r/event38.json`) - **Description**: Waitlist signup form with email capture, queue position display, and similar events opt-in checkbox. Perfect for sold-out events and high-demand tickets. #### Conference Bundle Pricing - **URL**: https://ui.beste.co/block/event40 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/event40.json"` (Radix: `/r/event40.json`) - **Description**: Bundle pricing cards showing included items, savings percentages, and feature lists. Perfect for conference packages combining passes, workshops, and recordings. #### Become a Sponsor CTA - **URL**: https://ui.beste.co/block/event53 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/event53.json"` (Radix: `/r/event53.json`) - **Description**: Two-column sponsorship pitch with benefit highlights, audience reach statistics, and contact CTAs. Perfect for attracting event sponsors and partners. #### Sponsorship Tiers Comparison - **URL**: https://ui.beste.co/block/event54 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/event54.json"` (Radix: `/r/event54.json`) - **Description**: Tiered sponsorship packages with pricing cards and feature comparison matrix showing benefits per level. Perfect for sponsor prospectus and partnership pages. #### Featured Partner Spotlight - **URL**: https://ui.beste.co/block/event58 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/event58.json"` (Radix: `/r/event58.json`) - **Description**: Two-column partner showcase with company logo, description, highlights, and testimonial quote. Perfect for highlighting platinum sponsors and key partners. #### Workshop Registration Form - **URL**: https://ui.beste.co/block/event66 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/event66.json"` (Radix: `/r/event66.json`) - **Description**: Interactive workshop selector with capacity tracking, attendee info form, and pricing summary. Perfect for paid workshops and training session signups. #### Code of Conduct Section - **URL**: https://ui.beste.co/block/event79 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/event79.json"` (Radix: `/r/event79.json`) - **Description**: Community standards display with principle cards covering respect, inclusion, and safety with issue reporting contact. Perfect for event policies and community guidelines. #### Live Stream Player Section - **URL**: https://ui.beste.co/block/event93 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/event93.json"` (Radix: `/r/event93.json`) - **Description**: Video player section with thumbnail preview, live indicator, viewer count, and multi-platform streaming links. Perfect for virtual events and conference live streams. #### Featured Session Schedule - **URL**: https://ui.beste.co/block/event94 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/event94.json"` (Radix: `/r/event94.json`) - **Description**: An events section that opens with a split featured card pairing a photo with date, time, and format lines, then lists the rest of the schedule as rows separated by hairlines, each with a bordered date tile, host meta, seat count, and register action. #### Filterable Day Agenda - **URL**: https://ui.beste.co/block/event95 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/event95.json"` (Radix: `/r/event95.json`) - **Description**: A conference agenda whose track pills are derived from the sessions and carry live counts, narrowing a timed list of hairline rows that align the slot, the session, and its speaker and room. #### Event Detail With Countdown - **URL**: https://ui.beste.co/block/event96 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/event96.json"` (Radix: `/r/event96.json`) - **Description**: A single event page opening on a full-bleed photo band with a live countdown anchored into it, then pairing the pitch and two actions with a hairline table of practical facts and a speaker list. #### Recorded Sessions Archive - **URL**: https://ui.beste.co/block/event97 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/event97.json"` (Radix: `/r/event97.json`) - **Description**: A past events archive leading with an image tile that floats a recording card, then listing every earlier session as linked hairline rows with its date, place, and running time. #### Multi-City Tour Dates - **URL**: https://ui.beste.co/block/event98 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/event98.json"` (Radix: `/r/event98.json`) - **Description**: A tour schedule listing each city as a linked hairline row with its venue, date, and remaining seats, muting the sold-out stops, beside a sticky tile that floats a live locations card. #### Webinar Registration Split - **URL**: https://ui.beste.co/block/event99 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/event99.json"` (Radix: `/r/event99.json`) - **Description**: A live session sign-up splitting a bordered container between the pitch, a hairline table of when and how long, and a checked takeaway list, beside a soft column holding a working registration card and the hosts. #### Event Recap Report - **URL**: https://ui.beste.co/block/event100 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/event100.json"` (Radix: `/r/event100.json`) - **Description**: A post-event write-up opening on four hairline figures, then a three-photo row at mixed heights with captions, a soft panel carrying an attendee quote, and what was promised in the room. #### Slot By Slot Day Builder - **URL**: https://ui.beste.co/block/event101 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/event101.json"` (Radix: `/r/event101.json`) - **Description**: A programme picker that builds the day beside the questions: one choice per time slot drops a session card with its room, its length, and its photograph into a running plan, and the hours left open stay on the page instead of being hidden. ### FAQ #### Collapsible Accordion - **URL**: https://ui.beste.co/block/faq7 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq7.json"` (Radix: `/r/faq7.json`) - **Description**: Stacked cards with expandable sections. Use when you need to present multiple questions with full-length answers in a compact, organized format. #### Open List Layout - **URL**: https://ui.beste.co/block/faq8 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq8.json"` (Radix: `/r/faq8.json`) - **Description**: Questions with answers displayed below in a simple list. Best for FAQs with shorter answers that don't require expansion. #### Three Column Grid - **URL**: https://ui.beste.co/block/faq9 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq9.json"` (Radix: `/r/faq9.json`) - **Description**: Q&A pairs arranged in a responsive grid layout. Ideal for displaying concise answers in a scannable, multi-column format. #### Tabbed Categories - **URL**: https://ui.beste.co/block/faq10 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq10.json"` (Radix: `/r/faq10.json`) - **Description**: Sidebar navigation with category tabs and accordion content. Perfect for organizing large FAQ sets across multiple topics. #### Searchable Accordion - **URL**: https://ui.beste.co/block/faq11 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq11.json"` (Radix: `/r/faq11.json`) - **Description**: Search input with accordion items that filter in real-time. Essential for FAQs with many questions that users need to quickly locate. #### Grouped Sections - **URL**: https://ui.beste.co/block/faq12 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq12.json"` (Radix: `/r/faq12.json`) - **Description**: FAQs organized into titled sections with accordions underneath. Excellent for presenting related questions grouped by topic. #### Side-by-Side Image - **URL**: https://ui.beste.co/block/faq13 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq13.json"` (Radix: `/r/faq13.json`) - **Description**: Accordion paired with a large image on left or right. Use when you want visual context alongside your FAQ answers. #### With CTA Card - **URL**: https://ui.beste.co/block/faq14 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq14.json"` (Radix: `/r/faq14.json`) - **Description**: Accordion followed by a call-to-action card below. Great for converting users by offering additional contact options at the end. #### Modal Dialog Cards - **URL**: https://ui.beste.co/block/faq15 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq15.json"` (Radix: `/r/faq15.json`) - **Description**: Clickable question cards that open answers in a modal dialog. Perfect for card-based layouts that need expanded views. #### Numbered List - **URL**: https://ui.beste.co/block/faq16 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq16.json"` (Radix: `/r/faq16.json`) - **Description**: Questions displayed with numbered badges and answers below. Ideal for step-by-step guides or priority-ordered FAQs. #### Two Column Q&A - **URL**: https://ui.beste.co/block/faq17 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq17.json"` (Radix: `/r/faq17.json`) - **Description**: Questions on left, answers on right in a two-column grid layout. Works well for balanced, side-by-side presentation. #### Timeline Layout - **URL**: https://ui.beste.co/block/faq18 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq18.json"` (Radix: `/r/faq18.json`) - **Description**: Alternating left-right cards connected by a vertical line. Great for creating a narrative flow through related questions. #### Chat Conversation - **URL**: https://ui.beste.co/block/faq19 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq19.json"` (Radix: `/r/faq19.json`) - **Description**: Message-style bubbles simulating a chat interface. Perfect for a friendly, conversational tone in your FAQ section. #### Tabbed Cards - **URL**: https://ui.beste.co/block/faq20 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq20.json"` (Radix: `/r/faq20.json`) - **Description**: Horizontal tabs with card-based content below for each category. Clean for organizing FAQs by topic tabs. #### Icon Grid Cards - **URL**: https://ui.beste.co/block/faq21 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq21.json"` (Radix: `/r/faq21.json`) - **Description**: Cards in a grid with icons and short answers. Ideal for highlighting key features or benefits with visual elements. #### Search with Grid - **URL**: https://ui.beste.co/block/faq22 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq22.json"` (Radix: `/r/faq22.json`) - **Description**: Search input with results displayed in a two-column grid. Best for knowledge bases with searchable, card-based results. #### Horizontal Scroll Cards - **URL**: https://ui.beste.co/block/faq23 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq23.json"` (Radix: `/r/faq23.json`) - **Description**: Cards that scroll horizontally with fade edges. Good for mobile-friendly carousels of FAQ items. #### Split View List - **URL**: https://ui.beste.co/block/faq24 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq24.json"` (Radix: `/r/faq24.json`) - **Description**: Question list on left, selected answer on right with image. Effective for visual answers with image headers. #### Terminal Window - **URL**: https://ui.beste.co/block/faq25 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq25.json"` (Radix: `/r/faq25.json`) - **Description**: Terminal-style interface with commands and outputs. Perfect for developer FAQs or technical documentation. #### Sticky Notes - **URL**: https://ui.beste.co/block/faq26 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq26.json"` (Radix: `/r/faq26.json`) - **Description**: Colorful rotated note cards in a grid. Creates a playful, informal design for casual FAQs. #### Card Carousel - **URL**: https://ui.beste.co/block/faq27 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq27.json"` (Radix: `/r/faq27.json`) - **Description**: Single card that rotates through questions with progress dots and navigation buttons. Great for featured question rotation. #### Glassmorphism Cards - **URL**: https://ui.beste.co/block/faq28 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq28.json"` (Radix: `/r/faq28.json`) - **Description**: Frosted glass effect cards in a two-column grid. Modern aesthetic for sleek, contemporary designs. #### Magazine Columns - **URL**: https://ui.beste.co/block/faq29 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq29.json"` (Radix: `/r/faq29.json`) - **Description**: Two-column layout with left accent borders and different styling. Print-magazine inspired for balanced layouts. #### Blur Reveal on Hover - **URL**: https://ui.beste.co/block/faq30 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq30.json"` (Radix: `/r/faq30.json`) - **Description**: Question with blurred answer that unblurs on hover. Interactive approach for answers that unfold visually. #### Kanban Columns - **URL**: https://ui.beste.co/block/faq31 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq31.json"` (Radix: `/r/faq31.json`) - **Description**: Three vertical columns with icons and card stacks. Useful for organizing FAQs into distinct categories like a kanban board. #### Quote Style Cards - **URL**: https://ui.beste.co/block/faq32 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq32.json"` (Radix: `/r/faq32.json`) - **Description**: Cards with quote icons in corners, arranged in a grid. Elegant design for emphasizing key points with typography. #### Timeline Steps - **URL**: https://ui.beste.co/block/faq33 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq33.json"` (Radix: `/r/faq33.json`) - **Description**: Vertical timeline with alternating content and numbered dots. Perfect for onboarding or journey-based FAQs. #### Minimal Plus-Minus - **URL**: https://ui.beste.co/block/faq34 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq34.json"` (Radix: `/r/faq34.json`) - **Description**: Simple accordion using plus/minus icons with minimal styling. Clean, distraction-free accordion approach. #### Emoji Icon Grid - **URL**: https://ui.beste.co/block/faq35 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq35.json"` (Radix: `/r/faq35.json`) - **Description**: Grid cards with emoji icons and short answers. Fun, visual approach with emoji-based categorization. #### Large Number List - **URL**: https://ui.beste.co/block/faq36 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq36.json"` (Radix: `/r/faq36.json`) - **Description**: Questions with large faded numbers and answers. Prominent numbering creates strong visual hierarchy. #### AI Chat Interface - **URL**: https://ui.beste.co/block/faq37 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq37.json"` (Radix: `/r/faq37.json`) - **Description**: Chat-style bubble interface with AI assistant styling. Great for modern conversational FAQ experiences. #### Left Border Accent - **URL**: https://ui.beste.co/block/faq38 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq38.json"` (Radix: `/r/faq38.json`) - **Description**: Accordion items with colored left border on active state. Subtle visual indicator of expansion. #### Slide-Out Panels - **URL**: https://ui.beste.co/block/faq39 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq39.json"` (Radix: `/r/faq39.json`) - **Description**: Questions that slide open to reveal answers with bottom border separator. Smooth reveal animation. #### Markdown Code Block - **URL**: https://ui.beste.co/block/faq40 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq40.json"` (Radix: `/r/faq40.json`) - **Description**: FAQ displayed as code documentation in a terminal-style block. Perfect for developer-focused content. #### Photo Cards - **URL**: https://ui.beste.co/block/faq41 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq41.json"` (Radix: `/r/faq41.json`) - **Description**: Cards with images and text below in a grid. Ideal when each answer has relevant supporting imagery. #### 3D Flip Cards - **URL**: https://ui.beste.co/block/faq42 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq42.json"` (Radix: `/r/faq42.json`) - **Description**: Cards that flip 180 degrees on hover to show answer. Interactive 3D effect for engaging presentation. #### Metro Tiles - **URL**: https://ui.beste.co/block/faq43 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq43.json"` (Radix: `/r/faq43.json`) - **Description**: Colorful tiles with icons and white text. Bold, modern design inspired by metro UI patterns. #### Minimal Two Column - **URL**: https://ui.beste.co/block/faq44 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq44.json"` (Radix: `/r/faq44.json`) - **Description**: Simple two-column layout with questions and answers. Ultra-minimalist design with no extra styling. #### Show More Expandable - **URL**: https://ui.beste.co/block/faq45 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq45.json"` (Radix: `/r/faq45.json`) - **Description**: Card stack with show more button to reveal additional items. Good for progressive disclosure of FAQs. #### Tag Filter Grid - **URL**: https://ui.beste.co/block/faq46 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq46.json"` (Radix: `/r/faq46.json`) - **Description**: Filterable grid using tag pills at top. Perfect for FAQs that need multi-category filtering. #### Horizontal Split View - **URL**: https://ui.beste.co/block/faq47 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq47.json"` (Radix: `/r/faq47.json`) - **Description**: Questions on left buttons, answers on right panel. Interview-style layout for selected item display. #### Info Icon Tooltips - **URL**: https://ui.beste.co/block/faq48 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq48.json"` (Radix: `/r/faq48.json`) - **Description**: Info icons that show tooltips on hover with answer text. Compact design with hover-revealed content. #### Inline Compact - **URL**: https://ui.beste.co/block/faq49 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq49.json"` (Radix: `/r/faq49.json`) - **Description**: Questions and answers on same line with colon separator. Extremely compact format for dense content. #### Window Style Cards - **URL**: https://ui.beste.co/block/faq50 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq50.json"` (Radix: `/r/faq50.json`) - **Description**: Cards styled like OS windows with title bars and close buttons. Retro OS design aesthetic. #### Two-Tone Headers - **URL**: https://ui.beste.co/block/faq51 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq51.json"` (Radix: `/r/faq51.json`) - **Description**: Cards with colored header section and white content area. Clear visual separation with color blocking. #### Bubble Pills - **URL**: https://ui.beste.co/block/faq52 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq52.json"` (Radix: `/r/faq52.json`) - **Description**: Questions as clickable pills with answers expanding below. Bubble-shaped buttons for interactive selection. #### Numbered Pairs - **URL**: https://ui.beste.co/block/faq53 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq53.json"` (Radix: `/r/faq53.json`) - **Description**: Two-column grid with large numbers and Q&A pairs. Clean numbered format with clear visual hierarchy. #### Vertical Tab Panel - **URL**: https://ui.beste.co/block/faq54 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq54.json"` (Radix: `/r/faq54.json`) - **Description**: Left sidebar tabs with right content panel. Traditional tab interface for category-based FAQs. #### Multi-Open Accordion - **URL**: https://ui.beste.co/block/faq55 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq55.json"` (Radix: `/r/faq55.json`) - **Description**: Accordion allowing multiple items open simultaneously with plus/minus icons. Flexible expansion approach. #### Checkmark List - **URL**: https://ui.beste.co/block/faq56 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq56.json"` (Radix: `/r/faq56.json`) - **Description**: Grid cards with green checkmarks emphasizing answers. Positive confirmation visual for affirmative FAQs. #### Cards With Links - **URL**: https://ui.beste.co/block/faq57 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq57.json"` (Radix: `/r/faq57.json`) - **Description**: Question-answer cards with external link buttons below. Drives users to related resources or docs. #### Auto-Play Carousel - **URL**: https://ui.beste.co/block/faq58 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq58.json"` (Radix: `/r/faq58.json`) - **Description**: Animated carousel with progress bar and auto-advance through questions. Engaging for featured FAQs. #### Typewriter Terminal - **URL**: https://ui.beste.co/block/faq59 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq59.json"` (Radix: `/r/faq59.json`) - **Description**: Terminal-style interface with typing effect for answers. Animated typing creates dynamic reveal effect. #### Gradient Border Glow - **URL**: https://ui.beste.co/block/faq60 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq60.json"` (Radix: `/r/faq60.json`) - **Description**: Cards with animated gradient borders and shine effects on hover. Premium feel with advanced CSS effects. #### Morphing Animated - **URL**: https://ui.beste.co/block/faq61 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq61.json"` (Radix: `/r/faq61.json`) - **Description**: Advanced animations with ripple effects, morphing orbs, and shimmer. Highly interactive with multiple effect layers. #### Scroll-Triggered Reveal - **URL**: https://ui.beste.co/block/faq62 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq62.json"` (Radix: `/r/faq62.json`) - **Description**: Cards animate in as you scroll with staggered timing. Scroll-based animation creates engaging reveal. #### Spotlight Focus - **URL**: https://ui.beste.co/block/faq63 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq63.json"` (Radix: `/r/faq63.json`) - **Description**: Clicked card highlights while others dim with spotlight effect. Creates focused attention on selected answer. #### Neon Glow Effects - **URL**: https://ui.beste.co/block/faq64 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq64.json"` (Radix: `/r/faq64.json`) - **Description**: Cyberpunk-styled cards with neon glow, scan lines, and text shadows. Futuristic aesthetic with glowing effects. #### Stacked Card Flip - **URL**: https://ui.beste.co/block/faq65 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq65.json"` (Radix: `/r/faq65.json`) - **Description**: Cards stack on top of each other that expand when clicked. Physical stack metaphor with expansion. #### Sliding Background - **URL**: https://ui.beste.co/block/faq66 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq66.json"` (Radix: `/r/faq66.json`) - **Description**: Questions with sliding primary color background on hover and click. Smooth background animation reveal. #### Glass Morphism Accordion - **URL**: https://ui.beste.co/block/faq67 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq67.json"` (Radix: `/r/faq67.json`) - **Description**: Modern FAQ with glassmorphic cards, animated gradient blob effects, shimmer animations, and progress indicators. Mouse-tracking gradient for interactive feel. Perfect for modern design systems and premium brands. #### FAQ with Side Heading and Numbered Cards - **URL**: https://ui.beste.co/block/faq68 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq68.json"` (Radix: `/r/faq68.json`) - **Description**: Two-column FAQ section with a badge, heading, and description on the left, and a stacked list of numbered question cards on the right. Each card opens to reveal a plain answer block below it with no separator line. #### FAQ With Contact - **URL**: https://ui.beste.co/block/faq69 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq69.json"` (Radix: `/r/faq69.json`) - **Description**: Numbered FAQ accordion beside a contact card with image, prompt and a contact CTA. #### Two-Column FAQ - **URL**: https://ui.beste.co/block/faq70 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq70.json"` (Radix: `/r/faq70.json`) - **Description**: FAQ accordion split into two independent columns. #### Minimal FAQ - **URL**: https://ui.beste.co/block/faq71 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq71.json"` (Radix: `/r/faq71.json`) - **Description**: Oversized single-column FAQ accordion with generous spacing. #### Tabbed FAQ - **URL**: https://ui.beste.co/block/faq72 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq72.json"` (Radix: `/r/faq72.json`) - **Description**: Category-tabbed FAQ using shadcn Tabs with an accordion per category. #### Sticky FAQ - **URL**: https://ui.beste.co/block/faq73 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq73.json"` (Radix: `/r/faq73.json`) - **Description**: Sticky intro and CTA beside a single-column FAQ accordion. #### FAQ Cards - **URL**: https://ui.beste.co/block/faq74 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq74.json"` (Radix: `/r/faq74.json`) - **Description**: Always-open FAQ presented as a scannable grid of Q&A cards. #### FAQ With Contact Image - **URL**: https://ui.beste.co/block/faq75 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq75.json"` (Radix: `/r/faq75.json`) - **Description**: Centered header above a two-column FAQ: a portrait image with a contact prompt and CTA on the left, and an expandable plus/minus accordion of questions on the right. #### Editorial Two-Column FAQ - **URL**: https://ui.beste.co/block/faq76 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq76.json"` (Radix: `/r/faq76.json`) - **Description**: A two-column editorial FAQ pairing a sticky eyebrow, oversized heading, short note, and contact CTA on the left with a ruled, index-marked accordion of questions on the right. #### Numbered FAQ Index - **URL**: https://ui.beste.co/block/faq77 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq77.json"` (Radix: `/r/faq77.json`) - **Description**: A type-forward FAQ with a sticky heading rail and a numbered accordion list of expandable questions. #### FAQ with Contact Aside - **URL**: https://ui.beste.co/block/faq78 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq78.json"` (Radix: `/r/faq78.json`) - **Description**: An accordion of studio FAQs paired with a bordered aside card inviting a direct conversation. #### Sticky Split FAQ - **URL**: https://ui.beste.co/block/faq79 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq79.json"` (Radix: `/r/faq79.json`) - **Description**: A two-column FAQ with a sticky eyebrow, light heading, and support call to action on the left, and an interactive accordion of questions on the right. #### Two Column Answer Grid - **URL**: https://ui.beste.co/block/faq80 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq80.json"` (Radix: `/r/faq80.json`) - **Description**: An always-open FAQ laid out as a two-column grid of numbered, hairline-separated question and answer entries, closing with a soft support panel that pairs a short prompt with two actions. #### Grouped FAQ Columns - **URL**: https://ui.beste.co/block/faq81 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq81.json"` (Radix: `/r/faq81.json`) - **Description**: FAQ split into two labelled groups, each an independent accordion of ruled questions, so a long list stays scannable by topic; closed by a response-time note beside an outline pill CTA. #### Topic Rail FAQ - **URL**: https://ui.beste.co/block/faq82 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq82.json"` (Radix: `/r/faq82.json`) - **Description**: A categorised FAQ whose topic rail is derived from the questions themselves and carries live counts, switching the accordion beside it and resetting it to the first answer on every change. #### Objection Cards - **URL**: https://ui.beste.co/block/faq83 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq83.json"` (Radix: `/r/faq83.json`) - **Description**: An always-open FAQ that states four buying worries as quoted headings in a hairline matrix of cards, each answering in full and closing on a line of proof under a rule. #### Hairline Answer Ledger - **URL**: https://ui.beste.co/block/faq84 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq84.json"` (Radix: `/r/faq84.json`) - **Description**: A compact FAQ with nothing hidden behind a click: three labelled groups of question and answer pairs set as two-column hairline rows, closing on a link to longer reading. #### Live Search FAQ - **URL**: https://ui.beste.co/block/faq85 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq85.json"` (Radix: `/r/faq85.json`) - **Description**: An FAQ with a search field that narrows the list as it is typed, matching against topic, question, and answer, with every answer open on its own hairline row and an empty state when nothing matches. #### Two Column Accordion - **URL**: https://ui.beste.co/block/faq86 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq86.json"` (Radix: `/r/faq86.json`) - **Description**: An FAQ split across two columns of independent accordions, so opening one answer never closes another, closing on a soft support panel with two actions. #### FAQ With Contact Panel - **URL**: https://ui.beste.co/block/faq87 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq87.json"` (Radix: `/r/faq87.json`) - **Description**: An accordion FAQ set against a column that sticks while the answers scroll, holding an image tile that floats a live card for the engineer who wrote them and a direct booking action. #### Good Fit Qualifier - **URL**: https://ui.beste.co/block/faq88 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq88.json"` (Radix: `/r/faq88.json`) - **Description**: A qualifying FAQ that sets a checked good-fit column against a crossed not-for-you column, then answers the three questions that follow from them on two-column hairline rows. #### Filterable Glossary - **URL**: https://ui.beste.co/block/faq89 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq89.json"` (Radix: `/r/faq89.json`) - **Description**: A jargon glossary whose letter filter is derived from the terms themselves, narrowing a two-column hairline definition list with an empty state and a suggest-a-term action. #### Security Questionnaire Answers - **URL**: https://ui.beste.co/block/faq90 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq90.json"` (Radix: `/r/faq90.json`) - **Description**: A procurement FAQ grouping security controls into hairline rows that pair each question with a tone-coded yes, partial, or not-yet chip and the detail behind it, closing on a security pack request. #### Ask And Answered In Public - **URL**: https://ui.beste.co/block/faq91 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq91.json"` (Radix: `/r/faq91.json`) - **Description**: An open question FAQ pairing a soft panel that sticks while you scroll, holding a working question and email form, with the questions others sent recently answered as linked hairline entries. #### Answer Router - **URL**: https://ui.beste.co/block/faq92 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/faq92.json"` (Radix: `/r/faq92.json`) - **Description**: A help section that asks two questions instead of offering a search box: the answers pick one written answer from a list of routes, an image tile beside them floats the answer as a live assistant card and changes with it, and a soft panel underneath keeps a way through to a person. ### Feature #### Accordion With Live Media - **URL**: https://ui.beste.co/block/feature1 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature1.json"` (Radix: `/r/feature1.json`) - **Description**: Accordion on the left, swappable media surface on the right. Each row picks its own media kind: image, video, or live registry-component asset. #### Alternating Rows With Mixed Media - **URL**: https://ui.beste.co/block/feature2 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature2.json"` (Radix: `/r/feature2.json`) - **Description**: Hero header with a CTA, then alternating image-left / image-right rows. Each row's media slot accepts an image, video, or live registry-component asset. #### Service Grid With Icons - **URL**: https://ui.beste.co/block/feature3 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature3.json"` (Radix: `/r/feature3.json`) - **Description**: Centered header, three-column grid of capability cards, and an optional CTA with bottom text. Each card leads with a Lucide icon. #### Two-By-Two With Icon Tiles - **URL**: https://ui.beste.co/block/feature4 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature4.json"` (Radix: `/r/feature4.json`) - **Description**: Centered headline, four feature tiles in a 2x2 grid, and a CTA. Each tile leads with a large Lucide icon and a short description. #### Compact Two-Column Capabilities - **URL**: https://ui.beste.co/block/feature5 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature5.json"` (Radix: `/r/feature5.json`) - **Description**: Left-aligned headline followed by a compact two-column grid of capability rows. Each row leads with a Lucide icon. #### Capability Carousel - **URL**: https://ui.beste.co/block/feature8 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature8.json"` (Radix: `/r/feature8.json`) - **Description**: Looping carousel of capability cards with a centered media slot per card. Each slot accepts an image, video, or live registry-component asset. #### Three-Step How-To - **URL**: https://ui.beste.co/block/feature9 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature9.json"` (Radix: `/r/feature9.json`) - **Description**: Three side-by-side step cards with a media surface anchored to the bottom of each card. Each slot accepts an image, video, or live registry-component asset. #### Setup Checklist with Progress Sidebar - **URL**: https://ui.beste.co/block/feature22 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature22.json"` (Radix: `/r/feature22.json`) - **Description**: Multi-step checklist with status indicators, ETAs, and a sticky sidebar showing completion progress and key stats. Perfect for onboarding flows, implementation guides, or setup wizards. #### Quality Scorecard Grid - **URL**: https://ui.beste.co/block/feature23 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature23.json"` (Radix: `/r/feature23.json`) - **Description**: Six-card grid displaying quality metrics with icons, progress bars, and numeric scores for performance, security, and reliability. Perfect for system health dashboards or compliance overviews. #### Interactive Workflow Preview - **URL**: https://ui.beste.co/block/feature24 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature24.json"` (Radix: `/r/feature24.json`) - **Description**: Hover-activated tabs on the left reveal detailed workflow previews with images, bullet points, and action links on the right. Perfect for showcasing product capabilities or multi-step features. #### Hero Image with Floating Stat Card - **URL**: https://ui.beste.co/block/feature25 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature25.json"` (Radix: `/r/feature25.json`) - **Description**: Split layout featuring a styled hero image with animated floating stat badge alongside a feature checklist. Perfect for wellness apps, nutrition platforms, or lifestyle product benefits. #### Feature Card Grid with Hover Effects - **URL**: https://ui.beste.co/block/feature26 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature26.json"` (Radix: `/r/feature26.json`) - **Description**: Six-card grid with icons in rounded containers that animate on hover, plus titles and descriptions. Perfect for wellness platforms, health apps, or service benefit showcases. #### Process Timeline with Duration Badges - **URL**: https://ui.beste.co/block/feature28 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature28.json"` (Radix: `/r/feature28.json`) - **Description**: Responsive timeline showing sequential steps with icons, descriptions, and time estimates (horizontal on desktop, vertical on mobile). Perfect for onboarding flows, how-to guides, or getting-started sections. #### Platform Feature Cards with Metrics - **URL**: https://ui.beste.co/block/feature29 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature29.json"` (Radix: `/r/feature29.json`) - **Description**: Six-card grid featuring icons, descriptions, and highlighted stats (latency, uptime, user counts) with animated hover effects. Perfect for showcasing SaaS capabilities or enterprise platform features. #### Before/After Comparison Cards - **URL**: https://ui.beste.co/block/feature30 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature30.json"` (Radix: `/r/feature30.json`) - **Description**: Side-by-side comparison cards with bullet lists showing pain points vs. solutions after transformation. Perfect for demonstrating product value, workflow improvements, or competitive advantages. #### Bento Grid Platform Overview - **URL**: https://ui.beste.co/block/feature33 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature33.json"` (Radix: `/r/feature33.json`) - **Description**: Asymmetric bento-style grid with mixed card sizes, color variants, eyebrow labels, and large stat highlights. Perfect for platform overviews, feature showcases, or capability summaries. #### Numbered Reasons List - **URL**: https://ui.beste.co/block/feature34 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature34.json"` (Radix: `/r/feature34.json`) - **Description**: Two-column grid of numbered items (01, 02, etc.) with circular badges, titles, and descriptions. Perfect for why-choose-us sections, benefits lists, or key differentiators. #### Accordion Feature Checklist - **URL**: https://ui.beste.co/block/feature53 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature53.json"` (Radix: `/r/feature53.json`) - **Description**: Expandable accordion sections with category headers and checkmark-style feature lists in a two-column grid. Perfect for organized feature overviews and pricing page inclusions. #### Two-Plan Comparison Table - **URL**: https://ui.beste.co/block/feature55 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature55.json"` (Radix: `/r/feature55.json`) - **Description**: Side-by-side comparison table with check/cross icons and text values for two plan tiers. Perfect for free vs premium comparisons and feature tier breakdowns. #### Screenshot Gallery with Lightbox - **URL**: https://ui.beste.co/block/feature59 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature59.json"` (Radix: `/r/feature59.json`) - **Description**: 3-column image grid with hover zoom icons and full-screen lightbox modal on click. Perfect for product screenshots, portfolio showcases, and visual feature tours. #### Feature Walkthrough with Sticky Navigation - **URL**: https://ui.beste.co/block/feature60 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature60.json"` (Radix: `/r/feature60.json`) - **Description**: Sticky sidebar navigation that scrolls to content sections with images and descriptions. Perfect for product feature tours, documentation pages, and guided walkthroughs. #### Feature Cards with Status Ribbons - **URL**: https://ui.beste.co/block/feature61 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature61.json"` (Radix: `/r/feature61.json`) - **Description**: 3-column grid of feature cards with diagonal corner ribbons for labels like New, Popular, or Beta. Perfect for highlighting product tools, service tiers, or feature availability. #### Use Case Image Cards - **URL**: https://ui.beste.co/block/feature63 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature63.json"` (Radix: `/r/feature63.json`) - **Description**: 3-column grid of image cards with text overlay, hover zoom effect, and arrow indicators. Perfect for showcasing team use cases, industry solutions, or department-specific features. #### Feature Cards with Team Avatars - **URL**: https://ui.beste.co/block/feature65 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature65.json"` (Radix: `/r/feature65.json`) - **Description**: 2-column grid of feature cards with stacked team member avatar photos on each card. Perfect for showcasing who built each feature or highlighting team expertise. #### Linked Feature List with Dividers - **URL**: https://ui.beste.co/block/feature68 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature68.json"` (Radix: `/r/feature68.json`) - **Description**: Vertical feature list with horizontal dividers, hover arrows, and clickable titles linking to detail pages. Perfect for feature overviews with navigation to learn more. #### Full-Screen Parallax Feature Sections - **URL**: https://ui.beste.co/block/feature70 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature70.json"` (Radix: `/r/feature70.json`) - **Description**: Full-viewport sections with fixed parallax background images and overlaid text content. Perfect for immersive feature storytelling and dramatic product showcases. #### Feature Cards with Customer Quotes - **URL**: https://ui.beste.co/block/feature71 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature71.json"` (Radix: `/r/feature71.json`) - **Description**: 3-column grid of feature cards with embedded testimonial quotes, author names, roles, and avatars. Perfect for pairing features with social proof from real customers. #### Horizontal Feature Strip - **URL**: https://ui.beste.co/block/feature72 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature72.json"` (Radix: `/r/feature72.json`) - **Description**: Inline horizontal row of feature highlights with icons and vertical dividers between items. Perfect for trust signals, key benefits, or compact feature callouts. #### Platform Architecture Diagram - **URL**: https://ui.beste.co/block/feature73 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature73.json"` (Radix: `/r/feature73.json`) - **Description**: 3-column layout with parent categories and nested child items connected by visual branch lines. Perfect for showing platform architecture, integration layers, or feature hierarchies. #### Interactive Feature Cards with Dual CTAs - **URL**: https://ui.beste.co/block/feature74 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature74.json"` (Radix: `/r/feature74.json`) - **Description**: 2-column grid of feature cards with icons and two action buttons per card for demos and documentation. Perfect for interactive feature showcases with try-it-now options. #### Product Cards with Badge Tags - **URL**: https://ui.beste.co/block/feature75 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature75.json"` (Radix: `/r/feature75.json`) - **Description**: 2-column grid of linked product cards with multiple badge tags and learn-more arrows. Perfect for showcasing product suites, solution offerings, or categorized tools. #### FAQ Accordion with Plus/Minus Icons - **URL**: https://ui.beste.co/block/feature76 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature76.json"` (Radix: `/r/feature76.json`) - **Description**: Expandable FAQ accordion with plus/minus toggle icons and single or multi-open modes. Perfect for FAQ sections, help centers, and knowledge base pages. #### Icon-Centered Grid Cards - **URL**: https://ui.beste.co/block/feature107 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature107.json"` (Radix: `/r/feature107.json`) - **Description**: 3-column grid of centered feature cards with large icons and brief descriptions. Perfect for capability highlights, service features, or platform offerings. #### Split Layout with Checklist Box - **URL**: https://ui.beste.co/block/feature108 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature108.json"` (Radix: `/r/feature108.json`) - **Description**: Two-column layout with heading/description on left and 2x4 grid of checkmark benefits on right. Great for feature highlights, benefit summary, or quick value propositions. #### Masonry Gallery Layout - **URL**: https://ui.beste.co/block/feature109 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature109.json"` (Radix: `/r/feature109.json`) - **Description**: Masonry/columns layout gallery with variable height cards and linked images. Perfect for portfolio, project showcase, or irregular grid galleries. #### Tabbed Feature Cards - **URL**: https://ui.beste.co/block/feature112 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature112.json"` (Radix: `/r/feature112.json`) - **Description**: Tab-based interface showing 3 cards per tab, with button toggles at top. Excellent for segmented features by department, plan, or use case. #### Dashboard Stats Cards - **URL**: https://ui.beste.co/block/feature115 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature115.json"` (Radix: `/r/feature115.json`) - **Description**: 2-4 column grid of stat cards with large numbers, labels, and percentage change indicators. Perfect for KPI dashboards, performance metrics, or key results display. #### Checkbox Checklist Grid - **URL**: https://ui.beste.co/block/feature116 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature116.json"` (Radix: `/r/feature116.json`) - **Description**: 2-column grid of checklist items with checkbox icons and strikethrough styling. Great for progress tracking, launch checklists, or task lists. #### Project Cards with Team Members - **URL**: https://ui.beste.co/block/feature117 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature117.json"` (Radix: `/r/feature117.json`) - **Description**: Responsive grid of project cards with team member avatar stacks. Ideal for active projects showcase, team portfolio, or ongoing work display. #### Tech Stack Pills Grid - **URL**: https://ui.beste.co/block/feature118 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature118.json"` (Radix: `/r/feature118.json`) - **Description**: Responsive grid of technology/tool badges with icons in bordered pills. Perfect for tech stack display, tools used, or integration showcase. #### Goals with Progress Bars - **URL**: https://ui.beste.co/block/feature119 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature119.json"` (Radix: `/r/feature119.json`) - **Description**: Responsive grid of goal cards with percentage progress bars and labels. Excellent for OKR tracking, quarterly goals, or progress visualization. #### Category Tiles with Counts - **URL**: https://ui.beste.co/block/feature120 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature120.json"` (Radix: `/r/feature120.json`) - **Description**: Responsive grid of category cards with icons and listing counts. Perfect for category browse, marketplace sections, or navigation options. #### Rating Cards with Stars - **URL**: https://ui.beste.co/block/feature121 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature121.json"` (Radix: `/r/feature121.json`) - **Description**: Responsive grid of feature review cards with star ratings and review counts. Ideal for feature ratings, user reviews, or quality metrics. #### Stacked List with Dividers - **URL**: https://ui.beste.co/block/feature122 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature122.json"` (Radix: `/r/feature122.json`) - **Description**: Vertical stacked list of linked topics with titles, subtitles, and chevron indicators. Perfect for documentation navigation, topic browsing, or content index. #### Tool Cards with Tag Badges - **URL**: https://ui.beste.co/block/feature123 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature123.json"` (Radix: `/r/feature123.json`) - **Description**: Responsive grid of linked tool cards with descriptions and tag badges. Excellent for developer tools showcase, API documentation, or SDK listings. #### Action Cards with CTA Buttons - **URL**: https://ui.beste.co/block/feature125 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature125.json"` (Radix: `/r/feature125.json`) - **Description**: 2-column grid of action cards with descriptions and CTA buttons. Great for quick actions, getting started steps, or primary user journeys. #### Impact Stats with Large Numbers - **URL**: https://ui.beste.co/block/feature126 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature126.json"` (Radix: `/r/feature126.json`) - **Description**: Responsive grid of large stat numbers with labels and descriptions. Perfect for impact metrics, company statistics, or scale indicators. #### Centered Stats with Large Typography - **URL**: https://ui.beste.co/block/feature130 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature130.json"` (Radix: `/r/feature130.json`) - **Description**: Center-aligned large stat display with minimal spacing and minimal decoration. Perfect for impressive scaling statistics or key performance numbers. #### Video Tutorial Thumbnails - **URL**: https://ui.beste.co/block/feature131 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature131.json"` (Radix: `/r/feature131.json`) - **Description**: 3-column grid of video thumbnail cards with play button overlay and duration badge. Ideal for video tutorials, product demos, or educational content. #### Single Pricing Card - **URL**: https://ui.beste.co/block/feature134 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature134.json"` (Radix: `/r/feature134.json`) - **Description**: Single centered pricing card with price, feature list, and CTA button. Perfect for single plan display, pricing showcase, or product offering. #### Integration Logos Grid - **URL**: https://ui.beste.co/block/feature135 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature135.json"` (Radix: `/r/feature135.json`) - **Description**: Centered flexbox grid of company/product logos with grayscale hover effects. Excellent for customer logos, integrations, or partnerships showcase. #### Numbered Steps Grid - **URL**: https://ui.beste.co/block/feature136 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature136.json"` (Radix: `/r/feature136.json`) - **Description**: Responsive grid of numbered step cards with titles and descriptions. Perfect for process visualization, onboarding steps, or sequential workflows. #### Bordered Grid Layout - **URL**: https://ui.beste.co/block/feature138 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature138.json"` (Radix: `/r/feature138.json`) - **Description**: 3-column grid with border dividers between items, layout adapts to content. Great for core features grid, capabilities overview, or service sections. #### Circular Icon Grid - **URL**: https://ui.beste.co/block/feature139 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature139.json"` (Radix: `/r/feature139.json`) - **Description**: Centered grid of 6 icon buttons with circular backgrounds and labels. Perfect for tool navigation, quick action buttons, or feature access menu. #### Service Offerings with Arrows - **URL**: https://ui.beste.co/block/feature144 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature144.json"` (Radix: `/r/feature144.json`) - **Description**: Responsive grid of service cards with descriptions and arrow icons. Ideal for services listing, solutions overview, or offering showcase. #### Benefits Checklist - **URL**: https://ui.beste.co/block/feature146 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature146.json"` (Radix: `/r/feature146.json`) - **Description**: Responsive grid of benefit items with checkmark icons and descriptions. Perfect for benefits list, value proposition, or key advantages. #### Tech Stack Tool Grid - **URL**: https://ui.beste.co/block/feature147 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature147.json"` (Radix: `/r/feature147.json`) - **Description**: Responsive grid of tool cards with icons, descriptions, and linked tiles. Excellent for tech stack showcase, integrated tools, or component library. #### Contact Method Cards - **URL**: https://ui.beste.co/block/feature149 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature149.json"` (Radix: `/r/feature149.json`) - **Description**: 3-column grid of contact option cards with icons, descriptions, and action text. Perfect for contact methods display, support channels, or customer service options. #### Social Proof with Ratings - **URL**: https://ui.beste.co/block/feature150 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature150.json"` (Radix: `/r/feature150.json`) - **Description**: Centered card with star rating, review count, and stat proofs layout. Ideal for social proof, trust indicators, or customer validation. #### Announcement Highlight Box - **URL**: https://ui.beste.co/block/feature151 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature151.json"` (Radix: `/r/feature151.json`) - **Description**: Centered single card with badge, heading, description, and highlight pill. Great for announcements, feature release highlights, or promotional callouts. #### Icon Badge Pills Row - **URL**: https://ui.beste.co/block/feature152 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature152.json"` (Radix: `/r/feature152.json`) - **Description**: Centered flexbox row of inline feature badges with icons. Perfect for quick feature list, key benefits, or inline feature highlights. #### Feature Comparison Table - **URL**: https://ui.beste.co/block/feature155 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature155.json"` (Radix: `/r/feature155.json`) - **Description**: Simple 3-column comparison table with feature names and check/cross icons. Essential for plan comparison, feature tier table, or pricing comparison. #### Split Image with Bullet List - **URL**: https://ui.beste.co/block/feature157 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature157.json"` (Radix: `/r/feature157.json`) - **Description**: Two-column layout with left text content and right image, reversible. Perfect for feature explanation, product story, or benefit illustration. #### Notification Status List - **URL**: https://ui.beste.co/block/feature158 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature158.json"` (Radix: `/r/feature158.json`) - **Description**: Vertical stacked notification-style list with items, descriptions, and status badges. Great for updates feed, changelog, or activity log display. #### Centered Icon Cards Grid - **URL**: https://ui.beste.co/block/feature160 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature160.json"` (Radix: `/r/feature160.json`) - **Description**: 4-column grid of feature icons with titles and descriptions below. Perfect for capability highlights, feature icons, or simple feature grid. #### Icon Row Feature Grid - **URL**: https://ui.beste.co/block/feature161 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature161.json"` (Radix: `/r/feature161.json`) - **Description**: 3-column grid of horizontal feature items with icon and text side by side. Clean layout for capability highlights and feature overviews. #### Numbered Steps Grid - **URL**: https://ui.beste.co/block/feature162 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature162.json"` (Radix: `/r/feature162.json`) - **Description**: 3-column grid of numbered steps with titles and descriptions. Ideal for onboarding flows, process overviews, and how-it-works sections. #### Bento Feature Grid - **URL**: https://ui.beste.co/block/feature163 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature163.json"` (Radix: `/r/feature163.json`) - **Description**: Asymmetric bento-style grid with a highlighted hero card spanning full width and smaller feature cards below. Great for showcasing a primary feature alongside supporting capabilities. #### Scroll-Spy Sticky Sidebar Feature - **URL**: https://ui.beste.co/block/feature164 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature164.json"` (Radix: `/r/feature164.json`) - **Description**: Sticky sidebar navigation with scroll-spy tracking. Left menu highlights the active section as users scroll through feature cards with images. Uses IntersectionObserver for real-time active state. #### Horizontal Scroll Snap Cards - **URL**: https://ui.beste.co/block/feature165 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature165.json"` (Radix: `/r/feature165.json`) - **Description**: Horizontally scrollable feature cards with CSS scroll-snap. Cards scroll on mobile/tablet and flow as a regular grid on desktop. Each card has icon, title, description, and optional link. #### Spotlight Glow Card Grid - **URL**: https://ui.beste.co/block/feature166 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature166.json"` (Radix: `/r/feature166.json`) - **Description**: Interactive card grid with mouse-tracking radial gradient glow effect. Each card illuminates with a primary-colored spotlight that follows the cursor. Premium hover aesthetic inspired by Stripe and Vercel. #### Terminal CLI Feature Showcase - **URL**: https://ui.beste.co/block/feature167 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature167.json"` (Radix: `/r/feature167.json`) - **Description**: Features presented as terminal commands with outputs inside a realistic terminal window. Dark terminal aesthetic with syntax-colored commands, flags, and a blinking cursor. Unique developer-focused design. #### Before/After Comparison Toggle - **URL**: https://ui.beste.co/block/feature168 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature168.json"` (Radix: `/r/feature168.json`) - **Description**: Interactive toggle that switches between two sets of feature items with staggered fade-in animation. Pill-style toggle button with distinct visual states for before and after. Great for product comparisons. #### Infinite Marquee Feature Pills - **URL**: https://ui.beste.co/block/feature169 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature169.json"` (Radix: `/r/feature169.json`) - **Description**: Auto-scrolling marquee rows of feature pills with icons. Alternating scroll directions, hover to pause, and edge fade gradients. Eye-catching way to showcase many capabilities at once. #### Expandable Accordion Cards with Image - **URL**: https://ui.beste.co/block/feature170 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature170.json"` (Radix: `/r/feature170.json`) - **Description**: Click-to-expand feature cards with smooth grid-rows animation. Each card reveals a detailed description and preview image when opened. Only one card expanded at a time. Compact yet information-rich. #### Kanban Roadmap Board - **URL**: https://ui.beste.co/block/feature171 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature171.json"` (Radix: `/r/feature171.json`) - **Description**: Product roadmap presented as a kanban board with three swim lanes: Shipped, In Progress, and Planned. Each feature card has an icon, title, and status-colored tag. Transparent product development view. #### Command Palette Feature Showcase - **URL**: https://ui.beste.co/block/feature172 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature172.json"` (Radix: `/r/feature172.json`) - **Description**: Features displayed inside an interactive command palette UI with live search filtering, grouped results, keyboard shortcuts, and hover states. Inspired by macOS Spotlight and VS Code command palette. #### Feature Card Carousel with Image Crossfade - **URL**: https://ui.beste.co/block/feature173 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature173.json"` (Radix: `/r/feature173.json`) - **Description**: Single-card carousel with crossfading images, arrow navigation, and dot progress indicators. Each slide shows a full-width image with icon, title, and description below. Click or navigate to browse features. #### Interactive Code Snippet Showcase - **URL**: https://ui.beste.co/block/feature174 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature174.json"` (Radix: `/r/feature174.json`) - **Description**: Features paired with real code examples inside a code editor UI. Left sidebar lists features, right panel shows the corresponding code with filename tab and syntax styling. Developer-focused showcase. #### Interactive Tech Stack Layers - **URL**: https://ui.beste.co/block/feature175 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature175.json"` (Radix: `/r/feature175.json`) - **Description**: Platform architecture visualized as color-coded horizontal layers. Each layer is clickable and expands to reveal details. Unique layer numbering and distinct colors per tier. Great for showcasing infrastructure and architecture. #### Empty State - **URL**: https://ui.beste.co/block/feature176 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature176.json"` (Radix: `/r/feature176.json`) - **Description**: A simple empty state section using the Empty component with icon, title, description, and a call-to-action button. Includes standard badge, heading, and description header. #### Bento Feature Cards - **URL**: https://ui.beste.co/block/feature177 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature177.json"` (Radix: `/r/feature177.json`) - **Description**: Feature cards with 3+2 bento layout and flush media #### Sticky Benefits Timeline - **URL**: https://ui.beste.co/block/feature178 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature178.json"` (Radix: `/r/feature178.json`) - **Description**: Two-column benefits section with sticky left content and scrollable timeline #### Sticky Stats Scroller - **URL**: https://ui.beste.co/block/feature179 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature179.json"` (Radix: `/r/feature179.json`) - **Description**: Two-column layout with sticky stats and scrollable feature cards #### Sticky Image Scroller - **URL**: https://ui.beste.co/block/feature180 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature180.json"` (Radix: `/r/feature180.json`) - **Description**: Two-column layout with sticky image and scrollable feature cards #### Feature Cards over Background Media - **URL**: https://ui.beste.co/block/feature181 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature181.json"` (Radix: `/r/feature181.json`) - **Description**: Glass-morphism feature cards grid over fullscreen background media with icon badges and invertColor support #### Bento Feature Grid over Media - **URL**: https://ui.beste.co/block/feature182 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature182.json"` (Radix: `/r/feature182.json`) - **Description**: Bento-style grid with mixed card sizes over background media, featured large card spanning two columns #### Split Image Card with Feature Stack - **URL**: https://ui.beste.co/block/feature183 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature183.json"` (Radix: `/r/feature183.json`) - **Description**: Two-column layout with large image card on left and stacked glass feature cards on right #### Numbered Editorial Cards over Media - **URL**: https://ui.beste.co/block/feature184 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature184.json"` (Radix: `/r/feature184.json`) - **Description**: Numbered feature cards in staggered grid over background media with editorial large-number styling #### Image Feature Cards Grid over Media - **URL**: https://ui.beste.co/block/feature185 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature185.json"` (Radix: `/r/feature185.json`) - **Description**: Three-column image feature cards grid with sticky header over background media and glass-morphism styling #### Stats + Feature Cards over Media - **URL**: https://ui.beste.co/block/feature186 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature186.json"` (Radix: `/r/feature186.json`) - **Description**: Hero-style stats row with feature card grid below over background media with glass-morphism styling #### Two-Column Alternating Cards over Media - **URL**: https://ui.beste.co/block/feature187 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature187.json"` (Radix: `/r/feature187.json`) - **Description**: Alternating two-column feature cards with large icons over background media, left-right zigzag layout #### Icon Strip + Detail Card over Media - **URL**: https://ui.beste.co/block/feature188 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature188.json"` (Radix: `/r/feature188.json`) - **Description**: Horizontal icon strip navigation with expandable detail card below over background media #### Masonry Feature Cards over Media - **URL**: https://ui.beste.co/block/feature189 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature189.json"` (Radix: `/r/feature189.json`) - **Description**: Masonry-style two-column cards with alternating heights and image accents over background media #### Large Icon Cards with Dividers over Media - **URL**: https://ui.beste.co/block/feature190 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature190.json"` (Radix: `/r/feature190.json`) - **Description**: Full-width feature cards separated by dividers with large icons and descriptions over background media #### Tagged Feature Cards with Accent Bar - **URL**: https://ui.beste.co/block/feature191 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature191.json"` (Radix: `/r/feature191.json`) - **Description**: Three-column feature cards with accent top bar, tag pills, and icon badges over background media #### Hero Card + Grid Cards over Media - **URL**: https://ui.beste.co/block/feature192 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature192.json"` (Radix: `/r/feature192.json`) - **Description**: Large hero card with image at top followed by three-column feature card grid over background media #### Asymmetric Tall + Compact Cards over Media - **URL**: https://ui.beste.co/block/feature193 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature193.json"` (Radix: `/r/feature193.json`) - **Description**: Alternating rows with tall highlight card and stacked compact cards over background media #### Three Cards With Asset Media - **URL**: https://ui.beste.co/block/feature194 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature194.json"` (Radix: `/r/feature194.json`) - **Description**: Three feature cards that swap an icon for a real micro-asset: a bar chart, a before/after stat, and a terminal prompt. Demonstrates how registry-pieces drop into block media slots. #### Four Cards With Centered Icon - **URL**: https://ui.beste.co/block/feature195 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature195.json"` (Radix: `/r/feature195.json`) - **Description**: Four equal feature cards on a clean background, each with a large circular icon badge above a bold h3 title. Ideal for outlining the steps or pillars of a service offering. #### Module Cards Grid With Hover Lift - **URL**: https://ui.beste.co/block/feature196 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature196.json"` (Radix: `/r/feature196.json`) - **Description**: Three-column grid of clickable feature cards. Each card has a top-left icon, top-right diagonal arrow, title, and description. Cards lift on hover with a configurable accent color (emerald, primary, foreground, rose, blue, amber, violet, sky, orange, teal). Two-tone heading splits a primary phrase from a colored highlight. #### Alternating Image & Content - **URL**: https://ui.beste.co/block/feature197 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature197.json"` (Radix: `/r/feature197.json`) - **Description**: Zig-zag layout where each feature alternates an image with a content block — a colored icon badge, bold title, and description. Configurable icon badge accent color (emerald, primary, foreground, rose, blue, amber, violet, sky, orange, teal). Ideal for product modules, services, or capabilities. #### Tabbed Plan Cards With Checklist - **URL**: https://ui.beste.co/block/feature198 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature198.json"` (Radix: `/r/feature198.json`) - **Description**: Tab-switched grid of plan cards. Each card shows title, full-width CTA button, subtitle (price), description, and a checklist with check icons. Layout is responsive: ≤2 cards center as flex, multiples of 4 use a 4-column grid, otherwise a 3-column grid. Ideal for pricing, plan comparisons, and tiered packages. #### Feature with Side Heading and Icon Grid - **URL**: https://ui.beste.co/block/feature199 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature199.json"` (Radix: `/r/feature199.json`) - **Description**: Two-column feature section with a large heading on the left and a 2x2 grid of feature cards on the right, each with a large badge icon, title, and description. #### Feature with Two-Column Checklist and Image - **URL**: https://ui.beste.co/block/feature200 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature200.json"` (Radix: `/r/feature200.json`) - **Description**: Two-column feature section with badge, heading, description, a 2-column checklist of icon items (defaults to check icon), and CTA on one side, with a square image on the other. Image position is configurable. #### Feature with Numbered Process Steps and CTA Card - **URL**: https://ui.beste.co/block/feature201 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature201.json"` (Radix: `/r/feature201.json`) - **Description**: Centered header followed by a 4-step numbered process row with arrows between cards on desktop, plus a wide CTA card with badge, heading, description, button, and image. #### Feature with Side Heading and Custom Tabs - **URL**: https://ui.beste.co/block/feature202 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature202.json"` (Radix: `/r/feature202.json`) - **Description**: Two-column feature section with badge, heading, and multi-paragraph copy on the left, plus a custom tab strip and panel on the right. #### Feature with Stats Grid and Image - **URL**: https://ui.beste.co/block/feature203 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature203.json"` (Radix: `/r/feature203.json`) - **Description**: Two-column feature section with heading, description, and a 2x2 stats grid (icon card, value, label) on one side and a square image on the other. Image position is configurable. #### Feature with Image Carousel and Lightbox Modal - **URL**: https://ui.beste.co/block/feature204 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature204.json"` (Radix: `/r/feature204.json`) - **Description**: Centered header followed by a side-by-side image carousel (3 visible on desktop, 2 on tablet, 1 on mobile) with prev/next arrows and dots. Tap an item to open a full-size modal lightbox with its own navigation. #### Feature with Split Header and Service Cards - **URL**: https://ui.beste.co/block/feature205 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature205.json"` (Radix: `/r/feature205.json`) - **Description**: Two-column header — badge, heading with an accent-colored highlight on the last phrase, and intro paragraph on the left, with a supporting paragraph on the right — followed by a three-card grid of services with outlined Lucide icons and a learn-more link. #### Centered Heading with CTA and Icon Row - **URL**: https://ui.beste.co/block/feature206 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature206.json"` (Radix: `/r/feature206.json`) - **Description**: Centered service-style block with optional badge, large heading, description, primary CTA buttons, and a row of icon-prefixed items below. Each item icon defaults to a check, and the row collapses to a stack on mobile. #### Service Highlight - **URL**: https://ui.beste.co/block/feature207 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature207.json"` (Radix: `/r/feature207.json`) - **Description**: Service section: eyebrow and large title with a right-aligned summary, a wide hero image, and a bold closing statement. #### Expertise Accordion - **URL**: https://ui.beste.co/block/feature208 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature208.json"` (Radix: `/r/feature208.json`) - **Description**: Horizontal expanding accordion of services with vertical labels, expanding to reveal image, description and tag pills. #### Sticky Services - **URL**: https://ui.beste.co/block/feature209 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature209.json"` (Radix: `/r/feature209.json`) - **Description**: Sticky intro column beside a scrollable stack of numbered service blocks. #### Service Cards - **URL**: https://ui.beste.co/block/feature210 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature210.json"` (Radix: `/r/feature210.json`) - **Description**: Three-up service cards with accent icon chips and learn-more links. #### Alternating Features - **URL**: https://ui.beste.co/block/feature211 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature211.json"` (Radix: `/r/feature211.json`) - **Description**: Alternating image-and-copy feature rows with checklists. #### Capabilities Bento - **URL**: https://ui.beste.co/block/feature212 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature212.json"` (Radix: `/r/feature212.json`) - **Description**: Asymmetric bento of capabilities: an image hero cell, accent cell and icon cells. #### Tabbed Features - **URL**: https://ui.beste.co/block/feature213 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature213.json"` (Radix: `/r/feature213.json`) - **Description**: Tabbed feature showcase with copy, checklist and screenshot per workstream. #### Feature Tabs Explorer - **URL**: https://ui.beste.co/block/feature214 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature214.json"` (Radix: `/r/feature214.json`) - **Description**: Centered header above a bordered explorer: a vertical icon tab rail switches between feature panels, each pairing a preview image with a benefit checklist and CTA. #### Feature Showcase Trio - **URL**: https://ui.beste.co/block/feature215 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature215.json"` (Radix: `/r/feature215.json`) - **Description**: Centered header above a three-card showcase: a tagged copy panel with CTA, a centered preview, and a divided list of included benefits. #### Feature Rows With App Preview - **URL**: https://ui.beste.co/block/feature216 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature216.json"` (Radix: `/r/feature216.json`) - **Description**: Centered header above stacked feature rows, each pairing a numbered copy panel and tall app preview with a benefit list, trusted-by avatars, rating, and download CTA. #### Impact Grid With Media - **URL**: https://ui.beste.co/block/feature217 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature217.json"` (Radix: `/r/feature217.json`) - **Description**: Centered eyebrow, heading and dark CTA above a split block: a tall labeled image on the left and a two-by-two grid of icon feature cards on the right. #### Why-Choose Media Proof - **URL**: https://ui.beste.co/block/feature218 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature218.json"` (Radix: `/r/feature218.json`) - **Description**: Centered eyebrow and heading above a wide image card carrying a corner label and a glass overlay band that pairs a testimonial with a headline stat, followed by a three-up row of icon reasons. #### Indexed Services List - **URL**: https://ui.beste.co/block/feature219 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature219.json"` (Radix: `/r/feature219.json`) - **Description**: Eyebrow and heading with a CTA on one row, above stacked service cards that each line up an index and growth stat, a thumbnail image, and a title with description and tag chips. #### Zigzag Feature Rows - **URL**: https://ui.beste.co/block/feature220 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature220.json"` (Radix: `/r/feature220.json`) - **Description**: Centered header above three zigzag rows, each pairing a 4:3 image with a title, description, and tag chips on alternating sides. #### Bento Icon Grid - **URL**: https://ui.beste.co/block/feature221 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature221.json"` (Radix: `/r/feature221.json`) - **Description**: Header with eyebrow, big heading and outline CTA above a five-card bento grid with a tall lead cell, lucide icons, titles and descriptions. #### Numbered Process Steps - **URL**: https://ui.beste.co/block/feature222 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature222.json"` (Radix: `/r/feature222.json`) - **Description**: Process section with a header and a vertical list of four numbered steps separated by top borders. #### Tabbed Phase Showcase - **URL**: https://ui.beste.co/block/feature223 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature223.json"` (Radix: `/r/feature223.json`) - **Description**: Header with a tabbed showcase where each tab pairs a rounded image with a phase title and description. #### Capability Checklist Split - **URL**: https://ui.beste.co/block/feature224 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature224.json"` (Radix: `/r/feature224.json`) - **Description**: Two-column split with an eyebrow, big heading, description, and CTA on the left and a checklist of capabilities with rounded check seals on the right. #### Compact Principles Grid - **URL**: https://ui.beste.co/block/feature225 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature225.json"` (Radix: `/r/feature225.json`) - **Description**: Compact principles grid with a header and a four-up row of top-border items, each with a lucide icon, title and short description. #### Pros and Cons Comparison - **URL**: https://ui.beste.co/block/feature226 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature226.json"` (Radix: `/r/feature226.json`) - **Description**: Comparison feature with a header and two side-by-side panels: a muted cons list with X icons beside a solid dark pros list with check icons. #### Sticky feature list with images - **URL**: https://ui.beste.co/block/feature227 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature227.json"` (Radix: `/r/feature227.json`) - **Description**: Sticky left intro paired with a stacked, numbered list of feature blocks, each with a title, description, and small image. #### Annotated core layout - **URL**: https://ui.beste.co/block/feature228 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature228.json"` (Radix: `/r/feature228.json`) - **Description**: A central core image framed by feature cards that each reference how a module connects back to the system's core. #### Accordion Image Sync - **URL**: https://ui.beste.co/block/feature229 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature229.json"` (Radix: `/r/feature229.json`) - **Description**: Interactive feature section with an eyebrow, big heading and description above a two-column layout: a single-collapsible accordion of feature items on the left and a sticky image on the right that swaps to the active item's image on click. #### Three editorial pillar columns - **URL**: https://ui.beste.co/block/feature230 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature230.json"` (Radix: `/r/feature230.json`) - **Description**: Three tall portrait images in a row, each paired with a padded numeral, title, and description — a monochrome statement of guiding principles. #### Feature Spotlight Tabs - **URL**: https://ui.beste.co/block/feature231 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature231.json"` (Radix: `/r/feature231.json`) - **Description**: Clickable tab chips switch a large spotlight panel with image, title, description, and a checklist, with an optional auto-loop. #### Stat-backed feature rows - **URL**: https://ui.beste.co/block/feature232 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature232.json"` (Radix: `/r/feature232.json`) - **Description**: Ruled feature rows that pair a large figure with a title and supporting copy, framing each capability by the number it earns. #### Compact two-column icon feature list - **URL**: https://ui.beste.co/block/feature233 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature233.json"` (Radix: `/r/feature233.json`) - **Description**: A header with a badge, heading, and description, followed by many compact items in a two-column grid — each a lucide icon in a rounded bg-muted tile beside a title and one-line description. #### Click-to-swap sticky thread list - **URL**: https://ui.beste.co/block/feature234 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature234.json"` (Radix: `/r/feature234.json`) - **Description**: A two-column feature section: a vertical list of clickable thread buttons on the left swaps a sticky image panel on the right, with the active item carrying full emphasis and a left border. #### Feature & Testimonial Hybrid - **URL**: https://ui.beste.co/block/feature235 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature235.json"` (Radix: `/r/feature235.json`) - **Description**: Feature and testimonial hybrid: a quote card on bg-muted beside a 2x2 grid of icon feature highlights. #### Feature manifesto grid - **URL**: https://ui.beste.co/block/feature236 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature236.json"` (Radix: `/r/feature236.json`) - **Description**: A text-only feature manifesto: a hairline-bordered grid of short statements, each a bold title and a single explanatory line. #### Product Accordion Feature - **URL**: https://ui.beste.co/block/feature237 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature237.json"` (Radix: `/r/feature237.json`) - **Description**: A product feature with an eyebrow kicker over a hairline rule, a two-column heading and paragraph, an image tile carrying a floating records panel, and an interactive accordion of capabilities. #### Value Prop Panel - **URL**: https://ui.beste.co/block/feature238 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature238.json"` (Radix: `/r/feature238.json`) - **Description**: A value proposition with an eyebrow kicker over a hairline rule, a two-column heading and paragraph, a wide image panel holding a floating segmented stat card, and a three-column benefit row. #### Value Prop Trio - **URL**: https://ui.beste.co/block/feature239 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature239.json"` (Radix: `/r/feature239.json`) - **Description**: A value proposition with an eyebrow kicker over a hairline rule, a two-column heading and paragraph, and three portrait image tiles that each float a live micro-asset above a title and description. #### Bento Asset Grid - **URL**: https://ui.beste.co/block/feature240 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature240.json"` (Radix: `/r/feature240.json`) - **Description**: A bento feature grid with an eyebrow kicker over a hairline rule, a two-column heading and paragraph, and four mixed-width image tiles that each float a live product micro-asset above a caption. #### Icon Capability Grid - **URL**: https://ui.beste.co/block/feature241 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature241.json"` (Radix: `/r/feature241.json`) - **Description**: A capability section with an eyebrow over a hairline rule, a two-column heading, and a responsive grid of icon-led features with tinted chips, titles, and descriptions. #### Connected Workspace Feature - **URL**: https://ui.beste.co/block/feature242 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature242.json"` (Radix: `/r/feature242.json`) - **Description**: A feature with an eyebrow over a hairline rule, a two-column heading, and two rich cards that each float a live micro-asset above an eyebrow, title, and checked bullets, closing with a works-with integrations strip. #### Compact Asset Cards - **URL**: https://ui.beste.co/block/feature243 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature243.json"` (Radix: `/r/feature243.json`) - **Description**: A feature with an eyebrow over a hairline rule, a two-column heading, and three bordered cards that each float a compact live micro-asset above a title and description. #### Command Search Spotlight - **URL**: https://ui.beste.co/block/feature244 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature244.json"` (Radix: `/r/feature244.json`) - **Description**: A centered feature with an eyebrow, light heading, and paragraph over a wide image tile that floats a live command search bar, followed by a row of quick-filter chips. #### Deliverables Ledger - **URL**: https://ui.beste.co/block/feature245 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature245.json"` (Radix: `/r/feature245.json`) - **Description**: Scope section listing what a project actually ships: three ruled columns, each with a track title, a one-line summary and a dotted-rule inventory of deliverables, closed by a note and a pill CTA. #### Switchable Capability Ledger - **URL**: https://ui.beste.co/block/feature246 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature246.json"` (Radix: `/r/feature246.json`) - **Description**: Capability section with a row of pill filters that swap the list below: each entry becomes a ruled three-column row holding the title, an explanation and the typical duration pinned right. #### Photo Callout Markers - **URL**: https://ui.beste.co/block/feature247 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature247.json"` (Radix: `/r/feature247.json`) - **Description**: Wide photograph carrying numbered markers placed by percentage coordinates, paired with a ruled four-column list where the selected entry repeats the marker as a filled seal, darkens its rule and brings its text forward. #### Alternating Proof Rows - **URL**: https://ui.beste.co/block/feature248 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature248.json"` (Radix: `/r/feature248.json`) - **Description**: Feature rows that alternate the image side on every second entry, each pairing an eyebrow, display title and explanation with one oversized outcome figure on its own rule, headed by an outline pill CTA pinned to the top right. #### Image Topped Discipline Cards - **URL**: https://ui.beste.co/block/feature249 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature249.json"` (Radix: `/r/feature249.json`) - **Description**: Four soft cards each opening with a full-bleed photograph, then a display title, one explanatory sentence and a ruled tally line pinned to the bottom of the card. #### Sticky Photo With Notes - **URL**: https://ui.beste.co/block/feature250 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature250.json"` (Radix: `/r/feature250.json`) - **Description**: A single tall photograph pinned with position sticky, captioned without a rule, while a column of eyebrow-led notes scrolls past it, each note after the first opening on its own hairline. #### Deliverable Cards With Media - **URL**: https://ui.beste.co/block/feature251 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature251.json"` (Radix: `/r/feature251.json`) - **Description**: Three soft cards, each floating its own media piece over a dotted field before an eyebrow, a title, an explanation and a ruled delivery note, laid out as a plain grid with no horizontal scrolling. #### Overlapping Material Collage - **URL**: https://ui.beste.co/block/feature252 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature252.json"` (Radix: `/r/feature252.json`) - **Description**: Feature split pairing a three-image collage, where a square crop overlaps the tall frame behind a background-coloured edge, with a statement and a ruled key-value list of material facts. #### Wide Band With Field Facts - **URL**: https://ui.beste.co/block/feature253 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature253.json"` (Radix: `/r/feature253.json`) - **Description**: Cinematic image band carrying a pill label in its corner, followed by a ruled four-column row where each measured fact pairs an oversized figure with a sentence of testing context, with the outline pill CTA sitting on the heading line. #### Photographic Year Ledger - **URL**: https://ui.beste.co/block/feature254 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature254.json"` (Radix: `/r/feature254.json`) - **Description**: Timeline where every ruled row lines up a year, a photograph from that moment and the explanation of what forced the change, headed by a pill CTA on the heading line and stacking to a readable block on mobile. #### Current Work Tile Grid - **URL**: https://ui.beste.co/block/feature255 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature255.json"` (Radix: `/r/feature255.json`) - **Description**: Section that shows what the studio is running right now: a statement with the paragraph and pill CTA on one baseline, then three tall project tiles whose ruled captions name the client and the stage the work is at. #### Annotated Centerpiece - **URL**: https://ui.beste.co/block/feature256 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature256.json"` (Radix: `/r/feature256.json`) - **Description**: A feature that centers one image tile floating a live metrics panel and annotates it from both sides with four icon callouts that collapse under the tile on smaller screens. #### Capability Selector - **URL**: https://ui.beste.co/block/feature257 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature257.json"` (Radix: `/r/feature257.json`) - **Description**: An interactive feature where a hairline list of four capabilities swaps the image tile beside it, each one floating a different live asset with its own supporting paragraph. #### Two-Up Capability Cards - **URL**: https://ui.beste.co/block/feature258 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature258.json"` (Radix: `/r/feature258.json`) - **Description**: A feature built from two tall bordered cards, each stacking an image tile with a live asset over a small kicker, an editorial title, a checked list on hairlines, and its own outline action. #### Soft Panel Capacity Report - **URL**: https://ui.beste.co/block/feature259 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature259.json"` (Radix: `/r/feature259.json`) - **Description**: A feature contained in one soft panel: heading and paragraph beside an image tile floating a live breakdown chart, closing on a hairline row of four capacity figures. #### Scrolling Sequence Rail - **URL**: https://ui.beste.co/block/feature260 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature260.json"` (Radix: `/r/feature260.json`) - **Description**: A feature whose five steps sit on a horizontally scrolling card rail below a two-column header, each card carrying a numbered index, a title, a paragraph, and a timing note on a hairline. #### Hairline Capability Matrix - **URL**: https://ui.beste.co/block/feature261 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature261.json"` (Radix: `/r/feature261.json`) - **Description**: A feature laid out as a hairline matrix of cells, where a wide first cell carries an image tile floating a live trend metric and the remaining cells hold icon-led capabilities. #### Expanding Proof Rows - **URL**: https://ui.beste.co/block/feature262 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature262.json"` (Radix: `/r/feature262.json`) - **Description**: A feature of full-width hairline rows that expand in place, revealing a paragraph beside an image tile that floats a different live asset for each way of evaluating the product. #### Day Timeline Rows - **URL**: https://ui.beste.co/block/feature263 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature263.json"` (Radix: `/r/feature263.json`) - **Description**: A feature that walks through one working day as hairline rows stamped with the time of day, with a live approval asset dropped inline on the entry that needs showing rather than telling. #### Sticky Reference List - **URL**: https://ui.beste.co/block/feature264 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature264.json"` (Radix: `/r/feature264.json`) - **Description**: A feature with a heading column that sticks while three labelled groups of checked capabilities scroll past it, closing on a footnote under a hairline. #### Staircase Asset Trio - **URL**: https://ui.beste.co/block/feature265 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature265.json"` (Radix: `/r/feature265.json`) - **Description**: A feature whose three image tiles step down the page in a staircase on large screens, each floating a different live asset above a small kicker, title, and paragraph. #### Figure-Led Evidence Rows - **URL**: https://ui.beste.co/block/feature266 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature266.json"` (Radix: `/r/feature266.json`) - **Description**: A feature that opens on a tall image tile floating a live before-and-after card, then sets out its evidence as hairline rows leading on an oversized light figure paired with an explanation and the method behind it. #### Center-Line Journey Timeline - **URL**: https://ui.beste.co/block/feature267 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature267.json"` (Radix: `/r/feature267.json`) - **Description**: A feature that runs a hairline down the middle of the section and alternates its stages either side of it, dropping an image tile with a live phone frame onto the step worth showing. #### Full-Bleed Workspace Band - **URL**: https://ui.beste.co/block/feature268 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/feature268.json"` (Radix: `/r/feature268.json`) - **Description**: A feature that breaks its media out of the container into a full-bleed image band floating a live view switcher, framed by a two-column header above and three numbered captions below. ### Fitness #### Class Schedule Hero - **URL**: https://ui.beste.co/block/fitness5 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/fitness5.json"` (Radix: `/r/fitness5.json`) - **Description**: Full-screen hero showcasing today's fitness classes with instructor info and available spots. Perfect for gym landing pages and class booking systems. #### Personal Trainer Profile - **URL**: https://ui.beste.co/block/fitness6 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/fitness6.json"` (Radix: `/r/fitness6.json`) - **Description**: Trainer showcase with photo, certifications, rating, and client stats in a floating card. Perfect for personal training services and fitness coaching pages. #### Gym Location Finder - **URL**: https://ui.beste.co/block/fitness32 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/fitness32.json"` (Radix: `/r/fitness32.json`) - **Description**: Location section with map preview, address, hours, parking, and public transit info. Perfect for gym contact pages and multi-location fitness centers. #### Transformation Gallery - **URL**: https://ui.beste.co/block/fitness33 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/fitness33.json"` (Radix: `/r/fitness33.json`) - **Description**: Before/after photo grid showcasing member transformations with weight loss stats and testimonial quotes. Perfect for fitness success stories and gym marketing. #### Training Program Cards - **URL**: https://ui.beste.co/block/fitness39 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/fitness39.json"` (Radix: `/r/fitness39.json`) - **Description**: Program grid with images, duration, frequency, skill level, and enrollment buttons. Perfect for fitness program catalogs and workout plan selection. #### Honest Programme Match - **URL**: https://ui.beste.co/block/fitness40 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/fitness40.json"` (Radix: `/r/fitness40.json`) - **Description**: A programme finder that argues with you: three questions land on one training block, and the card overlapping the photographic band answers in two columns, who it is for beside who should not take it, before the practical facts. ### Food #### Table Reservation Form - **URL**: https://ui.beste.co/block/food3 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/food3.json"` (Radix: `/r/food3.json`) - **Description**: Complete reservation form with date picker, time slots, guest count, and contact fields alongside restaurant image. Perfect for restaurant booking pages and fine dining websites. #### Seasonal Dish Feature - **URL**: https://ui.beste.co/block/food4 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/food4.json"` (Radix: `/r/food4.json`) - **Description**: Featured dish spotlight with seasonal badges, availability dates, pricing, and order button. Perfect for highlighting limited-time menu items and chef specials. #### Fine Dining Hero - **URL**: https://ui.beste.co/block/food5 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/food5.json"` (Radix: `/r/food5.json`) - **Description**: Elegant full-screen hero with Michelin stars, awards, and decorative lines for luxury restaurants. Perfect for high-end dining establishments and tasting menu experiences. #### Restaurant Image Carousel - **URL**: https://ui.beste.co/block/food6 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/food6.json"` (Radix: `/r/food6.json`) - **Description**: Auto-playing image slideshow showcasing restaurant ambiance with slide titles and navigation controls. Perfect for restaurant homepages and venue presentations. #### Classic Menu Layout - **URL**: https://ui.beste.co/block/food7 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/food7.json"` (Radix: `/r/food7.json`) - **Description**: Traditional menu with categorized sections, dietary badges (V, VG, GF), and a legend. Perfect for restaurant menus and food ordering pages. #### Featured Dishes Grid - **URL**: https://ui.beste.co/block/food8 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/food8.json"` (Radix: `/r/food8.json`) - **Description**: Visual dish grid with image zoom on hover, overlay descriptions, and order buttons. Perfect for showcasing signature dishes and photo-driven menus. #### Tabbed Menu Browser - **URL**: https://ui.beste.co/block/food9 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/food9.json"` (Radix: `/r/food9.json`) - **Description**: Interactive menu with category tabs, accompanying images, and item listings with prices. Perfect for restaurants with multiple menu sections. #### Wine List Menu - **URL**: https://ui.beste.co/block/food10 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/food10.json"` (Radix: `/r/food10.json`) - **Description**: Elegant two-column wine menu with origin details, vintage years, and dotted price lines. Perfect for wine bars, sommeliers, and fine dining beverage menus. #### Chef's Specials Feature - **URL**: https://ui.beste.co/block/food11 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/food11.json"` (Radix: `/r/food11.json`) - **Description**: Alternating layout showcasing dishes with large images, chef's notes as blockquotes, and pricing. Perfect for highlighting signature items and chef recommendations. #### Drinks Menu - **URL**: https://ui.beste.co/block/food12 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/food12.json"` (Radix: `/r/food12.json`) - **Description**: Beverage menu with glass/bottle pricing columns, category icons, and organized sections for cocktails and wines. Perfect for bar menus and drink lists. #### Set Menu Pricing Cards - **URL**: https://ui.beste.co/block/food13 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/food13.json"` (Radix: `/r/food13.json`) - **Description**: Three-tier pricing cards for group dining with included items, minimum guests, and booking buttons. Perfect for prix fixe menus and event dining packages. #### Dietary Filter Menu - **URL**: https://ui.beste.co/block/food14 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/food14.json"` (Radix: `/r/food14.json`) - **Description**: Interactive menu with dietary filter buttons (vegetarian, vegan, gluten-free) and allergen warnings. Perfect for health-conscious diners and inclusive restaurant menus. #### Daily Specials Chalkboard - **URL**: https://ui.beste.co/block/food15 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/food15.json"` (Radix: `/r/food15.json`) - **Description**: Dark-themed chalkboard-style menu with decorative corners, day labels, and timestamp. Perfect for daily specials, soup of the day, and rotating menu items. #### Expandable Menu Accordion - **URL**: https://ui.beste.co/block/food16 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/food16.json"` (Radix: `/r/food16.json`) - **Description**: Collapsible menu items revealing full images, calorie counts, protein info, and allergen badges. Perfect for detailed nutritional menus and health-focused dining. #### Hours & Contact Info - **URL**: https://ui.beste.co/block/food38 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/food38.json"` (Radix: `/r/food38.json`) - **Description**: Weekly schedule table with today highlighted, holiday notice alert, phone/email buttons, and live chat. Perfect for restaurant contact pages and business hours display. #### Multi-Location Directory - **URL**: https://ui.beste.co/block/food39 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/food39.json"` (Radix: `/r/food39.json`) - **Description**: Location cards grid with venue images, addresses, hours, phone numbers, and direction links. Perfect for restaurant chains and multi-venue businesses. #### Executive Chef Profile - **URL**: https://ui.beste.co/block/food41 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/food41.json"` (Radix: `/r/food41.json`) - **Description**: Chef bio section with portrait, philosophy quote, training credentials, award badges, and social links. Perfect for chef introductions and culinary team pages. #### Kitchen Team Grid - **URL**: https://ui.beste.co/block/food42 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/food42.json"` (Radix: `/r/food42.json`) - **Description**: Team member cards with portrait photos, roles, experience badges, and hover image zoom. Perfect for staff introductions and restaurant about pages. #### Culinary Journey Timeline - **URL**: https://ui.beste.co/block/food43 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/food43.json"` (Radix: `/r/food43.json`) - **Description**: Vertical timeline with alternating content, year badges, milestone images, and connecting line. Perfect for chef stories and restaurant history pages. #### Behind the Scenes Kitchen - **URL**: https://ui.beste.co/block/food44 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/food44.json"` (Radix: `/r/food44.json`) - **Description**: Kitchen tour section with hero image, station features, certification badges, and tour booking CTA. Perfect for showcasing kitchen facilities and food preparation areas. #### Events Calendar - **URL**: https://ui.beste.co/block/food45 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/food45.json"` (Radix: `/r/food45.json`) - **Description**: Event listing with date badges, images, time/capacity info, pricing, and RSVP buttons. Perfect for wine tastings, themed dinners, and special occasions. #### Online Ordering Hub - **URL**: https://ui.beste.co/block/food47 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/food47.json"` (Radix: `/r/food47.json`) - **Description**: Delivery platform cards with logos, fees, and delivery times alongside pickup info with address and phone. Perfect for food delivery integrations and takeout ordering. #### Gift Card Shop - **URL**: https://ui.beste.co/block/food48 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/food48.json"` (Radix: `/r/food48.json`) - **Description**: Gift card purchase interface with preset amounts, custom input, digital/physical delivery options, and live preview. Perfect for restaurant gift card sales. #### Loyalty Rewards Program - **URL**: https://ui.beste.co/block/food50 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/food50.json"` (Radix: `/r/food50.json`) - **Description**: Four-tier rewards program with points earning steps, benefit lists, and app store download buttons. Perfect for customer loyalty and membership programs. #### Happy Hour Deals - **URL**: https://ui.beste.co/block/food51 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/food51.json"` (Radix: `/r/food51.json`) - **Description**: Split-layout promotion with image, schedule badges, and deal list showing original vs. discounted prices. Perfect for happy hour specials and limited-time offers. #### Seasonal Menu Showcase - **URL**: https://ui.beste.co/block/food52 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/food52.json"` (Radix: `/r/food52.json`) - **Description**: Seasonal menu section with availability dates, featured dish cards with hover effects, and CTA button. Perfect for promoting winter, spring, summer, or fall menus. #### Value Meal Bundles - **URL**: https://ui.beste.co/block/food53 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/food53.json"` (Radix: `/r/food53.json`) - **Description**: Bundle pricing cards with images, savings badges, itemized contents, and order buttons. Perfect for family meals, combo deals, and catering packages. #### Welcome Discount Banner - **URL**: https://ui.beste.co/block/food54 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/food54.json"` (Radix: `/r/food54.json`) - **Description**: New customer promotion with large discount display, copyable promo code, benefit checklist, and CTA. Perfect for first-time visitor offers and marketing campaigns. #### Dish Detail Page - **URL**: https://ui.beste.co/block/food61 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/food61.json"` (Radix: `/r/food61.json`) - **Description**: Product page with large image, dietary badges, rating/reviews, prep time, calories, quantity selector, and add-to-cart. Perfect for online food ordering and menu item pages. ### Footer #### Minimal Inline Footer - **URL**: https://ui.beste.co/block/footer9 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer9.json"` (Radix: `/r/footer9.json`) - **Description**: Compact single-row footer with logo, horizontal navigation links, and copyright text. Perfect for landing pages and minimal websites that need simple site-wide navigation. #### Split Brand Footer - **URL**: https://ui.beste.co/block/footer10 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer10.json"` (Radix: `/r/footer10.json`) - **Description**: Two-column footer with brand logo, tagline, and copyright on left, navigation links on right. Perfect for startups and SaaS products wanting clean brand presentation. #### Centered Social Footer - **URL**: https://ui.beste.co/block/footer11 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer11.json"` (Radix: `/r/footer11.json`) - **Description**: Vertically stacked footer with centered logo, navigation links, social media icons, and copyright. Perfect for portfolios and personal brands wanting a symmetrical layout. #### Enterprise Multi-Column Footer - **URL**: https://ui.beste.co/block/footer13 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer13.json"` (Radix: `/r/footer13.json`) - **Description**: Comprehensive footer with brand section, four navigation columns, social links, and bottom legal links. Perfect for enterprise websites and established businesses with extensive site structures. #### Social Bar Multi-Column Footer - **URL**: https://ui.beste.co/block/footer15 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer15.json"` (Radix: `/r/footer15.json`) - **Description**: Four-column navigation footer with brand description and dedicated social media icon row in the bottom section. Perfect for media companies and brands with strong social presence. #### Contact Info Multi-Column Footer - **URL**: https://ui.beste.co/block/footer16 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer16.json"` (Radix: `/r/footer16.json`) - **Description**: Business footer with extended brand section including email, phone, and address, plus three navigation columns. Perfect for service businesses and agencies that need prominent contact information. #### CTA Action Footer - **URL**: https://ui.beste.co/block/footer18 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer18.json"` (Radix: `/r/footer18.json`) - **Description**: Footer with prominent call-to-action section featuring heading, description, and action buttons alongside navigation columns. Perfect for SaaS products driving sign-ups and conversions. #### Newsletter Subscription Footer - **URL**: https://ui.beste.co/block/footer19 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer19.json"` (Radix: `/r/footer19.json`) - **Description**: Footer with email subscription form, navigation columns, legal links, and social icons. Perfect for content sites and businesses building email lists. #### E-commerce Trust Footer - **URL**: https://ui.beste.co/block/footer20 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer20.json"` (Radix: `/r/footer20.json`) - **Description**: Online store footer with trust badges (secure checkout, free shipping, privacy), payment method icons, and shop navigation columns. Perfect for e-commerce sites building customer confidence. #### Compact E-commerce Footer - **URL**: https://ui.beste.co/block/footer21 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer21.json"` (Radix: `/r/footer21.json`) - **Description**: Centered minimal footer with horizontal navigation, trust badges, and payment method icons. Perfect for smaller online stores wanting a clean checkout-focused layout. #### Full E-commerce Footer - **URL**: https://ui.beste.co/block/footer22 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer22.json"` (Radix: `/r/footer22.json`) - **Description**: Complete online store footer with brand section, navigation columns, social links, trust badges row, payment icons, and legal links. Perfect for established e-commerce brands. #### Social Media Showcase Footer - **URL**: https://ui.beste.co/block/footer23 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer23.json"` (Radix: `/r/footer23.json`) - **Description**: Centered footer with prominent heading, large circular social media icon buttons, and minimal navigation. Perfect for creators and influencers driving social engagement. #### Dark Themed Card Footer - **URL**: https://ui.beste.co/block/footer27 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer27.json"` (Radix: `/r/footer27.json`) - **Description**: Footer wrapped in a dark rounded container with inverted colors, tagline, navigation columns, and social links. Perfect for modern SaaS and tech products wanting visual contrast. #### Creative Agency Portfolio Footer - **URL**: https://ui.beste.co/block/footer28 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer28.json"` (Radix: `/r/footer28.json`) - **Description**: Showcase footer with company stats, awards recognition section, navigation links, and trusted client logos. Perfect for design studios and creative agencies displaying credentials. #### Mobile App Download Footer - **URL**: https://ui.beste.co/block/footer29 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer29.json"` (Radix: `/r/footer29.json`) - **Description**: App promotion footer with App Store and Google Play badges, scannable QR code, and download stats. Perfect for mobile app landing pages driving app installations. #### Restaurant Reservation Footer - **URL**: https://ui.beste.co/block/footer31 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer31.json"` (Radix: `/r/footer31.json`) - **Description**: Fine dining footer with business hours, location details, phone number, menu links, and reservation button. Perfect for restaurants and hospitality venues. #### Healthcare Services Footer - **URL**: https://ui.beste.co/block/footer32 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer32.json"` (Radix: `/r/footer32.json`) - **Description**: Medical facility footer with emergency contact banner, service navigation, patient resources, and certification badges. Perfect for hospitals, clinics, and healthcare providers. #### Travel Booking Footer - **URL**: https://ui.beste.co/block/footer41 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer41.json"` (Radix: `/r/footer41.json`) - **Description**: Tourism footer with destination image cards, trip type links, support info, trust badges, and booking CTA. Perfect for travel agencies and vacation booking platforms. #### Dental Clinic Footer - **URL**: https://ui.beste.co/block/footer55 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer55.json"` (Radix: `/r/footer55.json`) - **Description**: Dental practice footer with dentist profile cards, service list, office hours, insurance info, and appointment booking button. Perfect for dental offices and oral care clinics. #### Museum & Gallery Footer - **URL**: https://ui.beste.co/block/footer69 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer69.json"` (Radix: `/r/footer69.json`) - **Description**: Cultural venue footer with current exhibition cards, visiting hours, admission pricing, membership options, and ticket button. Perfect for museums, galleries, and cultural institutions. #### Winery & Vineyard Footer - **URL**: https://ui.beste.co/block/footer73 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer73.json"` (Radix: `/r/footer73.json`) - **Description**: Wine estate footer with wine collection categories, tasting room hours, experience links, award badges, and booking button. Perfect for wineries, vineyards, and breweries. #### App Showcase Footer - **URL**: https://ui.beste.co/block/footer100 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer100.json"` (Radix: `/r/footer100.json`) - **Description**: Mobile app promotion footer with phone mockup screenshot, feature highlights, download stats, app store badges, and QR code. Perfect for mobile app marketing pages. #### Four Column Footer with Partner Badge - **URL**: https://ui.beste.co/block/footer101 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer101.json"` (Radix: `/r/footer101.json`) - **Description**: Corporate footer with four navigation columns covering institutional pages, solutions, product modules, and customer service contact details. Includes a partner badge image, centered copyright with project highlight, legal links, and social icons. #### Mega Footer - **URL**: https://ui.beste.co/block/footer102 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer102.json"` (Radix: `/r/footer102.json`) - **Description**: Complete studio mega footer with brand column, link columns, socials and legal bar. #### CTA Footer - **URL**: https://ui.beste.co/block/footer103 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer103.json"` (Radix: `/r/footer103.json`) - **Description**: Dark closing-CTA footer with a big statement, email and compact links. #### Newsletter Footer - **URL**: https://ui.beste.co/block/footer104 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer104.json"` (Radix: `/r/footer104.json`) - **Description**: Footer led by a subscribe form beside link columns. #### Dark Studio Footer - **URL**: https://ui.beste.co/block/footer105 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer105.json"` (Radix: `/r/footer105.json`) - **Description**: Dark footer with a wordmark, headquarters address, email and social row on the left; three link columns and a newsletter signup on the right; and a bottom bar with copyright, credit, and a long studio statement. #### Wordmark Card Footer - **URL**: https://ui.beste.co/block/footer106 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer106.json"` (Radix: `/r/footer106.json`) - **Description**: Footer with a CTA row, then a bordered card holding the brand, a statement heading, a back-to-top link, three link columns, copyright, and an oversized wordmark bleeding off the bottom edge. #### Newsletter Footer - **URL**: https://ui.beste.co/block/footer107 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer107.json"` (Radix: `/r/footer107.json`) - **Description**: Newsletter-forward footer — a parenthetical label and oversized heading beside an email field with a pill submit, over a ruled bottom bar of wordmark, nav and social links. #### Oversized Wordmark Footer - **URL**: https://ui.beste.co/block/footer108 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer108.json"` (Radix: `/r/footer108.json`) - **Description**: Footer with a brand intro and three link columns over a copyright bar, closed by one oversized wordmark cropped at low opacity so its lower third bleeds off the bottom edge. #### Minimal Centered Footer - **URL**: https://ui.beste.co/block/footer109 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer109.json"` (Radix: `/r/footer109.json`) - **Description**: Airy centered footer — a parenthetical label, a single oversized closing statement and a pill CTA, with one centered nav row, socials and a ruled copyright line. #### Contact Footer - **URL**: https://ui.beste.co/block/footer110 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer110.json"` (Radix: `/r/footer110.json`) - **Description**: Contact-forward footer — a parenthetical label, a closing heading and oversized email, phone and address links beside compact link columns, with a pill CTA and a back-to-top bottom bar. #### Ruled Index Footer - **URL**: https://ui.beste.co/block/footer111 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer111.json"` (Radix: `/r/footer111.json`) - **Description**: Editorial directory footer — a parenthetical label and statement above ruled sitemap rows, each pairing a section title with a wrapping set of links, closed by a wordmark and copyright line. #### Studio Wordmark Footer - **URL**: https://ui.beste.co/block/footer112 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer112.json"` (Radix: `/r/footer112.json`) - **Description**: Architectural studio footer — four untitled link columns with a copyright and legal row up top, then an oversized wordmark paired with a discipline list and a closing tagline along the baseline. #### Big Logotype Footer - **URL**: https://ui.beste.co/block/footer113 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer113.json"` (Radix: `/r/footer113.json`) - **Description**: Footer led by a full-width oversized wordmark, then a newsletter field with an arrow submit and socials beside four titled link columns, closed by a quiet copyright line. #### Navigation Statement Footer - **URL**: https://ui.beste.co/block/footer114 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer114.json"` (Radix: `/r/footer114.json`) - **Description**: Footer that turns the menu into a statement — a parenthetical label over oversized nav links flowing with slash separators, with a back-to-top link and a sign-off line on the baseline. #### Dark Sign-off Footer - **URL**: https://ui.beste.co/block/footer115 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer115.json"` (Radix: `/r/footer115.json`) - **Description**: Inverted bg-foreground footer, centered — a parenthetical label, one closing statement, a single nav row and socials over a hairline copyright line. #### Studio Locations Footer - **URL**: https://ui.beste.co/block/footer116 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer116.json"` (Radix: `/r/footer116.json`) - **Description**: Footer for a studio with several addresses — a parenthetical label and heading over a ruled row of city names with addresses and directions links, closed by a nav, copyright and back-to-top bar. #### Split CTA Footer - **URL**: https://ui.beste.co/block/footer117 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer117.json"` (Radix: `/r/footer117.json`) - **Description**: Two-column footer — a parenthetical label, closing heading, pill CTA and email on the left beside a stacked oversized nav on the right, over a copyright and socials bar. #### Live Studio Clock Footer - **URL**: https://ui.beste.co/block/footer118 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer118.json"` (Radix: `/r/footer118.json`) - **Description**: Footer built around a live clock — the studio's local time ticks every second in oversized type, with a pulsing open/closed status, city and day, over a nav and copyright bar. #### Editorial Newsletter Footer - **URL**: https://ui.beste.co/block/footer119 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer119.json"` (Radix: `/r/footer119.json`) - **Description**: A light footer with a lowercase wordmark, a tagline, a newsletter signup, three link columns, and a bottom bar of legal links over a hairline rule. #### CTA Footer - **URL**: https://ui.beste.co/block/footer120 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer120.json"` (Radix: `/r/footer120.json`) - **Description**: A footer that opens with a light closing heading and accent buttons over a hairline rule, then a slim bottom bar with a lowercase wordmark, a link row, and copyright. #### Minimal Centered Footer - **URL**: https://ui.beste.co/block/footer121 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer121.json"` (Radix: `/r/footer121.json`) - **Description**: A compact centered footer with a lowercase wordmark, a short tagline, an uppercase link row, a social row over a hairline rule, and a copyright line. #### Brand Column Footer - **URL**: https://ui.beste.co/block/footer122 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/footer122.json"` (Radix: `/r/footer122.json`) - **Description**: A four-column footer with a wide brand column carrying a parenthetical eyebrow, an oversized wordmark, a two-line tagline and labelled social links, beside three ruled link columns with an inline mail address and a centered copyright bar. ### Gallery #### Masonry Caption Gallery - **URL**: https://ui.beste.co/block/gallery1 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/gallery1.json"` (Radix: `/r/gallery1.json`) - **Description**: Masonry gallery built with CSS columns so images keep their own heights, each captioned with its subject and place, and any frame opening a drawer that slides in from the right while the wall stays visible behind the scrim. #### Lightbox Frame Grid - **URL**: https://ui.beste.co/block/gallery2 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/gallery2.json"` (Radix: `/r/gallery2.json`) - **Description**: Captioned image grid where any tile opens a full-screen lightbox on a dark scrim, with a frame counter, keyboard arrows, escape to close and previous and next controls beside the caption. #### Filterable Album Grid - **URL**: https://ui.beste.co/block/gallery3 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/gallery3.json"` (Radix: `/r/gallery3.json`) - **Description**: Album gallery with pill filters that swap the whole set below, where any tile opens a light full-screen viewer: the frame hangs on the page surface while a side column carries the caption, the album summary, the controls and a plainly labelled thumbnail index. #### Wide Slide Reel - **URL**: https://ui.beste.co/block/gallery4 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/gallery4.json"` (Radix: `/r/gallery4.json`) - **Description**: Single-frame image reel that slides on a transform, driven by round arrow buttons in the header and a row of bar indicators beside the caption, with no hover behaviour on the image itself. #### Filmstrip Stage Viewer - **URL**: https://ui.beste.co/block/gallery5 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/gallery5.json"` (Radix: `/r/gallery5.json`) - **Description**: Cinematic stage frame with the caption and frame counter set on a gradient at its foot, round arrow controls on the picture itself, and a scrolling filmstrip below where the inactive thumbnails sit back at low opacity. #### Mosaic Full Screen Viewer - **URL**: https://ui.beste.co/block/gallery6 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/gallery6.json"` (Radix: `/r/gallery6.json`) - **Description**: Dense caption-free mosaic where every tile carries an expand seal and opens a full-screen viewer with arrow controls on the picture, escape and arrow keys, a counter, the caption and a thumbnail filmstrip. #### Counter Scrolling Image Bands - **URL**: https://ui.beste.co/block/gallery7 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/gallery7.json"` (Radix: `/r/gallery7.json`) - **Description**: Two full-bleed image tracks scrolling in opposite directions under a centered statement, pausing together on hover, where any frame opens a framed viewer: the picture sits in a mount on a scrim with its caption, position and controls beneath it. #### Photo Book Spread Viewer - **URL**: https://ui.beste.co/block/gallery8 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/gallery8.json"` (Radix: `/r/gallery8.json`) - **Description**: Photographs presented as printed spreads on a soft panel: two plates share a page with a centre rule, round controls turn to the next spread, and a bar index below tracks how far through the book you are. #### Zoomable Justified Gallery - **URL**: https://ui.beste.co/block/gallery9 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/gallery9.json"` (Radix: `/r/gallery9.json`) - **Description**: Justified rows of frames that grow to fill every line, opening a viewer whose picture doubles as the zoom control: clicking switches between fitting the screen and filling it, with the caption and controls on one closing rule. #### Overview Toggle Viewer - **URL**: https://ui.beste.co/block/gallery10 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/gallery10.json"` (Radix: `/r/gallery10.json`) - **Description**: Square grid whose viewer holds two states: a single frame with caption and controls, or an in-place overview of the whole set that you can jump from without closing the layer. #### Full Bleed Strip With Sheet Viewer - **URL**: https://ui.beste.co/block/gallery11 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/gallery11.json"` (Radix: `/r/gallery11.json`) - **Description**: Edge-to-edge strip of tall frames opening a viewer where the picture fills the screen and the caption, note and thumbnails sit in a sheet that slides off the bottom when you want the frame uncovered. #### Exhibition Wall Hang - **URL**: https://ui.beste.co/block/gallery12 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/gallery12.json"` (Radix: `/r/gallery12.json`) - **Description**: Works of different sizes hung on one centre line inside a matted wall panel, each with its own label, opening a viewer that shows the piece in a mount beside a museum wall label of medium, dimensions and year. #### Catalogue Index Plates - **URL**: https://ui.beste.co/block/gallery13 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/gallery13.json"` (Radix: `/r/gallery13.json`) - **Description**: Printed-catalogue layout pairing a numbered index of works with a sticky matted plate and its note, where an expand seal opens the plate alone on a dark ground with only its number and the arrows. #### Walkthrough Exhibition Rail - **URL**: https://ui.beste.co/block/gallery14 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/gallery14.json"` (Radix: `/r/gallery14.json`) - **Description**: Long-scroll exhibition where every work sits in its own matted panel with a full label, beside a sticky rail whose numbered index follows the work in the middle of the screen and scrolls to any other on click. #### Salon Hang Wall - **URL**: https://ui.beste.co/block/gallery15 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/gallery15.json"` (Radix: `/r/gallery15.json`) - **Description**: Label-free salon wall where works of four different spans pack tightly into a matted panel, opening a passe-partout viewer whose full-height side margins are themselves the previous and next controls. #### Artist Room Index - **URL**: https://ui.beste.co/block/gallery16 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/gallery16.json"` (Radix: `/r/gallery16.json`) - **Description**: Exhibition split into artist rooms, each with a sticky statement column beside its works, opening a viewer that shows the chosen piece large with the next one waiting as a thumbnail you can step straight into. #### Acquisition Year Ledger - **URL**: https://ui.beste.co/block/gallery17 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/gallery17.json"` (Radix: `/r/gallery17.json`) - **Description**: Collection intake listed year by year with a summary beside each set of works, opening a viewer that scrolls rather than steps: every acquisition is a snap section and the header counter follows whichever fills the screen. #### Edition Inspector - **URL**: https://ui.beste.co/block/gallery18 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/gallery18.json"` (Radix: `/r/gallery18.json`) - **Description**: Matted edition cards opening a viewer that keeps the whole sheet and its detail crops in one place: pill controls swap what the large frame shows while the side column holds process, sheet size and edition. #### Dark Room Fade Viewer - **URL**: https://ui.beste.co/block/gallery19 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/gallery19.json"` (Radix: `/r/gallery19.json`) - **Description**: Inverted low-light room where staggered frames hang on a dark panel, opening a viewer with no chrome at all: the work fades up like a lamp on a dimmer, the caption follows it, and a dot rail walks the hang. #### Paired Hang Compare - **URL**: https://ui.beste.co/block/gallery20 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/gallery20.json"` (Radix: `/r/gallery20.json`) - **Description**: Works hung two to a bay on staggered ruled cards, opening a viewer that can hold a second work beside the first: the frame splits, both pictures keep their own caption and the pair can be walked together. #### Loupe Surface Studies - **URL**: https://ui.beste.co/block/gallery21 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/gallery21.json"` (Radix: `/r/gallery21.json`) - **Description**: Square studies of material and surface, opening a viewer that hands you a loupe: a round window you drag across the work, redrawing whatever sits under it from the same file at a configurable magnification. #### Archive Record Cards - **URL**: https://ui.beste.co/block/gallery22 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/gallery22.json"` (Radix: `/r/gallery22.json`) - **Description**: Text-first archive index of reference, thumbnail, title and year, opening a record card with two sides: the work on the front and the registrar's acquisition, condition and storage notes on the back. #### Wall Scale Viewer - **URL**: https://ui.beste.co/block/gallery23 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/gallery23.json"` (Radix: `/r/gallery23.json`) - **Description**: Works listed with the sizes they are printed at, opening a viewer that hangs the piece in a photographed room and scales it as you switch size pills, so the dimensions stop being an abstraction. #### Plan Chest Sheet Stack - **URL**: https://ui.beste.co/block/gallery24 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/gallery24.json"` (Radix: `/r/gallery24.json`) - **Description**: Works on paper listed as ruled plan-chest drawers with their contents and a peek of the sheets, opening a stack where the top sheet lifts clear of the pile before dropping to the back and the next one rises into its place. #### Pick The Frames Taste Profile - **URL**: https://ui.beste.co/block/gallery25 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/gallery25.json"` (Radix: `/r/gallery25.json`) - **Description**: A gallery finder whose questions are photographs rather than sentences: three rows of frames are chosen by eye, and the result names the leading way of looking, shows the series that goes with it, and breaks the picks down as a share bar. ### Health #### Vitals Dashboard - **URL**: https://ui.beste.co/block/health1 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/health1.json"` (Radix: `/r/health1.json`) - **Description**: Health metrics dashboard displaying vital signs like heart rate, blood oxygen, activity, and sleep with trend indicators. Perfect for wellness apps and health tracking platforms. #### Wellness Goals Tracker - **URL**: https://ui.beste.co/block/health2 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/health2.json"` (Radix: `/r/health2.json`) - **Description**: Daily wellness goals tracker with progress bars showing current vs target for water intake, steps, mindfulness, and meals. Perfect for habit tracking and fitness apps. #### Medical Specialists Directory - **URL**: https://ui.beste.co/block/health3 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/health3.json"` (Radix: `/r/health3.json`) - **Description**: Doctor cards grid showing specialists with ratings, availability status, and next appointment slots. Perfect for healthcare platforms and telemedicine booking systems. #### Wellness Hero Section - **URL**: https://ui.beste.co/block/health4 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/health4.json"` (Radix: `/r/health4.json`) - **Description**: Split-layout hero with large typography, serene imagery, and floating testimonial card. Perfect for yoga studios, meditation apps, and wellness retreat websites. #### Medical Services Grid - **URL**: https://ui.beste.co/block/health5 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/health5.json"` (Radix: `/r/health5.json`) - **Description**: Service cards displaying medical specialties with appointment durations, feature lists, and CTAs. Perfect for hospitals, clinics, and healthcare provider websites. #### Wellness Editorial Section - **URL**: https://ui.beste.co/block/health6 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/health6.json"` (Radix: `/r/health6.json`) - **Description**: Long-form content section with rich text, bullet point highlights, and call-to-action buttons. Perfect for wellness blogs, healing journey stories, and health philosophy pages. #### Daily Health Check-in - **URL**: https://ui.beste.co/block/health7 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/health7.json"` (Radix: `/r/health7.json`) - **Description**: Two-column layout with feature highlights and daily summary card showing heart rate, activity, and recovery metrics. Perfect for fitness coaching and health monitoring apps. #### Health Statistics Display - **URL**: https://ui.beste.co/block/health16 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/health16.json"` (Radix: `/r/health16.json`) - **Description**: Large-format statistics grid showcasing key metrics like member counts, satisfaction rates, and years of service. Perfect for healthcare organizations and wellness brands. #### Care Overview Dashboard - **URL**: https://ui.beste.co/block/health17 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/health17.json"` (Radix: `/r/health17.json`) - **Description**: A clinical overview with an eyebrow over a hairline rule, a two-column heading, and a bordered dashboard panel that composes a journeys stat, a retention ring, and a slim live-status strip, closing with a big-number outcomes row. #### Care Programme Cards - **URL**: https://ui.beste.co/block/health18 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/health18.json"` (Radix: `/r/health18.json`) - **Description**: Three hairline programme cards, each pairing a light programme name with a muted duration line, a short explanation, a checked list of what is included, and a link into the full programme. ### Hero #### Centered Hero with Media - **URL**: https://ui.beste.co/block/hero7 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero7.json"` (Radix: `/r/hero7.json`) - **Description**: Centered hero with optional badge, heading, description, dual action buttons, and a featured image below. Perfect for product launches and landing pages. #### Cinematic Fullscreen Carousel - **URL**: https://ui.beste.co/block/hero19 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero19.json"` (Radix: `/r/hero19.json`) - **Description**: Full-screen animated carousel with multiple transition effects, next slide preview, and progress bar. Perfect for immersive storytelling and portfolio showcases. #### Split Carousel with Thumbnails - **URL**: https://ui.beste.co/block/hero20 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero20.json"` (Radix: `/r/hero20.json`) - **Description**: Two-column carousel with animated content transitions, thumbnail strip navigation, and vertical progress indicator. Perfect for product showcases and feature highlights. #### Fullscreen Vertical Carousel - **URL**: https://ui.beste.co/block/hero21 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero21.json"` (Radix: `/r/hero21.json`) - **Description**: Full-screen carousel with vertical slide transitions, decorative grid lines, and customizable accent colors. Perfect for creative agencies and modern brand showcases. #### Wellness Hero with Stats Cards - **URL**: https://ui.beste.co/block/hero24 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero24.json"` (Radix: `/r/hero24.json`) - **Description**: Split-layout hero with avatar stack social proof, floating heart rate card, and progress indicator overlay on image. Perfect for health, fitness, and wellness apps. #### Dashboard Preview Hero - **URL**: https://ui.beste.co/block/hero25 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero25.json"` (Radix: `/r/hero25.json`) - **Description**: Split-layout hero with interactive dashboard mockup featuring stats cards, line chart, and recent activity feed. Perfect for SaaS and analytics platforms. #### Split Hero with Video Player - **URL**: https://ui.beste.co/block/hero35 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero35.json"` (Radix: `/r/hero35.json`) - **Description**: Two-column hero with playable video (or image), play button overlay, and key stats row. Perfect for product demos and feature announcements. #### Centered Hero with Logo Cloud - **URL**: https://ui.beste.co/block/hero36 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero36.json"` (Radix: `/r/hero36.json`) - **Description**: Centered hero with gradient-highlighted heading text and trusted-by logo cloud below CTA buttons. Perfect for B2B SaaS and enterprise products. #### Analytics Hero with Floating Stats - **URL**: https://ui.beste.co/block/hero37 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero37.json"` (Radix: `/r/hero37.json`) - **Description**: Centered hero with four floating stat cards positioned around the content displaying key metrics. Perfect for analytics platforms and data-driven products. #### Split Hero with Testimonial Card - **URL**: https://ui.beste.co/block/hero38 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero38.json"` (Radix: `/r/hero38.json`) - **Description**: Two-column hero with prominent testimonial quote card featuring author avatar and company info. Perfect for building trust and social proof. #### Email App Hero with Inbox Mockup - **URL**: https://ui.beste.co/block/hero43 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero43.json"` (Radix: `/r/hero43.json`) - **Description**: Split-layout hero with interactive email client mockup featuring sidebar, message list, and floating notification. Perfect for email and communication apps. #### Centered Hero with Ratings Social Proof - **URL**: https://ui.beste.co/block/hero45 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero45.json"` (Radix: `/r/hero45.json`) - **Description**: Centered hero with avatar stack, partial star ratings display, and review count above the featured image. Perfect for products with strong user reviews. #### Search Hero with Popular Tags - **URL**: https://ui.beste.co/block/hero46 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero46.json"` (Radix: `/r/hero46.json`) - **Description**: Centered hero with prominent search input field and popular search suggestion pills below. Perfect for documentation sites, knowledge bases, and support centers. #### Metrics Dashboard Hero - **URL**: https://ui.beste.co/block/hero48 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero48.json"` (Radix: `/r/hero48.json`) - **Description**: Centered hero with four-column metrics panel showing values and trend indicators below the CTA buttons. Perfect for analytics dashboards and business tools. #### Centered Hero with Announcement Pill - **URL**: https://ui.beste.co/block/hero50 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero50.json"` (Radix: `/r/hero50.json`) - **Description**: Clean centered hero with clickable announcement banner pill above the heading with sparkle icon. Perfect for product launches and feature announcements. #### Split Hero with 3D Tilt Effect - **URL**: https://ui.beste.co/block/hero51 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero51.json"` (Radix: `/r/hero51.json`) - **Description**: Two-column hero with interactive image card that tilts in 3D on mouse movement with shine effect. Perfect for showcasing premium or interactive products. #### Mobile App Hero with Phone Mockup - **URL**: https://ui.beste.co/block/hero53 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero53.json"` (Radix: `/r/hero53.json`) - **Description**: Split-layout hero with realistic iPhone mockup, notch detail, and App Store/Play Store download buttons. Perfect for mobile app landing pages. #### Full-height Hero with Scroll Indicator - **URL**: https://ui.beste.co/block/hero57 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero57.json"` (Radix: `/r/hero57.json`) - **Description**: Vertically centered hero with animated scroll-down indicator featuring bouncing dot and arrow. Perfect for single-page sites and immersive landing pages. #### Enterprise Hero with Trust Badges - **URL**: https://ui.beste.co/block/hero59 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero59.json"` (Radix: `/r/hero59.json`) - **Description**: Centered hero with security and compliance trust indicators (SOC 2, Uptime, CDN, Encryption) displayed as icon badges. Perfect for enterprise B2B products. #### Split Hero with Floating Feature Cards - **URL**: https://ui.beste.co/block/hero61 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero61.json"` (Radix: `/r/hero61.json`) - **Description**: Two-column hero with announcement banner, social proof metrics, and three floating feature cards with hover animations. Perfect for SaaS product launches. #### Changelog Hero with Updates List - **URL**: https://ui.beste.co/block/hero63 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero63.json"` (Radix: `/r/hero63.json`) - **Description**: Centered hero with checklist of recent updates showing new badges and completion icons. Perfect for changelog pages and product update announcements. #### Split Hero with YouTube Video - **URL**: https://ui.beste.co/block/hero65 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero65.json"` (Radix: `/r/hero65.json`) - **Description**: Two-column hero with embedded YouTube video player in responsive aspect ratio container. Perfect for product demos and explainer video landing pages. #### Centered Hero with Feature Icons - **URL**: https://ui.beste.co/block/hero68 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero68.json"` (Radix: `/r/hero68.json`) - **Description**: Centered hero with three feature highlights displayed as icon cards with descriptions below the CTA. Perfect for platform and infrastructure products. #### Email Signup Hero - **URL**: https://ui.beste.co/block/hero69 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero69.json"` (Radix: `/r/hero69.json`) - **Description**: Minimal centered hero with inline email input field and submit button for newsletter or waitlist signups. Perfect for coming-soon pages and early access campaigns. #### Pricing Preview Hero - **URL**: https://ui.beste.co/block/hero71 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero71.json"` (Radix: `/r/hero71.json`) - **Description**: Centered hero with prominent price display, period label, and horizontal feature checklist. Perfect for freemium products and pricing-focused landing pages. #### Browser Screenshot Hero with Notifications - **URL**: https://ui.beste.co/block/hero72 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero72.json"` (Radix: `/r/hero72.json`) - **Description**: Centered hero with perspective browser mockup, floating notification cards at corners, and star rating badge. Perfect for SaaS products and web apps. #### Team Chat App Hero - **URL**: https://ui.beste.co/block/hero75 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero75.json"` (Radix: `/r/hero75.json`) - **Description**: Split-layout hero with full chat interface mockup featuring channels sidebar, message threads, online users, and floating notification. Perfect for collaboration and messaging apps. #### Kanban Board Hero - **URL**: https://ui.beste.co/block/hero76 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero76.json"` (Radix: `/r/hero76.json`) - **Description**: Split-layout hero with interactive kanban board mockup showing tasks with priorities, tags, assignees, and floating completion stats. Perfect for project management tools. #### Calendar Schedule Hero - **URL**: https://ui.beste.co/block/hero77 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero77.json"` (Radix: `/r/hero77.json`) - **Description**: Split-layout hero with weekly calendar mockup showing events, attendees, and floating reminder notification. Perfect for scheduling and calendar apps. #### Centered Hero with Founder Social Proof - **URL**: https://ui.beste.co/block/hero78 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero78.json"` (Radix: `/r/hero78.json`) - **Description**: Centered hero with avatar stack and founder count text between buttons and featured image. Perfect for startup products and B2B SaaS. #### Split Hero with Avatar Social Proof - **URL**: https://ui.beste.co/block/hero79 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero79.json"` (Radix: `/r/hero79.json`) - **Description**: Two-column hero with avatar stack social proof positioned above action buttons alongside featured image. Perfect for startup and team-focused products. #### Cinematic Hero with Overlapping Media - **URL**: https://ui.beste.co/block/hero80 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero80.json"` (Radix: `/r/hero80.json`) - **Description**: Centered hero with inset background media and overlapping product image #### Fullscreen Hero with Quick-Access Cards - **URL**: https://ui.beste.co/block/hero81 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero81.json"` (Radix: `/r/hero81.json`) - **Description**: Cinematic fullscreen hero with inset background media and glassmorphism quick-access cards #### Left-Aligned Hero with Gradient Overlay - **URL**: https://ui.beste.co/block/hero82 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero82.json"` (Radix: `/r/hero82.json`) - **Description**: Left-aligned fullscreen hero with inset background media and directional gradient overlay #### Bottom-Aligned Hero with Quick Links - **URL**: https://ui.beste.co/block/hero83 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero83.json"` (Radix: `/r/hero83.json`) - **Description**: Bottom-aligned fullscreen hero with inset background media and right-side quick link cards #### Split Hero with Edge-to-Edge Media - **URL**: https://ui.beste.co/block/hero84 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero84.json"` (Radix: `/r/hero84.json`) - **Description**: 50/50 split hero with content left and edge-to-edge video/image right with checklist items #### Fullscreen Hero with Floating Testimonials - **URL**: https://ui.beste.co/block/hero85 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero85.json"` (Radix: `/r/hero85.json`) - **Description**: Cinematic fullscreen hero with inset background video and floating glassmorphism testimonial cards #### Fullscreen Hero with Logo Cloud - **URL**: https://ui.beste.co/block/hero86 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero86.json"` (Radix: `/r/hero86.json`) - **Description**: Cinematic fullscreen hero with inset background video and trusted-by logo strip #### Floating Glassmorphism Card Hero - **URL**: https://ui.beste.co/block/hero87 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero87.json"` (Radix: `/r/hero87.json`) - **Description**: Fullscreen hero with centered glassmorphism card floating over inset background video #### Lead Capture Hero with Email Input - **URL**: https://ui.beste.co/block/hero88 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero88.json"` (Radix: `/r/hero88.json`) - **Description**: Fullscreen hero with email capture input over inset background video #### Reverse Split Hero with Testimonial - **URL**: https://ui.beste.co/block/hero89 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero89.json"` (Radix: `/r/hero89.json`) - **Description**: 50/50 split hero with video/image left and content with testimonial quote right #### Stacked Hero with Media Top - **URL**: https://ui.beste.co/block/hero90 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero90.json"` (Radix: `/r/hero90.json`) - **Description**: Vertical split hero with video/image on top and content section below #### Split Hero with Feature List Panel - **URL**: https://ui.beste.co/block/hero91 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero91.json"` (Radix: `/r/hero91.json`) - **Description**: 50/50 split hero with muted content panel and feature list left, video/image right #### Split Hero with Bento Feature Grid - **URL**: https://ui.beste.co/block/hero92 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero92.json"` (Radix: `/r/hero92.json`) - **Description**: 50/50 split hero with content left and bento feature grid overlay on video right #### Asymmetric Split Hero with Quick Links - **URL**: https://ui.beste.co/block/hero93 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero93.json"` (Radix: `/r/hero93.json`) - **Description**: 40/60 asymmetric split hero with narrow content panel and vertical quick links over video #### Reverse Split Hero with Pill Grid - **URL**: https://ui.beste.co/block/hero94 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero94.json"` (Radix: `/r/hero94.json`) - **Description**: Reverse split hero with compact 3x2 pill grid over video left, content right #### Fullscreen Hero with Bento Grid - **URL**: https://ui.beste.co/block/hero95 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero95.json"` (Radix: `/r/hero95.json`) - **Description**: Fullscreen hero with centered heading and 4-column bento feature grid over inset background video #### Split Hero with Metric Dashboard - **URL**: https://ui.beste.co/block/hero96 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero96.json"` (Radix: `/r/hero96.json`) - **Description**: 50/50 split hero with content left and metric dashboard cards with trend badges over video right #### Bottom-Aligned Hero with Stack Cards - **URL**: https://ui.beste.co/block/hero97 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero97.json"` (Radix: `/r/hero97.json`) - **Description**: Fullscreen bottom-aligned hero with vertical stack cards and inset background video with gradient overlay #### Cinematic Hero with Social Proof - **URL**: https://ui.beste.co/block/hero98 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero98.json"` (Radix: `/r/hero98.json`) - **Description**: Cinematic hero with announcement pill, avatar social proof, and overlapping dashboard media #### Fullscreen Hero with Marquee Ticker - **URL**: https://ui.beste.co/block/hero99 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero99.json"` (Radix: `/r/hero99.json`) - **Description**: Cinematic fullscreen hero with scrolling marquee keyword band over inset background video #### Fullscreen Hero with Browser Mockup - **URL**: https://ui.beste.co/block/hero100 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero100.json"` (Radix: `/r/hero100.json`) - **Description**: Fullscreen hero with centered content and browser window frame mockup over inset background video #### Split Hero with Terminal Card - **URL**: https://ui.beste.co/block/hero101 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero101.json"` (Radix: `/r/hero101.json`) - **Description**: Fullscreen split hero with content left and realistic terminal/CLI card right over inset background video #### Split Hero with Timeline Steps - **URL**: https://ui.beste.co/block/hero102 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero102.json"` (Radix: `/r/hero102.json`) - **Description**: 50/50 split hero with content left and vertical numbered timeline overlay on video right #### Mobile App Hero with Phone Mockup - **URL**: https://ui.beste.co/block/hero103 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero103.json"` (Radix: `/r/hero103.json`) - **Description**: Fullscreen hero with app store buttons and phone mockup over inset background video #### IDE Mockup Split Hero - **URL**: https://ui.beste.co/block/hero104 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero104.json"` (Radix: `/r/hero104.json`) - **Description**: Split hero with heading, trust line, and CTA buttons on the left, IDE file-tree and code editor mockup on the right #### Mobile Hero with Dual Phone Mockups - **URL**: https://ui.beste.co/block/hero105 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero105.json"` (Radix: `/r/hero105.json`) - **Description**: Fullscreen hero with two overlapping angled phone mockups and app store buttons over inset background video #### Mobile Hero with Flanking Features - **URL**: https://ui.beste.co/block/hero106 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero106.json"` (Radix: `/r/hero106.json`) - **Description**: Fullscreen hero with centered phone mockup flanked by feature columns on each side over inset background video #### Mobile Hero with 3D Perspective Phone - **URL**: https://ui.beste.co/block/hero107 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero107.json"` (Radix: `/r/hero107.json`) - **Description**: Fullscreen split hero with content left and 3D perspective-tilted phone mockup right over inset background video #### Mobile Hero with Review Card - **URL**: https://ui.beste.co/block/hero108 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero108.json"` (Radix: `/r/hero108.json`) - **Description**: Fullscreen hero with phone mockup, star rating review card, and app store buttons over inset background video #### Bounded Carousel Hero - **URL**: https://ui.beste.co/block/hero109 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero109.json"` (Radix: `/r/hero109.json`) - **Description**: Contained 16:9 hero carousel with badge, title, description, and CTA over an image background. Auto-rotates with centered, clickable dots at the bottom — same carousel engine as hero19 but not full-height. #### Bounded Carousel Hero — Aligned - **URL**: https://ui.beste.co/block/hero110 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero110.json"` (Radix: `/r/hero110.json`) - **Description**: Contained 16:9 hero carousel with badge, title, description, and CTA. Vertically centered content that anchors to the left, center, or right via the contentAlign prop. Auto-rotates with centered, clickable dots. #### Hero with Feature List and Image - **URL**: https://ui.beste.co/block/hero111 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero111.json"` (Radix: `/r/hero111.json`) - **Description**: Two-column hero with heading, description, icon-only feature list, and CTA on one side and a square image on the other. Image position is configurable. #### Editorial Split Hero - **URL**: https://ui.beste.co/block/hero112 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero112.json"` (Radix: `/r/hero112.json`) - **Description**: Two-column studio hero with a two-tone headline, dual CTAs, tall image and a client wordmark strip. #### Statement Reel Hero - **URL**: https://ui.beste.co/block/hero113 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero113.json"` (Radix: `/r/hero113.json`) - **Description**: Centered big-type studio hero with start and watch-the-film actions over a cinematic banner. #### Collage Hero - **URL**: https://ui.beste.co/block/hero114 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero114.json"` (Radix: `/r/hero114.json`) - **Description**: Split studio hero with a two-tone headline and a four-image arranged collage. #### Cinematic Image Hero - **URL**: https://ui.beste.co/block/hero115 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero115.json"` (Radix: `/r/hero115.json`) - **Description**: Full-bleed background-image hero with a legibility scrim and bottom-aligned eyebrow, headline, copy and CTAs. #### Studio Reel Hero - **URL**: https://ui.beste.co/block/hero116 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero116.json"` (Radix: `/r/hero116.json`) - **Description**: Editorial hero with twin vertical image marquees scrolling in opposite directions beside the headline. #### Giant Wordmark Hero - **URL**: https://ui.beste.co/block/hero117 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero117.json"` (Radix: `/r/hero117.json`) - **Description**: Editorial studio hero with a vertical parenthetical side label, monospace corner links, an oversized centered wordmark with tagline, and a full-bleed strip of rounded portrait tiles below. #### Split Hero With Floating Review - **URL**: https://ui.beste.co/block/hero118 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero118.json"` (Radix: `/r/hero118.json`) - **Description**: Two-column hero: parenthetical eyebrow, oversized heading, supporting copy, a dark CTA and an avatar trust row on the left; a tall image on the right with a floating star-rated testimonial card overlapping its corner. #### Full-Bleed Display Hero - **URL**: https://ui.beste.co/block/hero119 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero119.json"` (Radix: `/r/hero119.json`) - **Description**: Full-bleed image hero with an oversized three-word display heading, a row of monospace meta labels, a bold sub-headline, and a featured card with thumbnail, category, paginated index, and title. #### Editorial Image Hero - **URL**: https://ui.beste.co/block/hero120 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero120.json"` (Radix: `/r/hero120.json`) - **Description**: Centered editorial hero with eyebrow, large heading, description, dual dark and outline CTAs, and a wide 16:9 image with a mono caption below. #### Split Hero with Stats - **URL**: https://ui.beste.co/block/hero121 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero121.json"` (Radix: `/r/hero121.json`) - **Description**: Split hero with a big headline and CTA on the left, a divided vertical stat rail on the right, and a full-width wide image strip below. #### Typographic Card Hero - **URL**: https://ui.beste.co/block/hero122 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero122.json"` (Radix: `/r/hero122.json`) - **Description**: Centered typographic hero on a muted card with an oversized heading, inline CTA, and a bottom monospace meta row of three labels. #### Trust Hero with Logos - **URL**: https://ui.beste.co/block/hero123 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero123.json"` (Radix: `/r/hero123.json`) - **Description**: Trust hero with a heading, description and CTA beside a tall portrait image, over a grayscale logo marquee. #### Profile Hero With Chart - **URL**: https://ui.beste.co/block/hero124 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero124.json"` (Radix: `/r/hero124.json`) - **Description**: Studio-profile hero: an eyebrow, oversized heading, supporting copy and a CTA on the left, beside a muted stage showcasing a slider-control piece on the right. #### Hero with Portrait Gallery - **URL**: https://ui.beste.co/block/hero125 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero125.json"` (Radix: `/r/hero125.json`) - **Description**: Centered eyebrow, oversized heading and CTA above a responsive 3-up portrait gallery with monospace captions. #### Waitlist Email Hero - **URL**: https://ui.beste.co/block/hero126 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero126.json"` (Radix: `/r/hero126.json`) - **Description**: Centered waitlist hero with eyebrow, big heading, description, an inline email-capture form and an overlapping avatar trust row. #### Slideshow Hero with Background Crossfade - **URL**: https://ui.beste.co/block/hero127 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero127.json"` (Radix: `/r/hero127.json`) - **Description**: Full-bleed background-driven slideshow hero. The active item's image fills the section and crossfades on selection, with a giant fixed heading and a floating card whose thumbnail, category, numbered pagination, name, and location swap to match the active slide. Auto-loops. #### Vertical Index List Hero - **URL**: https://ui.beste.co/block/hero128 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero128.json"` (Radix: `/r/hero128.json`) - **Description**: Full-bleed monochrome hero whose background crossfades to the active project. A giant heading sits bottom-left while a numbered vertical project index on the right highlights and swaps the active row on hover, click, or auto-loop. #### Chapter Progress Tabs Hero - **URL**: https://ui.beste.co/block/hero129 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero129.json"` (Radix: `/r/hero129.json`) - **Description**: Full-bleed monochrome hero with a giant bottom-left heading and a row of equal-width chapter tabs. The active chapter's thin track fills left to right over the interval, then auto-advances and crossfades the background image. Each tab links to its href. #### Monochrome Hero with Rotating Announcement Ticker - **URL**: https://ui.beste.co/block/hero130 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero130.json"` (Radix: `/r/hero130.json`) - **Description**: Full-bleed hero with a static background image, a giant display heading, and a slim bordered bar that auto-rotates through short, clickable announcement messages with position dots. #### Filmstrip Hero - **URL**: https://ui.beste.co/block/hero131 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero131.json"` (Radix: `/r/hero131.json`) - **Description**: Full-bleed hero whose background crossfades between frames, with a clickable filmstrip of thumbnails pinned along the bottom and an auto-advancing active tile. #### Expanding Panels Hero - **URL**: https://ui.beste.co/block/hero132 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero132.json"` (Radix: `/r/hero132.json`) - **Description**: Full-bleed hero filled with side-by-side image panels that expand on hover and auto-cycle, each revealing a name and caption while a giant heading floats above. #### Kinetic Rotating-Word Hero - **URL**: https://ui.beste.co/block/hero133 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero133.json"` (Radix: `/r/hero133.json`) - **Description**: Full-bleed monochrome hero with a giant headline whose final word auto-cycles through a list, plus clickable chips to pick a word and pause the rotation. #### Vertical Dot Pager Hero - **URL**: https://ui.beste.co/block/hero134 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero134.json"` (Radix: `/r/hero134.json`) - **Description**: Full-bleed hero whose background crossfades across items, steered by a minimal vertical pager pinned to the right edge. The active control grows taller while the rest stay short and dimmed; a giant heading and the clickable active item name sit bottom-left. #### Editorial Split Masthead - **URL**: https://ui.beste.co/block/hero135 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero135.json"` (Radix: `/r/hero135.json`) - **Description**: Two-pane masthead hero: a solid dark editorial panel with eyebrow, value-prop heading, supporting copy, a CTA and an availability note on one side, and a full-bleed image on the other. #### Thumbnail Marquee Hero - **URL**: https://ui.beste.co/block/hero136 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero136.json"` (Radix: `/r/hero136.json`) - **Description**: Full-bleed hero whose background crossfades to the active item, with an auto-scrolling marquee of clickable thumbnails along the bottom and a giant heading above the strip. #### Slideshow Hero with Click Controls - **URL**: https://ui.beste.co/block/hero137 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero137.json"` (Radix: `/r/hero137.json`) - **Description**: Full-bleed monochrome hero that crossfades across a set of slides, navigated by explicit previous/next arrows and clickable dots with an auto-loop, plus a caption linking the active slide. #### Editorial Trust Hero - **URL**: https://ui.beste.co/block/hero138 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero138.json"` (Radix: `/r/hero138.json`) - **Description**: Static full-bleed editorial hero with an eyebrow badge, a giant display heading, a supporting paragraph, dual seal CTAs, and an overlapping avatar trust row. #### Rotating Quote Hero - **URL**: https://ui.beste.co/block/hero139 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero139.json"` (Radix: `/r/hero139.json`) - **Description**: Full-bleed monochrome hero with a giant display heading over a static image, paired with a card that auto-cycles through testimonials and click-to-select dots. #### Animated Tab Hero - **URL**: https://ui.beste.co/block/hero140 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero140.json"` (Radix: `/r/hero140.json`) - **Description**: Full-bleed monochrome hero with a giant heading and a row of clickable tab chips that fade between text panels (title, description, stat), auto-advancing on a timer with no background swap. #### Capability Marquee Hero - **URL**: https://ui.beste.co/block/hero141 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero141.json"` (Radix: `/r/hero141.json`) - **Description**: Full-bleed monochrome hero with a giant display heading, short description, and a continuous bottom marquee of capability chips that pauses on hover. #### Centered Studio Hero - **URL**: https://ui.beste.co/block/hero142 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero142.json"` (Radix: `/r/hero142.json`) - **Description**: A simple centered hero for the Auralis set: a parenthetical eyebrow badge above a balanced heading, a short description, and a pair of animated seal buttons. #### Editorial Split Hero - **URL**: https://ui.beste.co/block/hero143 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero143.json"` (Radix: `/r/hero143.json`) - **Description**: A light editorial hero with an oversized display heading on the left, an offset supporting paragraph and accent button on the right, and a full-bleed image band below. #### Centered Product Hero - **URL**: https://ui.beste.co/block/hero144 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero144.json"` (Radix: `/r/hero144.json`) - **Description**: A centered hero with an eyebrow pill, a large light heading, a supporting paragraph, two accent buttons, and a wide image tile below that floats a live product micro-asset. #### Editorial Product Hero - **URL**: https://ui.beste.co/block/hero145 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero145.json"` (Radix: `/r/hero145.json`) - **Description**: An editorial hero with an eyebrow and an oversized full-width light heading, then a lower row pairing a paragraph and two accent buttons with an image tile that floats a live app window frame. #### Full Bleed Image Hero - **URL**: https://ui.beste.co/block/hero146 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero146.json"` (Radix: `/r/hero146.json`) - **Description**: A full-bleed photographic hero with a gradient scrim, an eyebrow over an oversized light heading, paired accent and hairline actions, and a three-figure proof row along the bottom rule. #### Discipline Ledger Hero - **URL**: https://ui.beste.co/block/hero147 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero147.json"` (Radix: `/r/hero147.json`) - **Description**: Editorial hero pairing an oversized statement, a paragraph and a pill CTA with a ruled index of disciplines, closed by a wide cinematic image band carrying a caption and a location credit on its own rule. #### Wide Statement Fact Hero - **URL**: https://ui.beste.co/block/hero148 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero148.json"` (Radix: `/r/hero148.json`) - **Description**: Photo-free hero that runs a display statement across the full width, drops the paragraph and pill CTAs onto one baseline beneath it, and closes with a ruled four-column row of studio facts. #### Full Bleed Fact Rail Hero - **URL**: https://ui.beste.co/block/hero149 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero149.json"` (Radix: `/r/hero149.json`) - **Description**: Full-bleed photographic hero with a tinted scrim, the statement and paragraph pinned to the lower half, an outline pill CTA on the same baseline and a ruled three-column fact rail closing the fold. #### Offset Image Pair Hero - **URL**: https://ui.beste.co/block/hero150 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero150.json"` (Radix: `/r/hero150.json`) - **Description**: Split hero pairing a statement, paragraph and two pill CTAs with a pair of captioned portrait images, the second dropped by a stagger on desktop so the column reads as an editorial spread. #### Centered Photo Trust Hero - **URL**: https://ui.beste.co/block/hero151 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero151.json"` (Radix: `/r/hero151.json`) - **Description**: Full-bleed photographic hero with a centered statement, paragraph and outline pill CTA over a tinted scrim, closed by a ruled client logo strip rendered inverted so the marks read on the dark image. #### Auto Cycling Photo Hero - **URL**: https://ui.beste.co/block/hero153 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero153.json"` (Radix: `/r/hero153.json`) - **Description**: Full-bleed hero whose background photographs cross-fade on a timer, with a caption and bar indicators on a ruled line at the foot that also let a reader jump straight to a frame. #### Poster Hero With Proof Card - **URL**: https://ui.beste.co/block/hero154 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero154.json"` (Radix: `/r/hero154.json`) - **Description**: Poster-style hero where a wide cinematic image carries a soft proof card overlapping its lower corner on desktop, naming a project, what was delivered and one measured outcome. #### Framed Poster Hero - **URL**: https://ui.beste.co/block/hero155 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero155.json"` (Radix: `/r/hero155.json`) - **Description**: Full-bleed photographic hero printed inside an inset hairline frame, with the eyebrow and availability line on the top rule, an oversized statement in the middle, and notes, a pill CTA and an image credit anchored along the bottom. #### Split Screen Panel Hero - **URL**: https://ui.beste.co/block/hero156 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero156.json"` (Radix: `/r/hero156.json`) - **Description**: Edge-to-edge split hero: a dark half carries the statement, paragraph, outline pill CTA and a ruled detail row, while the other half is a full-height photograph with a pill caption in its corner. #### Full-Bleed Canvas Hero - **URL**: https://ui.beste.co/block/hero157 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero157.json"` (Radix: `/r/hero157.json`) - **Description**: A hero that splits the viewport in two: an eyebrow, light display heading, two actions, and a hairline proof row on one side, and a full-height photo column floating a live trend metric on the other. #### Migration Hero With Step Tracker - **URL**: https://ui.beste.co/block/hero158 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero158.json"` (Radix: `/r/hero158.json`) - **Description**: A hero that opens on an oversized light heading, then drops a hairline into a narrow copy column with one action and a wide image tile floating a live horizontal step tracker. #### Photo Collage Hero - **URL**: https://ui.beste.co/block/hero159 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero159.json"` (Radix: `/r/hero159.json`) - **Description**: A centered hero with an eyebrow, light display heading, and two actions above a staggered three-photo collage whose raised middle tile floats a live booking confirmation. #### Inverted Reliability Hero - **URL**: https://ui.beste.co/block/hero160 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero160.json"` (Radix: `/r/hero160.json`) - **Description**: A hero built as one dark panel: a light display heading, two actions, and a hairline table of service commitments beside a bordered image column that floats a live uptime strip. #### Overlapping Savings Hero - **URL**: https://ui.beste.co/block/hero161 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero161.json"` (Radix: `/r/hero161.json`) - **Description**: A hero that pairs a light display heading with an offset paragraph and action, then drops a wide image band under them and overlaps its lower edge with a live savings card. #### Indexed Rows Hero - **URL**: https://ui.beste.co/block/hero162 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero162.json"` (Radix: `/r/hero162.json`) - **Description**: A hero that sets a light display heading and one action against a column of numbered hairline rows, then closes on a full-bleed image band with a live approval request pinned into its corner. #### Framed Peek Hero - **URL**: https://ui.beste.co/block/hero163 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero163.json"` (Radix: `/r/hero163.json`) - **Description**: A hero framed inside a bordered card on a soft section, with centered copy and two actions above an image tile that runs past the card's bottom edge so the live metrics panel is cropped like a real screenshot. #### Media-First Reverse Hero - **URL**: https://ui.beste.co/block/hero164 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero164.json"` (Radix: `/r/hero164.json`) - **Description**: A hero that opens on a full-bleed image band with a live phone frame anchored into it, then sets the eyebrow, light display heading, paragraph, and actions underneath rather than above. #### Filmstrip Hero - **URL**: https://ui.beste.co/block/hero165 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero165.json"` (Radix: `/r/hero165.json`) - **Description**: A centered hero closing on an edge-to-edge filmstrip of five frames divided by hairlines, one of which floats a live view switcher instead of a photograph. #### Split Headline Hero - **URL**: https://ui.beste.co/block/hero166 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero166.json"` (Radix: `/r/hero166.json`) - **Description**: An editorial hero that breaks its display heading across two lines and slots a square image tile floating a live payment card into the gap, with the paragraph and action landing under a hairline. #### Quote-Led Provenance Hero - **URL**: https://ui.beste.co/block/hero167 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero167.json"` (Radix: `/r/hero167.json`) - **Description**: A hero that gives the display heading over to a customer sentence, credits the speaker beneath it, and evidences the quote with a hairline provenance table before the product line, actions, and a tile floating the figure behind the claim. #### Search Reach Hero - **URL**: https://ui.beste.co/block/hero168 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/hero168.json"` (Radix: `/r/hero168.json`) - **Description**: A hero pairing a light display heading with an offset paragraph and action, then a wide image tile floating a live search results panel over four hairline columns explaining what the search covers. ### Legal #### Cookie Consent Banner - **URL**: https://ui.beste.co/block/legal1 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal1.json"` (Radix: `/r/legal1.json`) - **Description**: Displays a cookie notification with accept, reject, and customize buttons. Perfect for GDPR-compliant websites requiring user consent. #### Privacy Policy Accordion - **URL**: https://ui.beste.co/block/legal2 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal2.json"` (Radix: `/r/legal2.json`) - **Description**: Shows privacy policy content with expandable accordion sections for each topic. Perfect for organizing lengthy privacy policies into scannable segments. #### Terms of Service Summary - **URL**: https://ui.beste.co/block/legal3 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal3.json"` (Radix: `/r/legal3.json`) - **Description**: Displays key terms with color-coded icons for allowed, prohibited, and important points. Perfect for presenting condensed terms before user acceptance. #### GDPR Data Rights Panel - **URL**: https://ui.beste.co/block/legal4 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal4.json"` (Radix: `/r/legal4.json`) - **Description**: Lists user data rights (access, rectify, erase, restrict, export) with request buttons. Perfect for GDPR compliance portals allowing users to exercise their rights. #### Data Processing Agreement Card - **URL**: https://ui.beste.co/block/legal5 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal5.json"` (Radix: `/r/legal5.json`) - **Description**: Shows DPA details with controller/processor parties, dates, and processing purposes. Perfect for displaying B2B data processing contracts with status badges. #### Consent Preferences Manager - **URL**: https://ui.beste.co/block/legal6 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal6.json"` (Radix: `/r/legal6.json`) - **Description**: Displays cookie categories with toggle switches to manage consent preferences. Perfect for allowing users to customize their privacy settings granularly. #### Legal Disclaimer Banner - **URL**: https://ui.beste.co/block/legal7 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal7.json"` (Radix: `/r/legal7.json`) - **Description**: Shows a disclaimer message with warning or info styling and last updated date. Perfect for displaying liability warnings and informational notices. #### Age Verification Gate - **URL**: https://ui.beste.co/block/legal8 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal8.json"` (Radix: `/r/legal8.json`) - **Description**: Displays an age verification prompt with configurable minimum age and confirm/deny buttons. Perfect for age-restricted content or product pages. #### Copyright Footer - **URL**: https://ui.beste.co/block/legal9 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal9.json"` (Radix: `/r/legal9.json`) - **Description**: Shows copyright notice, trademark attributions, and links to legal pages. Perfect for website footers requiring comprehensive legal information. #### DMCA Takedown Notice - **URL**: https://ui.beste.co/block/legal10 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal10.json"` (Radix: `/r/legal10.json`) - **Description**: Guides users through DMCA submission with numbered steps and warnings. Perfect for copyright protection pages accepting infringement reports. #### Compliance Checklist - **URL**: https://ui.beste.co/block/legal11 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal11.json"` (Radix: `/r/legal11.json`) - **Description**: Displays regulatory requirements with checkmarks, progress bar, and completion percentage. Perfect for showcasing compliance status across multiple standards. #### NDA Template Card - **URL**: https://ui.beste.co/block/legal12 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal12.json"` (Radix: `/r/legal12.json`) - **Description**: Shows NDA details with type (mutual/unilateral), duration, and key terms covered. Perfect for presenting confidentiality agreement summaries with download options. #### Software License Card - **URL**: https://ui.beste.co/block/legal13 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal13.json"` (Radix: `/r/legal13.json`) - **Description**: Displays license type with allowed permissions and limitations in checkmark format. Perfect for open-source projects or software documentation pages. #### Compliance Badges Grid - **URL**: https://ui.beste.co/block/legal14 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal14.json"` (Radix: `/r/legal14.json`) - **Description**: Shows certification badges in a grid with verified checkmarks and in-progress states. Perfect for trust pages displaying security and compliance credentials. #### Data Retention Policy - **URL**: https://ui.beste.co/block/legal15 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal15.json"` (Radix: `/r/legal15.json`) - **Description**: Lists data categories with types, retention periods, and deletion methods. Perfect for transparency pages explaining how long user data is stored. #### Cookie Categories Explainer - **URL**: https://ui.beste.co/block/legal16 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal16.json"` (Radix: `/r/legal16.json`) - **Description**: Explains cookie types (essential, functional, analytics, marketing) with icons and examples. Perfect for cookie policy pages educating users on tracking technologies. #### Document Version Timeline - **URL**: https://ui.beste.co/block/legal17 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal17.json"` (Radix: `/r/legal17.json`) - **Description**: Shows document revision history in a vertical timeline with version numbers and summaries. Perfect for tracking changes to terms, policies, or legal agreements. #### Legal Contact Card - **URL**: https://ui.beste.co/block/legal18 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal18.json"` (Radix: `/r/legal18.json`) - **Description**: Displays legal department contact information including address, email, phone, and hours. Perfect for providing users a way to reach legal teams with inquiries. #### Accessibility Statement - **URL**: https://ui.beste.co/block/legal19 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal19.json"` (Radix: `/r/legal19.json`) - **Description**: Shows WCAG conformance level, accessibility features, and issue reporting options. Perfect for demonstrating commitment to digital accessibility standards. #### Financial Disclaimer - **URL**: https://ui.beste.co/block/legal20 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal20.json"` (Radix: `/r/legal20.json`) - **Description**: Displays investment risk warnings with gain/loss icons and bullet-point cautions. Perfect for fintech or investment platforms requiring regulatory disclosures. #### Medical Disclaimer - **URL**: https://ui.beste.co/block/legal21 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal21.json"` (Radix: `/r/legal21.json`) - **Description**: Shows healthcare warnings with an emergency notice section for critical situations. Perfect for health-related websites requiring medical advice disclaimers. #### Affiliate Disclosure - **URL**: https://ui.beste.co/block/legal22 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal22.json"` (Radix: `/r/legal22.json`) - **Description**: Displays FTC-compliant disclosure with affiliate network badges and transparency text. Perfect for content sites monetized through affiliate marketing. #### Testimonial Disclaimer - **URL**: https://ui.beste.co/block/legal23 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal23.json"` (Radix: `/r/legal23.json`) - **Description**: Shows disclaimer about customer testimonials with star decoration and important notes. Perfect for product pages featuring reviews or success stories. #### Earnings Disclaimer - **URL**: https://ui.beste.co/block/legal24 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal24.json"` (Radix: `/r/legal24.json`) - **Description**: Displays income disclaimer with warnings about results varying based on effort. Perfect for courses, coaching programs, or business opportunity pages. #### Refund Policy Card - **URL**: https://ui.beste.co/block/legal25 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal25.json"` (Radix: `/r/legal25.json`) - **Description**: Shows refund period badge, eligible conditions, and exclusions with a request button. Perfect for e-commerce stores displaying return and refund terms. #### Data Breach Notification - **URL**: https://ui.beste.co/block/legal26 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal26.json"` (Radix: `/r/legal26.json`) - **Description**: Incident notification card for data breaches with severity badge, affected data types, timeline, and recommended actions. Suitable for security incident pages and user notifications. #### AI Disclosure Notice - **URL**: https://ui.beste.co/block/legal27 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal27.json"` (Radix: `/r/legal27.json`) - **Description**: Transparency card disclosing the use of AI and automated decision-making. Lists AI capabilities, data usage, and opt-out options. Compliant with EU AI Act and emerging regulations. #### Terms Acceptance Card - **URL**: https://ui.beste.co/block/legal28 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal28.json"` (Radix: `/r/legal28.json`) - **Description**: Formal terms and conditions acceptance card with individual checkboxes for each agreement. Shows required vs optional consents, links to full documents, and a submit button. Ideal for sign-up flows. #### Acceptable Use Policy - **URL**: https://ui.beste.co/block/legal29 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal29.json"` (Radix: `/r/legal29.json`) - **Description**: Lists allowed and prohibited usage of a service or platform with check and cross icons. Includes a violation reporting section. Suitable for SaaS, hosting, and community platforms. #### SLA Guarantee Card - **URL**: https://ui.beste.co/block/legal30 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal30.json"` (Radix: `/r/legal30.json`) - **Description**: Service Level Agreement card showing uptime guarantee percentage, compensation tiers for downtime, and incident response times. Ideal for SaaS and cloud service providers. #### Open Source Attribution - **URL**: https://ui.beste.co/block/legal31 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal31.json"` (Radix: `/r/legal31.json`) - **Description**: Displays open source package attributions with license types, authors, and links to repositories. Includes a search filter for large dependency lists. Required for OSS license compliance. #### Dispute Resolution Card - **URL**: https://ui.beste.co/block/legal32 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal32.json"` (Radix: `/r/legal32.json`) - **Description**: Outlines the dispute resolution process with numbered steps from informal negotiation to binding arbitration. Includes governing law and jurisdiction details. #### Export Compliance Notice - **URL**: https://ui.beste.co/block/legal33 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal33.json"` (Radix: `/r/legal33.json`) - **Description**: Displays export control and sanctions compliance information with restricted regions list and compliance requirements. Required for software with international distribution. #### Children's Privacy Notice - **URL**: https://ui.beste.co/block/legal34 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal34.json"` (Radix: `/r/legal34.json`) - **Description**: COPPA-compliant children's privacy notice with age restrictions, parental consent details, and data handling practices for minors. Required for services accessible to children under 13. #### Intellectual Property Notice - **URL**: https://ui.beste.co/block/legal35 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal35.json"` (Radix: `/r/legal35.json`) - **Description**: Displays trademark, patent, and copyright ownership information with registration details and usage restrictions. Suitable for product pages and legal sections. #### Whistleblower Policy Card - **URL**: https://ui.beste.co/block/legal36 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal36.json"` (Radix: `/r/legal36.json`) - **Description**: Anonymous reporting and whistleblower protection policy with reporting channels, protection guarantees, and a secure report submission button. Required for corporate compliance programs. #### Indemnification Notice - **URL**: https://ui.beste.co/block/legal37 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal37.json"` (Radix: `/r/legal37.json`) - **Description**: Outlines indemnification obligations with covered scenarios and exclusions. Shows which party indemnifies the other and under what conditions. #### Limitation of Liability - **URL**: https://ui.beste.co/block/legal38 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal38.json"` (Radix: `/r/legal38.json`) - **Description**: Displays liability caps, excluded damages, and maximum liability amounts. A standard clause for SaaS terms of service and commercial agreements. #### Force Majeure Clause - **URL**: https://ui.beste.co/block/legal39 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal39.json"` (Radix: `/r/legal39.json`) - **Description**: Force majeure card listing qualifying events that excuse performance, notification requirements, and obligations during the force majeure period. #### Confidentiality Agreement Card - **URL**: https://ui.beste.co/block/legal40 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal40.json"` (Radix: `/r/legal40.json`) - **Description**: Summarizes confidentiality obligations with what is considered confidential, permitted disclosures, duration, and remedies. Suitable for vendor onboarding and partnership agreements. #### Privacy Policy Summary - **URL**: https://ui.beste.co/block/legal41 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal41.json"` (Radix: `/r/legal41.json`) - **Description**: Simple privacy policy overview card listing key data practices. Ideal for sign-up flows, footers, or settings pages. #### Terms of Service - **URL**: https://ui.beste.co/block/legal42 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal42.json"` (Radix: `/r/legal42.json`) - **Description**: Text-focused terms of service card with numbered sections. Each section has a heading and paragraph content for full legal text. #### Privacy Policy Page - **URL**: https://ui.beste.co/block/legal43 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal43.json"` (Radix: `/r/legal43.json`) - **Description**: Full privacy policy content card with sections covering data collection, usage, sharing, retention, rights, and security. Ideal for dedicated privacy pages. #### Cookie Policy - **URL**: https://ui.beste.co/block/legal44 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal44.json"` (Radix: `/r/legal44.json`) - **Description**: Cookie policy card listing each cookie type with name, description, and required/optional badge. Suitable for dedicated cookie policy pages or modals. #### End User License Agreement - **URL**: https://ui.beste.co/block/legal45 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal45.json"` (Radix: `/r/legal45.json`) - **Description**: EULA card with numbered clauses covering license grant, restrictions, IP, warranties, and liability. Each clause has a title and full legal text. #### Privacy FAQ Accordion - **URL**: https://ui.beste.co/block/legal46 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal46.json"` (Radix: `/r/legal46.json`) - **Description**: Expandable privacy FAQ using accordion pattern. Each question reveals a detailed answer on click. Ideal for help centers and privacy pages. #### Data Retention Table - **URL**: https://ui.beste.co/block/legal47 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal47.json"` (Radix: `/r/legal47.json`) - **Description**: Table-based data retention schedule showing category, retention period, and legal basis per row. Ideal for GDPR compliance and privacy documentation. #### Data Request Process Timeline - **URL**: https://ui.beste.co/block/legal48 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal48.json"` (Radix: `/r/legal48.json`) - **Description**: Vertical timeline showing the step-by-step process for handling data requests. Numbered steps with connecting lines guide the user through the workflow. #### Regulatory Notice Blocks - **URL**: https://ui.beste.co/block/legal49 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal49.json"` (Radix: `/r/legal49.json`) - **Description**: Color-coded regulatory notices with info, warning, and critical severity levels. Each notice has a colored left border, icon, and detailed content. #### Tabbed Platform Policies - **URL**: https://ui.beste.co/block/legal50 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal50.json"` (Radix: `/r/legal50.json`) - **Description**: Multi-section policy card using tabs to switch between data use, security, cookies, and user rights content. Compact way to present multiple policies. #### Rights Comparison Table - **URL**: https://ui.beste.co/block/legal51 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal51.json"` (Radix: `/r/legal51.json`) - **Description**: Two-column comparison table showing data rights and privacy features by plan tier. Badge-styled values for Free vs Pro plans. #### Policy Document With Table Of Contents - **URL**: https://ui.beste.co/block/legal52 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal52.json"` (Radix: `/r/legal52.json`) - **Description**: A readable policy page with a last-updated line, a sticky hairline table of contents that scrolls smoothly to each anchored section, prose sections with accent-bulleted lists, and a soft contact panel at the end. #### Trust And Compliance Overview - **URL**: https://ui.beste.co/block/legal53 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal53.json"` (Radix: `/r/legal53.json`) - **Description**: A compliance section pairing four hairline certification cards, each with an accent icon and a tone-coded status pill, with a hairline definition list of data handling specifics and a security pack request. #### Subprocessor Register - **URL**: https://ui.beste.co/block/legal54 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal54.json"` (Radix: `/r/legal54.json`) - **Description**: A legal section publishing every subprocessor as a scrollable hairline table with purpose, region, and start date, closing on an image tile that floats a live data residency card beside a subscribe-to-changes panel. #### Plain Words Terms Table - **URL**: https://ui.beste.co/block/legal55 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal55.json"` (Radix: `/r/legal55.json`) - **Description**: A legal section that sets each binding clause against a plain-language reading of it on hairline rows, keyed by clause references, with a precedence disclaimer under the last row. #### Data Rights Request - **URL**: https://ui.beste.co/block/legal56 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal56.json"` (Radix: `/r/legal56.json`) - **Description**: A legal section listing four data rights as hairline cards, each with an icon tile and a response window, beside a soft panel holding a working request form with a request type, email, and free-text detail. #### Cookie Preference Centre - **URL**: https://ui.beste.co/block/legal57 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/legal57.json"` (Radix: `/r/legal57.json`) - **Description**: An interactive cookie notice with four hairline categories on live switches, a locked required group, save and reject-all actions, and a scrollable table naming every cookie, its purpose, and its retention. ### Logos #### Logo Grid with Card Backgrounds - **URL**: https://ui.beste.co/block/logos6 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/logos6.json"` (Radix: `/r/logos6.json`) - **Description**: Responsive grid of partner or client logos. Each logo sits inside a softly tinted, rounded card so mixed-style logos (marks, wordmarks, scanned seals) all feel cohesive. #### Logo Cloud - **URL**: https://ui.beste.co/block/logos7 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/logos7.json"` (Radix: `/r/logos7.json`) - **Description**: Centered grid of client wordmarks with a trusted-by intro. #### Logo Marquee - **URL**: https://ui.beste.co/block/logos8 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/logos8.json"` (Radix: `/r/logos8.json`) - **Description**: Full-bleed auto-scrolling client wordmark marquee with edge fades. #### Logo Grid Wall - **URL**: https://ui.beste.co/block/logos9 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/logos9.json"` (Radix: `/r/logos9.json`) - **Description**: Partitioned bordered grid of client wordmark cells. #### Logos Split - **URL**: https://ui.beste.co/block/logos10 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/logos10.json"` (Radix: `/r/logos10.json`) - **Description**: Headline and blurb beside a grid of client wordmarks. #### Logos With Stat - **URL**: https://ui.beste.co/block/logos11 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/logos11.json"` (Radix: `/r/logos11.json`) - **Description**: A headline stat of trust above a centered row of client wordmarks. #### Hairline Client Wall - **URL**: https://ui.beste.co/block/logos12 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/logos12.json"` (Radix: `/r/logos12.json`) - **Description**: A client wall that sets six greyscale logos in a hairline cell grid, each lifting to full colour on hover, with an eyebrow and a short claim on the left, a reach line on the right, and a credit note underneath. #### Ruled Client Roster - **URL**: https://ui.beste.co/block/logos13 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/logos13.json"` (Radix: `/r/logos13.json`) - **Description**: Client proof band with a parenthetical eyebrow, a display heading beside a supporting paragraph, and a ruled grid of grayscale logos where each one carries a plain caption naming the work, closed by a footnote and a pill CTA. #### Logo Marquee Panel - **URL**: https://ui.beste.co/block/logos14 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/logos14.json"` (Radix: `/r/logos14.json`) - **Description**: Soft panel carrying a centered statement over an endlessly scrolling logo track with gradient edge fades that pauses on hover, closed by a ruled row of three studio figures. #### Sector Grouped Client Index - **URL**: https://ui.beste.co/block/logos15 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/logos15.json"` (Radix: `/r/logos15.json`) - **Description**: Client proof organised by sector: each ruled row names the sector, explains the kind of work it involves, and lines the matching grayscale logos up on the right edge. ### Navbar #### Mega Menu Navbar - **URL**: https://ui.beste.co/block/navbar19 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar19.json"` (Radix: `/r/navbar19.json`) - **Description**: Full-width mega menu navbar with multi-column product dropdowns, icon-enhanced links, and promotional cards. Perfect for SaaS products and enterprise sites with extensive feature offerings. #### Centered Logo Split Nav - **URL**: https://ui.beste.co/block/navbar30 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar30.json"` (Radix: `/r/navbar30.json`) - **Description**: Symmetrical navbar with centered logo flanked by navigation links on both sides and dropdown menus. Perfect for fashion brands and lifestyle sites wanting balanced visual hierarchy. #### Animated Underline Navbar - **URL**: https://ui.beste.co/block/navbar31 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar31.json"` (Radix: `/r/navbar31.json`) - **Description**: Minimal navbar with configurable animated underline effects (slide, grow, or fade) on navigation links. Perfect for portfolio sites and creative agencies wanting subtle hover animations. #### Search-Focused Navbar - **URL**: https://ui.beste.co/block/navbar32 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar32.json"` (Radix: `/r/navbar32.json`) - **Description**: Navbar with prominent search input, navigation links, and action button for search-driven experiences. Perfect for marketplaces, directories, and content platforms prioritizing discovery. #### Multi-Level Dropdown Nav - **URL**: https://ui.beste.co/block/navbar33 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar33.json"` (Radix: `/r/navbar33.json`) - **Description**: Navbar with hover-activated dropdowns supporting nested sub-menus for deep navigation hierarchies. Perfect for enterprise software and documentation sites with complex information architecture. #### Sidebar Drawer Navbar - **URL**: https://ui.beste.co/block/navbar34 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar34.json"` (Radix: `/r/navbar34.json`) - **Description**: Navbar with slide-in sidebar drawer featuring grouped navigation sections and overlay backdrop. Perfect for content-rich sites wanting organized off-canvas navigation menus. #### Sliding Indicator Navbar - **URL**: https://ui.beste.co/block/navbar35 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar35.json"` (Radix: `/r/navbar35.json`) - **Description**: Responsive navbar with animated sliding underline indicator that follows hover and highlights active navigation item. Perfect for SaaS dashboards and apps wanting polished micro-interactions. #### Tab-Style Navbar - **URL**: https://ui.beste.co/block/navbar36 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar36.json"` (Radix: `/r/navbar36.json`) - **Description**: Navbar with tab-style navigation supporting underline or pill active states for app-like navigation. Perfect for dashboards and admin panels with section-based interfaces. #### Floating Pill Navbar - **URL**: https://ui.beste.co/block/navbar37 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar37.json"` (Radix: `/r/navbar37.json`) - **Description**: Centered floating navbar with rounded pill shape, backdrop blur effect, and compact layout. Perfect for modern landing pages and portfolios wanting a minimal floating navigation style. #### Dual-Row Navbar - **URL**: https://ui.beste.co/block/navbar38 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar38.json"` (Radix: `/r/navbar38.json`) - **Description**: Two-tier navbar with slim top bar for announcements and contact info above main navigation. Perfect for e-commerce and service businesses displaying promotions and support details. #### Command Palette Navbar - **URL**: https://ui.beste.co/block/navbar39 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar39.json"` (Radix: `/r/navbar39.json`) - **Description**: Developer-focused navbar with Cmd+K command palette for keyboard-driven navigation and actions. Perfect for developer tools, documentation sites, and power-user applications. #### Breadcrumb Navbar - **URL**: https://ui.beste.co/block/navbar40 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar40.json"` (Radix: `/r/navbar40.json`) - **Description**: Two-row navbar with main navigation and secondary breadcrumb bar for hierarchical content paths. Perfect for e-commerce product pages and documentation with deep category structures. #### Editorial Studio Navbar - **URL**: https://ui.beste.co/block/navbar41 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar41.json"` (Radix: `/r/navbar41.json`) - **Description**: Two-tier studio navbar with an availability utility strip, square-mark wordmark, index-numbered links and a seal CTA. #### Grid Cell Navbar - **URL**: https://ui.beste.co/block/navbar42 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar42.json"` (Radix: `/r/navbar42.json`) - **Description**: Table-inspired navbar with full-height bordered link cells, an availability cell and a dark full-height seal CTA cell. #### Dark Announcement Navbar - **URL**: https://ui.beste.co/block/navbar43 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar43.json"` (Radix: `/r/navbar43.json`) - **Description**: Dark studio navbar with a primary announcement bar, wordmark with tagline divider, uppercase links and a primary seal CTA. #### Centered Logo Navbar - **URL**: https://ui.beste.co/block/navbar44 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar44.json"` (Radix: `/r/navbar44.json`) - **Description**: Symmetric navbar with links on the left, a square-mark wordmark centered and a seal CTA on the right, plus a tile-grid mobile menu. #### Fullscreen Overlay Navbar - **URL**: https://ui.beste.co/block/navbar45 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar45.json"` (Radix: `/r/navbar45.json`) - **Description**: Dark navbar with a hamburger menu cell that opens a fullscreen overlay — the panel and its centered links cascade down from the top, with a contact footer. #### Submenu Navbar - **URL**: https://ui.beste.co/block/navbar46 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar46.json"` (Radix: `/r/navbar46.json`) - **Description**: Studio navbar with hover dropdown submenus on desktop, described sublinks, a seal CTA and an inline-expanded mobile menu. #### Mega Menu Navbar - **URL**: https://ui.beste.co/block/navbar47 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar47.json"` (Radix: `/r/navbar47.json`) - **Description**: Studio navbar whose Work item opens a full-width mega panel with category links and three featured project thumbnails. #### Masthead Navbar - **URL**: https://ui.beste.co/block/navbar48 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar48.json"` (Radix: `/r/navbar48.json`) - **Description**: Print-inspired masthead navbar with a giant centered wordmark flanked by studio meta and contact, over a ruled row of spread-out links with an inline seal CTA. #### Drawer Navbar - **URL**: https://ui.beste.co/block/navbar49 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar49.json"` (Radix: `/r/navbar49.json`) - **Description**: Minimal navbar with an availability status whose menu opens a dark right-side drawer — numbered links float in with a stagger over a backdrop, with a seal CTA and socials below. #### Floating Card Navbar - **URL**: https://ui.beste.co/block/navbar50 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar50.json"` (Radix: `/r/navbar50.json`) - **Description**: Detached floating navbar card with a square-mark wordmark, uppercase links and a compact seal CTA — the mobile menu unfolds inside the card. #### Tab Bar Navbar - **URL**: https://ui.beste.co/block/navbar51 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar51.json"` (Radix: `/r/navbar51.json`) - **Description**: Two-row navbar with brand, availability status and seal CTA on top, and an underlined active-tab link row that scrolls horizontally on mobile. #### Letterhead Navbar - **URL**: https://ui.beste.co/block/navbar52 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar52.json"` (Radix: `/r/navbar52.json`) - **Description**: Letterhead-style navbar with a stacked brand block beside stacked rows of location, email and links, closed off by a seal CTA on the right. #### Dark Mega Menu Navbar - **URL**: https://ui.beste.co/block/navbar53 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar53.json"` (Radix: `/r/navbar53.json`) - **Description**: Dark studio navbar whose Services item opens a mega panel with three eyebrow-titled link columns and a bordered booking card with a seal CTA. #### Multi Mega Menu Navbar - **URL**: https://ui.beste.co/block/navbar54 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar54.json"` (Radix: `/r/navbar54.json`) - **Description**: Navbar where multiple items each open their own mega panel — three eyebrow-titled columns of described links with a view-all footer strip. #### Editorial Mega Menu Navbar - **URL**: https://ui.beste.co/block/navbar55 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar55.json"` (Radix: `/r/navbar55.json`) - **Description**: Navbar with an editorial split mega panel — eyebrow statement and seal CTA on the left, a numbered two-column project index in the middle and a tall studio image on the right. #### Giant Wordmark Navbar - **URL**: https://ui.beste.co/block/navbar56 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar56.json"` (Radix: `/r/navbar56.json`) - **Description**: Typographic statement navbar — a hairline row of index-numbered links and availability above a giant wordmark with a primary square, studio meta and seal CTA. #### Display Type Navbar - **URL**: https://ui.beste.co/block/navbar57 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar57.json"` (Radix: `/r/navbar57.json`) - **Description**: Typographic navbar where the links are the heroes — a hairline brand row above a full-width spread of giant index-numbered links closed by a primary arrow CTA, always visible with no hamburger. #### Monogram Navbar - **URL**: https://ui.beste.co/block/navbar58 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar58.json"` (Radix: `/r/navbar58.json`) - **Description**: Minimal stacked navbar — a large primary logo square with the wordmark tucked into its corner, over a quiet ruled row of uppercase links. No buttons, no hamburger. #### Studio Bar Navbar - **URL**: https://ui.beste.co/block/navbar59 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar59.json"` (Radix: `/r/navbar59.json`) - **Description**: Editorial single-row navbar — bold wordmark, quiet bold links, and an outline pill CTA. Collapses to a clean full-height mobile menu. #### Mega Studio Navbar - **URL**: https://ui.beste.co/block/navbar60 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar60.json"` (Radix: `/r/navbar60.json`) - **Description**: Full mega-menu navbar — bold links open three-column panels with parenthetical section labels, descriptions and a footer link. SSR-mounted panels, pill CTA and a stacked mobile menu. #### Use-Case Mega Navbar - **URL**: https://ui.beste.co/block/navbar61 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar61.json"` (Radix: `/r/navbar61.json`) - **Description**: Navbar with a marked wordmark and a pill-highlighted trigger that drops a floating rounded mega panel — a parenthetical label over a 3x2 grid of icon use-case cards. Sign-in pill plus a primary CTA. #### Announcement Marquee Navbar - **URL**: https://ui.beste.co/block/navbar62 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar62.json"` (Radix: `/r/navbar62.json`) - **Description**: Navbar with a dark scrolling announcement bar on top — looping links that pause on hover and fade at the edges — over a clean wordmark row with a pill CTA. #### Floating Pill Navbar - **URL**: https://ui.beste.co/block/navbar63 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar63.json"` (Radix: `/r/navbar63.json`) - **Description**: A floating rounded-full navbar island resting on a muted band — wordmark, quiet links and a pill CTA, with a rounded mobile menu card that drops below. #### Fullscreen Overlay Navbar - **URL**: https://ui.beste.co/block/navbar64 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar64.json"` (Radix: `/r/navbar64.json`) - **Description**: A quiet top bar whose menu button opens a full-screen overlay — oversized numbered links with hover arrows, a contact block and social row beneath. Pure Auralis big type. #### Status Tier Navbar - **URL**: https://ui.beste.co/block/navbar65 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar65.json"` (Radix: `/r/navbar65.json`) - **Description**: Two-tier navbar — a top strip carries an availability badge with a live dot and utility links, over a main row with an oversized wordmark, nav and pill CTA. #### Featured Mega Navbar - **URL**: https://ui.beste.co/block/navbar66 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar66.json"` (Radix: `/r/navbar66.json`) - **Description**: Mega-menu navbar whose panels lead with a featured project — a full-color image card with a parenthetical category beside a ruled link list. SSR-mounted panels and a stacked mobile menu. #### Poster Split Navbar - **URL**: https://ui.beste.co/block/navbar67 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar67.json"` (Radix: `/r/navbar67.json`) - **Description**: Poster-scale navbar — an oversized wordmark anchors the left while a right column stacks the nav, a pill CTA and a parenthetical label. Collapses to a stacked mobile menu. #### Command Search Navbar - **URL**: https://ui.beste.co/block/navbar68 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar68.json"` (Radix: `/r/navbar68.json`) - **Description**: Search-forward navbar — a wide rounded search field sits at the center with an animated submit seal, framed by the wordmark, quiet links and a pill CTA. #### Promo Mega Navbar - **URL**: https://ui.beste.co/block/navbar69 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar69.json"` (Radix: `/r/navbar69.json`) - **Description**: Airy navbar with one mega item and two plain links — its panel pairs grouped link columns with a featured promo card. A primary pill CTA plus an expanding search field that swaps in over the actions. Closes on outside click or Escape. #### Dark Three-Column Mega Navbar - **URL**: https://ui.beste.co/block/navbar70 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar70.json"` (Radix: `/r/navbar70.json`) - **Description**: Inverted bg-foreground navbar with a three-column mega panel — an intro pitch, a numbered index list and a full-color featured image tile, divided by hairline rules. Outline pill CTAs throughout. Closes on outside click or Escape. #### Pill Menu Navbar - **URL**: https://ui.beste.co/block/navbar71 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar71.json"` (Radix: `/r/navbar71.json`) - **Description**: A light editorial navbar with a lowercase wordmark, soft muted nav pills that reveal hover dropdowns, a solid accent call to action, and a collapsing mobile menu. #### Centered Link Navbar - **URL**: https://ui.beste.co/block/navbar72 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar72.json"` (Radix: `/r/navbar72.json`) - **Description**: A minimal navbar with a lowercase wordmark, absolutely centered uppercase text links, an accent call to action, and a collapsing mobile menu. #### Announcement Bar Navbar - **URL**: https://ui.beste.co/block/navbar73 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar73.json"` (Radix: `/r/navbar73.json`) - **Description**: A navbar with a dark announcement strip above a hairline-bordered row carrying a lowercase wordmark, uppercase links, a sign-in link, an accent call to action, and a mobile menu. #### Floating Capsule Navbar - **URL**: https://ui.beste.co/block/navbar74 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/navbar74.json"` (Radix: `/r/navbar74.json`) - **Description**: A navbar contained in a softly rounded, bordered capsule with a lowercase wordmark, uppercase links, an accent call to action, and a matching mobile panel. ### News #### Breaking News Ticker - **URL**: https://ui.beste.co/block/news1 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news1.json"` (Radix: `/r/news1.json`) - **Description**: Animated breaking news ticker with live indicator, category badges, and auto-rotating headlines. #### Featured News Grid - **URL**: https://ui.beste.co/block/news2 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news2.json"` (Radix: `/r/news2.json`) - **Description**: News section with large featured article and side list. Includes category badges, author info, and timestamps. #### Live News Feed - **URL**: https://ui.beste.co/block/news3 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news3.json"` (Radix: `/r/news3.json`) - **Description**: Real-time news feed with category tabs, live indicators, trending badges, and source attribution. #### Magazine News Grid - **URL**: https://ui.beste.co/block/news4 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news4.json"` (Radix: `/r/news4.json`) - **Description**: Magazine-style news section with large featured article and 2x2 grid. Dynamic category filtering. #### News Timeline - **URL**: https://ui.beste.co/block/news5 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news5.json"` (Radix: `/r/news5.json`) - **Description**: Vertical news timeline with timestamps, breaking news indicators, and optional article images. #### Horizontal News Cards - **URL**: https://ui.beste.co/block/news6 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news6.json"` (Radix: `/r/news6.json`) - **Description**: Horizontal news cards with author info, read time, trending indicators, and hover effects. #### Newspaper Style - **URL**: https://ui.beste.co/block/news7 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news7.json"` (Radix: `/r/news7.json`) - **Description**: Classic newspaper layout with serif typography, featured article spanning two columns, and sidebar articles. #### Numbered Headlines - **URL**: https://ui.beste.co/block/news8 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news8.json"` (Radix: `/r/news8.json`) - **Description**: Compact numbered headline list with large index numbers, category badges, and source attribution. #### Trending Cards Grid - **URL**: https://ui.beste.co/block/news9 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news9.json"` (Radix: `/r/news9.json`) - **Description**: Four-column news card grid with gradient overlays, category badges, and author info. #### Video News Feature - **URL**: https://ui.beste.co/block/news10 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news10.json"` (Radix: `/r/news10.json`) - **Description**: Video-focused news section with large thumbnail, play button overlay, duration badge, and related stories sidebar. #### Masonry News Grid - **URL**: https://ui.beste.co/block/news11 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news11.json"` (Radix: `/r/news11.json`) - **Description**: Masonry-style news grid with large, medium, and small article cards. Dynamic sizing based on article importance. #### World News by Region - **URL**: https://ui.beste.co/block/news12 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news12.json"` (Radix: `/r/news12.json`) - **Description**: Global news grid with color-coded region indicators, hot story badges, and source attribution. #### Stock Market News - **URL**: https://ui.beste.co/block/news13 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news13.json"` (Radix: `/r/news13.json`) - **Description**: Financial news feed with stock symbols, price changes, trend indicators, volume data, and animated progress bars. #### Minimal Big Numbers - **URL**: https://ui.beste.co/block/news14 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news14.json"` (Radix: `/r/news14.json`) - **Description**: Minimal news list with oversized numbers, large typography, and clean dividers. Perfect for weekly roundups. #### News Carousel - **URL**: https://ui.beste.co/block/news15 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news15.json"` (Radix: `/r/news15.json`) - **Description**: Featured news carousel with large images, navigation arrows, and progress dots. Side-by-side layout on desktop. #### Quick News Bites - **URL**: https://ui.beste.co/block/news16 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news16.json"` (Radix: `/r/news16.json`) - **Description**: Compact quick news list with bullet points, source attribution, and external link indicators. Perfect for news digests. #### Sports Match Center - **URL**: https://ui.beste.co/block/news17 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news17.json"` (Radix: `/r/news17.json`) - **Description**: Live sports scores with team form indicators, possession bar, match events (goals, cards), venue info, and upcoming match support. #### Audio News Player - **URL**: https://ui.beste.co/block/news18 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news18.json"` (Radix: `/r/news18.json`) - **Description**: Fully functional audio player with Now Playing card, playlist view, progress bar, skip controls, and waveform animation. #### Terminal News Feed - **URL**: https://ui.beste.co/block/news19 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news19.json"` (Radix: `/r/news19.json`) - **Description**: Hacker-style terminal with boot sequence animation, typing effects, priority badges, and command-line aesthetic. #### Vintage Newspaper - **URL**: https://ui.beste.co/block/news20 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news20.json"` (Radix: `/r/news20.json`) - **Description**: Classic newspaper front page layout with masthead, headline hierarchy, three-column text, and drop caps. #### Split-Flap Display - **URL**: https://ui.beste.co/block/news21 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news21.json"` (Radix: `/r/news21.json`) - **Description**: Retro airport departure board style news ticker with character-by-character flip animation and auto-rotating headlines. #### Two Perspectives - **URL**: https://ui.beste.co/block/news22 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news22.json"` (Radix: `/r/news22.json`) - **Description**: Side-by-side comparison of different viewpoints on a topic, with color-coded columns and author info. #### Weekly Calendar View - **URL**: https://ui.beste.co/block/news23 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news23.json"` (Radix: `/r/news23.json`) - **Description**: News organized by day with calendar-style headers, timeline layout, and category badges. #### Newsletter with Featured - **URL**: https://ui.beste.co/block/news24 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news24.json"` (Radix: `/r/news24.json`) - **Description**: Newsletter signup sidebar with featured story and additional headlines. Sticky subscription form. #### Category Hub - **URL**: https://ui.beste.co/block/news25 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news25.json"` (Radix: `/r/news25.json`) - **Description**: News categories grid with story counts, top story preview, and browse links. #### Opinion & Editorial - **URL**: https://ui.beste.co/block/news26 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news26.json"` (Radix: `/r/news26.json`) - **Description**: Opinion pieces with pull quotes, author profiles, and category badges. Editorial-style layout. #### 3D Story Carousel - **URL**: https://ui.beste.co/block/news27 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news27.json"` (Radix: `/r/news27.json`) - **Description**: Immersive 3D carousel with stacked cards, smooth transitions, depth effects, and navigation controls. #### Data Statistics Dashboard - **URL**: https://ui.beste.co/block/news28 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news28.json"` (Radix: `/r/news28.json`) - **Description**: Data journalism style cards with animated numbers, change indicators, progress bars, and key statistics. #### News Stories - **URL**: https://ui.beste.co/block/news29 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news29.json"` (Radix: `/r/news29.json`) - **Description**: Instagram-style story circles with fullscreen viewer, auto-advance progress bars, channel avatars, and LIVE badges. #### Editorial Magazine - **URL**: https://ui.beste.co/block/news30 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news30.json"` (Radix: `/r/news30.json`) - **Description**: Premium magazine-style editorial layout with featured story, author byline, and numbered trending sidebar. #### Bento News Grid - **URL**: https://ui.beste.co/block/news31 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news31.json"` (Radix: `/r/news31.json`) - **Description**: Asymmetric bento box layout with large hero, gradient stat cards, and image tiles in a visually striking grid. #### Magazine Cover - **URL**: https://ui.beste.co/block/news32 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news32.json"` (Radix: `/r/news32.json`) - **Description**: Editorial magazine layout with dramatic cover story, serif typography, author bylines, and featured story grid. #### Live News Feed - **URL**: https://ui.beste.co/block/news33 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news33.json"` (Radix: `/r/news33.json`) - **Description**: Real-time news timeline with live indicator, breaking/developing badges, timestamps, and chronological updates. #### Newsletter Preview - **URL**: https://ui.beste.co/block/news34 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news34.json"` (Radix: `/r/news34.json`) - **Description**: Email newsletter style news layout with editor's note, categorized stories, and subscription CTA. #### News Spotlight Theater - **URL**: https://ui.beste.co/block/news35 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news35.json"` (Radix: `/r/news35.json`) - **Description**: Cinematic full-screen news slideshow with animated transitions, auto-play, spotlight effect, and dramatic typography. #### Press Coverage List - **URL**: https://ui.beste.co/block/news36 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news36.json"` (Radix: `/r/news36.json`) - **Description**: A press section built around a soft panel holding the standout quote and its publication, followed by hairline coverage rows that align publication, headline, and date, and a press kit action to close. #### Filterable Newsroom Index - **URL**: https://ui.beste.co/block/news37 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news37.json"` (Radix: `/r/news37.json`) - **Description**: A newsroom whose kind pills are derived from the announcements and carry live counts, narrowing a chronological list of hairline rows that align the kind, the date, and the headline with its summary. #### Announcement Story - **URL**: https://ui.beste.co/block/news38 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news38.json"` (Radix: `/r/news38.json`) - **Description**: A single announcement laid out like an article, with a standfirst, a full-bleed captioned photo band, a reading column, and a sticky rail carrying the key facts and related entries. #### Inverted Company Announcement - **URL**: https://ui.beste.co/block/news39 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news39.json"` (Radix: `/r/news39.json`) - **Description**: A company update held in one dark panel, pairing a light heading and four supporting figures over a hairline rule with a bordered column that floats a live press contact card. #### Monthly Digest - **URL**: https://ui.beste.co/block/news40 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news40.json"` (Radix: `/r/news40.json`) - **Description**: A monthly round-up grouped into what shipped, what broke, and what is still undecided, each entry a linked hairline row, beside a sticky tile floating the month's live figures. #### Press And Brand Kit - **URL**: https://ui.beste.co/block/news41 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news41.json"` (Radix: `/r/news41.json`) - **Description**: A media kit listing downloadable assets as linked hairline rows with their formats, a swatch column naming each colour and where it is used, and two usage rules set as an allowed and a not-allowed card. #### Public Incident History - **URL**: https://ui.beste.co/block/news42 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/news42.json"` (Radix: `/r/news42.json`) - **Description**: A postmortem archive opening on four hairline reliability figures, then listing every incident as a linked row with a tone-coded severity chip, its duration, the impact, and the fix, beside a live uptime strip. ### Onboarding #### Welcome Hero with Step Indicator - **URL**: https://ui.beste.co/block/onboarding1 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding1.json"` (Radix: `/r/onboarding1.json`) - **Description**: Centered welcome screen featuring a hero image, step counter, and dual CTAs. Perfect for app onboarding flows that guide users through a multi-step setup process. #### Split Layout with Features and Social Proof - **URL**: https://ui.beste.co/block/onboarding2 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding2.json"` (Radix: `/r/onboarding2.json`) - **Description**: Two-column welcome layout with feature checklist, user count, and star ratings alongside an image. Perfect for SaaS onboarding that highlights key benefits and builds trust. #### Minimal Welcome with Icon - **URL**: https://ui.beste.co/block/onboarding3 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding3.json"` (Radix: `/r/onboarding3.json`) - **Description**: Clean, centered welcome screen with a branded icon, heading, and single call-to-action. Perfect for simple app introductions that prioritize clarity over complexity. #### Video Introduction Screen - **URL**: https://ui.beste.co/block/onboarding4 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding4.json"` (Radix: `/r/onboarding4.json`) - **Description**: Welcome screen featuring a video thumbnail with play overlay and duration badge. Perfect for product tours that use video content to demonstrate features. #### Horizontal Steps with Progress Line - **URL**: https://ui.beste.co/block/onboarding5 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding5.json"` (Radix: `/r/onboarding5.json`) - **Description**: Multi-step progress indicator with numbered circles connected by a progress line. Perfect for account setup wizards that show users their completion status. #### Vertical Timeline Steps - **URL**: https://ui.beste.co/block/onboarding6 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding6.json"` (Radix: `/r/onboarding6.json`) - **Description**: Vertical timeline layout with step indicators, descriptions, and a connecting progress line. Perfect for workspace setup flows with detailed step explanations. #### Progress Bar with Task Checklist - **URL**: https://ui.beste.co/block/onboarding7 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding7.json"` (Radix: `/r/onboarding7.json`) - **Description**: Card-based progress tracker showing completion percentage and a checklist of tasks with visual status. Perfect for gamified onboarding that motivates users to finish setup. #### Multi-Step Form Wizard - **URL**: https://ui.beste.co/block/onboarding8 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding8.json"` (Radix: `/r/onboarding8.json`) - **Description**: Interactive form wizard with segmented progress bar, form fields, and back/next navigation. Perfect for account registration flows collecting user and company information. #### Step Cards with Numbered Indicators - **URL**: https://ui.beste.co/block/onboarding9 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding9.json"` (Radix: `/r/onboarding9.json`) - **Description**: Animated step wizard with square numbered indicators and content cards for each step. Perfect for product walkthroughs that guide users through key features. #### Accordion Steps with Expandable Actions - **URL**: https://ui.beste.co/block/onboarding10 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding10.json"` (Radix: `/r/onboarding10.json`) - **Description**: Interactive accordion layout where each step expands to reveal detailed instructions and action buttons. Perfect for setup guides that let users complete tasks at their own pace. #### Side Navigation Wizard - **URL**: https://ui.beste.co/block/onboarding11 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding11.json"` (Radix: `/r/onboarding11.json`) - **Description**: Desktop wizard with a vertical side navigation menu and content panels for each step. Perfect for comprehensive account setup requiring multiple configuration screens. #### Circular Progress with Checklist - **URL**: https://ui.beste.co/block/onboarding12 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding12.json"` (Radix: `/r/onboarding12.json`) - **Description**: Visual progress tracker featuring a circular percentage indicator with completion stats and task list. Perfect for profile setup flows that encourage users to reach 100% completion. #### Role Persona Selector - **URL**: https://ui.beste.co/block/onboarding13 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding13.json"` (Radix: `/r/onboarding13.json`) - **Description**: Onboarding screen where users select their role or persona to personalize their experience. Each role card shows an icon, title, and description with a selectable highlight state. #### Workspace Setup with Team Invite - **URL**: https://ui.beste.co/block/onboarding14 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding14.json"` (Radix: `/r/onboarding14.json`) - **Description**: Combined onboarding card for creating a workspace with name and URL slug, plus a team invite section with email inputs. Perfect for SaaS apps that require team collaboration setup. #### Integration Connector Grid - **URL**: https://ui.beste.co/block/onboarding15 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding15.json"` (Radix: `/r/onboarding15.json`) - **Description**: Onboarding screen with a grid of available integrations showing connection status and connect/skip actions. Perfect for apps that rely on third-party services like Slack, GitHub, and Google. #### Interest Tag Picker - **URL**: https://ui.beste.co/block/onboarding16 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding16.json"` (Radix: `/r/onboarding16.json`) - **Description**: Onboarding screen with a grid of selectable interest tags and chips for personalizing content recommendations. Perfect for content platforms, newsletters, and social apps. #### Goal Selector with Paths - **URL**: https://ui.beste.co/block/onboarding17 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding17.json"` (Radix: `/r/onboarding17.json`) - **Description**: Onboarding screen where users pick their primary goal to receive a tailored onboarding path. Each goal card shows a recommended feature set. Perfect for multi-purpose platforms. #### Notification Preferences - **URL**: https://ui.beste.co/block/onboarding18 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding18.json"` (Radix: `/r/onboarding18.json`) - **Description**: Onboarding screen with toggle switches for configuring notification channels and frequency. Perfect for apps that need granular notification consent during setup. #### Profile Setup Card - **URL**: https://ui.beste.co/block/onboarding19 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding19.json"` (Radix: `/r/onboarding19.json`) - **Description**: Onboarding screen with a form card for setting up user profile including avatar, display name, bio, and timezone. Perfect for the personal details step in any SaaS onboarding flow. #### Template Starter Picker - **URL**: https://ui.beste.co/block/onboarding20 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding20.json"` (Radix: `/r/onboarding20.json`) - **Description**: Onboarding screen with a grid of starter templates to choose from, each with a preview thumbnail, title, and description. Perfect for project creation flows in design tools and project management apps. #### Onboarding Completion Screen - **URL**: https://ui.beste.co/block/onboarding21 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding21.json"` (Radix: `/r/onboarding21.json`) - **Description**: Completion screen shown after finishing onboarding with a summary of what was configured and quick-start action links. Perfect for ending the setup flow with clear next steps. #### Plan Overview with Usage Limits - **URL**: https://ui.beste.co/block/onboarding22 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding22.json"` (Radix: `/r/onboarding22.json`) - **Description**: Onboarding screen showing current plan details with visual usage bars for storage, seats, and API calls. Perfect for SaaS post-signup flows that introduce plan limits and upgrade paths. #### Security Setup - **URL**: https://ui.beste.co/block/onboarding23 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding23.json"` (Radix: `/r/onboarding23.json`) - **Description**: Onboarding screen for configuring account security including two-factor authentication, recovery email, and backup codes. Perfect for apps that prioritize security during onboarding. #### Keyboard Shortcuts Cheat Sheet - **URL**: https://ui.beste.co/block/onboarding24 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding24.json"` (Radix: `/r/onboarding24.json`) - **Description**: Onboarding screen displaying essential keyboard shortcuts in a grouped grid layout with key badges. Perfect for productivity tools that want to accelerate user adoption. #### Theme and Appearance Picker - **URL**: https://ui.beste.co/block/onboarding25 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding25.json"` (Radix: `/r/onboarding25.json`) - **Description**: Onboarding screen for choosing theme mode (light, dark, system) and accent color. Perfect for apps that offer visual customization as part of the onboarding experience. #### Data Import Selector - **URL**: https://ui.beste.co/block/onboarding26 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding26.json"` (Radix: `/r/onboarding26.json`) - **Description**: Onboarding screen with import options from other platforms, CSV upload, and manual entry. Perfect for SaaS migration flows that help users bring existing data into the platform. #### Attribution Survey - **URL**: https://ui.beste.co/block/onboarding27 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding27.json"` (Radix: `/r/onboarding27.json`) - **Description**: Onboarding screen with a quick survey asking how the user discovered the product, with selectable options and an optional text input. Perfect for marketing attribution during signup. #### Billing Setup with Cycle Toggle - **URL**: https://ui.beste.co/block/onboarding28 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding28.json"` (Radix: `/r/onboarding28.json`) - **Description**: Onboarding screen for choosing a billing cycle (monthly/yearly) with savings badge, payment method selection, and optional coupon code input. Perfect for SaaS apps that collect payment during onboarding. #### Company Info Form - **URL**: https://ui.beste.co/block/onboarding29 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding29.json"` (Radix: `/r/onboarding29.json`) - **Description**: Onboarding screen for collecting company information including name, team size selector chips, and industry dropdown. Perfect for B2B SaaS apps that need organizational context during setup. #### Feature Tour Carousel - **URL**: https://ui.beste.co/block/onboarding30 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding30.json"` (Radix: `/r/onboarding30.json`) - **Description**: Onboarding screen with navigable feature highlight cards, dot indicators, and back/next buttons. Perfect for introducing key platform features during the first-time user experience. #### Three Step Getting Started - **URL**: https://ui.beste.co/block/onboarding31 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding31.json"` (Radix: `/r/onboarding31.json`) - **Description**: A getting-started section with an eyebrow over a hairline rule, a two-column heading, three monospace-numbered steps under their own hairlines, and an accent button. #### Data Import Split - **URL**: https://ui.beste.co/block/onboarding32 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding32.json"` (Radix: `/r/onboarding32.json`) - **Description**: A reversed split with an image tile floating a live import dropzone on the left, and an eyebrow, light heading, three monospace-numbered steps, and an accent button on the right. #### Interactive Setup Checklist - **URL**: https://ui.beste.co/block/onboarding33 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding33.json"` (Radix: `/r/onboarding33.json`) - **Description**: A setup panel pairing a soft progress column, where an oversized percentage and accent bar react to what is ticked, with hairline checklist rows that each carry a description and a jump-in link. #### Role Based Getting Started - **URL**: https://ui.beste.co/block/onboarding34 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding34.json"` (Radix: `/r/onboarding34.json`) - **Description**: A getting-started section whose role pills swap a sticky summary column and the numbered steps beside it, each step carrying its own title, explanation, and honest time estimate. #### Tracked Setup Sequence - **URL**: https://ui.beste.co/block/onboarding35 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding35.json"` (Radix: `/r/onboarding35.json`) - **Description**: A setup section listing four numbered steps with who owns each one, against a column that sticks while they scroll and floats a live step tracker on an image tile. #### Go-Live Day Agenda - **URL**: https://ui.beste.co/block/onboarding36 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding36.json"` (Radix: `/r/onboarding36.json`) - **Description**: A first-day agenda held in one bordered panel, with timestamped hairline rows naming what happens, who is needed, how long it takes, and which parts are optional. #### Invite Your Team - **URL**: https://ui.beste.co/block/onboarding37 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding37.json"` (Radix: `/r/onboarding37.json`) - **Description**: A team setup section pairing a soft panel with a working invite row, a role picker, and a plain-language table of what each role can reach, with a bordered list of who is already on the account and whether they have accepted, closing on a seat meter that fills one tick per seat taken. #### Data Import Reassurance - **URL**: https://ui.beste.co/block/onboarding38 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding38.json"` (Radix: `/r/onboarding38.json`) - **Description**: An import section leading with an image tile that floats a live upload dropzone, then setting out the formats that are read and the records that come across as two checked hairline lists. #### Thirty Day Milestones - **URL**: https://ui.beste.co/block/onboarding39 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding39.json"` (Radix: `/r/onboarding39.json`) - **Description**: An onboarding section setting out four dated milestones as bordered cards, each closing on the figure it should hit, above a soft panel that floats a live progress metric on an image tile. #### Division Of Labour Table - **URL**: https://ui.beste.co/block/onboarding40 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding40.json"` (Radix: `/r/onboarding40.json`) - **Description**: A responsibility table grouping migration tasks into phases on hairline rows, marking each as yours, ours, or shared with a check or a dash, and totalling the customer's time in one light figure. #### Migration Risk Register - **URL**: https://ui.beste.co/block/onboarding41 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding41.json"` (Radix: `/r/onboarding41.json`) - **Description**: A candid onboarding section listing what tends to go wrong on hairline rows, each with a tone-coded frequency chip, how often it has been seen, and the mitigation already in place. #### Training Resources - **URL**: https://ui.beste.co/block/onboarding42 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding42.json"` (Radix: `/r/onboarding42.json`) - **Description**: A learning section leading with an image tile that floats a live help centre search, then listing the videos, guides, and sessions behind it as linked hairline rows across two columns. #### Guided Workspace Setup - **URL**: https://ui.beste.co/block/onboarding43 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/onboarding43.json"` (Radix: `/r/onboarding43.json`) - **Description**: A two-column setup section: the pitch and what each answer changes on the left, and a one-question-at-a-time wizard on the right that ends in a review of everything it is about to create. ### Podcast #### Hero with Cover Art and Video Modal - **URL**: https://ui.beste.co/block/podcast1 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/podcast1.json"` (Radix: `/r/podcast1.json`) - **Description**: Two-column podcast hero featuring cover art with video modal, host info, episode count, and latest episode card. Perfect for podcast landing pages that highlight show branding and recent content. #### Player Card with Waveform Visualization - **URL**: https://ui.beste.co/block/podcast2 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/podcast2.json"` (Radix: `/r/podcast2.json`) - **Description**: Audio player card featuring cover art, animated waveform visualization, play/pause controls, and progress tracking. Perfect for embedded podcast players on show pages. #### Episode Detail with Show Notes - **URL**: https://ui.beste.co/block/podcast4 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/podcast4.json"` (Radix: `/r/podcast4.json`) - **Description**: Detailed episode page with cover art, duration, publish date, numbered show notes, and host/guest profiles. Perfect for individual episode pages that provide comprehensive content information. #### Episode Grid with Video Modals - **URL**: https://ui.beste.co/block/podcast14 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/podcast14.json"` (Radix: `/r/podcast14.json`) - **Description**: Responsive grid of episode cards featuring thumbnails, duration badges, categories, and click-to-play video modals. Perfect for episode listings and related content sections. #### Creator Profile with Shows Grid - **URL**: https://ui.beste.co/block/podcast38 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/podcast38.json"` (Radix: `/r/podcast38.json`) - **Description**: Host profile card featuring avatar, bio, stats (shows, episodes, listeners), social links, and a grid of their podcast shows. Perfect for podcaster profile pages and network creator pages. #### Transcript Viewer with Search - **URL**: https://ui.beste.co/block/podcast41 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/podcast41.json"` (Radix: `/r/podcast41.json`) - **Description**: Searchable episode transcript with clickable timestamps, speaker labels, and download option. Perfect for podcast accessibility features and content discovery. #### Share Modal with Social and Embed - **URL**: https://ui.beste.co/block/podcast42 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/podcast42.json"` (Radix: `/r/podcast42.json`) - **Description**: Episode sharing widget with copy link, social platform buttons (Twitter, Facebook, LinkedIn, Email), and embeddable iframe code. Perfect for encouraging episode sharing across platforms. #### Subscribe Platforms Grid - **URL**: https://ui.beste.co/block/podcast49 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/podcast49.json"` (Radix: `/r/podcast49.json`) - **Description**: Grid of podcast platform cards with logos and external links for Apple Podcasts, Spotify, Google Podcasts, and more. Perfect for helping listeners find and subscribe on their preferred platform. #### About Section with Stats Card - **URL**: https://ui.beste.co/block/podcast52 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/podcast52.json"` (Radix: `/r/podcast52.json`) - **Description**: Podcast overview section with cover art, stats grid (episodes, launch date, listeners, awards), and expandable long description. Perfect for show about pages and media kit sections. #### Player And Episode List - **URL**: https://ui.beste.co/block/podcast53 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/podcast53.json"` (Radix: `/r/podcast53.json`) - **Description**: A podcast section with an eyebrow over a hairline rule and a two-column heading, pairing an image tile that floats a live audio player with a divided episode list. #### Listening Path Builder - **URL**: https://ui.beste.co/block/podcast54 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/podcast54.json"` (Radix: `/r/podcast54.json`) - **Description**: An entry point for a back catalogue: three questions score the listening paths, and the winner is handed over as an ordered run of three episodes with cover art, numbers, and a total runtime added up from the episodes themselves. ### Portfolio #### Freelancer FAQ Accordion - **URL**: https://ui.beste.co/block/portfolio61 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/portfolio61.json"` (Radix: `/r/portfolio61.json`) - **Description**: Expandable accordion FAQ section with collapsible question-and-answer cards. Perfect for freelancers and consultants displaying project timeline, payment, and support questions. #### Social Media Connect Grid - **URL**: https://ui.beste.co/block/portfolio62 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/portfolio62.json"` (Radix: `/r/portfolio62.json`) - **Description**: Responsive grid of social media platform buttons with follower counts and platform icons. Perfect for creators and influencers showcasing their social media presence. #### Personal Introduction Hero - **URL**: https://ui.beste.co/block/portfolio67 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/portfolio67.json"` (Radix: `/r/portfolio67.json`) - **Description**: Hero section with circular avatar photo, name, role/title, bio description, and CTA button. Perfect for personal portfolio landing pages and professional introductions. #### Book Recommendations Grid - **URL**: https://ui.beste.co/block/portfolio70 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/portfolio70.json"` (Radix: `/r/portfolio70.json`) - **Description**: Grid of book cards displaying cover images, titles, authors, star ratings, and category badges. Perfect for sharing reading lists and book recommendations on personal sites. #### Featured Case Study Card - **URL**: https://ui.beste.co/block/portfolio79 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/portfolio79.json"` (Radix: `/r/portfolio79.json`) - **Description**: Two-column project showcase with large image, project description, technology/skill badges, and case study CTA. Perfect for highlighting featured portfolio projects with reversible layout. #### Work Process Steps - **URL**: https://ui.beste.co/block/portfolio84 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/portfolio84.json"` (Radix: `/r/portfolio84.json`) - **Description**: Four-column numbered workflow section showing project phases like Discovery, Strategy, Design, and Deliver. Perfect for freelancers and agencies explaining their project methodology. #### Video Introduction Player - **URL**: https://ui.beste.co/block/portfolio88 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/portfolio88.json"` (Radix: `/r/portfolio88.json`) - **Description**: Video showcase section with thumbnail image, play button overlay, duration badge, and modal video player. Perfect for personal introduction videos or portfolio reels. #### Collaboration Partners Grid - **URL**: https://ui.beste.co/block/portfolio89 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/portfolio89.json"` (Radix: `/r/portfolio89.json`) - **Description**: Grid of partner cards featuring circular avatars, names, roles, skill badges, and clickable links. Perfect for showcasing team members, collaborators, or professional network. #### Speaking Engagements Timeline - **URL**: https://ui.beste.co/block/portfolio90 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/portfolio90.json"` (Radix: `/r/portfolio90.json`) - **Description**: Conference and event speaking schedule with upcoming and past talks, dates, locations, attendee counts, and video/slides links. Perfect for speakers and thought leaders showcasing their talks. #### Open Source Contributions - **URL**: https://ui.beste.co/block/portfolio92 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/portfolio92.json"` (Radix: `/r/portfolio92.json`) - **Description**: Repository showcase with stars, forks, contribution counts, maintainer/contributor badges, and language tags. Perfect for developers highlighting their open source work. #### Mentorship Pricing Plans - **URL**: https://ui.beste.co/block/portfolio94 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/portfolio94.json"` (Radix: `/r/portfolio94.json`) - **Description**: Three-tier mentorship pricing section with duration, session counts, feature checklists, and booking CTAs. Perfect for coaches and mentors offering paid coaching packages. #### Work Preferences Checklist - **URL**: https://ui.beste.co/block/portfolio97 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/portfolio97.json"` (Radix: `/r/portfolio97.json`) - **Description**: Three-column categorized preferences with checkmarks and X icons showing preferred vs non-preferred work styles. Perfect for freelancers clarifying ideal project types and engagement models. #### Career Highlights Timeline - **URL**: https://ui.beste.co/block/portfolio98 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/portfolio98.json"` (Radix: `/r/portfolio98.json`) - **Description**: Vertical timeline showcasing career milestones with achievement icons, year badges, descriptions, and key metrics. Perfect for professionals displaying awards, launches, and growth achievements. #### Future Goals Progress Cards - **URL**: https://ui.beste.co/block/portfolio99 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/portfolio99.json"` (Radix: `/r/portfolio99.json`) - **Description**: Goal cards with icons, timeframe badges, descriptions, and visual progress bars showing completion percentage. Perfect for sharing personal or professional aspirations and current progress. #### Contact Call-to-Action Footer - **URL**: https://ui.beste.co/block/portfolio100 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/portfolio100.json"` (Radix: `/r/portfolio100.json`) - **Description**: Centered contact section with headline, description, primary CTA button, and social media link buttons with handles. Perfect for portfolio page footers encouraging visitor engagement. #### Project Showcase Grid - **URL**: https://ui.beste.co/block/portfolio101 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/portfolio101.json"` (Radix: `/r/portfolio101.json`) - **Description**: Portfolio grid of project cards with hover-zoom imagery, numbered titles, category tags and a seal arrow link. #### Work Marquee - **URL**: https://ui.beste.co/block/portfolio102 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/portfolio102.json"` (Radix: `/r/portfolio102.json`) - **Description**: Full-bleed auto-scrolling marquee of studio projects with a header and view-all CTA. #### Bento Gallery - **URL**: https://ui.beste.co/block/portfolio103 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/portfolio103.json"` (Radix: `/r/portfolio103.json`) - **Description**: Asymmetric bento mosaic of project tiles with overlaid titles and hover seal arrows. #### Interactive Work Index - **URL**: https://ui.beste.co/block/portfolio104 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/portfolio104.json"` (Radix: `/r/portfolio104.json`) - **Description**: A numbered project index that cross-fades a sticky image preview as each row is hovered. #### Typographic Index - **URL**: https://ui.beste.co/block/portfolio105 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/portfolio105.json"` (Radix: `/r/portfolio105.json`) - **Description**: Oversized type project index where each row reveals a thumbnail and shifts to the accent on hover. #### Filtered Work Tabs - **URL**: https://ui.beste.co/block/portfolio106 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/portfolio106.json"` (Radix: `/r/portfolio106.json`) - **Description**: Discipline-tabbed project gallery using shadcn Tabs with a grid of cards per category. #### Filterable Project Grid - **URL**: https://ui.beste.co/block/portfolio107 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/portfolio107.json"` (Radix: `/r/portfolio107.json`) - **Description**: Selected-work section with a row of category filter tabs that filter a monochrome project grid client-side; each card links out to the project. #### Masonry Archive Gallery - **URL**: https://ui.beste.co/block/portfolio108 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/portfolio108.json"` (Radix: `/r/portfolio108.json`) - **Description**: Masonry archive gallery in a CSS columns layout — project stills of varying heights, each linking out with a title and year caption beneath. #### Alternating case-study rows - **URL**: https://ui.beste.co/block/portfolio109 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/portfolio109.json"` (Radix: `/r/portfolio109.json`) - **Description**: Three alternating case-study rows pairing a large rounded image with a title, description, detail line, and an editorial link. #### Featured project + grid - **URL**: https://ui.beste.co/block/portfolio110 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/portfolio110.json"` (Radix: `/r/portfolio110.json`) - **Description**: One large featured project with image, category, and title, followed by a row of smaller project cards. Monochrome studio styling. #### Staggered Editorial Gallery - **URL**: https://ui.beste.co/block/portfolio111 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/portfolio111.json"` (Radix: `/r/portfolio111.json`) - **Description**: A header with a two-column, vertically staggered gallery of project cards — each a linked full-color image with a ruled title, category, and year. #### Project Index Rows - **URL**: https://ui.beste.co/block/portfolio112 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/portfolio112.json"` (Radix: `/r/portfolio112.json`) - **Description**: Editorial project index of ruled rows — padded numeral, project name, client and year, with a floating thumbnail revealed on hover. #### Client wall & selected work strip - **URL**: https://ui.beste.co/block/portfolio113 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/portfolio113.json"` (Radix: `/r/portfolio113.json`) - **Description**: A grayscale grid of bordered client logo cells followed by a strip of three selected-work thumbnails with titles, each linking out. #### Uniform project card grid - **URL**: https://ui.beste.co/block/portfolio114 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/portfolio114.json"` (Radix: `/r/portfolio114.json`) - **Description**: A monochrome three-column grid of uniform project cards, each pairing an image with a title, client / year / service chips, and a link to the case. #### Recent Work List - **URL**: https://ui.beste.co/block/portfolio115 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/portfolio115.json"` (Radix: `/r/portfolio115.json`) - **Description**: Compact recent-work list of ruled rows, each a link with a small thumbnail, title, year, and an arrow. #### Awards & Highlights Ledger - **URL**: https://ui.beste.co/block/portfolio116 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/portfolio116.json"` (Radix: `/r/portfolio116.json`) - **Description**: Recognition section pairing a ruled list of awards with two to three highlighted project thumbnails. #### Case Study Spotlight - **URL**: https://ui.beste.co/block/portfolio117 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/portfolio117.json"` (Radix: `/r/portfolio117.json`) - **Description**: A portfolio with an eyebrow over a hairline rule and a two-column heading, then a full-width featured case card and a three-up grid, each an image with a gradient overlay carrying a client, headline result, and note. ### Blog Post #### Featured Article Layout - **URL**: https://ui.beste.co/block/post3 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post3.json"` (Radix: `/r/post3.json`) - **Description**: Full-width article with gradient overlay hero image, featured badge, and complete metadata. Ideal for flagship content that deserves prominent visual presentation. #### Clean Article Format - **URL**: https://ui.beste.co/block/post4 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post4.json"` (Radix: `/r/post4.json`) - **Description**: Minimal design with tags above title and author metadata below. Perfect for technical articles or educational content that prioritizes readability. #### Card-Based Article - **URL**: https://ui.beste.co/block/post5 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post5.json"` (Radix: `/r/post5.json`) - **Description**: Article wrapped in a bordered card container with featured image at top and tags integrated into header. Works well for curated collections or featured stories. #### Author-Focused Layout - **URL**: https://ui.beste.co/block/post6 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post6.json"` (Radix: `/r/post6.json`) - **Description**: Prominent author profile with large avatar display, followed by featured image below title. Best for thought leadership or expert opinion pieces. #### Compact Quick Read - **URL**: https://ui.beste.co/block/post7 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post7.json"` (Radix: `/r/post7.json`) - **Description**: Minimal text-based layout with small featured image and condensed metadata. Ideal for short tips, quick takes, or news briefs. #### Article with Left Sidebar TOC - **URL**: https://ui.beste.co/block/post8 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post8.json"` (Radix: `/r/post8.json`) - **Description**: Three-column layout with table of contents on left, main article in center, and right sidebar for related content. Perfect for long-form guides. #### Article with Right Author Box - **URL**: https://ui.beste.co/block/post9 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post9.json"` (Radix: `/r/post9.json`) - **Description**: Two-column layout with main content on left and sticky author profile card on right with social links. Great for individual contributor articles. #### Article with Triple Sidebar - **URL**: https://ui.beste.co/block/post10 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post10.json"` (Radix: `/r/post10.json`) - **Description**: Three-column layout with TOC left sidebar, main article center, and action buttons with tags right sidebar. Best for technical documentation. #### Center-Aligned Floating TOC - **URL**: https://ui.beste.co/block/post11 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post11.json"` (Radix: `/r/post11.json`) - **Description**: Centered article layout with floating table of contents button in bottom right corner. Ideal for mobile-first or single-column responsive designs. #### Article with Related Posts - **URL**: https://ui.beste.co/block/post12 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post12.json"` (Radix: `/r/post12.json`) - **Description**: Two-column layout with main article and right sidebar containing related article cards with thumbnails. Perfect for discovery-focused content. #### Hero Image Dominant - **URL**: https://ui.beste.co/block/post13 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post13.json"` (Radix: `/r/post13.json`) - **Description**: Full-viewport hero image with title and summary overlaid at bottom with gradient. Excellent for visual storytelling or narrative-driven content. #### Centered Essay Pull Quotes - **URL**: https://ui.beste.co/block/post14 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post14.json"` (Radix: `/r/post14.json`) - **Description**: Centered layout featuring large pull quotes as visual breaks and prominent featured image. Ideal for essays or opinion pieces with strong statements. #### Two-Column Introduction - **URL**: https://ui.beste.co/block/post15 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post15.json"` (Radix: `/r/post15.json`) - **Description**: Article with two-column intro section separating key points before main content begins. Perfect for explainers that need dual perspectives. #### Essay with Drop Cap - **URL**: https://ui.beste.co/block/post16 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post16.json"` (Radix: `/r/post16.json`) - **Description**: Elegant essay-style layout with drop cap on first letter and integrated syntax-highlighted code blocks. Best for literary or technical essays. #### Newsletter Issue Template - **URL**: https://ui.beste.co/block/post17 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post17.json"` (Radix: `/r/post17.json`) - **Description**: Newsletter-style layout with issue number, dashed dividers between sections, and subscribe button. Perfect for weekly roundups or curated content. #### Article with Code Snippets - **URL**: https://ui.beste.co/block/post18 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post18.json"` (Radix: `/r/post18.json`) - **Description**: Technical article with code blocks featuring language labels, filenames, and copy-to-clipboard buttons. Ideal for programming tutorials. #### Step-by-Step Tutorial - **URL**: https://ui.beste.co/block/post19 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post19.json"` (Radix: `/r/post19.json`) - **Description**: Tutorial layout with numbered steps, prerequisites box, terminal commands, and completion message. Perfect for hands-on guides. #### Documentation Getting Started - **URL**: https://ui.beste.co/block/post20 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post20.json"` (Radix: `/r/post20.json`) - **Description**: Documentation-focused layout with version badge, info/warning/tip boxes, and previous/next navigation. Best for technical documentation. #### Changelog Timeline View - **URL**: https://ui.beste.co/block/post21 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post21.json"` (Radix: `/r/post21.json`) - **Description**: Timeline-style changelog with version badges, dates, and color-coded change types. Ideal for release notes and version history. #### API Reference Documentation - **URL**: https://ui.beste.co/block/post22 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post22.json"` (Radix: `/r/post22.json`) - **Description**: Technical reference with endpoint cards, HTTP method badges, and side-by-side request/response examples. Perfect for API documentation. #### Literary Essay Separators - **URL**: https://ui.beste.co/block/post23 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post23.json"` (Radix: `/r/post23.json`) - **Description**: Centered essay layout with large typography, ornamental separators, and author bio footer. Ideal for reflective essays or creative writing. #### Visual Story Photo Grid - **URL**: https://ui.beste.co/block/post24 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post24.json"` (Radix: `/r/post24.json`) - **Description**: Photography-focused layout with hero image, full-width photos, side-by-side grids, and captions. Perfect for travel or photography narratives. #### Interview Q&A Format - **URL**: https://ui.beste.co/block/post25 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post25.json"` (Radix: `/r/post25.json`) - **Description**: Interview layout showing interviewer and interviewee with avatars, hero image, and question-answer pairs. Ideal for interviews and conversations. #### Case Study with Metrics - **URL**: https://ui.beste.co/block/post26 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post26.json"` (Radix: `/r/post26.json`) - **Description**: Case study format with client info, overview box, metrics grid, sectioned content, and testimonial callout. Perfect for portfolio pieces. #### News Article Sidebar - **URL**: https://ui.beste.co/block/post27 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post27.json"` (Radix: `/r/post27.json`) - **Description**: Newspaper-style layout with byline, serif typography, author bio sidebar, and trending articles list. Ideal for news or journalism. #### Minimalist Short Form - **URL**: https://ui.beste.co/block/post28 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post28.json"` (Radix: `/r/post28.json`) - **Description**: Ultra-minimal essay with light typography, sparse content, horizontal rule separators, and small images. Best for contemplative short pieces. #### Sports Match Report - **URL**: https://ui.beste.co/block/post29 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post29.json"` (Radix: `/r/post29.json`) - **Description**: Sports-focused layout with match score display, timeline of match events, stats comparison, and player of the match. Perfect for game recaps. #### Social Sharing Article - **URL**: https://ui.beste.co/block/post30 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post30.json"` (Radix: `/r/post30.json`) - **Description**: Article with prominent share buttons for Twitter/LinkedIn, copy link function, and engagement-focused layout. Ideal for thought leadership. #### Educational Article Images - **URL**: https://ui.beste.co/block/post31 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post31.json"` (Radix: `/r/post31.json`) - **Description**: Educational article with clear heading hierarchy, embedded images with captions, and readable body text. Good for informational content. #### Highlightable Content - **URL**: https://ui.beste.co/block/post32 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post32.json"` (Radix: `/r/post32.json`) - **Description**: Article with text selection and highlighting feature allowing readers to save key quotes. Great for reference material or learning content. #### Entrepreneur Profile - **URL**: https://ui.beste.co/block/post33 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post33.json"` (Radix: `/r/post33.json`) - **Description**: Personal essay with large author bio, social links, extensive credentials, and expertise areas displayed. Perfect for founder stories. #### Guest Post Editor Note - **URL**: https://ui.beste.co/block/post34 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post34.json"` (Radix: `/r/post34.json`) - **Description**: Guest article with editor's introduction note, separate author profile for contributor, and clear attribution. Ideal for contributed content. #### Multi-Author Research - **URL**: https://ui.beste.co/block/post35 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post35.json"` (Radix: `/r/post35.json`) - **Description**: Report with multiple author profiles showing titles and contributions, team collaboration visual. Perfect for research or team-authored content. #### Expert Column Credentials - **URL**: https://ui.beste.co/block/post36 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post36.json"` (Radix: `/r/post36.json`) - **Description**: Expert opinion column displaying credentials, publications count, expertise areas, and callout boxes. Ideal for expert columns and thought leadership. #### Columnist Opinion Column - **URL**: https://ui.beste.co/block/post37 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post37.json"` (Radix: `/r/post37.json`) - **Description**: Opinion column layout with columnist profile, previous articles list, and editorial styling. Perfect for recurring contributor pieces and thought leadership. #### Video Article Layout - **URL**: https://ui.beste.co/block/post38 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post38.json"` (Radix: `/r/post38.json`) - **Description**: Article with featured video player, thumbnail preview, and watch time display. Ideal for video-first content with accompanying text. #### Podcast Episode Page - **URL**: https://ui.beste.co/block/post39 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post39.json"` (Radix: `/r/post39.json`) - **Description**: Podcast episode layout with audio player, host/guest profiles, timestamps, and show notes. Perfect for podcast transcripts and episode pages. #### Recipe Card Layout - **URL**: https://ui.beste.co/block/post40 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post40.json"` (Radix: `/r/post40.json`) - **Description**: Recipe article with ingredients list, step-by-step instructions, prep/cook times, and serving info. Perfect for food blogs and cooking content. #### Photo Gallery Essay - **URL**: https://ui.beste.co/block/post41 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post41.json"` (Radix: `/r/post41.json`) - **Description**: Visual essay with photographer credit, location info, and image galleries. Perfect for photography portfolios and visual storytelling. #### Product Review Article - **URL**: https://ui.beste.co/block/post42 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post42.json"` (Radix: `/r/post42.json`) - **Description**: Product review with rating categories, pros/cons list, and verdict section. Ideal for tech reviews and product comparisons. #### Multi-Part Series Article - **URL**: https://ui.beste.co/block/post43 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post43.json"` (Radix: `/r/post43.json`) - **Description**: Series article with part navigation, progress bar, and previous/next links. Perfect for tutorials and multi-chapter content. #### Online Course Lesson - **URL**: https://ui.beste.co/block/post44 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post44.json"` (Radix: `/r/post44.json`) - **Description**: Course lesson layout with module navigation, progress tracking, and downloadable resources. Perfect for e-learning platforms. #### Multi-Chapter Guide - **URL**: https://ui.beste.co/block/post45 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post45.json"` (Radix: `/r/post45.json`) - **Description**: Documentation-style guide with chapter navigation, table of contents, and previous/next navigation. Perfect for comprehensive tutorials. #### DIY How-To Tutorial - **URL**: https://ui.beste.co/block/post46 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post46.json"` (Radix: `/r/post46.json`) - **Description**: Step-by-step tutorial with tools needed, learning outcomes, and tips per step. Perfect for DIY projects and hands-on guides. #### Resource Roundup - **URL**: https://ui.beste.co/block/post47 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post47.json"` (Radix: `/r/post47.json`) - **Description**: Curated list format with resource cards, descriptions, and links. Great for collections and recommendations. #### Live Blog Updates - **URL**: https://ui.beste.co/block/post48 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post48.json"` (Radix: `/r/post48.json`) - **Description**: Live blog format with timestamped updates, breaking news badges, and auto-refresh. Perfect for live event coverage and breaking news. #### Magazine Essay Style - **URL**: https://ui.beste.co/block/post49 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post49.json"` (Radix: `/r/post49.json`) - **Description**: Elegant magazine-style article with drop cap, pull quotes, and image credits. Perfect for long-form essays and feature articles. #### Opinion Editorial Article - **URL**: https://ui.beste.co/block/post50 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post50.json"` (Radix: `/r/post50.json`) - **Description**: Opinion piece with agree/disagree voting, editor's response, and discussion section. Perfect for editorial and op-ed content. #### Product Comparison Article - **URL**: https://ui.beste.co/block/post51 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post51.json"` (Radix: `/r/post51.json`) - **Description**: Head-to-head comparison with feature matrix, pros/cons, and winner verdict. Perfect for product shootouts and buying guides. #### Ranked List Article - **URL**: https://ui.beste.co/block/post52 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post52.json"` (Radix: `/r/post52.json`) - **Description**: Numbered list article with ratings, highlights, and jump navigation. Perfect for top-10 lists and curated recommendations. #### Interactive Poll Article - **URL**: https://ui.beste.co/block/post53 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post53.json"` (Radix: `/r/post53.json`) - **Description**: Article with embedded poll, vote tracking, and results display. Perfect for reader engagement and community feedback. #### Interactive Quiz Article - **URL**: https://ui.beste.co/block/post54 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post54.json"` (Radix: `/r/post54.json`) - **Description**: Quiz format with multiple choice questions, scoring, and results. Perfect for educational content and audience engagement. #### Interactive Checklist Article - **URL**: https://ui.beste.co/block/post55 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post55.json"` (Radix: `/r/post55.json`) - **Description**: Article with checkable items, progress tracking, and print/download options. Perfect for actionable guides and checklists. #### Searchable FAQ Article - **URL**: https://ui.beste.co/block/post56 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post56.json"` (Radix: `/r/post56.json`) - **Description**: FAQ article with search, category filters, and helpful vote buttons. Perfect for help centers and knowledge bases. #### Article with Comments - **URL**: https://ui.beste.co/block/post57 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post57.json"` (Radix: `/r/post57.json`) - **Description**: Article with full comment system, replies, likes, and featured comments. Perfect for community-driven discussions. #### Product Launch Article - **URL**: https://ui.beste.co/block/post58 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post58.json"` (Radix: `/r/post58.json`) - **Description**: Product launch post with features showcase, pricing tiers, and CTAs. Perfect for announcements and release notes. #### Event Recap Article - **URL**: https://ui.beste.co/block/post59 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post59.json"` (Radix: `/r/post59.json`) - **Description**: Conference/event recap with speaker profiles, key takeaways, and resources. Perfect for event summaries and conference coverage. #### Research Paper Summary - **URL**: https://ui.beste.co/block/post60 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post60.json"` (Radix: `/r/post60.json`) - **Description**: Academic article with abstract, key findings, and references. Perfect for research summaries and study highlights. #### Book Review Article - **URL**: https://ui.beste.co/block/post61 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post61.json"` (Radix: `/r/post61.json`) - **Description**: Book review with cover image, publication details, rating, and pros/cons. Perfect for literary reviews and reading recommendations. #### Case Study Article - **URL**: https://ui.beste.co/block/post62 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post62.json"` (Radix: `/r/post62.json`) - **Description**: Case study with client details, metrics, team members, and results. Perfect for portfolio pieces and success stories. #### Interview Transcript Article - **URL**: https://ui.beste.co/block/post63 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post63.json"` (Radix: `/r/post63.json`) - **Description**: Interview with Q&A format, audio player, and speaker timestamps. Perfect for podcast interviews and conversations. #### Podcast Episode with Chapters - **URL**: https://ui.beste.co/block/post64 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post64.json"` (Radix: `/r/post64.json`) - **Description**: Podcast with chapter markers, transcript segments, and show notes. Perfect for long-form audio content with navigation. #### AMA Session Recap - **URL**: https://ui.beste.co/block/post65 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post65.json"` (Radix: `/r/post65.json`) - **Description**: Ask Me Anything format with host profile, upvoted questions, and answers. Perfect for Q&A sessions and community engagement. #### Debate Format Article - **URL**: https://ui.beste.co/block/post66 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post66.json"` (Radix: `/r/post66.json`) - **Description**: Two-sided debate with for/against positions, arguments, and rebuttals. Perfect for controversial topics and opinion pieces. #### Panel Discussion Recap - **URL**: https://ui.beste.co/block/post67 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post67.json"` (Radix: `/r/post67.json`) - **Description**: Panel discussion summary with panelist profiles, key quotes, and takeaways. Perfect for conference and webinar recaps. #### Course Lesson with Video - **URL**: https://ui.beste.co/block/post69 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post69.json"` (Radix: `/r/post69.json`) - **Description**: Video lesson page with instructor, navigation, progress tracking, and downloadable resources. Perfect for online courses. #### Knowledge Base Article - **URL**: https://ui.beste.co/block/post71 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post71.json"` (Radix: `/r/post71.json`) - **Description**: Searchable FAQ with category filters, helpful votes, and related questions. Perfect for help centers and documentation. #### Book Review with Purchase - **URL**: https://ui.beste.co/block/post72 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post72.json"` (Radix: `/r/post72.json`) - **Description**: Detailed book review with author bio, ratings, and purchase links. Perfect for literary reviews and book recommendations. #### Community Member Spotlight - **URL**: https://ui.beste.co/block/post78 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post78.json"` (Radix: `/r/post78.json`) - **Description**: Member profile with achievements, social links, and contributions. Perfect for community highlights and user stories. #### Open Source Project Page - **URL**: https://ui.beste.co/block/post82 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post82.json"` (Radix: `/r/post82.json`) - **Description**: Project showcase with maintainers, releases, install commands, and features. Perfect for GitHub readme-style documentation. #### Poetry Collection Article - **URL**: https://ui.beste.co/block/post85 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post85.json"` (Radix: `/r/post85.json`) - **Description**: Poetry showcase with poet bio, formatted verses, dedications, and audio. Perfect for literary magazines and poetry publications. #### Travel Journal Article - **URL**: https://ui.beste.co/block/post86 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post86.json"` (Radix: `/r/post86.json`) - **Description**: Travel diary with dated entries, location info, weather, and photo galleries. Perfect for travel blogs and adventure stories. #### Editorial Article Layout - **URL**: https://ui.beste.co/block/post87 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/post87.json"` (Radix: `/r/post87.json`) - **Description**: A full article layout with an oversized light title, an author row framed by hairlines, a wide lead image, prose sections with accent-bulleted lists, an accent-ruled pull quote, and a closing share row. ### Pricing #### Billing Toggle Pricing - **URL**: https://ui.beste.co/block/pricing6 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing6.json"` (Radix: `/r/pricing6.json`) - **Description**: Three-tier pricing table with monthly/yearly billing toggle and popular plan badge. Perfect for SaaS products with tiered subscription plans. #### Dual Plan Comparison - **URL**: https://ui.beste.co/block/pricing7 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing7.json"` (Radix: `/r/pricing7.json`) - **Description**: Two-tier pricing with highlighted recommended plan and feature lists. Perfect for freemium products with a clear upgrade path. #### Feature Comparison Table - **URL**: https://ui.beste.co/block/pricing8 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing8.json"` (Radix: `/r/pricing8.json`) - **Description**: Multi-plan feature comparison table with grouped categories and check/text values. Perfect for products with complex feature sets across multiple tiers. #### Single Plan with Add-ons - **URL**: https://ui.beste.co/block/pricing9 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing9.json"` (Radix: `/r/pricing9.json`) - **Description**: Single pricing plan with selectable optional add-ons that toggle on click. Perfect for simple products with modular upsells. #### Horizontal Tier Cards - **URL**: https://ui.beste.co/block/pricing10 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing10.json"` (Radix: `/r/pricing10.json`) - **Description**: Four-tier horizontal pricing cards with pill-style billing toggle. Perfect for comparing multiple plan options side by side. #### Usage-Based Slider - **URL**: https://ui.beste.co/block/pricing11 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing11.json"` (Radix: `/r/pricing11.json`) - **Description**: Usage-based pricing calculator with interactive slider showing tiered breakpoints. Perfect for API services and consumption-based products. #### Enterprise Contact Sales - **URL**: https://ui.beste.co/block/pricing12 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing12.json"` (Radix: `/r/pricing12.json`) - **Description**: Enterprise pricing section with custom pricing, feature list, and client logo trust indicators. Perfect for B2B products targeting large organizations. #### Per-Seat Calculator - **URL**: https://ui.beste.co/block/pricing13 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing13.json"` (Radix: `/r/pricing13.json`) - **Description**: Per-seat pricing calculator with slider control and automatic volume discount display. Perfect for team collaboration tools with user-based pricing. #### Lifetime Deal - **URL**: https://ui.beste.co/block/pricing14 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing14.json"` (Radix: `/r/pricing14.json`) - **Description**: Lifetime deal pricing with crossed-out original price and urgency countdown timer. Perfect for product launches and limited-time promotions. #### Free vs Pro Table - **URL**: https://ui.beste.co/block/pricing15 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing15.json"` (Radix: `/r/pricing15.json`) - **Description**: Two-column comparison table showing Free vs Pro features with check marks and text values. Perfect for freemium apps highlighting upgrade benefits. #### Minimal Single Plan - **URL**: https://ui.beste.co/block/pricing16 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing16.json"` (Radix: `/r/pricing16.json`) - **Description**: Clean single-plan pricing with inline feature badges in a compact layout. Perfect for focused products with one clear offering. #### Pricing with FAQ - **URL**: https://ui.beste.co/block/pricing17 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing17.json"` (Radix: `/r/pricing17.json`) - **Description**: Single plan pricing card paired with an expandable FAQ accordion section. Perfect for reducing purchase friction with inline answers. #### Individual vs Team Toggle - **URL**: https://ui.beste.co/block/pricing18 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing18.json"` (Radix: `/r/pricing18.json`) - **Description**: Tabbed pricing switching between Individual and Team plans with different feature sets. Perfect for products offering both personal and business tiers. #### Credit Pack Pricing - **URL**: https://ui.beste.co/block/pricing19 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing19.json"` (Radix: `/r/pricing19.json`) - **Description**: Credit pack cards with bonus credits and usage examples showing cost per action. Perfect for AI tools and pay-as-you-go services. #### Pricing with Testimonial - **URL**: https://ui.beste.co/block/pricing20 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing20.json"` (Radix: `/r/pricing20.json`) - **Description**: Pricing card featuring an embedded customer testimonial with star rating. Perfect for building trust alongside pricing information. #### Minimalist Three-Tier - **URL**: https://ui.beste.co/block/pricing21 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing21.json"` (Radix: `/r/pricing21.json`) - **Description**: Clean three-tier pricing cards with highlighted middle plan and simple feature lists. Perfect for startups wanting a straightforward pricing page. #### Pay What You Want - **URL**: https://ui.beste.co/block/pricing22 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing22.json"` (Radix: `/r/pricing22.json`) - **Description**: Flexible pricing with selectable suggested amounts and custom input option. Perfect for indie products, open source, and creator tools. #### Annual with Monthly Breakdown - **URL**: https://ui.beste.co/block/pricing23 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing23.json"` (Radix: `/r/pricing23.json`) - **Description**: Annual pricing tiers showing per-month equivalent cost and yearly savings. Perfect for encouraging annual commitments with clear value display. #### Startup Stage Pricing - **URL**: https://ui.beste.co/block/pricing24 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing24.json"` (Radix: `/r/pricing24.json`) - **Description**: Startup-focused pricing tiers based on funding stage from bootstrapped to Series B+. Perfect for B2B tools offering startup programs. #### Agency Service Packages - **URL**: https://ui.beste.co/block/pricing25 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing25.json"` (Radix: `/r/pricing25.json`) - **Description**: Service package cards with project timelines, deliverables list, and fixed pricing. Perfect for agencies and freelancers selling project-based work. #### ROI Calculator - **URL**: https://ui.beste.co/block/pricing26 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing26.json"` (Radix: `/r/pricing26.json`) - **Description**: Interactive ROI calculator with slider inputs showing potential savings and return projection. Perfect for enterprise tools demonstrating value. #### API Tiered Rates - **URL**: https://ui.beste.co/block/pricing27 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing27.json"` (Radix: `/r/pricing27.json`) - **Description**: API pricing table showing tiered rate per request with volume discount breakdown. Perfect for developer APIs and infrastructure services. #### Tabbed Billing Cycles - **URL**: https://ui.beste.co/block/pricing28 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing28.json"` (Radix: `/r/pricing28.json`) - **Description**: Pricing cards with tabbed selection for monthly, quarterly, and annual billing. Perfect for flexible subscription models with multiple commitment options. #### Pricing with FAQ Accordion - **URL**: https://ui.beste.co/block/pricing29 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing29.json"` (Radix: `/r/pricing29.json`) - **Description**: Single plan pricing card with collapsible FAQ accordion for common questions. Perfect for reducing support queries on pricing pages. #### Budget Slider Selector - **URL**: https://ui.beste.co/block/pricing30 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing30.json"` (Radix: `/r/pricing30.json`) - **Description**: Budget-based plan selector with slider control that highlights the best matching plan. Perfect for helping users find the right tier. #### Build Your Own Plan - **URL**: https://ui.beste.co/block/pricing31 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing31.json"` (Radix: `/r/pricing31.json`) - **Description**: Customizable pricing with base plan and selectable add-ons that update total dynamically. Perfect for modular products with optional features. #### Modular Pricing Builder - **URL**: https://ui.beste.co/block/pricing32 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing32.json"` (Radix: `/r/pricing32.json`) - **Description**: Interactive pricing builder with toggleable feature modules and real-time total calculation. Perfect for enterprise products with customizable packages. #### Pricing with Tooltips - **URL**: https://ui.beste.co/block/pricing33 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing33.json"` (Radix: `/r/pricing33.json`) - **Description**: Pricing tiers with hover tooltips explaining each feature in detail. Perfect for complex products with features that need explanation. #### Radio Card Selection - **URL**: https://ui.beste.co/block/pricing34 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing34.json"` (Radix: `/r/pricing34.json`) - **Description**: Plan selection using radio button cards with visual selection state. Perfect for checkout flows and single-plan selection interfaces. #### Regional Currency Pricing - **URL**: https://ui.beste.co/block/pricing35 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing35.json"` (Radix: `/r/pricing35.json`) - **Description**: Pricing with dropdown region/currency selector showing localized prices. Perfect for global products with regional pricing tiers. #### Service Package Tiers - **URL**: https://ui.beste.co/block/pricing36 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing36.json"` (Radix: `/r/pricing36.json`) - **Description**: Service package cards with tier badges, feature lists, and delivery timelines. Perfect for consulting and professional services. #### Toggle Group Add-ons - **URL**: https://ui.beste.co/block/pricing37 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing37.json"` (Radix: `/r/pricing37.json`) - **Description**: Base plan pricing with toggle group buttons for selecting add-ons. Perfect for products with a la carte feature selection. #### Pricing with Ratings - **URL**: https://ui.beste.co/block/pricing38 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing38.json"` (Radix: `/r/pricing38.json`) - **Description**: Pricing cards displaying star ratings and review counts for social proof. Perfect for marketplaces and consumer products. #### Checkbox Feature Builder - **URL**: https://ui.beste.co/block/pricing39 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing39.json"` (Radix: `/r/pricing39.json`) - **Description**: Interactive pricing with checkbox feature selection and real-time price updates. Perfect for customizable service packages. #### Minimal Toggle Selector - **URL**: https://ui.beste.co/block/pricing40 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing40.json"` (Radix: `/r/pricing40.json`) - **Description**: Clean minimal plan selector with button-style toggles and compact layout. Perfect for simple products with few options. #### Switch Toggle Add-ons - **URL**: https://ui.beste.co/block/pricing41 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing41.json"` (Radix: `/r/pricing41.json`) - **Description**: Base plan pricing with switch toggles for enabling optional add-ons. Perfect for SaaS products with feature upgrades. #### Grouped Feature Sections - **URL**: https://ui.beste.co/block/pricing42 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing42.json"` (Radix: `/r/pricing42.json`) - **Description**: Single plan pricing with features organized into separated category groups. Perfect for products with many features to categorize. #### Hover Card Details - **URL**: https://ui.beste.co/block/pricing43 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing43.json"` (Radix: `/r/pricing43.json`) - **Description**: Pricing cards with hover cards showing expanded feature details on mouse over. Perfect for dense information without clutter. #### Collapsible Feature Groups - **URL**: https://ui.beste.co/block/pricing44 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing44.json"` (Radix: `/r/pricing44.json`) - **Description**: Pricing cards with collapsible feature sections that expand on click. Perfect for compact layouts with many features. #### Enterprise Volume Calculator - **URL**: https://ui.beste.co/block/pricing45 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing45.json"` (Radix: `/r/pricing45.json`) - **Description**: Enterprise pricing calculator with user count slider and volume discount tiers. Perfect for B2B products with usage-based enterprise pricing. #### Skeleton Loading State - **URL**: https://ui.beste.co/block/pricing46 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing46.json"` (Radix: `/r/pricing46.json`) - **Description**: Pricing cards with skeleton placeholders demonstrating loading states. Perfect for async pricing data or dynamic plan fetching. #### Limited Time Countdown - **URL**: https://ui.beste.co/block/pricing47 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing47.json"` (Radix: `/r/pricing47.json`) - **Description**: Promotional pricing with live countdown timer showing urgency. Perfect for flash sales and limited-time discount campaigns. #### Guarantee Badges - **URL**: https://ui.beste.co/block/pricing48 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing48.json"` (Radix: `/r/pricing48.json`) - **Description**: Pricing cards featuring money-back guarantee and satisfaction badges. Perfect for reducing purchase anxiety and building trust. #### Tabbed Plan Features - **URL**: https://ui.beste.co/block/pricing49 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing49.json"` (Radix: `/r/pricing49.json`) - **Description**: Pricing with tabs to switch between plans showing categorized feature lists. Perfect for detailed feature comparison by plan. #### Payment Method Display - **URL**: https://ui.beste.co/block/pricing50 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing50.json"` (Radix: `/r/pricing50.json`) - **Description**: Single plan pricing showcasing accepted payment method icons. Perfect for checkout pages and e-commerce pricing. #### Icon Feature Highlights - **URL**: https://ui.beste.co/block/pricing51 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing51.json"` (Radix: `/r/pricing51.json`) - **Description**: Pricing cards with icon-highlighted key features for visual scanning. Perfect for emphasizing unique plan benefits. #### Discount Code Input - **URL**: https://ui.beste.co/block/pricing52 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing52.json"` (Radix: `/r/pricing52.json`) - **Description**: Pricing section with discount/promo code input field and apply button. Perfect for coupon-based promotions and affiliate programs. #### Product Bundle Pricing - **URL**: https://ui.beste.co/block/pricing53 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing53.json"` (Radix: `/r/pricing53.json`) - **Description**: Bundle pricing cards showing combined products with savings percentage. Perfect for product suites and software bundles. #### Plan Recommendation Quiz - **URL**: https://ui.beste.co/block/pricing54 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing54.json"` (Radix: `/r/pricing54.json`) - **Description**: Interactive questionnaire that recommends the best plan based on user answers. Perfect for helping users choose between complex options. #### Step-by-Step Plan Builder - **URL**: https://ui.beste.co/block/pricing55 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing55.json"` (Radix: `/r/pricing55.json`) - **Description**: Multi-step wizard for building a custom plan with progressive disclosure. Perfect for complex configurations and guided setup. #### Sticky Summary Sidebar - **URL**: https://ui.beste.co/block/pricing56 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing56.json"` (Radix: `/r/pricing56.json`) - **Description**: Plan cards with sticky sidebar showing selected plan summary and total. Perfect for long pricing pages with multiple options. #### Volume Discount Table - **URL**: https://ui.beste.co/block/pricing57 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing57.json"` (Radix: `/r/pricing57.json`) - **Description**: Per-seat pricing table showing volume discount tiers and price-per-user breakpoints. Perfect for team products with tiered pricing. #### Pricing with Slogan Panel - **URL**: https://ui.beste.co/block/pricing58 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing58.json"` (Radix: `/r/pricing58.json`) - **Description**: Two-panel pricing card with scrollable features list and dark slogan panel with background image overlay. #### Tiered Plan Tabs - **URL**: https://ui.beste.co/block/pricing59 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing59.json"` (Radix: `/r/pricing59.json`) - **Description**: Tabbed membership pricing: feature list, headline price with CTA, and a plan summary panel per tab. #### Three Tiers - **URL**: https://ui.beste.co/block/pricing60 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing60.json"` (Radix: `/r/pricing60.json`) - **Description**: Three pricing tiers with an emphasized popular plan and feature lists. #### Billing Toggle Pricing - **URL**: https://ui.beste.co/block/pricing61 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing61.json"` (Radix: `/r/pricing61.json`) - **Description**: Three plans with a monthly/yearly billing toggle and feature lists. #### Plan Comparison - **URL**: https://ui.beste.co/block/pricing62 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing62.json"` (Radix: `/r/pricing62.json`) - **Description**: Feature comparison grid with plans as columns and check/dash cells. #### Two Engagement Plans - **URL**: https://ui.beste.co/block/pricing63 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing63.json"` (Radix: `/r/pricing63.json`) - **Description**: Two large contrasting plan panels (light vs dark) for engagement models. #### Spotlight Plan & Add-ons - **URL**: https://ui.beste.co/block/pricing64 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing64.json"` (Radix: `/r/pricing64.json`) - **Description**: A single spotlight plan beside a list of modular add-ons. #### Monochrome Pricing Tiers - **URL**: https://ui.beste.co/block/pricing65 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing65.json"` (Radix: `/r/pricing65.json`) - **Description**: Three monochrome engagement tiers with editorial big-number pricing and an inverted featured plan. #### Single Plan Retainer - **URL**: https://ui.beste.co/block/pricing66 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing66.json"` (Radix: `/r/pricing66.json`) - **Description**: One bordered card pairing a big monochrome price and CTA with a two-column feature checklist. #### Comparison Matrix Pricing - **URL**: https://ui.beste.co/block/pricing67 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing67.json"` (Radix: `/r/pricing67.json`) - **Description**: A monochrome plan comparison matrix with ruled feature rows, check/minus cells, and per-plan CTAs. #### Seat Slider Price Calculator - **URL**: https://ui.beste.co/block/pricing68 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing68.json"` (Radix: `/r/pricing68.json`) - **Description**: A per-seat pricing calculator with a full-height photo panel on the left, a monthly and yearly toggle, a seat slider driving an oversized live count, an included-features list, and a soft summary column with a cost breakdown and total. #### Engagement Tier Rails - **URL**: https://ui.beste.co/block/pricing69 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing69.json"` (Radix: `/r/pricing69.json`) - **Description**: Boxless pricing where each tier is a ruled column: the name, an oversized figure with its period, a fit line, an inclusion list under a second rule and a pill CTA, with subgrid keeping every internal rule aligned across the three columns. #### Project Estimate Ledger - **URL**: https://ui.beste.co/block/pricing70 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing70.json"` (Radix: `/r/pricing70.json`) - **Description**: Range-based pricing for project work: a ruled table of project types listing what each usually includes, its timeline and a starting figure, with unruled column headers on desktop and stacked rows on mobile. #### Three Tiers With Billing Toggle - **URL**: https://ui.beste.co/block/pricing71 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing71.json"` (Radix: `/r/pricing71.json`) - **Description**: A three-tier pricing grid whose monthly and yearly toggle swaps both the light figure and the billing note on every card, with the recommended tier outlined in the accent. #### Single Plan With Full Inclusion List - **URL**: https://ui.beste.co/block/pricing72 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing72.json"` (Radix: `/r/pricing72.json`) - **Description**: A one-plan pricing panel that sets an oversized light figure and two actions beside an image tile floating a live savings card, then lists everything included as three hairline groups below. #### Per-Site Band Selector - **URL**: https://ui.beste.co/block/pricing73 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/pricing73.json"` (Radix: `/r/pricing73.json`) - **Description**: A per-site pricing table whose hairline bands are selectable, driving a soft summary panel that recomputes the rate and the whole-group total, beside an image tile floating a live sites card. ### Product #### Centered Product Showcase - **URL**: https://ui.beste.co/block/product1 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/product1.json"` (Radix: `/r/product1.json`) - **Description**: Centered product showcase with a large image on a muted stage, product name and tagline, a row of key specs, and an editorial learn-more link. #### Product Anatomy Callouts - **URL**: https://ui.beste.co/block/product2 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/product2.json"` (Radix: `/r/product2.json`) - **Description**: A large product image flanked by numbered feature callout cards, each naming and describing a part of the product. #### Product Spec Sheet - **URL**: https://ui.beste.co/block/product3 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/product3.json"` (Radix: `/r/product3.json`) - **Description**: Editorial spec sheet pairing a product image with a bordered key/value grid of dimensions, weight, battery, and materials. #### Every-Angle Gallery - **URL**: https://ui.beste.co/block/product4 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/product4.json"` (Radix: `/r/product4.json`) - **Description**: An editorial product gallery showing the same object from several angles — a header with a uniform row of captioned, full-color angle shots. #### Split Product Highlights - **URL**: https://ui.beste.co/block/product5 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/product5.json"` (Radix: `/r/product5.json`) - **Description**: Split product intro: a tall product image beside a heading, description, and three icon highlights with an editorial spec link. #### Product Variant Explorer - **URL**: https://ui.beste.co/block/product6 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/product6.json"` (Radix: `/r/product6.json`) - **Description**: Variant explorer that swaps the product image and spec line as you click between finishes. #### What's in the Box - **URL**: https://ui.beste.co/block/product7 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/product7.json"` (Radix: `/r/product7.json`) - **Description**: What's-in-the-box section pairing a product image with a checklist of included items, each with an optional note. #### Product Overlap Card - **URL**: https://ui.beste.co/block/product8 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/product8.json"` (Radix: `/r/product8.json`) - **Description**: An editorial product showcase: a large product image with a caption card overlapping its lower corner — eyebrow, product name, tagline, a ruled three-up spec row, and a CTA. #### Product Feature Carousel - **URL**: https://ui.beste.co/block/product9 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/product9.json"` (Radix: `/r/product9.json`) - **Description**: Clickable tabs switch a feature panel with a large product image, title, and description. Supports an optional auto-loop. #### Product Macro Detail Grid - **URL**: https://ui.beste.co/block/product10 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/product10.json"` (Radix: `/r/product10.json`) - **Description**: Editorial grid of macro close-up shots, each captioned with the material or detail it shows. #### Split Product Highlights Plain - **URL**: https://ui.beste.co/block/product11 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/product11.json"` (Radix: `/r/product11.json`) - **Description**: Split product intro: a tall product image beside a heading, description, and three icon highlights with editorial body-size copy and a spec link. #### Live Made To Order Configurator - **URL**: https://ui.beste.co/block/product12 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/product12.json"` (Radix: `/r/product12.json`) - **Description**: A made-to-order configurator that answers as you go: every option takes over the plate beside it, writes its own line into a running specification, and moves a total that is visible from the first question rather than revealed at the end. ### Other #### Filterable Product Grid - **URL**: https://ui.beste.co/block/productlist1 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/productlist1.json"` (Radix: `/r/productlist1.json`) - **Description**: Product listing with sidebar filters, sorting, pagination, and active filter chips, powered by the shared product-filters engine. Fifteen filter types including checkboxes, chips, color swatches, price sliders, rating, search, dropdowns, and cascading selects. Runs fully client-side on a given dataset, self-fetches from your API via productsUrl with an SSR-friendly first page, or emits queries in controlled server mode. #### Product Grid With Filter Drawer - **URL**: https://ui.beste.co/block/productlist2 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/productlist2.json"` (Radix: `/r/productlist2.json`) - **Description**: Product catalog with a single Filters button that opens a side drawer: keyword search, cascading category and subcategory selects, a searchable multi-brand combobox, a size multiselect, and a segmented gender control, powered by the shared product-filters engine. Runs fully client-side on a given dataset, self-fetches from your API via productsUrl with an SSR-friendly first page, or emits queries in controlled server mode. #### Marketplace Toolbar Product Grid - **URL**: https://ui.beste.co/block/productlist3 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/productlist3.json"` (Radix: `/r/productlist3.json`) - **Description**: Dense product grid with an always-visible inline filter toolbar: search, a segmented category, a cascading subcategory select, and a searchable brand combobox, powered by the shared product-filters engine. Self-fetches from your API via productsUrl with an SSR-friendly first page, runs client-side on a dataset, or emits queries in controlled server mode. #### Quick-Shop Product Grid - **URL**: https://ui.beste.co/block/productlist4 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/productlist4.json"` (Radix: `/r/productlist4.json`) - **Description**: Product grid with a left filter sidebar where hovering a card reveals a quick-shop tray with sizes and an add-to-cart button, plus a category tag and sale badge, powered by the shared product-filters engine. Self-fetches from your API via productsUrl with an SSR-friendly first page, runs client-side on a dataset, or emits queries in controlled server mode. #### Load More Feed With Category Pills - **URL**: https://ui.beste.co/block/productlist5 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/productlist5.json"` (Radix: `/r/productlist5.json`) - **Description**: Three-column product feed led by a row of category pills, with a search and sort, and a Load more button plus progress bar that appends the next batch instead of paginating, powered by the shared product-filters engine. Self-fetches from your API via productsUrl with an SSR-friendly first page, runs client-side on a dataset, or emits queries in controlled server mode. ### Reveal #### Before/After Image Slider - **URL**: https://ui.beste.co/block/reveal1 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/reveal1.json"` (Radix: `/r/reveal1.json`) - **Description**: Interactive image comparison component with a draggable divider supporting horizontal and vertical orientations. Perfect for showcasing transformations, photo editing results, or design improvements. #### Comparison Slider with Highlights - **URL**: https://ui.beste.co/block/reveal2 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/reveal2.json"` (Radix: `/r/reveal2.json`) - **Description**: Split-layout image comparison with a sidebar featuring benefit highlights and icons alongside a draggable before/after slider. Perfect for demonstrating product improvements with detailed feature callouts. #### Manifesto Scroll Reveal - **URL**: https://ui.beste.co/block/reveal3 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/reveal3.json"` (Radix: `/r/reveal3.json`) - **Description**: A type-forward manifesto whose ruled statement lines fade and rise into view as the section enters the viewport. #### Scroll-Reveal Gallery - **URL**: https://ui.beste.co/block/reveal4 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/reveal4.json"` (Radix: `/r/reveal4.json`) - **Description**: An editorial scroll-reveal gallery where images fade and rise into view with monospace captions and alternating rhythm. #### Editorial Statement Reveal - **URL**: https://ui.beste.co/block/reveal5 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/reveal5.json"` (Radix: `/r/reveal5.json`) - **Description**: A large light manifesto statement with an accent-highlighted phrase, an eyebrow above, and a supporting footnote plus outline button beneath a hairline rule. #### Drag Compare Slider - **URL**: https://ui.beste.co/block/reveal6 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/reveal6.json"` (Radix: `/r/reveal6.json`) - **Description**: Before and after comparison where a pointer-driven handle clips the earlier photograph over the later one, with pill labels on both corners and a ruled row of outcome figures beneath. #### Segmented State Compare - **URL**: https://ui.beste.co/block/reveal7 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/reveal7.json"` (Radix: `/r/reveal7.json`) - **Description**: Two versions of the same object compared through a segmented pill control: the photographs cross-fade in place while the title, explanation and ruled note list swap beside them. #### Vertical Split Compare - **URL**: https://ui.beste.co/block/reveal8 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/reveal8.json"` (Radix: `/r/reveal8.json`) - **Description**: Comparison that splits horizontally instead of down the middle: a draggable divider wipes the upper photograph away to expose the lower one, with pill labels and a caption for each state. #### Spotlight Lens Compare - **URL**: https://ui.beste.co/block/reveal9 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/reveal9.json"` (Radix: `/r/reveal9.json`) - **Description**: Before and after comparison seen through a draggable circular lens: the earlier photograph fills the frame while the later one shows only inside the circle, which follows the pointer or the arrow keys. #### Self Sweeping Compare - **URL**: https://ui.beste.co/block/reveal10 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/reveal10.json"` (Radix: `/r/reveal10.json`) - **Description**: Before and after comparison that plays itself: the seam walks from edge to edge on a timer, clicking the picture freezes it at that point, and a single round control resumes or holds the sweep between the two captions. #### Diagonal Peel Compare - **URL**: https://ui.beste.co/block/reveal11 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/reveal11.json"` (Radix: `/r/reveal11.json`) - **Description**: Comparison that lifts diagonally instead of wiping straight: dragging the corner handle shrinks a triangular clip on the covering photograph to expose the one underneath, with notes on what changed. #### Tile Flip Compare - **URL**: https://ui.beste.co/block/reveal12 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/reveal12.json"` (Radix: `/r/reveal12.json`) - **Description**: Two photographs split across the same grid so each square can be flipped from before to after on click, with buttons to turn the whole frame over and a counter of how much has been revealed. #### Hold To Compare - **URL**: https://ui.beste.co/block/reveal13 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/reveal13.json"` (Radix: `/r/reveal13.json`) - **Description**: Press-and-hold comparison: holding the frame or the button cross-fades the earlier photograph in and swaps the corner label and caption, releasing returns to the current one. ### SaaS #### Plan Comparison Table - **URL**: https://ui.beste.co/block/saas13 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/saas13.json"` (Radix: `/r/saas13.json`) - **Description**: Comparison table showing features across Starter, Pro, and Enterprise tiers with checkmarks. Perfect for pricing pages that need clear feature differentiation. #### How It Works Steps - **URL**: https://ui.beste.co/block/saas14 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/saas14.json"` (Radix: `/r/saas14.json`) - **Description**: Three-step onboarding process with numbered circles and connecting lines. Perfect for explaining product workflows or signup processes. #### Team Members Grid - **URL**: https://ui.beste.co/block/saas15 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/saas15.json"` (Radix: `/r/saas15.json`) - **Description**: Team member cards with circular photos, names, roles, and social media links (Twitter, LinkedIn, GitHub). Perfect for about pages showcasing company leadership. #### Changelog Timeline - **URL**: https://ui.beste.co/block/saas16 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/saas16.json"` (Radix: `/r/saas16.json`) - **Description**: Version history cards with version badges, dates, and update type labels (Feature, Improvement, Fix). Perfect for product update pages and release notes. #### Feature Bento Grid - **URL**: https://ui.beste.co/block/saas23 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/saas23.json"` (Radix: `/r/saas23.json`) - **Description**: Bento-style grid layout with feature cards in small and large sizes, each with icon, title, and description. Perfect for showcasing product capabilities on landing pages. #### Job Listings - **URL**: https://ui.beste.co/block/saas31 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/saas31.json"` (Radix: `/r/saas31.json`) - **Description**: Career openings list with job title, department badge, location, and employment type. Perfect for company career pages with clickable job postings. #### Press Coverage - **URL**: https://ui.beste.co/block/saas34 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/saas34.json"` (Radix: `/r/saas34.json`) - **Description**: Media mentions list with publication source badges, headlines, and dates. Perfect for showcasing company press coverage and news articles. #### Connected Integrations - **URL**: https://ui.beste.co/block/saas55 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/saas55.json"` (Radix: `/r/saas55.json`) - **Description**: Integration management card showing connected apps with logos, sync status, and connect/disconnect actions. Perfect for settings pages managing third-party integrations. #### Analytics Dashboard - **URL**: https://ui.beste.co/block/saas87 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/saas87.json"` (Radix: `/r/saas87.json`) - **Description**: Metric cards grid showing key stats (users, revenue, conversion, sessions) with trend indicators and time range selector. Perfect for admin dashboards and analytics overviews. #### Active Sessions Manager - **URL**: https://ui.beste.co/block/saas97 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/saas97.json"` (Radix: `/r/saas97.json`) - **Description**: Security settings card showing active login sessions with device icons, browser info, location, and sign-out controls. Perfect for account security settings pages. #### SaaS Interface Split - **URL**: https://ui.beste.co/block/saas98 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/saas98.json"` (Radix: `/r/saas98.json`) - **Description**: Feature split pairing a focused pitch with a built monochrome app-window mockup of skeletons, nav, and metrics. #### SaaS Integrations Grid - **URL**: https://ui.beste.co/block/saas99 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/saas99.json"` (Radix: `/r/saas99.json`) - **Description**: An editorial integrations section pairing a big-type pitch with a bordered mosaic of grayscale partner logo tiles. #### Billing Split - **URL**: https://ui.beste.co/block/saas100 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/saas100.json"` (Radix: `/r/saas100.json`) - **Description**: A split section with an eyebrow, light heading, checked bullet list, and accent button on the left, and two stacked image tiles floating live billing micro-assets on the right. #### Three Tier Pricing - **URL**: https://ui.beste.co/block/saas101 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/saas101.json"` (Radix: `/r/saas101.json`) - **Description**: A pricing section with an eyebrow over a hairline rule, a two-column heading, and three plan cards with light prices, checked feature lists, and an accent-highlighted popular tier. #### Big Number Metrics Band - **URL**: https://ui.beste.co/block/saas102 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/saas102.json"` (Radix: `/r/saas102.json`) - **Description**: A metrics band with an eyebrow over a hairline rule, a two-column heading, and four oversized light stats, each sitting under its own hairline with a label and caption. #### Onboarding Split - **URL**: https://ui.beste.co/block/saas103 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/saas103.json"` (Radix: `/r/saas103.json`) - **Description**: A reversed split with an image tile floating a live setup checklist on the left, and an eyebrow, light heading, checked bullets, and an accent button on the right. #### Plan Comparison Table - **URL**: https://ui.beste.co/block/saas104 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/saas104.json"` (Radix: `/r/saas104.json`) - **Description**: A comparison section with an eyebrow over a hairline rule, a two-column heading, and a scrollable three-plan feature table with check, dash, and text cells and a highlighted plan column. #### Migration Source Selector - **URL**: https://ui.beste.co/block/saas105 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/saas105.json"` (Radix: `/r/saas105.json`) - **Description**: A migration section where your current system is picked from frosted glass cards floating on a photo panel, swapping the right side to a plain-language summary, a checked list of what carries across, the typical timeline, and a caveat. #### Product Tour Switcher - **URL**: https://ui.beste.co/block/saas106 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/saas106.json"` (Radix: `/r/saas106.json`) - **Description**: Product tour driven by pill tabs: each step pairs an explanation and a pill CTA with a soft interface panel built from divs, listing labelled rows with their value and current status. #### Trust And Compliance Ledger - **URL**: https://ui.beste.co/block/saas107 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/saas107.json"` (Radix: `/r/saas107.json`) - **Description**: Security section pairing four ruled pillars with circular icons and a labelled row of measured figures such as uptime and support response, closed by a caveat note beside an outline pill CTA. #### Branching Scoping Form - **URL**: https://ui.beste.co/block/saas108 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/saas108.json"` (Radix: `/r/saas108.json`) - **Description**: A contact section that asks a branching set of questions instead of one long form: a rail lists the steps that currently apply and lets you jump between them, and answering the first question adds or removes the steps below it. ### Settings #### Subscription Plan Card - **URL**: https://ui.beste.co/block/settings59 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/settings59.json"` (Radix: `/r/settings59.json`) - **Description**: Subscription management card displaying current plan details, pricing, included features, renewal date, and status badges with actions to change or cancel. Perfect for SaaS billing dashboards and account settings. #### Invoice History Table - **URL**: https://ui.beste.co/block/settings64 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/settings64.json"` (Radix: `/r/settings64.json`) - **Description**: Billing history table displaying invoices with date, description, amount, payment status badges, and download buttons. Perfect for account billing pages and payment management dashboards. #### Invoice Detail View - **URL**: https://ui.beste.co/block/settings65 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/settings65.json"` (Radix: `/r/settings65.json`) - **Description**: Detailed invoice page with billing address, itemized line items table, subtotal, tax, total, and payment method info with print and download actions. Perfect for generating printable invoices and payment receipts. #### Workspace Preferences Panel - **URL**: https://ui.beste.co/block/settings66 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/settings66.json"` (Radix: `/r/settings66.json`) - **Description**: A settings panel with a section rail on the left and the chosen group on the right, laying out hairline preference rows with switches, a select for the group's default, and a save bar underneath. ### Showcase #### Interactive Hotspot Image - **URL**: https://ui.beste.co/block/showcase1 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase1.json"` (Radix: `/r/showcase1.json`) - **Description**: Full-width image showcase with clickable animated hotspots that reveal feature popovers with icons and descriptions. Perfect for product tours and interactive feature demonstrations. #### Split Hotspot Feature Section - **URL**: https://ui.beste.co/block/showcase2 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase2.json"` (Radix: `/r/showcase2.json`) - **Description**: Two-column layout with text content, CTA buttons, and interactive image with clickable hotspot popovers. Perfect for SaaS feature pages with reversible layout option. #### Project Gallery Grid - **URL**: https://ui.beste.co/block/showcase3 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase3.json"` (Radix: `/r/showcase3.json`) - **Description**: Responsive three-column image gallery with hover zoom effects, captions, and optional clickable cards. Perfect for showcasing project portfolios or work samples. #### Browser Mockup Screenshot - **URL**: https://ui.beste.co/block/showcase4 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase4.json"` (Radix: `/r/showcase4.json`) - **Description**: Centered hero section with heading, CTA buttons, and a realistic browser chrome mockup displaying product screenshots. Perfect for SaaS landing pages showcasing web app interfaces. #### Side-by-Side Competitor Comparison - **URL**: https://ui.beste.co/block/showcase5 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase5.json"` (Radix: `/r/showcase5.json`) - **Description**: Two-column comparison layout with product images, feature checklists, and visual differentiation between your product and competitors. Perfect for competitive positioning sections. #### Desktop and Mobile Device Mockup - **URL**: https://ui.beste.co/block/showcase6 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase6.json"` (Radix: `/r/showcase6.json`) - **Description**: Cross-platform display with desktop monitor mockup and overlapping mobile phone frame showing product screenshots. Perfect for showcasing responsive apps and multi-device experiences. #### Screenshot with Testimonial Quote - **URL**: https://ui.beste.co/block/showcase7 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase7.json"` (Radix: `/r/showcase7.json`) - **Description**: Two-column section combining product image with large customer quote, author avatar, name, and role. Perfect for social proof sections alongside product visuals. #### Video Demo Thumbnail - **URL**: https://ui.beste.co/block/showcase10 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase10.json"` (Radix: `/r/showcase10.json`) - **Description**: Video preview section with thumbnail image, centered play button overlay, duration badge, and CTA buttons below. Perfect for product demo videos and explainer content. #### Features with Stats and Image - **URL**: https://ui.beste.co/block/showcase12 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase12.json"` (Radix: `/r/showcase12.json`) - **Description**: Two-column layout with key metrics bar, icon feature list, CTA button, and large product image. Perfect for enterprise feature sections highlighting performance and capabilities. #### Bento Code Editor Trio - **URL**: https://ui.beste.co/block/showcase13 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase13.json"` (Radix: `/r/showcase13.json`) - **Description**: Bento layout pairing a code editor mockup with a video play card and a file upload preview. Every label is editable; no media props required. #### Code Editor With Upload Drawer - **URL**: https://ui.beste.co/block/showcase14 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase14.json"` (Radix: `/r/showcase14.json`) - **Description**: Browser-chrome card pairing a syntax-highlighted code editor with a side upload drawer — folder asset, progress bar, and cancel/continue actions. Every label is editable; no media props required. #### Code Editor With Live Activity Feed - **URL**: https://ui.beste.co/block/showcase15 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase15.json"` (Radix: `/r/showcase15.json`) - **Description**: Browser-chrome card pairing a syntax-highlighted code editor with a live activity feed — pulsing status dot, color-coded events, and an open-log footer. Every label is editable; no media props required. #### Code Editor With AI Copilot - **URL**: https://ui.beste.co/block/showcase16 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase16.json"` (Radix: `/r/showcase16.json`) - **Description**: Browser-chrome card pairing a syntax-highlighted code editor with an AI chat panel — assistant suggestions arrive as inline snippets you can apply with one click. Every label is editable; no media props required. #### Code Editor With Test Results - **URL**: https://ui.beste.co/block/showcase17 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase17.json"` (Radix: `/r/showcase17.json`) - **Description**: Browser-chrome card pairing a syntax-highlighted code editor with a live test-results panel — pass/fail rows, expandable failures, and a coverage footer. Every label is editable; no media props required. #### Code Editor With Live Logs - **URL**: https://ui.beste.co/block/showcase18 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase18.json"` (Radix: `/r/showcase18.json`) - **Description**: Browser-chrome card pairing a syntax-highlighted code editor with a live log stream — filter pills, color-coded levels, and a tail-mode footer. Every label is editable; no media props required. #### Code Editor With PR Review - **URL**: https://ui.beste.co/block/showcase19 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase19.json"` (Radix: `/r/showcase19.json`) - **Description**: Browser-chrome card pairing a syntax-highlighted code editor with a pull-request review panel — branch arrow, check rows with statuses, reviewer initials, and a merge footer. Every label is editable; no media props required. #### Code Editor With Environments Panel - **URL**: https://ui.beste.co/block/showcase20 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase20.json"` (Radix: `/r/showcase20.json`) - **Description**: Browser-chrome card pairing a syntax-highlighted code editor with a deploy environments panel — health dots, version pills, and a promote-to-production footer. Every label is editable; no media props required. #### API Inspector With Code Editor - **URL**: https://ui.beste.co/block/showcase21 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase21.json"` (Radix: `/r/showcase21.json`) - **Description**: Browser-chrome card pairing a DevTools-style API inspector on the left with a syntax-highlighted code editor on the right — method badge, response body, timing footer. Every label is editable; no media props required. #### Database Query With Code Editor - **URL**: https://ui.beste.co/block/showcase22 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase22.json"` (Radix: `/r/showcase22.json`) - **Description**: Browser-chrome card pairing a typed query result table on the left with a syntax-highlighted code editor on the right — sortable columns, status-toned cells, row count footer. Every label is editable; no media props required. #### Component Preview With Code Editor - **URL**: https://ui.beste.co/block/showcase23 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase23.json"` (Radix: `/r/showcase23.json`) - **Description**: Browser-chrome card pairing a live button-variant preview on the left with a syntax-highlighted code editor on the right — dotted canvas background, size pill toggle. Every label is editable; no media props required. #### Files Changed With Code Editor - **URL**: https://ui.beste.co/block/showcase24 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase24.json"` (Radix: `/r/showcase24.json`) - **Description**: Browser-chrome card pairing a changed-files list on the left with a syntax-highlighted code editor on the right — status icons, +/- stats, and an active row highlight. Every label is editable; no media props required. #### Webhook Deliveries With Code Editor - **URL**: https://ui.beste.co/block/showcase25 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase25.json"` (Radix: `/r/showcase25.json`) - **Description**: Browser-chrome card pairing a webhook delivery log on the left with a syntax-highlighted code editor on the right — color-coded status codes, timing per delivery, retry support. Every label is editable; no media props required. #### Code Editor With Command Palette - **URL**: https://ui.beste.co/block/showcase26 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase26.json"` (Radix: `/r/showcase26.json`) - **Description**: Browser-chrome card layering a Cmd+K command palette over a backdrop-blurred code editor — search input, grouped commands with keyboard shortcuts, and a navigation hint footer. Every label is editable; no media props required. #### Inline Diff Viewer - **URL**: https://ui.beste.co/block/showcase27 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase27.json"` (Radix: `/r/showcase27.json`) - **Description**: Browser-chrome card rendering an inline diff — added lines glow emerald, removed lines fade rose, branch arrow row in the header, and an approve-and-merge footer. Every label is editable; no media props required. #### Markdown Editor With Live Preview - **URL**: https://ui.beste.co/block/showcase28 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase28.json"` (Radix: `/r/showcase28.json`) - **Description**: Browser-chrome card rendering a markdown source editor on the left and the rendered HTML on the right — minimal monochrome syntax markers, structured preview blocks (headings, paragraphs, lists, fenced code). Every label is editable; no media props required. #### AI Workspace With Streaming Response - **URL**: https://ui.beste.co/block/showcase29 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase29.json"` (Radix: `/r/showcase29.json`) - **Description**: Browser-chrome card rendering an AI prompt and a structured response — markdown blocks (headings, paragraphs, lists, quotes, code), citation list, copy/regenerate/apply footer. Every label is editable; no media props required. #### Live Spreadsheet With Formula Bar - **URL**: https://ui.beste.co/block/showcase30 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase30.json"` (Radix: `/r/showcase30.json`) - **Description**: Browser-chrome card rendering a live spreadsheet — formula bar with cell reference, typed columns, status-toned cells, and a selected total cell with outline ring. Every label is editable; no media props required. #### TypeScript Types Plus Usage - **URL**: https://ui.beste.co/block/showcase31 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase31.json"` (Radix: `/r/showcase31.json`) - **Description**: Browser-chrome card pairing two minimal code panes — TypeScript type definitions on the left, real call-site usage on the right. Monochrome syntax with muted comments. Every label is editable; no media props required. #### GraphQL Query Plus Response - **URL**: https://ui.beste.co/block/showcase32 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase32.json"` (Radix: `/r/showcase32.json`) - **Description**: Browser-chrome card pairing two minimal code panes — GraphQL query on the left, mirrored JSON response on the right. Monochrome syntax with muted comments and a timing footer. Every label is editable; no media props required. #### Regex Pattern Tester - **URL**: https://ui.beste.co/block/showcase33 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase33.json"` (Radix: `/r/showcase33.json`) - **Description**: Browser-chrome card hosting a regex playground — pattern + active flag pills up top, test rows with inline match highlights and capture column, summary footer. Every label is editable; no media props required. #### Polyglot Code Comparison - **URL**: https://ui.beste.co/block/showcase34 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase34.json"` (Radix: `/r/showcase34.json`) - **Description**: Browser-chrome card pairing two minimal code panes — same logic in two languages (TypeScript and Python by default). Monochrome syntax with muted comments and language badges. Every label is editable; no media props required. #### Migration Before And After - **URL**: https://ui.beste.co/block/showcase35 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase35.json"` (Radix: `/r/showcase35.json`) - **Description**: Browser-chrome card pairing a before/after code migration — eyebrow + title + description above each pane, monochrome syntax, and an apply-migration footer with diff summary. Every label is editable; no media props required. #### Annotated Showcase - **URL**: https://ui.beste.co/block/showcase36 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase36.json"` (Radix: `/r/showcase36.json`) - **Description**: Browser-framed product screenshot with surrounding feature callouts. #### Showcase Scroller - **URL**: https://ui.beste.co/block/showcase37 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase37.json"` (Radix: `/r/showcase37.json`) - **Description**: Horizontally scrollable row of wide product showcase frames with captions. #### Sticky Showcase - **URL**: https://ui.beste.co/block/showcase38 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase38.json"` (Radix: `/r/showcase38.json`) - **Description**: A pinned product image beside a scrolling list of feature steps. #### Tabbed Showcase - **URL**: https://ui.beste.co/block/showcase39 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase39.json"` (Radix: `/r/showcase39.json`) - **Description**: Tabbed product screenshots in a browser frame with captions. #### UI Bento Showcase - **URL**: https://ui.beste.co/block/showcase40 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase40.json"` (Radix: `/r/showcase40.json`) - **Description**: Bento mosaic mixing product screenshots with text and accent tiles. #### Editorial Project Index - **URL**: https://ui.beste.co/block/showcase41 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase41.json"` (Radix: `/r/showcase41.json`) - **Description**: A ruled, type-forward project index where each row reveals a floating thumbnail on hover. #### Mosaic Frame Gallery - **URL**: https://ui.beste.co/block/showcase42 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase42.json"` (Radix: `/r/showcase42.json`) - **Description**: An asymmetric mosaic image gallery with mixed-span tiles and monospace frame captions. #### Featured Project Dossier - **URL**: https://ui.beste.co/block/showcase43 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase43.json"` (Radix: `/r/showcase43.json`) - **Description**: A single featured project with a tall image and a meta column of client/role/year rows, a paragraph, and a CTA. #### Brand Partner Grid - **URL**: https://ui.beste.co/block/showcase44 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase44.json"` (Radix: `/r/showcase44.json`) - **Description**: Centered eyebrow, heading, and description above a grid of borderless brand cards — each with a square, colorable logo plate, a title and short description, and a full-width animated seal detail button. #### Alternating Asset Rows - **URL**: https://ui.beste.co/block/showcase45 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase45.json"` (Radix: `/r/showcase45.json`) - **Description**: A showcase of alternating split rows, each pairing an image tile that floats a live product micro-asset with an eyebrow, a light heading, a paragraph, and a checked bullet list. #### Tabbed Product Tour - **URL**: https://ui.beste.co/block/showcase46 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase46.json"` (Radix: `/r/showcase46.json`) - **Description**: A tabbed showcase with an eyebrow over a hairline rule and a two-column heading, where each tab reveals a light title, checked bullets, and an image tile floating a live product micro-asset. #### Layered Product Scene - **URL**: https://ui.beste.co/block/showcase47 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase47.json"` (Radix: `/r/showcase47.json`) - **Description**: A split showcase pairing copy, checked bullets, and an accent button with a gradient canvas where two live micro-assets float at staggered depths for a layered product scene. #### Connected Flow Pipeline - **URL**: https://ui.beste.co/block/showcase48 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase48.json"` (Radix: `/r/showcase48.json`) - **Description**: A horizontal pipeline with an eyebrow over a hairline rule and a two-column heading, where three image tiles float live micro-assets as connected stages joined by directional arrows. #### Quick Actions Showcase - **URL**: https://ui.beste.co/block/showcase49 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/showcase49.json"` (Radix: `/r/showcase49.json`) - **Description**: A centered showcase with an eyebrow, light heading, and paragraph over a wide image tile that floats a live quick-actions bar, followed by a four-up grid of icon-led action descriptions. ### Social #### Profile Card with Cover - **URL**: https://ui.beste.co/block/social1 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/social1.json"` (Radix: `/r/social1.json`) - **Description**: User profile card with cover photo, avatar, bio, location, website, followers/following stats, and follow button. Perfect for user profile headers on social platforms. #### Social Post Card - **URL**: https://ui.beste.co/block/social2 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/social2.json"` (Radix: `/r/social2.json`) - **Description**: Social media post with author info, text content, image, and interactive like/comment/share/bookmark buttons with counts. Perfect for feed-style content displays. #### Threaded Comments - **URL**: https://ui.beste.co/block/social3 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/social3.json"` (Radix: `/r/social3.json`) - **Description**: Comment section with nested replies, like counts, reply functionality, and expandable threads. Perfect for blog posts, articles, or discussion forums. #### Notification Feed - **URL**: https://ui.beste.co/block/social4 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/social4.json"` (Radix: `/r/social4.json`) - **Description**: Notification list with activity types (likes, comments, follows, mentions), unread indicators, and mark-as-read actions. Perfect for notification center dropdowns or pages. #### Activity Timeline - **URL**: https://ui.beste.co/block/social5 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/social5.json"` (Radix: `/r/social5.json`) - **Description**: Vertical timeline showing posts, photos, comments, follows, shares, and videos with color-coded icons. Perfect for activity feeds and user history pages. #### Chat Conversation - **URL**: https://ui.beste.co/block/social6 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/social6.json"` (Radix: `/r/social6.json`) - **Description**: Real-time chat interface with message bubbles, online status, read receipts, emoji picker, and file attachments. Perfect for messaging apps and customer support chats. #### Community Groups List - **URL**: https://ui.beste.co/block/social7 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/social7.json"` (Radix: `/r/social7.json`) - **Description**: Group cards with cover images, member count, privacy indicators, category badges, and join buttons. Perfect for community discovery and group listings. #### Event Cards - **URL**: https://ui.beste.co/block/social8 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/social8.json"` (Radix: `/r/social8.json`) - **Description**: Event listings with cover images, date/time, location, attendee previews, and RSVP buttons (Going/Interested). Perfect for event discovery and community calendars. #### Follow Suggestions - **URL**: https://ui.beste.co/block/social9 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/social9.json"` (Radix: `/r/social9.json`) - **Description**: User suggestions list with avatars, bios, mutual connections, interest tags, and follow/dismiss actions. Perfect for people-you-may-know sections and onboarding flows. #### Messages Inbox - **URL**: https://ui.beste.co/block/social10 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/social10.json"` (Radix: `/r/social10.json`) - **Description**: Conversation list with avatars, online status indicators, message previews, timestamps, unread badges, and search. Perfect for messaging app inboxes. #### Trending Topics - **URL**: https://ui.beste.co/block/social11 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/social11.json"` (Radix: `/r/social11.json`) - **Description**: Ranked trending topics list with hashtags, post counts, growth percentages, and category badges. Perfect for sidebar widgets showing what is trending. #### Stories Carousel - **URL**: https://ui.beste.co/block/social12 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/social12.json"` (Radix: `/r/social12.json`) - **Description**: Horizontal scrolling stories bar with gradient ring indicators for unread stories and add-your-own button. Perfect for Instagram-style ephemeral content. #### Interactive Poll - **URL**: https://ui.beste.co/block/social13 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/social13.json"` (Radix: `/r/social13.json`) - **Description**: Poll card with multiple choice options that reveal percentage results after voting, plus vote count and expiration timer. Perfect for engagement and community feedback. #### Emoji Reactions - **URL**: https://ui.beste.co/block/social15 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/social15.json"` (Radix: `/r/social15.json`) - **Description**: Emoji reaction picker with hover tooltips, selection highlighting, and reaction counts per emoji type. Perfect for adding reactions to posts and comments. #### Saved Bookmarks - **URL**: https://ui.beste.co/block/social20 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/social20.json"` (Radix: `/r/social20.json`) - **Description**: Bookmarked articles list with thumbnails, titles, descriptions, source info, and remove actions. Perfect for reading lists and saved content collections. #### Team Presence List - **URL**: https://ui.beste.co/block/social23 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/social23.json"` (Radix: `/r/social23.json`) - **Description**: Team members grouped by status (online, away, busy, offline) with colored indicators and status messages. Perfect for workspace sidebars showing who is available. #### Link Preview Cards - **URL**: https://ui.beste.co/block/social24 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/social24.json"` (Radix: `/r/social24.json`) - **Description**: Rich link previews showing Open Graph images, titles, descriptions, and site favicons. Perfect for displaying shared URLs in feeds and messages. #### Referral Invite Card - **URL**: https://ui.beste.co/block/social26 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/social26.json"` (Radix: `/r/social26.json`) - **Description**: Referral sharing card with copyable link, referral code, email invite input, and reward information. Perfect for referral programs and invite-a-friend features. #### Leaderboard Rankings - **URL**: https://ui.beste.co/block/social27 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/social27.json"` (Radix: `/r/social27.json`) - **Description**: Ranked leaderboard with crown/medal icons, user avatars, scores, and position change indicators (up/down). Perfect for gamification and competitive features. #### Compact Profile Header - **URL**: https://ui.beste.co/block/social32 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/social32.json"` (Radix: `/r/social32.json`) - **Description**: Compact profile card with cover image, avatar, verified badge, bio, location, website, join date, and post/follower stats. Perfect for profile page headers. #### Community Card - **URL**: https://ui.beste.co/block/social46 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/social46.json"` (Radix: `/r/social46.json`) - **Description**: Community group card with cover image, privacy status, member/post counts, topic tags, and join button. Perfect for community discovery and group suggestions. #### Wall Of Love - **URL**: https://ui.beste.co/block/social47 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/social47.json"` (Radix: `/r/social47.json`) - **Description**: A social proof wall with an eyebrow over a hairline rule, a two-column heading, and a masonry of bordered quote cards each with a name and handle. #### Community Channels - **URL**: https://ui.beste.co/block/social48 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/social48.json"` (Radix: `/r/social48.json`) - **Description**: A community section listing four linked places to join as full-width hairline rows, each with an icon tile, a description, a light membership figure, and an arrow that shifts on hover. #### Social Post Grid - **URL**: https://ui.beste.co/block/social49 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/social49.json"` (Radix: `/r/social49.json`) - **Description**: A social proof grid of six linked post cards, each with an avatar, handle, timestamp, the post itself, and reply, repost, and like counts under a hairline. #### Featured Post And Replies - **URL**: https://ui.beste.co/block/social50 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/social50.json"` (Radix: `/r/social50.json`) - **Description**: A social section that gives one post an image tile of its own, floating a live post card with its engagement counts, beside the replies it drew as linked hairline rows. #### Press Mentions - **URL**: https://ui.beste.co/block/social51 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/social51.json"` (Radix: `/r/social51.json`) - **Description**: A coverage section listing each outlet against the line it published, as linked hairline rows with the writer and date, closing on a soft press pack panel. #### Community Sessions - **URL**: https://ui.beste.co/block/social52 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/social52.json"` (Radix: `/r/social52.json`) - **Description**: An upcoming sessions list with a date block, format, and remaining seats on each linked hairline row, beside a column that sticks and floats a live card for whoever is hosting next. #### Contributor Wall - **URL**: https://ui.beste.co/block/social53 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/social53.json"` (Radix: `/r/social53.json`) - **Description**: A community credit section opening on three hairline figures, then naming each contributor in a hairline matrix of cards with their practice, what they changed, and how many reports they filed. #### Inverted Follow Panel - **URL**: https://ui.beste.co/block/social54 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/social54.json"` (Radix: `/r/social54.json`) - **Description**: A follow section held in one dark panel, listing each account as a linked hairline row with what gets posted there and a light follower figure. #### Community By The Numbers - **URL**: https://ui.beste.co/block/social55 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/social55.json"` (Radix: `/r/social55.json`) - **Description**: A community section on a soft surface with four bordered figure cards, each explaining what the number counts, over an image tile that floats a live cluster of member portraits. #### Referral Programme - **URL**: https://ui.beste.co/block/social56 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/social56.json"` (Radix: `/r/social56.json`) - **Description**: A referral section walking through three numbered steps and the full terms as a hairline table, beside a column that sticks and floats a live credit card on an image tile. #### Community Photo Wall - **URL**: https://ui.beste.co/block/social57 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/social57.json"` (Radix: `/r/social57.json`) - **Description**: A community gallery laid out as a masonry of customer photographs at mixed heights, each captioned with what is happening and the practice it came from. ### Stats #### Right-Aligned Stats Cards - **URL**: https://ui.beste.co/block/stats1 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats1.json"` (Radix: `/r/stats1.json`) - **Description**: Right-aligned layout with heading, description, and a 2x2 grid of stat cards. Perfect for showcasing key metrics alongside content. #### Icon Stats with Animated Counter - **URL**: https://ui.beste.co/block/stats2 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats2.json"` (Radix: `/r/stats2.json`) - **Description**: Centered stats grid with icons and animated counters that trigger on scroll. Ideal for showcasing achievements and key metrics. #### Centered Stats with Badge and Icons - **URL**: https://ui.beste.co/block/stats3 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats3.json"` (Radix: `/r/stats3.json`) - **Description**: Full-width centered stats section with badge, heading, description, and a dynamic grid of icon stats with animated counters. Adapts grid columns based on stat count. #### Stats Cards with Descriptions - **URL**: https://ui.beste.co/block/stats4 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats4.json"` (Radix: `/r/stats4.json`) - **Description**: Centered header with badge, heading, and description followed by horizontal stat cards. Each card shows a title, large value, and detailed description. #### Split Layout Stats - **URL**: https://ui.beste.co/block/stats5 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats5.json"` (Radix: `/r/stats5.json`) - **Description**: Two-column layout with heading and description on the left, 2x2 stats grid on the right. Perfect for pairing narrative with key metrics. #### Inline Stats Strip - **URL**: https://ui.beste.co/block/stats6 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats6.json"` (Radix: `/r/stats6.json`) - **Description**: Compact horizontal row of stats separated by vertical dividers. Minimal design ideal for use between other sections. #### Accent Border Stats Cards - **URL**: https://ui.beste.co/block/stats7 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats7.json"` (Radix: `/r/stats7.json`) - **Description**: Stats cards with a colored top border accent, icon, value, label, and description. Great for highlighting platform capabilities. #### Full-Width Stats Banner - **URL**: https://ui.beste.co/block/stats8 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats8.json"` (Radix: `/r/stats8.json`) - **Description**: Full-width muted background band with a centered heading and large stat numbers separated by vertical borders. Eye-catching social proof section. #### Image with Stacked Stats - **URL**: https://ui.beste.co/block/stats9 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats9.json"` (Radix: `/r/stats9.json`) - **Description**: Split layout with a tall image on the left and vertically stacked stats with descriptions on the right, separated by horizontal borders. #### Scrolling Stats Marquee - **URL**: https://ui.beste.co/block/stats10 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats10.json"` (Radix: `/r/stats10.json`) - **Description**: Infinite horizontal scrolling ticker of stats that pauses on hover. Eye-catching social proof strip for between sections. #### Ring Progress Stats - **URL**: https://ui.beste.co/block/stats11 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats11.json"` (Radix: `/r/stats11.json`) - **Description**: Stats displayed inside circular SVG progress rings with animated counters. Great for visualizing percentages and performance metrics. #### Spotlight Stat with Supporting Metrics - **URL**: https://ui.beste.co/block/stats12 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats12.json"` (Radix: `/r/stats12.json`) - **Description**: One hero-sized featured stat with a row of smaller supporting metrics below. Perfect for emphasizing a single key achievement. #### Floating Stats over Image - **URL**: https://ui.beste.co/block/stats13 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats13.json"` (Radix: `/r/stats13.json`) - **Description**: Stat cards that float over a wide background image, overlapping the bottom edge. Creates a dynamic layered visual effect. #### Trend Indicator Stats - **URL**: https://ui.beste.co/block/stats14 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats14.json"` (Radix: `/r/stats14.json`) - **Description**: Dashboard-style stat cards with colored trend badges showing up, down, or neutral changes. Perfect for quarterly reports and growth metrics. #### Bento Grid Stats - **URL**: https://ui.beste.co/block/stats15 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats15.json"` (Radix: `/r/stats15.json`) - **Description**: Asymmetric bento-style grid with mixed single and double-width stat cards. Ideal for year-in-review and annual report sections. #### Video Background Stats - **URL**: https://ui.beste.co/block/stats16 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats16.json"` (Radix: `/r/stats16.json`) - **Description**: Full-width video background with dark overlay and translucent glassmorphism stat cards. Immersive hero-style stats section. #### Zigzag Image Stats - **URL**: https://ui.beste.co/block/stats17 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats17.json"` (Radix: `/r/stats17.json`) - **Description**: Alternating rows of images and stats that swap sides. Each row pairs a photo with key metrics and descriptions. #### Image Card Stats - **URL**: https://ui.beste.co/block/stats18 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats18.json"` (Radix: `/r/stats18.json`) - **Description**: Tall image cards with gradient overlay and stats at the bottom. Each stat has its own background photo with a subtle hover zoom. #### Glass Bar over Image - **URL**: https://ui.beste.co/block/stats19 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats19.json"` (Radix: `/r/stats19.json`) - **Description**: Wide image with a frosted glass stats bar anchored to the bottom. Stats are separated by vertical dividers inside the blur overlay. #### Browser Mockup with Stats - **URL**: https://ui.beste.co/block/stats20 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats20.json"` (Radix: `/r/stats20.json`) - **Description**: Split layout with stacked stats on the left and a browser window mockup displaying a screenshot on the right. #### Spring Entrance Stats - **URL**: https://ui.beste.co/block/stats21 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats21.json"` (Radix: `/r/stats21.json`) - **Description**: Stats cards that spring up with staggered delay when scrolled into view. Uses framer-motion spring physics for a natural feel. #### Odometer Flip Stats - **URL**: https://ui.beste.co/block/stats22 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats22.json"` (Radix: `/r/stats22.json`) - **Description**: Airport departure board-style odometer animation where each digit flips individually with spring physics as numbers count up on scroll. #### Animated Bar Chart Stats - **URL**: https://ui.beste.co/block/stats23 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats23.json"` (Radix: `/r/stats23.json`) - **Description**: Horizontal progress bars that grow with spring animation on scroll. Each bar shows a label, value, and percentage fill. #### Clip-Path Reveal Stats - **URL**: https://ui.beste.co/block/stats24 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats24.json"` (Radix: `/r/stats24.json`) - **Description**: Large stats that reveal with a horizontal clip-path curtain animation and spring-powered number entrance. Elegant and cinematic. #### 3D Card Flip Stats - **URL**: https://ui.beste.co/block/stats25 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats25.json"` (Radix: `/r/stats25.json`) - **Description**: Stat cards that flip in from a back-facing 3D rotation using framer-motion spring physics with staggered timing and perspective depth. #### Card Stack Fan-Out Stats - **URL**: https://ui.beste.co/block/stats26 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats26.json"` (Radix: `/r/stats26.json`) - **Description**: Stat cards that start stacked on top of each other and fan out into a grid on scroll using framer-motion spring physics and staggered delays. #### Editorial Numbered Stats - **URL**: https://ui.beste.co/block/stats27 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats27.json"` (Radix: `/r/stats27.json`) - **Description**: Magazine-style numbered list layout with large sequence numbers, stat values, and a sticky sidebar heading for an editorial feel. #### Timeline Milestone Stats - **URL**: https://ui.beste.co/block/stats28 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats28.json"` (Radix: `/r/stats28.json`) - **Description**: Horizontal timeline with year markers and key metrics at each milestone, ideal for showing company growth and history. #### Tabbed Category Stats - **URL**: https://ui.beste.co/block/stats29 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats29.json"` (Radix: `/r/stats29.json`) - **Description**: Stats organized into switchable tabs by category using shadcn Tabs, letting users explore different metric groups. #### Testimonial + Stats - **URL**: https://ui.beste.co/block/stats30 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats30.json"` (Radix: `/r/stats30.json`) - **Description**: A featured customer quote paired with supporting metrics for maximum social proof and credibility. #### Sparkline Dashboard Stats - **URL**: https://ui.beste.co/block/stats31 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats31.json"` (Radix: `/r/stats31.json`) - **Description**: Mini dashboard cards with SVG sparkline trend charts, change indicators, and key metrics for a data-rich stats section. #### Giant Watermark Stats - **URL**: https://ui.beste.co/block/stats32 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats32.json"` (Radix: `/r/stats32.json`) - **Description**: Editorial magazine-style layout with oversized translucent numbers as background watermarks behind each stat row. #### Alternating Giant Typography Stats - **URL**: https://ui.beste.co/block/stats33 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats33.json"` (Radix: `/r/stats33.json`) - **Description**: Editorial layout with oversized bold stat values alternating left and right alignment, creating a dynamic typographic rhythm. #### Terminal Output Stats - **URL**: https://ui.beste.co/block/stats34 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats34.json"` (Radix: `/r/stats34.json`) - **Description**: Developer-focused terminal aesthetic with monospace font, command prompt, and stats displayed as CLI output with a blinking cursor. #### Orbit Layout Stats - **URL**: https://ui.beste.co/block/stats35 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats35.json"` (Radix: `/r/stats35.json`) - **Description**: Central hero metric surrounded by satellite stats in a circular orbit arrangement on desktop, with a linear stack on mobile. #### JSON API Response Stats - **URL**: https://ui.beste.co/block/stats36 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats36.json"` (Radix: `/r/stats36.json`) - **Description**: Stats displayed as a syntax-highlighted JSON API response inside a code block with endpoint URL header and colored tokens. #### Git Log Stats - **URL**: https://ui.beste.co/block/stats37 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats37.json"` (Radix: `/r/stats37.json`) - **Description**: Stats styled as a git commit log with commit hashes, timestamps, branch visualization lines, and metric values as commit messages. #### Server Monitoring Stats - **URL**: https://ui.beste.co/block/stats38 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats38.json"` (Radix: `/r/stats38.json`) - **Description**: Monitoring dashboard aesthetic with status indicators, metric rows, live status badges, and a dark panel background. #### E-Commerce Revenue Dashboard - **URL**: https://ui.beste.co/block/stats39 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats39.json"` (Radix: `/r/stats39.json`) - **Description**: Key e-commerce KPI cards showing revenue, orders, average order value, and conversion rate with period comparison badges. #### Product Showcase Stats - **URL**: https://ui.beste.co/block/stats40 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats40.json"` (Radix: `/r/stats40.json`) - **Description**: Bestseller product cards with images, star ratings, units sold, and revenue figures for e-commerce social proof. #### Live Social Proof Stats - **URL**: https://ui.beste.co/block/stats41 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats41.json"` (Radix: `/r/stats41.json`) - **Description**: Real-time social proof section with live activity indicators, recent order count, review scores, and urgency-building metrics for e-commerce. #### Review Distribution Stats - **URL**: https://ui.beste.co/block/stats42 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats42.json"` (Radix: `/r/stats42.json`) - **Description**: Star rating breakdown with horizontal progress bars for each rating level, overall score, and total review count like Amazon or App Store. #### Shipping Performance Stats - **URL**: https://ui.beste.co/block/stats43 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats43.json"` (Radix: `/r/stats43.json`) - **Description**: Delivery and shipping metrics with icon cards showing average delivery time, on-time rate, and coverage for e-commerce trust building. #### Sales Milestone Stats - **URL**: https://ui.beste.co/block/stats44 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats44.json"` (Radix: `/r/stats44.json`) - **Description**: Celebration-style milestone section with a prominent central metric and supporting stats, perfect for announcing sales achievements. #### Category Performance Stats - **URL**: https://ui.beste.co/block/stats45 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats45.json"` (Radix: `/r/stats45.json`) - **Description**: Product category cards with images and sales metrics showing units sold and growth percentage for each category. #### Trust Badge Stats - **URL**: https://ui.beste.co/block/stats46 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats46.json"` (Radix: `/r/stats46.json`) - **Description**: E-commerce trust signals with large icons and supporting stats for security, returns, shipping, and support guarantees. #### Weekly Market Snapshot - **URL**: https://ui.beste.co/block/stats47 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats47.json"` (Radix: `/r/stats47.json`) - **Description**: Weekly real estate market activity grid with key metrics, change indicators, and trend badges in a bordered card layout. #### Real Estate Market Overview - **URL**: https://ui.beste.co/block/stats48 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats48.json"` (Radix: `/r/stats48.json`) - **Description**: Local market dashboard showing median home price, days on market, inventory, and year-over-year changes for real estate. #### Agent Profile Stats - **URL**: https://ui.beste.co/block/stats49 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats49.json"` (Radix: `/r/stats49.json`) - **Description**: Real estate agent profile card with photo, performance metrics, and client rating for agent landing pages. #### Neighborhood Report Card - **URL**: https://ui.beste.co/block/stats50 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats50.json"` (Radix: `/r/stats50.json`) - **Description**: Neighborhood livability report card with letter grades, progress bars, and descriptions for walkability, schools, transit, and safety. #### Investment ROI Stats - **URL**: https://ui.beste.co/block/stats51 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats51.json"` (Radix: `/r/stats51.json`) - **Description**: Property investment metrics in a clean table layout showing cap rate, cash-on-cash return, rental yield, and appreciation. #### Mortgage Breakdown Stats - **URL**: https://ui.beste.co/block/stats52 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats52.json"` (Radix: `/r/stats52.json`) - **Description**: Monthly mortgage payment breakdown with visual proportion bars showing principal, interest, taxes, and insurance. #### Home Valuation Estimate - **URL**: https://ui.beste.co/block/stats53 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats53.json"` (Radix: `/r/stats53.json`) - **Description**: Home value estimate card with price range indicator, estimated value, and comparable recent sales data. #### Portfolio Overview Stats - **URL**: https://ui.beste.co/block/stats54 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats54.json"` (Radix: `/r/stats54.json`) - **Description**: Real estate portfolio dashboard with total value, monthly income, occupancy rate, and property count for investors. #### Listing to Sold Journey - **URL**: https://ui.beste.co/block/stats55 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats55.json"` (Radix: `/r/stats55.json`) - **Description**: Step-by-step journey from listing to closing with key metrics at each stage, showing the real estate sales process. #### Market Trend Stats - **URL**: https://ui.beste.co/block/stats56 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats56.json"` (Radix: `/r/stats56.json`) - **Description**: Real estate market trend indicators with directional arrows and year-over-year comparisons for key housing metrics. #### Stats Band - **URL**: https://ui.beste.co/block/stats57 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats57.json"` (Radix: `/r/stats57.json`) - **Description**: Four-up oversized stats band with dividers under a section header. #### Stat Cards - **URL**: https://ui.beste.co/block/stats58 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats58.json"` (Radix: `/r/stats58.json`) - **Description**: Stat cards with accent highlight, icon chips and big numbers. #### Image Stats Split - **URL**: https://ui.beste.co/block/stats59 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats59.json"` (Radix: `/r/stats59.json`) - **Description**: A tall image beside a headline and a grid of key studio stats. #### Stat Ribbon - **URL**: https://ui.beste.co/block/stats60 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats60.json"` (Radix: `/r/stats60.json`) - **Description**: Horizontal icon stat ribbon on a muted surface. #### Typographic Stats - **URL**: https://ui.beste.co/block/stats61 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats61.json"` (Radix: `/r/stats61.json`) - **Description**: Oversized number rows with labels and context, editorial style. #### Video With Stat Cards - **URL**: https://ui.beste.co/block/stats62 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats62.json"` (Radix: `/r/stats62.json`) - **Description**: Centered header above a wide video thumbnail with a play overlay, followed by a row of three stat cards with optional star ratings. #### Result Cards With Lead - **URL**: https://ui.beste.co/block/stats63 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats63.json"` (Radix: `/r/stats63.json`) - **Description**: An eyebrow and large heading paired with a dark CTA on one row, above three tall stat cards that each combine an oversized figure, an inline label, a divider, and a supporting description. #### Decade Tally Band - **URL**: https://ui.beste.co/block/stats64 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats64.json"` (Radix: `/r/stats64.json`) - **Description**: An oversized monochrome stat band with rule-divided figures and editorial labels beneath each. #### Asymmetric Lead Stat - **URL**: https://ui.beste.co/block/stats65 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats65.json"` (Radix: `/r/stats65.json`) - **Description**: One oversized lead figure paired with a ruled, right-aligned stack of supporting stats split by a vertical rule. #### Outcome Metric Rows - **URL**: https://ui.beste.co/block/stats66 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats66.json"` (Radix: `/r/stats66.json`) - **Description**: A results section that stacks each metric on its own hairline row, pairing an oversized figure with a short label, a sentence of context, and an optional year-over-year delta. #### Before And After Pairs - **URL**: https://ui.beste.co/block/stats67 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats67.json"` (Radix: `/r/stats67.json`) - **Description**: A results section stacking each measure on its own hairline row, moving a muted starting figure to an accented result across an arrow, with a soft closing panel that floats a live comparison card. #### Segmented Total Breakdown - **URL**: https://ui.beste.co/block/stats68 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats68.json"` (Radix: `/r/stats68.json`) - **Description**: A results section that leads on one oversized total, splits it across a segmented accent bar, then legends each segment on a hairline row aligning its value, share, and what it covers. #### Quarterly Metric Matrix - **URL**: https://ui.beste.co/block/stats69 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats69.json"` (Radix: `/r/stats69.json`) - **Description**: A quarterly results matrix of hairline cells, each pairing a light figure with a signed change tinted by whether the movement is good or bad rather than by its direction, over a line of context. #### Annual Report Readings - **URL**: https://ui.beste.co/block/stats70 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats70.json"` (Radix: `/r/stats70.json`) - **Description**: An annual results section pairing an image tile that floats a live breakdown chart with a light interpretation of it, then four hairline readings that each name their own source, closing on a method panel. #### Single Headline Figure - **URL**: https://ui.beste.co/block/stats71 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats71.json"` (Radix: `/r/stats71.json`) - **Description**: A results section that commits to one enormous light figure, reads it back as a statement under a hairline, qualifies it with three smaller footnotes, and closes on a captioned full-bleed photograph. #### Cohort Retention Grid - **URL**: https://ui.beste.co/block/stats72 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats72.json"` (Radix: `/r/stats72.json`) - **Description**: A retention table that follows each joining cohort across its first year, tinting every cell by how high the figure is and dashing the months that have not happened yet. #### Benchmark Comparison Bars - **URL**: https://ui.beste.co/block/stats73 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats73.json"` (Radix: `/r/stats73.json`) - **Description**: A benchmarking section that pairs an accent bar for the platform median against a muted bar for the sector median on every metric, with a legend above and a sourcing note below. #### Inverted Live Counters - **URL**: https://ui.beste.co/block/stats74 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/stats74.json"` (Radix: `/r/stats74.json`) - **Description**: A live platform panel on one dark surface, with four light figures on a hairline rule and a floating trend card reading the month week by week. ### Terminal #### CLI Installation Typewriter - **URL**: https://ui.beste.co/block/terminal1 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/terminal1.json"` (Radix: `/r/terminal1.json`) - **Description**: Animated terminal that types commands character-by-character with output responses. Perfect for showcasing CLI installation steps or quick-start guides. #### Code Snippet with Marketing Split - **URL**: https://ui.beste.co/block/terminal2 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/terminal2.json"` (Radix: `/r/terminal2.json`) - **Description**: Two-column layout with marketing content and a static code snippet display with copy functionality. Perfect for developer tool landing pages or CLI documentation sections. #### One Command Install - **URL**: https://ui.beste.co/block/terminal3 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/terminal3.json"` (Radix: `/r/terminal3.json`) - **Description**: A centered install section with an eyebrow, light heading, paragraph, a row of package-manager tabs, and an image tile that floats a live terminal command card. ### Testimonial #### Carousel Testimonials - **URL**: https://ui.beste.co/block/testimonial1 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/testimonial1.json"` (Radix: `/r/testimonial1.json`) - **Description**: Full-width swipeable testimonial carousel with autoplay and dot navigation. Perfect for highlighting multiple customer quotes on landing pages. #### Centered Quote - **URL**: https://ui.beste.co/block/testimonial6 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/testimonial6.json"` (Radix: `/r/testimonial6.json`) - **Description**: Minimalist single testimonial with centered quote and author details. Perfect for hero sections or standalone social proof elements. #### Quote Cards Grid - **URL**: https://ui.beste.co/block/testimonial8 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/testimonial8.json"` (Radix: `/r/testimonial8.json`) - **Description**: Grid of testimonial cards with decorative quote marks and HTML-supported text highlighting. Perfect for showcasing multiple customer reviews with emphasis on key phrases. #### Split Image Testimonial - **URL**: https://ui.beste.co/block/testimonial11 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/testimonial11.json"` (Radix: `/r/testimonial11.json`) - **Description**: Two-column layout with large image, star rating, and bordered author section. Perfect for featuring executive testimonials or detailed case study quotes. #### Video Testimonials - **URL**: https://ui.beste.co/block/testimonial12 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/testimonial12.json"` (Radix: `/r/testimonial12.json`) - **Description**: Video testimonial cards with thumbnail previews, play buttons, and modal player. Perfect for customer success stories or product review videos. #### Stats and Quote - **URL**: https://ui.beste.co/block/testimonial14 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/testimonial14.json"` (Radix: `/r/testimonial14.json`) - **Description**: Key statistics row followed by a centered testimonial quote with author avatar. Perfect for combining social proof metrics with executive endorsements. #### Logo Cloud with Quote - **URL**: https://ui.beste.co/block/testimonial15 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/testimonial15.json"` (Radix: `/r/testimonial15.json`) - **Description**: Company logo cloud combined with a featured testimonial card below. Perfect for showcasing trusted brands alongside customer endorsements. #### Gradient Testimonial with CTA - **URL**: https://ui.beste.co/block/testimonial16 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/testimonial16.json"` (Radix: `/r/testimonial16.json`) - **Description**: Eye-catching testimonial with gradient background, decorative orb effect, and call-to-action button. Perfect for conversion-focused sections with highlighted quotes. #### Before/After Comparison - **URL**: https://ui.beste.co/block/testimonial18 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/testimonial18.json"` (Radix: `/r/testimonial18.json`) - **Description**: Side-by-side before/after comparison lists with a testimonial quote below. Perfect for demonstrating transformation results or product impact stories. #### Case Study Card - **URL**: https://ui.beste.co/block/testimonial19 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/testimonial19.json"` (Radix: `/r/testimonial19.json`) - **Description**: Case study testimonial card with company logo, key metrics, and CTA button. Perfect for showcasing detailed customer success stories with measurable results. #### Tagged Testimonials Grid - **URL**: https://ui.beste.co/block/testimonial23 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/testimonial23.json"` (Radix: `/r/testimonial23.json`) - **Description**: Grid of testimonial cards with category tags like Performance, Support, or Pricing. Perfect for organizing customer feedback by feature or benefit type. #### Testimonial Carousel - **URL**: https://ui.beste.co/block/testimonial25 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/testimonial25.json"` (Radix: `/r/testimonial25.json`) - **Description**: Horizontally scrollable testimonial cards with full-bleed portraits, overlaid quote and author. #### Quote Wall - **URL**: https://ui.beste.co/block/testimonial26 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/testimonial26.json"` (Radix: `/r/testimonial26.json`) - **Description**: Masonry column wall of varied-length testimonial cards with avatars. #### Spotlight Quote - **URL**: https://ui.beste.co/block/testimonial27 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/testimonial27.json"` (Radix: `/r/testimonial27.json`) - **Description**: Single large spotlight testimonial with author block and prev/next navigation. #### Marquee Quotes - **URL**: https://ui.beste.co/block/testimonial28 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/testimonial28.json"` (Radix: `/r/testimonial28.json`) - **Description**: Two opposing auto-scrolling marquee rows of testimonial cards. #### Sticky Quote List - **URL**: https://ui.beste.co/block/testimonial29 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/testimonial29.json"` (Radix: `/r/testimonial29.json`) - **Description**: Sticky featured testimonial and rating beside a scrollable list of quote cards. #### Rated Reviews - **URL**: https://ui.beste.co/block/testimonial30 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/testimonial30.json"` (Radix: `/r/testimonial30.json`) - **Description**: Centered grid of star-rated testimonial cards with avatars. #### Stats With Testimonial Gallery - **URL**: https://ui.beste.co/block/testimonial31 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/testimonial31.json"` (Radix: `/r/testimonial31.json`) - **Description**: Centered header above a stats rail beside an expanding portrait gallery — hovering a person widens their frame and reveals their quote while the others contract. #### Scrolling Testimonial Wall - **URL**: https://ui.beste.co/block/testimonial32 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/testimonial32.json"` (Radix: `/r/testimonial32.json`) - **Description**: Centered header above three vertically auto-scrolling columns of rated review cards with fade masks, pause-on-hover, and a closing CTA. #### Split Quote Card - **URL**: https://ui.beste.co/block/testimonial33 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/testimonial33.json"` (Radix: `/r/testimonial33.json`) - **Description**: Centered parenthetical eyebrow and bold heading above a split card: a full-bleed portrait on the left and a large quote with author attribution on a muted panel to the right. #### Testimonial Marquee - **URL**: https://ui.beste.co/block/testimonial34 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/testimonial34.json"` (Radix: `/r/testimonial34.json`) - **Description**: Two rows of monochrome quote cards scrolling in opposite directions with edge fades. #### Oversized Pull-Quote Testimonial - **URL**: https://ui.beste.co/block/testimonial35 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/testimonial35.json"` (Radix: `/r/testimonial35.json`) - **Description**: A single dramatic pull-quote with a decorative mark, centered above a rounded avatar, name, and role. #### Masonry Quote Wall - **URL**: https://ui.beste.co/block/testimonial36 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/testimonial36.json"` (Radix: `/r/testimonial36.json`) - **Description**: A monochrome masonry wall of varying-height testimonial cards in a CSS columns layout. #### Editorial Quote Proof - **URL**: https://ui.beste.co/block/testimonial41 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/testimonial41.json"` (Radix: `/r/testimonial41.json`) - **Description**: An editorial testimonial with an eyebrow, a large light quote and author on the left, an image tile floating a proof stat on the right, and a centered trust cluster below a hairline rule. #### Three Quote Grid - **URL**: https://ui.beste.co/block/testimonial42 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/testimonial42.json"` (Radix: `/r/testimonial42.json`) - **Description**: A testimonial grid with an eyebrow over a hairline rule, a two-column heading, and three bordered quote cards each closing with an author avatar, name, and role. #### Quote With Rating - **URL**: https://ui.beste.co/block/testimonial43 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/testimonial43.json"` (Radix: `/r/testimonial43.json`) - **Description**: A testimonial with an eyebrow over a hairline rule, pairing a large light quote and author on the left with an image tile that floats a live star-rating card on the right. #### Portrait Customer Story - **URL**: https://ui.beste.co/block/testimonial44 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/testimonial44.json"` (Radix: `/r/testimonial44.json`) - **Description**: A single customer story that sets a tall portrait with a gradient name card beside an oversized light quote, a hairline row of three proof figures, and a link into the full write-up. #### Client Quote Ledger - **URL**: https://ui.beste.co/block/testimonial45 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/testimonial45.json"` (Radix: `/r/testimonial45.json`) - **Description**: Three testimonials as ruled columns, each led by a grayscale client logo, followed by a large quote and an attribution block that names the person, the role and the project they hired the studio for. #### Client Index Quote Switcher - **URL**: https://ui.beste.co/block/testimonial46 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/testimonial46.json"` (Radix: `/r/testimonial46.json`) - **Description**: Testimonial section driven by a ruled client index: clicking a name swaps the panel beside it, which carries the quote, a round portrait with the attribution, and one ruled outcome figure. ### Travel #### Featured Trip Hero - **URL**: https://ui.beste.co/block/travel1 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/travel1.json"` (Radix: `/r/travel1.json`) - **Description**: Full-width hero showcasing a featured trip with destination, duration, group size, ratings, and highlight badges. Perfect for travel agencies promoting signature tours or seasonal destinations. #### Video Background Hero - **URL**: https://ui.beste.co/block/travel2 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/travel2.json"` (Radix: `/r/travel2.json`) - **Description**: Immersive hero section with autoplay video background, centered overlay text, and dual CTA buttons. Perfect for travel brands wanting to create an emotional first impression with cinematic content. #### Split Travel Planner - **URL**: https://ui.beste.co/block/travel5 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/travel5.json"` (Radix: `/r/travel5.json`) - **Description**: Two-column layout with feature checklist, rating display, and floating destination stats card alongside a featured image. Perfect for travel planning services highlighting their value propositions. #### Destination Cards Grid - **URL**: https://ui.beste.co/block/travel6 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/travel6.json"` (Radix: `/r/travel6.json`) - **Description**: Responsive card grid showcasing destinations with images, ratings, pricing, and interactive favorites. Perfect for travel booking sites displaying popular vacation spots with quick comparison. #### Destination Carousel - **URL**: https://ui.beste.co/block/travel7 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/travel7.json"` (Radix: `/r/travel7.json`) - **Description**: Horizontal carousel with tall portrait destination cards featuring names and taglines on gradient overlays. Perfect for showcasing multiple destinations in an engaging, swipeable format. #### Filterable Destinations - **URL**: https://ui.beste.co/block/travel8 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/travel8.json"` (Radix: `/r/travel8.json`) - **Description**: Destination grid with icon-based category filter buttons for beach, mountain, city, nature, and cultural trips. Perfect for travel sites letting users browse destinations by experience type. #### Trending Destinations List - **URL**: https://ui.beste.co/block/travel9 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/travel9.json"` (Radix: `/r/travel9.json`) - **Description**: Ranked list of trending destinations showing position numbers, thumbnails, trend percentages, and hot indicators. Perfect for showcasing popular or rising travel destinations with social proof. #### Destination Comparison - **URL**: https://ui.beste.co/block/travel12 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/travel12.json"` (Radix: `/r/travel12.json`) - **Description**: Side-by-side destination comparison cards displaying flight time, best season, average cost, and feature checklists. Perfect for helping travelers decide between two vacation options. #### Trip Itinerary Timeline - **URL**: https://ui.beste.co/block/travel17 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/travel17.json"` (Radix: `/r/travel17.json`) - **Description**: Visual day-by-day trip timeline with numbered day badges, location images, and time-based activity schedules. Perfect for tour operators presenting detailed multi-day travel itineraries. #### Travel Guides Team - **URL**: https://ui.beste.co/block/travel18 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/travel18.json"` (Radix: `/r/travel18.json`) - **Description**: Grid showcase of travel guides with photos, specialties, languages spoken, ratings, and tour counts. Perfect for tour companies highlighting their expert local guides. #### Tour Type Categories - **URL**: https://ui.beste.co/block/travel19 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/travel19.json"` (Radix: `/r/travel19.json`) - **Description**: Visual category grid showing tour types like adventure, cultural, beach, and safari with images and tour counts. Perfect for travel agencies organizing trips by experience style. #### Group vs Private Tours - **URL**: https://ui.beste.co/block/travel20 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/travel20.json"` (Radix: `/r/travel20.json`) - **Description**: Side-by-side comparison of group and private tour options with pricing, features, and selection CTAs. Perfect for helping travelers choose between shared and exclusive experiences. #### Custom Trip Builder CTA - **URL**: https://ui.beste.co/block/travel21 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/travel21.json"` (Radix: `/r/travel21.json`) - **Description**: Split-layout card promoting custom trip planning with feature bullet points and a large image. Perfect for travel agencies offering personalized itinerary design services. #### All-Inclusive Package - **URL**: https://ui.beste.co/block/travel22 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/travel22.json"` (Radix: `/r/travel22.json`) - **Description**: Featured package card showing destination image, pricing, and included amenities like flights, hotels, and activities with icons. Perfect for promoting vacation packages with transparent inclusions. #### Day Trips Grid - **URL**: https://ui.beste.co/block/travel23 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/travel23.json"` (Radix: `/r/travel23.json`) - **Description**: Grid of day trip cards showing location, duration, group size, ratings, and pricing with booking buttons. Perfect for tour operators promoting local excursions and activities. #### Multi-City Tours - **URL**: https://ui.beste.co/block/travel24 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/travel24.json"` (Radix: `/r/travel24.json`) - **Description**: Tour cards displaying multi-city itineraries with circular city thumbnails, night counts, and arrow connectors. Perfect for showcasing regional tours spanning multiple destinations. #### Destination Highlights - **URL**: https://ui.beste.co/block/travel25 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/travel25.json"` (Radix: `/r/travel25.json`) - **Description**: Grid of local experiences with category badges, location, duration, and ratings for a specific destination. Perfect for destination pages showcasing must-do activities and attractions. #### Trust & Reviews Section - **URL**: https://ui.beste.co/block/travel34 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/travel34.json"` (Radix: `/r/travel34.json`) - **Description**: Social proof section with star rating breakdown, recommendation percentage, and company highlights like awards and traveler counts. Perfect for building credibility on travel booking pages. #### Package Inclusions - **URL**: https://ui.beste.co/block/travel36 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/travel36.json"` (Radix: `/r/travel36.json`) - **Description**: Four-column grid showing what's included in travel packages organized by categories like transport, accommodation, meals, and experiences. Perfect for transparent package breakdowns. #### Trip Cost Breakdown - **URL**: https://ui.beste.co/block/travel41 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/travel41.json"` (Radix: `/r/travel41.json`) - **Description**: Itemized pricing card showing costs for flights, accommodation, transfers, meals, and activities with discount badges. Perfect for transparent pricing on trip detail pages. #### Narrowing Destination Shortlist - **URL**: https://ui.beste.co/block/travel42 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/travel42.json"` (Radix: `/r/travel42.json`) - **Description**: A destination finder that eliminates in the open: a grid of six photographs sits beside the questions and dims the places each answer rules out, with a live count under it, before the survivors are listed with their notes and links. ### Use Case #### Interactive Tab Showcase - **URL**: https://ui.beste.co/block/usecase1 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/usecase1.json"` (Radix: `/r/usecase1.json`) - **Description**: Tab-based use case section with images, descriptions, and feature checklists that collapse to accordion on mobile. Perfect for showcasing how different teams or departments use your product. #### Use Case Card Grid - **URL**: https://ui.beste.co/block/usecase2 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/usecase2.json"` (Radix: `/r/usecase2.json`) - **Description**: Responsive grid of use case cards with hover effects, images, descriptions, and feature checklists. Perfect for displaying solutions for different industries or customer segments. #### Numbered Steps Process - **URL**: https://ui.beste.co/block/usecase3 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/usecase3.json"` (Radix: `/r/usecase3.json`) - **Description**: Vertical numbered steps with alternating left-right image positions, descriptions, and feature lists. Perfect for explaining multi-step processes or onboarding flows. #### Industry Solutions Grid - **URL**: https://ui.beste.co/block/usecase4 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/usecase4.json"` (Radix: `/r/usecase4.json`) - **Description**: Card grid showcasing industry-specific solutions with icons, images, descriptions, and feature tags. Perfect for highlighting how your platform serves different verticals. #### Feature Icon Grid - **URL**: https://ui.beste.co/block/usecase5 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/usecase5.json"` (Radix: `/r/usecase5.json`) - **Description**: Centered icon grid with titles and descriptions, featuring hover animations on icon containers. Perfect for showcasing product features or capabilities in a clean layout. #### Solutions Accordion - **URL**: https://ui.beste.co/block/usecase7 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/usecase7.json"` (Radix: `/r/usecase7.json`) - **Description**: Expandable accordion layout with icons, images, descriptions, and feature lists inside each panel. Perfect for detailed solution explanations with visual content. #### Vertical Timeline - **URL**: https://ui.beste.co/block/usecase8 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/usecase8.json"` (Radix: `/r/usecase8.json`) - **Description**: Centered timeline with alternating left-right content cards, icons, images, and feature lists. Perfect for showing project phases, company history, or process stages. #### Masonry Bento Grid - **URL**: https://ui.beste.co/block/usecase9 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/usecase9.json"` (Radix: `/r/usecase9.json`) - **Description**: CSS columns-based masonry layout with variable-height cards featuring background images and gradient overlays. Perfect for showcasing diverse use cases with visual hierarchy. #### Split Content Card - **URL**: https://ui.beste.co/block/usecase10 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/usecase10.json"` (Radix: `/r/usecase10.json`) - **Description**: Two-column card with text content, bullet list, and CTA buttons alongside a full-height image. Perfect for feature highlights or promotional sections. #### Platform Tabs Showcase - **URL**: https://ui.beste.co/block/usecase11 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/usecase11.json"` (Radix: `/r/usecase11.json`) - **Description**: Pill-style horizontal tabs displaying platform availability with large images, feature checklists, and download CTAs. Perfect for showcasing cross-platform product availability. #### Workflow Stage Tabs - **URL**: https://ui.beste.co/block/usecase12 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/usecase12.json"` (Radix: `/r/usecase12.json`) - **Description**: Tab navigation showing workflow stages with split image cards featuring stats overlays and descriptions. Perfect for demonstrating product workflow or development process stages. #### Segmented Control Tabs - **URL**: https://ui.beste.co/block/usecase14 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/usecase14.json"` (Radix: `/r/usecase14.json`) - **Description**: Segmented control style tabs with split layout showing image, description, and bullet point features. Perfect for comparing solution approaches or product capabilities. #### Step Wizard Navigator - **URL**: https://ui.beste.co/block/usecase15 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/usecase15.json"` (Radix: `/r/usecase15.json`) - **Description**: Interactive step-by-step wizard with progress bar, clickable step indicators, images, and contextual tips. Perfect for onboarding flows or multi-step process explanations. #### Hover Reveal Cards - **URL**: https://ui.beste.co/block/usecase17 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/usecase17.json"` (Radix: `/r/usecase17.json`) - **Description**: Card grid with background images that reveals detailed content on hover via smooth slide-up animation. Perfect for destination showcases or visual feature galleries. #### Industry Stats Cards - **URL**: https://ui.beste.co/block/usecase18 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/usecase18.json"` (Radix: `/r/usecase18.json`) - **Description**: Card grid showcasing industries with icons, descriptions, and key statistics like company count and user numbers. Perfect for demonstrating market reach across verticals. #### Portfolio Masonry Gallery - **URL**: https://ui.beste.co/block/usecase19 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/usecase19.json"` (Radix: `/r/usecase19.json`) - **Description**: Pinterest-style masonry grid with variable-height image cards, category labels, and hover zoom effects. Perfect for creative portfolios or work showcases. #### 3D Flip Service Cards - **URL**: https://ui.beste.co/block/usecase20 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/usecase20.json"` (Radix: `/r/usecase20.json`) - **Description**: Interactive flip cards with 3D rotation effect showing icon and title on front, detailed features and CTA on back. Perfect for showcasing service offerings or capabilities. #### Spotlight Feature Layout - **URL**: https://ui.beste.co/block/usecase22 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/usecase22.json"` (Radix: `/r/usecase22.json`) - **Description**: Asymmetric layout with large featured card in center flanked by smaller feature cards on both sides. Perfect for highlighting a primary feature alongside supporting capabilities. #### Feature Comparison Matrix - **URL**: https://ui.beste.co/block/usecase23 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/usecase23.json"` (Radix: `/r/usecase23.json`) - **Description**: Structured comparison table with category-grouped rows, checkmark indicators, and highlighted column for recommended option. Perfect for plan comparisons or audience-based feature matrices. #### Parallax Destination Cards - **URL**: https://ui.beste.co/block/usecase32 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/usecase32.json"` (Radix: `/r/usecase32.json`) - **Description**: Three-column card grid with hover parallax zoom effect on background images and sliding content reveal. Perfect for destination showcases or visual storytelling. #### Detailed Feature Cards - **URL**: https://ui.beste.co/block/usecase37 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/usecase37.json"` (Radix: `/r/usecase37.json`) - **Description**: Two-column grid of feature cards with icons, extended descriptions, and bullet point highlights. Perfect for comprehensive product feature or capability explanations. #### Solution Comparison Table - **URL**: https://ui.beste.co/block/usecase40 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/usecase40.json"` (Radix: `/r/usecase40.json`) - **Description**: Feature comparison table with checkmarks, text values, highlighted column, and CTA buttons in footer. Perfect for comparing your solution against alternatives or competitors. #### Role Use Case Cards - **URL**: https://ui.beste.co/block/usecase41 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/usecase41.json"` (Radix: `/r/usecase41.json`) - **Description**: A use-case section with an eyebrow over a hairline rule, a two-column heading, and three bordered role cards with an icon chip, a role label, a title, a description, and an arrow link. #### Multi-Site Locations - **URL**: https://ui.beste.co/block/usecase42 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/usecase42.json"` (Radix: `/r/usecase42.json`) - **Description**: A multi-site use case with an eyebrow over a hairline rule, a two-column heading, and three image tiles that each float a live location card above a title and description. #### A Day In Appointments - **URL**: https://ui.beste.co/block/usecase43 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/usecase43.json"` (Radix: `/r/usecase43.json`) - **Description**: A use case with an eyebrow over a hairline rule, a two-column heading, and three image tiles that each float a live appointment card above a title and description. #### Situation Fit Columns - **URL**: https://ui.beste.co/block/usecase44 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/usecase44.json"` (Radix: `/r/usecase44.json`) - **Description**: Qualifying section describing three situations a service suits: each ruled column pairs the situation with a dotted list of tell-tale signals and a soft panel stating what changes afterwards, with nothing closing the section. #### Alternating Scenario Rows - **URL**: https://ui.beste.co/block/usecase45 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/usecase45.json"` (Radix: `/r/usecase45.json`) - **Description**: Three use cases as image and text rows, each numbered and carrying a story, two ruled outcome figures and its own outline pill link; pictures stay top-aligned and the side only alternates from lg, so a tablet keeps every image at the top left. #### Industry Portrait Tiles - **URL**: https://ui.beste.co/block/usecase46 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/usecase46.json"` (Radix: `/r/usecase46.json`) - **Description**: Four tall image tiles, one per industry, each followed by an explanation and a ruled foot pairing a proof line with a plain link into that sector's work. #### Job Index With Image Panel - **URL**: https://ui.beste.co/block/usecase47 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/usecase47.json"` (Radix: `/r/usecase47.json`) - **Description**: Ruled index of jobs on the left that swaps the panel beside it, where each selection brings its own photograph, explanation and two ruled outcome figures. #### Stacked Photo Bands - **URL**: https://ui.beste.co/block/usecase48 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/usecase48.json"` (Radix: `/r/usecase48.json`) - **Description**: Three tall photographic bands stacked full width, each carrying an eyebrow, display title, explanation, one outcome figure and its own outline pill link over a tinted scrim; the three-column foot only forms from lg up so the sentence keeps its measure on a tablet. #### Audience Tabs With Photo - **URL**: https://ui.beste.co/block/usecase49 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/usecase49.json"` (Radix: `/r/usecase49.json`) - **Description**: Pill tabs for each audience swap a split panel holding a tall photograph beside a title, summary and ruled list of what that audience actually gets. #### A Day In The Tool - **URL**: https://ui.beste.co/block/usecase50 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/usecase50.json"` (Radix: `/r/usecase50.json`) - **Description**: Showcase built as a ruled timetable: selecting an hour swaps a soft panel that floats the matching interface piece over a dotted field, then explains the moment and states one outcome on its own rule. #### Two Route Photo Columns - **URL**: https://ui.beste.co/block/usecase51 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/usecase51.json"` (Radix: `/r/usecase51.json`) - **Description**: Two picture-led routes side by side, each with an eyebrow, title, dotted-rule expectations list and its own pill CTA, separated on desktop by a small pill divider sitting between the columns. #### Placement Mosaic Grid - **URL**: https://ui.beste.co/block/usecase52 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/usecase52.json"` (Radix: `/r/usecase52.json`) - **Description**: Six application tiles alternating between landscape and portrait crops, each captioned on a rule with where the work lands, what it is applied to and the constraint it has to survive. #### Single Case Photo Story - **URL**: https://ui.beste.co/block/usecase53 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/usecase53.json"` (Radix: `/r/usecase53.json`) - **Description**: One client story told in three photographed steps, opening with the client name on a ruled block beside the heading and closing with three oversized outcome figures. ### Workflow #### Hero with Workflow Recipe - **URL**: https://ui.beste.co/block/workflow1 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow1.json"` (Radix: `/r/workflow1.json`) - **Description**: Two-column workflow hero with a live automation recipe card on the right showing a multi-app stack and installs counter. #### Three Cards With Workflow Assets - **URL**: https://ui.beste.co/block/workflow2 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow2.json"` (Radix: `/r/workflow2.json`) - **Description**: Three feature cards that swap icons for live workflow pieces: an app picker, a configurable step, and an active toggle. #### Accordion With Workflow Media - **URL**: https://ui.beste.co/block/workflow3 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow3.json"` (Radix: `/r/workflow3.json`) - **Description**: Accordion on the left, swappable workflow asset on the right. Each row picks its own piece: trigger pair, step config, approval gate, or test run. #### Workflow Stats With Live Tiles - **URL**: https://ui.beste.co/block/workflow4 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow4.json"` (Radix: `/r/workflow4.json`) - **Description**: Three-column stats strip where each metric is anchored by a real workflow piece: active runs, success rate, and approvals. #### Reliability CTA With Failed Run - **URL**: https://ui.beste.co/block/workflow5 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow5.json"` (Radix: `/r/workflow5.json`) - **Description**: Two-column CTA paired with a failed-run retry card. Copy talks reliability while the asset shows the actual recovery surface. #### Trigger Library Showcase - **URL**: https://ui.beste.co/block/workflow6 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow6.json"` (Radix: `/r/workflow6.json`) - **Description**: Asymmetric showcase: a tall image hero on the left paired with two stacked workflow assets on the right — recipe card and trigger/action pair. #### Zigzag Process Steps - **URL**: https://ui.beste.co/block/workflow7 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow7.json"` (Radix: `/r/workflow7.json`) - **Description**: Four-step zigzag flow that alternates a workflow piece between sides. Each row pairs a numbered step with the live asset it produces. #### Manual vs Automated Comparison - **URL**: https://ui.beste.co/block/workflow8 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow8.json"` (Radix: `/r/workflow8.json`) - **Description**: Side-by-side card contrasting the manual inbox with the live workflow tile. A real email asset on the left, a real trigger/action pair on the right. #### Customer Story With Workflow Pair - **URL**: https://ui.beste.co/block/workflow9 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow9.json"` (Radix: `/r/workflow9.json`) - **Description**: Editorial customer story card: a pull quote on top, then a two-piece pair showing the actual workflow the customer ships — an active toggle and an approval gate. #### Tabbed Use Cases - **URL**: https://ui.beste.co/block/workflow10 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow10.json"` (Radix: `/r/workflow10.json`) - **Description**: Tabbed showcase where each tab swaps a team's typical workflow surface. Left side carries the story, right side carries the live asset. #### Hero With Workflow Pieces Strip - **URL**: https://ui.beste.co/block/workflow11 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow11.json"` (Radix: `/r/workflow11.json`) - **Description**: Minimal centered hero with a three-tile strip of workflow pieces underneath: delay, email, and approval surfaces. #### Workflow Canvas Hero - **URL**: https://ui.beste.co/block/workflow12 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow12.json"` (Radix: `/r/workflow12.json`) - **Description**: Hero with a full canvas on the right showing a real workflow flow: trigger node, condition node, and two action branches connected with lines. #### Trigger Marketplace - **URL**: https://ui.beste.co/block/workflow13 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow13.json"` (Radix: `/r/workflow13.json`) - **Description**: Full-width trigger picker with search, category filters, and a 12-app grid. Drop-in app marketplace showcase for any automation product. #### Run History Timeline - **URL**: https://ui.beste.co/block/workflow14 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow14.json"` (Radix: `/r/workflow14.json`) - **Description**: Full-width run history table showing live workflow runs with status pills, duration, started-at timestamps, and per-row actions. #### Recipe Marketplace Grid - **URL**: https://ui.beste.co/block/workflow15 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow15.json"` (Radix: `/r/workflow15.json`) - **Description**: Recipe marketplace with filter chips and a six-card grid. Each card stacks the apps it connects, the installs counter, and a use-recipe CTA. #### Visual Workflow Builder Mockup - **URL**: https://ui.beste.co/block/workflow16 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow16.json"` (Radix: `/r/workflow16.json`) - **Description**: Three-pane builder mockup: a step sidebar, a node canvas with connected workflow nodes, and a properties panel for the selected step. #### Workflow Analytics Dashboard - **URL**: https://ui.beste.co/block/workflow17 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow17.json"` (Radix: `/r/workflow17.json`) - **Description**: Full-width analytics card with four KPI tiles, a CSS bar chart of the last 30 days, and a top-workflows leaderboard with share bars. #### Workflow Pricing Tiers - **URL**: https://ui.beste.co/block/workflow18 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow18.json"` (Radix: `/r/workflow18.json`) - **Description**: Three pricing tiers tuned to workflow products: run quotas, workflow counts, and integration limits with a featured plan highlighted. #### Workflow Onboarding Checklist - **URL**: https://ui.beste.co/block/workflow19 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow19.json"` (Radix: `/r/workflow19.json`) - **Description**: Onboarding card with a progress bar and a six-step checklist. Each step shows a completion state, a title, and a short hint. #### Live Status Banner - **URL**: https://ui.beste.co/block/workflow20 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow20.json"` (Radix: `/r/workflow20.json`) - **Description**: Minimal uptime banner: live status pill, a 90-day color-coded bar strip, and a single percentage. Reads at a glance — operational, degraded, or in incident. #### Workflow API & Webhook Tabs - **URL**: https://ui.beste.co/block/workflow21 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow21.json"` (Radix: `/r/workflow21.json`) - **Description**: Developer-facing split: copy on the left, tabbed code blocks on the right showing the API request, response, and webhook payload for a workflow. #### Live Ops Counter Banner - **URL**: https://ui.beste.co/block/workflow22 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow22.json"` (Radix: `/r/workflow22.json`) - **Description**: Minimal live-ops banner: pulsing live dot, a big in-flight workflow counter, a 24-bar throughput strip, and a three-stat footer. #### Usage Quota Meter - **URL**: https://ui.beste.co/block/workflow23 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow23.json"` (Radix: `/r/workflow23.json`) - **Description**: Minimal quota meter card: header with usage label, large used/limit counter, a single progress bar, and a reset countdown footer. #### Upcoming Schedules Banner - **URL**: https://ui.beste.co/block/workflow24 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow24.json"` (Radix: `/r/workflow24.json`) - **Description**: Minimal upcoming-runs banner: calendar header, a featured next-run callout, and four compact upcoming entries with relative timing and cron expression. #### Process Step Carousel - **URL**: https://ui.beste.co/block/workflow25 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow25.json"` (Radix: `/r/workflow25.json`) - **Description**: How-we-work section: a square visual beside a step panel with prev/next navigation, step title, description and a stat. #### Process Flow - **URL**: https://ui.beste.co/block/workflow26 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow26.json"` (Radix: `/r/workflow26.json`) - **Description**: Horizontal connected process steps with numbered nodes on a continuous rail. #### Process Ascent - **URL**: https://ui.beste.co/block/workflow27 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow27.json"` (Radix: `/r/workflow27.json`) - **Description**: Ascending-staircase process timeline where each phase climbs above the last, with oversized index numerals, cadence labels and per-phase deliverables. #### Phase Tabs - **URL**: https://ui.beste.co/block/workflow28 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow28.json"` (Radix: `/r/workflow28.json`) - **Description**: Tabbed engagement phases with deliverables, duration and imagery. #### Engagement Timeline - **URL**: https://ui.beste.co/block/workflow29 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow29.json"` (Radix: `/r/workflow29.json`) - **Description**: Mini-gantt of engagement phases with duration bars over a week scale. #### Phase Selector - **URL**: https://ui.beste.co/block/workflow30 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow30.json"` (Radix: `/r/workflow30.json`) - **Description**: Sticky clickable phase list driving a detail panel with checklist and image. #### Sprint Cadence - **URL**: https://ui.beste.co/block/workflow31 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow31.json"` (Radix: `/r/workflow31.json`) - **Description**: A weekly sprint rhythm shown as day columns of activities. #### Process Accordion - **URL**: https://ui.beste.co/block/workflow32 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow32.json"` (Radix: `/r/workflow32.json`) - **Description**: Expandable numbered process steps revealing deliverables and duration. #### Stage Rail - **URL**: https://ui.beste.co/block/workflow33 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow33.json"` (Radix: `/r/workflow33.json`) - **Description**: Interactive process rail with a filling progress spine; selecting a stage swaps its media and deliverables. #### Phase Outcomes - **URL**: https://ui.beste.co/block/workflow34 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow34.json"` (Radix: `/r/workflow34.json`) - **Description**: Each engagement phase mapped from its inputs to its outcomes. #### Method Pillars - **URL**: https://ui.beste.co/block/workflow35 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow35.json"` (Radix: `/r/workflow35.json`) - **Description**: A featured methodology panel alongside supporting principle pillars. #### Process Timeline - **URL**: https://ui.beste.co/block/workflow36 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow36.json"` (Radix: `/r/workflow36.json`) - **Description**: A single-rail vertical process timeline with numbered nodes and per-step duration and owner meta. #### Parallel Tracks - **URL**: https://ui.beste.co/block/workflow37 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow37.json"` (Radix: `/r/workflow37.json`) - **Description**: Two parallel workstream swimlanes aligned across shared phase columns. #### Cascade Process - **URL**: https://ui.beste.co/block/workflow38 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow38.json"` (Radix: `/r/workflow38.json`) - **Description**: Process steps cascading in a diagonal staircase with connecting markers. #### Phase Index - **URL**: https://ui.beste.co/block/workflow39 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow39.json"` (Radix: `/r/workflow39.json`) - **Description**: A numbered phase index that cross-fades a sticky detail panel as each phase is hovered. #### Process Board - **URL**: https://ui.beste.co/block/workflow40 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow40.json"` (Radix: `/r/workflow40.json`) - **Description**: A kanban-style board showing studio work moving across stage columns. #### Timeline Scroller - **URL**: https://ui.beste.co/block/workflow41 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow41.json"` (Radix: `/r/workflow41.json`) - **Description**: A horizontally scrollable dated milestone timeline with alternating cards on a continuous axis. #### Phase Bands - **URL**: https://ui.beste.co/block/workflow42 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow42.json"` (Radix: `/r/workflow42.json`) - **Description**: Full-width phase bands anchored by oversized ghost numerals with duration meta. #### Weekly Plan - **URL**: https://ui.beste.co/block/workflow43 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow43.json"` (Radix: `/r/workflow43.json`) - **Description**: Week-grouped task checklists each with a focus tag and a progress bar. #### Overview & Phases - **URL**: https://ui.beste.co/block/workflow44 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow44.json"` (Radix: `/r/workflow44.json`) - **Description**: A sticky process overview with summary stats beside an expandable phase accordion. #### Process Metrics - **URL**: https://ui.beste.co/block/workflow45 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow45.json"` (Radix: `/r/workflow45.json`) - **Description**: Each process stage paired with a prominent SLA-style metric. #### Numbered Process Steps - **URL**: https://ui.beste.co/block/workflow46 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow46.json"` (Radix: `/r/workflow46.json`) - **Description**: Left-aligned intro with eyebrow, heading and CTA beside a four-column band of numbered process steps linked by a connector line. #### Three Phase Rollout Timeline - **URL**: https://ui.beste.co/block/workflow47 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow47.json"` (Radix: `/r/workflow47.json`) - **Description**: An implementation timeline laid out as three hairline columns, each opening with a week marker over a phase title, a short explanation, and a checked deliverable list, closing on a soft summary strip. #### Approval Chain Trail - **URL**: https://ui.beste.co/block/workflow48 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow48.json"` (Radix: `/r/workflow48.json`) - **Description**: An approval workflow drawn as a vertical rail of nodes tinted by whether each step is done, waiting, or queued, naming the person and the timestamp, beside a tile floating the live request card. #### Branching Decision Flow - **URL**: https://ui.beste.co/block/workflow49 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow49.json"` (Radix: `/r/workflow49.json`) - **Description**: A workflow that states one trigger on an inverted full-width panel, then forks into two equally weighted condition branches whose outcomes sit in nested cards carrying the share of cases they account for. #### Daily Weekly Monthly Cadence - **URL**: https://ui.beste.co/block/workflow50 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow50.json"` (Radix: `/r/workflow50.json`) - **Description**: An operating rhythm split into three hairline columns for daily, weekly, and monthly routines, each row carrying its timing and either an owner or an accent chip where nobody is needed. #### Automation Coverage Map - **URL**: https://ui.beste.co/block/workflow51 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow51.json"` (Radix: `/r/workflow51.json`) - **Description**: A workflow that scores each stage on how much of it runs unattended, drawing an accent bar per stage and naming what still needs a person, against a sticky column with one headline figure and a live stage tracker. #### Role Swimlane Grid - **URL**: https://ui.beste.co/block/workflow52 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow52.json"` (Radix: `/r/workflow52.json`) - **Description**: A responsibility swimlane crossing roles against stages, filling every cell by whether that role owns, helps, only reads, or has no access, with a legend keyed to the same tints. #### Escalation Ladder - **URL**: https://ui.beste.co/block/workflow53 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow53.json"` (Radix: `/r/workflow53.json`) - **Description**: A time-based escalation path held in a bordered panel, each rung naming the elapsed time, who joins, what changes, and the share of reports that ever reach it, beside a live card for whoever is on call. #### Data Flow Map - **URL**: https://ui.beste.co/block/workflow54 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow54.json"` (Radix: `/r/workflow54.json`) - **Description**: An integration map naming every system as a card, inverting the first-party one so it reads as the origin, then listing each crossing on a hairline row with what travels and how often. #### Process Weight Spectrum - **URL**: https://ui.beste.co/block/workflow55 - **Install**: `npx shadcn@latest add "https://ui.beste.co/r-base/workflow55.json"` (Radix: `/r/workflow55.json`) - **Description**: A process sizer that answers with a position rather than a verdict: a photographic band opens the section, four weighted questions sit beside an avatar cluster of the people a heavier answer pulls in, they add up to a score, and the band that score falls in takes the page over with its title, its summary, and the practices it asks for. ## Links - [Homepage](https://ui.beste.co) - [GitHub](https://github.com/beste-co/beste-ui) - [Twitter/X](https://x.com/withbeste)