# 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 provides production-ready UI blocks that you can install directly using the shadcn CLI. Each component is built with React, Tailwind CSS, and follows accessibility best practices.

## Documentation

- [Homepage](https://ui.beste.co/blocks): Browse all available components
- [Installation](https://ui.beste.co/docs/installation): How to install components using shadcn CLI

## Components

### About

- [Team & Mission](https://ui.beste.co/block/about1): Two-column about section with mission statement, company stats, and team member grid. Perfect for company pages and landing sections.
- [Values with Team Photo](https://ui.beste.co/block/about2): Full-width team photo with a three-column values grid below. Great for culture pages and brand storytelling.
- [Timeline & Milestones](https://ui.beste.co/block/about3): 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](https://ui.beste.co/block/about4): Founder blockquote with avatar, followed by a horizontal team member row. Ideal for leadership pages and company introductions.
- [Image & Text Split](https://ui.beste.co/block/about5): Side-by-side layout with a tall image on the left and company story, inline stats, and CTAs on the right.
- [Numbered Principles](https://ui.beste.co/block/about6): Asymmetric two-column layout with heading on the left and numbered company principles on the right. Clean and editorial.
- [Team Cards with Bios](https://ui.beste.co/block/about7): Three-column grid of team member cards with avatars, roles, and short bios. Great for leadership and team pages.
- [Stats with Descriptions](https://ui.beste.co/block/about8): Four-column stats grid with large numbers, titles, and supporting descriptions. Perfect for impact and results sections.
- [Mission & Trust Logos](https://ui.beste.co/block/about9): Centered mission statement with a logo strip of trusted partners below. Ideal for building credibility on landing and about pages.
- [Bento Grid About](https://ui.beste.co/block/about10): Asymmetric bento grid combining a mission card, team photo, stats, and stacked avatars. A modern, compact about section.
- [Hero Banner with Avatars](https://ui.beste.co/block/about11): Wide hero image with gradient overlay text, inline stats, and a stacked avatar strip of team members.
- [Process Steps](https://ui.beste.co/block/about12): Four-column numbered process cards showing how your company works. Each step has a large number, title, and description.
- [Company Profile](https://ui.beste.co/block/about13): 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](https://ui.beste.co/block/about14): Horizontal stats row at the top followed by a centered story card with heading, body text, and CTAs.
- [Letter from the CEO](https://ui.beste.co/block/about15): Editorial-style open letter with paragraphs, a personal signature with avatar, and a call-to-action. Great for founder stories.
- [Vision Mission Values](https://ui.beste.co/block/about16): Three-column cards for vision, mission, and values with labeled headers. Clean editorial layout for company positioning.
- [Awards & Recognition](https://ui.beste.co/block/about17): Vertical list of awards and accolades with icons, titles, organizations, and years. Ideal for press and credibility sections.
- [Office Locations Grid](https://ui.beste.co/block/about18): Four-column grid of office cards with city, country, address, and team size. Ideal for global companies.
- [Company At a Glance](https://ui.beste.co/block/about19): 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](https://ui.beste.co/block/about20): Wide team photo, member list with avatars, team stats grid, and a culture quote. A rich team showcase layout.
- [Checklist & Image Split](https://ui.beste.co/block/about21): 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](https://ui.beste.co/block/about22): 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](https://ui.beste.co/block/about23): Two-column layout with company story, stats, and leadership quote on the left, team photo and avatar row on the right.
- [Company Heritage & Features](https://ui.beste.co/block/about24): Company story with image, border-accented feature highlights, and stats row. Great for craft, heritage, and product-focused brands.
- [Animated Stats & Value Cards](https://ui.beste.co/block/about25): 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](https://ui.beste.co/block/about26): 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](https://ui.beste.co/block/about27): Left intro with image, right vertical timeline with staggered scroll-reveal animation. Numbered steps with sliding content. For startup journeys.
- [Marquee Stats & Team Split](https://ui.beste.co/block/about28): 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](https://ui.beste.co/block/about29): Centered header with wide panoramic image, product cards with layered attributes, and sourcing grid.
- [Banner Split & Process Steps](https://ui.beste.co/block/about30): Panoramic image with split header showing numbered process steps alongside. For studios and creative agencies.
- [Hero Overlay & Suite Cards](https://ui.beste.co/block/about31): Dark-overlay hero image with heading, suite/room cards with temperature and capacity badges. For hotels and hospitality.
- [Two Image Layout](https://ui.beste.co/block/about32): 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](https://ui.beste.co/block/about33): 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](https://ui.beste.co/block/about34): About section: eyebrow label, two-tone heading, two portraits beside a 2x2 stats grid.
- [About Media Reel](https://ui.beste.co/block/about35): About section with eyebrow, stacked stats and a read-more CTA beside a media card with a watch-reel play button.
- [Edge Label About](https://ui.beste.co/block/about36): Asymmetric about with a bleeding image, vertical edge label, offset copy and an inline stats row.
- [Index Columns About](https://ui.beste.co/block/about37): Three uneven columns: a studio fact index, an oversized statement, and a portrait with signature.
- [Overlap Heading About](https://ui.beste.co/block/about38): About where a large heading overlaps a portrait, with a paragraph, CTA and a bottom stat ribbon.
- [Numeral About](https://ui.beste.co/block/about39): About anchored by an oversized numeral with a paragraph and a horizontal image strip.
- [Interleaved About](https://ui.beste.co/block/about40): Magazine about where copy is interleaved between two staggered offset images.
- [Story Rail About](https://ui.beste.co/block/about41): Sticky eyebrow rail beside a story column and an offset captioned image.
- [Framed Studio Card](https://ui.beste.co/block/about42): About composed inside a bordered studio card with header marks, portrait and a stats strip.
- [Heading Hero About](https://ui.beste.co/block/about43): An oversized about statement hero above three heterogeneous zones: portrait, values and a CTA with stats.
- [Marquee Accent About](https://ui.beste.co/block/about44): Layered about over a faint scrolling studio-word marquee with offset images and stats.
- [Founder Quote About](https://ui.beste.co/block/about45): A founder-led pull-quote about with a portrait, signature and a facts strip.
- [About Strip](https://ui.beste.co/block/about46): An about intro followed by a horizontally scrollable strip mixing image, stat, quote and values cards.
- [Split Panel About](https://ui.beste.co/block/about47): A hard light/dark split about panel: dark statement side and a light image-and-facts side.
- [Principles About](https://ui.beste.co/block/about48): About pairing a sticky studio statement and image with a numbered list of operating principles.
- [Founder Statement About](https://ui.beste.co/block/about49): About built around a dark founder portrait card with a pull-quote, signature, and supporting stats.
- [Chaptered About](https://ui.beste.co/block/about50): A pinned studio image beside a numbered, chaptered about story.
- [Beliefs About](https://ui.beste.co/block/about51): A statement heading over a belief list punctuated by intermittent inline thumbnails.
- [Spec Sheet About](https://ui.beste.co/block/about52): About styled as a technical spec sheet with coordinate marks, a data column and a portrait.
- [Pinned Photos About](https://ui.beste.co/block/about53): About with two subtly rotated, captioned studio photos clustered beside the statement.
- [Inset Card About](https://ui.beste.co/block/about54): A cinematic wide image with an overlapping inset content card and a stat ribbon.
- [Four Parts About](https://ui.beste.co/block/about55): A type-led about with an oversized statement and a four-part Who/What/How/Why grid.
- [Showcase Hero With Video](https://ui.beste.co/block/about56): 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](https://ui.beste.co/block/about57): Two centered statements on a dark surface, each with an accent heading, an uppercase paragraph, and a small label beneath.
- [About Statement Card](https://ui.beste.co/block/about58): 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](https://ui.beste.co/block/about59): 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](https://ui.beste.co/block/about60): Team section with an eyebrow, big heading, description and CTA above a responsive grid of people cards (portrait image, name, role).
- [Belief Statement Values](https://ui.beste.co/block/about61): 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](https://ui.beste.co/block/about62): 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](https://ui.beste.co/block/about63): Image-led about split with a tall portrait, an offset statement heading, supporting copy, mono studio facts, and a seal CTA.
- [Principles Card Grid](https://ui.beste.co/block/about64): 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](https://ui.beste.co/block/about65): Centered manifesto with a very large multi-line statement heading, muted emphasis phrases, a closing line, and a single CTA.
- [About with Stats Grid](https://ui.beste.co/block/about66): Two-column about with a tall image on one side and an eyebrow, heading, description, and 2x2 stats grid on the other.
- [Founder Statement](https://ui.beste.co/block/about67): Founder statement with a large blockquote followed by an avatar, name, role, and a monospace signature line.
- [Team Portrait Grid](https://ui.beste.co/block/about68): 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](https://ui.beste.co/block/about69): 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](https://ui.beste.co/block/about70): 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](https://ui.beste.co/block/about71): 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](https://ui.beste.co/block/about72): 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](https://ui.beste.co/block/agency10): A case study header with project metadata grid, service tags, and featured image. Perfect for agency portfolio pages showcasing client work details.
- [Studio Manifesto](https://ui.beste.co/block/agency11): Oversized editorial manifesto statement with emphasized phrases, principle chips and a founder signature.
- [Studio Values](https://ui.beste.co/block/agency12): Studio values laid out with oversized ghost numerals, titles, descriptions and keywords.
- [How We Think](https://ui.beste.co/block/agency13): Sticky studio intro with a portrait beside a stack of numbered principles.
- [Studio Team](https://ui.beste.co/block/agency14): A studio team grid of member portraits with names and roles.
- [Awards List](https://ui.beste.co/block/agency15): Editorial list of studio awards by year with project and recognition details.
- [Studio At A Glance](https://ui.beste.co/block/agency16): Studio overview pairing facts, copy and highlight stats with a clean studio image.
- [Principles Selector](https://ui.beste.co/block/agency17): Interactive principle list that swaps a detail panel with image as each is hovered.
- [Studio Ethos](https://ui.beste.co/block/agency18): A bold ethos statement beside a list of concrete studio commitments.
- [Why Polaris](https://ui.beste.co/block/agency19): A two-column comparison contrasting the Polaris way with a typical agency.
- [Clients & Outcomes](https://ui.beste.co/block/agency20): Client logo cloud paired with measurable engagement outcomes.
- [Capabilities Accordion](https://ui.beste.co/block/agency21): Ruled, expandable capability rows with oversized type, detail copy, and monospace tag chips.
- [Horizontal Process Timeline](https://ui.beste.co/block/agency22): A connected left-to-right sequence of numbered project phases with a ruled timeline and step dots.
- [Numbered Services List](https://ui.beste.co/block/agency23): 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](https://ui.beste.co/block/agency24): 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](https://ui.beste.co/block/auth1): 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](https://ui.beste.co/block/auth2): 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](https://ui.beste.co/block/auth3): 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](https://ui.beste.co/block/auth4): 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](https://ui.beste.co/block/auth5): 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](https://ui.beste.co/block/auth6): 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](https://ui.beste.co/block/auth7): 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](https://ui.beste.co/block/auth8): 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](https://ui.beste.co/block/auth9): 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](https://ui.beste.co/block/auth10): 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](https://ui.beste.co/block/auth11): 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](https://ui.beste.co/block/auth12): 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](https://ui.beste.co/block/auth13): 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](https://ui.beste.co/block/auth14): 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](https://ui.beste.co/block/auth15): 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](https://ui.beste.co/block/auth16): 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](https://ui.beste.co/block/auth17): 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](https://ui.beste.co/block/auth18): 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](https://ui.beste.co/block/auth19): 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](https://ui.beste.co/block/auth20): 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](https://ui.beste.co/block/auth21): 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](https://ui.beste.co/block/auth22): 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](https://ui.beste.co/block/auth23): 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](https://ui.beste.co/block/auth24): 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](https://ui.beste.co/block/auth25): 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](https://ui.beste.co/block/auth26): 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](https://ui.beste.co/block/auth27): 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](https://ui.beste.co/block/auth28): 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](https://ui.beste.co/block/auth29): 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](https://ui.beste.co/block/auth30): 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](https://ui.beste.co/block/auth31): 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](https://ui.beste.co/block/auth32): 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](https://ui.beste.co/block/auth33): 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](https://ui.beste.co/block/auth34): 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](https://ui.beste.co/block/auth35): 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](https://ui.beste.co/block/auth36): 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](https://ui.beste.co/block/auth37): 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](https://ui.beste.co/block/auth38): 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](https://ui.beste.co/block/auth39): 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](https://ui.beste.co/block/auth40): 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](https://ui.beste.co/block/auth41): 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](https://ui.beste.co/block/auth42): 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](https://ui.beste.co/block/auth43): 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](https://ui.beste.co/block/auth44): 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](https://ui.beste.co/block/auth45): 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](https://ui.beste.co/block/auth46): 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](https://ui.beste.co/block/auth47): 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](https://ui.beste.co/block/auth48): 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](https://ui.beste.co/block/auth49): 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](https://ui.beste.co/block/auth50): 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](https://ui.beste.co/block/auth51): 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](https://ui.beste.co/block/auth52): 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](https://ui.beste.co/block/bento1): A hand-tiled monochrome bento grid mixing a statement, a stat, an image, a quote, and a CTA into one composition.
- [Studio Summary Bento](https://ui.beste.co/block/bento2): 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](https://ui.beste.co/block/bento3): 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](https://ui.beste.co/block/bento4): 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](https://ui.beste.co/block/bento5): 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](https://ui.beste.co/block/bento6): 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](https://ui.beste.co/block/bento7): 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](https://ui.beste.co/block/bento8): 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](https://ui.beste.co/block/bento9): 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](https://ui.beste.co/block/bento10): 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](https://ui.beste.co/block/bento11): 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](https://ui.beste.co/block/bento12): 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](https://ui.beste.co/block/bento13): 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](https://ui.beste.co/block/blog3): 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](https://ui.beste.co/block/blog4): 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](https://ui.beste.co/block/blog5): 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](https://ui.beste.co/block/blog8): Filterable blog grid with tab navigation for categories. Posts automatically filter by category selection with smooth content switching.
- [Alternating Feature Cards](https://ui.beste.co/block/blog10): 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](https://ui.beste.co/block/blog11): Two-column compact blog list with small square thumbnails. Space-efficient design showing many posts at once with minimal metadata.
- [Masonry Pinterest Grid](https://ui.beste.co/block/blog12): Pinterest-style masonry layout with varying content heights. CSS columns create organic flow with cards of different summary lengths.
- [Sidebar with Categories](https://ui.beste.co/block/blog13): Main content area with horizontal post cards plus sidebar. Categories show post counts and popular tags section with clickable badges.
- [Grid with Newsletter Card](https://ui.beste.co/block/blog14): Four-column grid mixing blog cards with an integrated newsletter signup card. Email input and subscribe button embedded in the layout.
- [Minimal Text List](https://ui.beste.co/block/blog15): Clean text-only blog list with arrow icons. No images, just titles, dates, and authors. Lightweight design with hover arrow animation.
- [Month-Grouped Archive](https://ui.beste.co/block/blog18): Blog archive organized by month with compact list entries. Small thumbnails and formatted dates create a scannable chronological view.
- [Full-Width Stacked Cards](https://ui.beste.co/block/blog22): 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](https://ui.beste.co/block/blog25): Two-column layout with featured image on left and article list on right. Divider-separated entries with arrow hover effects.
- [Polaroid Photo Gallery](https://ui.beste.co/block/blog26): Playful polaroid-style cards with random rotations and white borders. Cards straighten on hover for a fun, casual photo gallery feel.
- [Newspaper Editorial Style](https://ui.beste.co/block/blog27): Classic newspaper layout with serif fonts and bordered headline. Large main story on left, stacked secondary stories on right with dividers.
- [Hover Reveal Overlay](https://ui.beste.co/block/blog30): 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](https://ui.beste.co/block/blog31): Wide cinematic banners with centered text overlay. Large bold titles on semi-transparent backgrounds. Immersive visual storytelling format.
- [Tutorial Series Cards](https://ui.beste.co/block/blog36): 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](https://ui.beste.co/block/blog42): Vertical timeline archive organized by year and month. Calendar icon with border line connecting entries. Compact text-only format.
- [Editorial Article Grid](https://ui.beste.co/block/blog43): 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](https://ui.beste.co/block/blog44): 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](https://ui.beste.co/block/blog45): 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](https://ui.beste.co/block/blog46): 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](https://ui.beste.co/block/blog47): 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](https://ui.beste.co/block/blog48): 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](https://ui.beste.co/block/blog49): 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](https://ui.beste.co/block/blog50): 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](https://ui.beste.co/block/blog51): 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](https://ui.beste.co/block/blog52): 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](https://ui.beste.co/block/blog53): 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](https://ui.beste.co/block/blog54): 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](https://ui.beste.co/block/blog55): 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](https://ui.beste.co/block/blog56): 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](https://ui.beste.co/block/blog57): 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](https://ui.beste.co/block/blog58): 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](https://ui.beste.co/block/blog59): 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](https://ui.beste.co/block/blog60): 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](https://ui.beste.co/block/blog61): 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](https://ui.beste.co/block/blog62): 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](https://ui.beste.co/block/booking1): 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](https://ui.beste.co/block/booking2): 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](https://ui.beste.co/block/booking3): 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](https://ui.beste.co/block/booking4): 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](https://ui.beste.co/block/booking5): 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](https://ui.beste.co/block/booking6): 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](https://ui.beste.co/block/booking7): 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](https://ui.beste.co/block/booking8): 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](https://ui.beste.co/block/booking9): 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](https://ui.beste.co/block/booking10): 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](https://ui.beste.co/block/booking11): 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](https://ui.beste.co/block/booking12): 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](https://ui.beste.co/block/booking13): 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](https://ui.beste.co/block/booking14): 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](https://ui.beste.co/block/booking15): 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](https://ui.beste.co/block/booking16): 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](https://ui.beste.co/block/booking17): 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](https://ui.beste.co/block/booking18): 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](https://ui.beste.co/block/booking19): 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](https://ui.beste.co/block/booking20): 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](https://ui.beste.co/block/booking21): 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](https://ui.beste.co/block/booking22): 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](https://ui.beste.co/block/booking23): 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](https://ui.beste.co/block/booking24): 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](https://ui.beste.co/block/booking25): 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](https://ui.beste.co/block/booking26): 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](https://ui.beste.co/block/booking27): 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](https://ui.beste.co/block/booking28): 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](https://ui.beste.co/block/booking29): 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](https://ui.beste.co/block/careers1): Job listings section with role cards showing department, location, and employment type. Clean list layout with hover effects and apply buttons.
- [Job Openings Grid](https://ui.beste.co/block/careers2): Job openings grid with department badges, location tags, and apply buttons. Card-based layout for career pages.
- [Department-Grouped Positions](https://ui.beste.co/block/careers3): Department-grouped job listings with minimal row layout. Jobs organized by team with location and type indicators.
- [Perks & Open Positions](https://ui.beste.co/block/careers4): Combined perks and job listings section with benefits grid and open positions list. Ideal for complete career pages.
- [Featured Role with Positions](https://ui.beste.co/block/careers5): Highlighted featured position card with a compact list of additional openings below. Great for showcasing priority roles.
- [Tab-Filtered Job Board](https://ui.beste.co/block/careers6): Tabbed job board with department filters using shadcn Tabs component. Browse positions by team with location and type details.
- [Culture Stats with Positions](https://ui.beste.co/block/careers7): Team culture stats bar followed by detailed job position cards. Combines social proof with open roles listing.
- [Job Detail Page](https://ui.beste.co/block/careers8): Single job posting detail with responsibilities, requirements, nice-to-haves, and apply CTA. Full position description layout.
- [Employee Benefits Grid](https://ui.beste.co/block/careers9): Benefits and perks showcase with icon cards in a responsive grid. Highlights company offerings like health, remote work, and growth opportunities.
- [Hiring Process Timeline](https://ui.beste.co/block/careers10): Step-by-step hiring process timeline with numbered stages. Shows candidates the interview journey from application to onboarding.
- [Culture & Values](https://ui.beste.co/block/careers11): Company values grid with icon cards and employee testimonial quote. Showcases team culture and work philosophy.
- [Career Growth Ladder](https://ui.beste.co/block/careers12): Career progression path with level indicators, role descriptions, and key skills. Shows growth framework from junior to principal level.
- [Office Locations Grid](https://ui.beste.co/block/careers13): Global office locations grid with city photos, team size, and role taglines. Showcases company presence worldwide.
- [Meet the Team Gallery](https://ui.beste.co/block/careers14): Team member photo grid with names and roles. Square portrait layout for showcasing leadership and team composition.
- [Day in the Life Timeline](https://ui.beste.co/block/careers15): A typical workday timeline with time stamps, activity icons, and descriptions. Shows candidates what daily life looks like at the company.
- [Employee Testimonials](https://ui.beste.co/block/careers16): Employee testimonial cards with quotes, avatars, and roles. Social proof grid showcasing team member experiences and company culture.
- [Job Application Form](https://ui.beste.co/block/careers17): Job application form with input fields, file upload area, and position summary sidebar. Complete apply page layout for career sites.
- [Department Overview Grid](https://ui.beste.co/block/careers18): Department cards with team lead, headcount, open roles badge, and links. Helps candidates explore teams before applying.
- [Internship Program](https://ui.beste.co/block/careers19): Internship program section with highlights, mentorship details, program summary card, and apply CTA. For recruiting early-career talent.
- [Diversity & Inclusion](https://ui.beste.co/block/careers20): Diversity and inclusion section with representation stats and initiative cards. Showcases company commitment to equity and belonging.
- [Compensation & Total Rewards](https://ui.beste.co/block/careers21): Transparent compensation philosophy with salary, equity, bonus, and perks cards. Shows total rewards approach with highlighted details.
- [Employee Spotlight Story](https://ui.beste.co/block/careers22): Featured employee profile with portrait photo, personal quote, and career milestone timeline. Showcases real growth stories.
- [Employee Referral Program](https://ui.beste.co/block/careers23): Referral program section with step-by-step process, bonus highlight card, and submit CTA. Encourages employee referrals.
- [Onboarding Journey Preview](https://ui.beste.co/block/careers24): First 90 days onboarding timeline with phase cards and activity checklists. Shows new hires what to expect from orientation to ownership.
- [Remote Work Setup](https://ui.beste.co/block/careers25): 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](https://ui.beste.co/block/careers26): Recruitment statistics dashboard with key metrics, trends, and detailed hiring process stats. Transparent data-driven hiring showcase.
- [Speculative Application CTA](https://ui.beste.co/block/careers27): Bottom-of-page careers CTA for general applications with email, action buttons, and company highlight badges. Captures candidates without matching roles.
- [Learning & Development](https://ui.beste.co/block/careers28): Professional development program cards with conference budget, courses, mentorship, and tech talks. Highlights company investment in employee growth.
- [Team Events Gallery](https://ui.beste.co/block/careers29): Photo gallery of company events, offsites, and team activities in masonry layout. Visual showcase of team culture and community.
- [Team Blog Highlights](https://ui.beste.co/block/careers30): Engineering and team blog article preview cards with images, excerpts, and authors. Showcases technical depth and knowledge sharing culture.
- [Role Comparison Table](https://ui.beste.co/block/careers31): Side-by-side role comparison grid showing team, skills, experience, and salary for different positions. Responsive table-to-card layout.
- [Alumni Network Showcase](https://ui.beste.co/block/careers32): Former employee showcase with career progression from company role to current position. Demonstrates the company as a career launchpad.
- [HR Job Posting Detail](https://ui.beste.co/block/careers33): Formal HR job posting with responsibilities, qualifications, benefits, and sidebar summary. Corporate-style position detail page with apply CTA.
- [Engineering Principles](https://ui.beste.co/block/careers34): Numbered engineering principles list with large counters and descriptions. Showcases team philosophy on shipping, ownership, and simplicity.
- [Salary Bands Table](https://ui.beste.co/block/careers35): Transparent salary bands with level, role, visual range bars, and equity details. Pay transparency table with responsive card fallback.
- [Hiring Manager Profiles](https://ui.beste.co/block/careers36): Team lead profiles with photos, bios, and department badges. Introduces future managers to candidates with detailed backgrounds.
- [Job Alerts Signup](https://ui.beste.co/block/careers37): Email subscription form for job alerts with trust indicators. Captures candidate interest for future openings with clean card layout.
- [Work Perks Bento Grid](https://ui.beste.co/block/careers38): 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](https://ui.beste.co/block/careers39): Two-column guide with preparation tips and company commitments to candidates. Sets expectations for the hiring process with contact info.
- [Open Roles](https://ui.beste.co/block/careers40): A studio jobs list with role meta, salary and apply arrows.
- [Benefits & Perks](https://ui.beste.co/block/careers41): Studio benefits grid with an accent highlight and icon cards.
- [Studio Culture](https://ui.beste.co/block/careers42): Culture statement and tenets beside a three-image studio-life collage.
- [Hiring Process](https://ui.beste.co/block/careers43): The studio's interview process as a connected, numbered step flow.
- [Roles By Department](https://ui.beste.co/block/careers44): Department-tabbed open roles list using shadcn Tabs.
- [Life At The Studio](https://ui.beste.co/block/careers45): A captioned masonry photo wall of studio life with an intro and a roles CTA.
- [Role Spotlight](https://ui.beste.co/block/careers46): A full featured-role posting with responsibilities, requirements and a sticky apply card.
- [Why Join Us](https://ui.beste.co/block/careers47): Team stats band paired with benefit highlights.
- [Join The Studio](https://ui.beste.co/block/careers48): Sticky employer-value intro beside a scrollable open-roles list.
- [Benefits Breakdown](https://ui.beste.co/block/careers49): Categorized studio benefits with checklists per category.
- [Careers Gallery Header](https://ui.beste.co/block/careers50): 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](https://ui.beste.co/block/careers51): 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](https://ui.beste.co/block/careers52): 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](https://ui.beste.co/block/careers53): 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](https://ui.beste.co/block/careers54): 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](https://ui.beste.co/block/careers55): 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](https://ui.beste.co/block/careers56): 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](https://ui.beste.co/block/changelog2): Split-layout changelog with milestone context, highlights, metrics, and action buttons.
- [Changelog Release Feed](https://ui.beste.co/block/changelog3): Release feed cards with aligned change labels, summaries, and optional CTA buttons.
- [Grouped Changelog Board](https://ui.beste.co/block/changelog4): Month-grouped changelog board with aligned labels, release details, and optional links.
- [Milestone Changelog Timeline](https://ui.beste.co/block/changelog5): Timeline-style changelog with version badges, dates, and color-coded change types. Ideal for release notes and version history.
- [Minimal Text Changelog](https://ui.beste.co/block/changelog6): Ultra-minimal text-only changelog with version headers and dash-prefixed change lists. No badges, no cards, just clean typography.
- [Categorized Release Notes](https://ui.beste.co/block/changelog7): Release notes with changes grouped by type — Added, Changed, Fixed — using color-coded category labels.
- [Featured Release Changelog](https://ui.beste.co/block/changelog8): Latest release highlighted in a featured card with full details, followed by a compact list of previous releases.
- [Release Card Grid](https://ui.beste.co/block/changelog9): Responsive card grid of releases with version badges, descriptions, and optional links. Great for browsable release archives.
- [Dense Inline Release Log](https://ui.beste.co/block/changelog10): 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](https://ui.beste.co/block/changelog11): Minimal two-column layout with fixed-width date column on the left and version heading with change list on the right.
- [Large Version Changelog](https://ui.beste.co/block/changelog12): Poster-style changelog with oversized version numbers as visual anchors, followed by date, heading, and description text.
- [Accordion Release Changelog](https://ui.beste.co/block/changelog13): Collapsible accordion changelog where each release expands to reveal description and change list.
- [Year-Grouped Accordion Changelog](https://ui.beste.co/block/changelog14): Releases grouped by year in collapsible accordion panels with release count indicators.
- [Stacked Release Cards](https://ui.beste.co/block/changelog15): Stacked release cards with heading, description, change list, and version footer. Clean vertical feed for product updates.
- [Visual Release Notes](https://ui.beste.co/block/changelog16): 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](https://ui.beste.co/block/changelog17): Author-attributed changelog feed with avatars, roles, rich descriptions, change lists, and tags.
- [Full-Width Showcase Changelog](https://ui.beste.co/block/changelog18): Full-width hero images with rich release content below. Marketing-focused changelog for major product announcements.
- [Developer Changelog with Code](https://ui.beste.co/block/changelog19): Technical changelog with code blocks showing API changes, migration examples, and usage snippets alongside release notes.
- [Roadmap Status Changelog](https://ui.beste.co/block/changelog20): Hybrid roadmap and changelog with shipped, in-progress, and planned items. Includes status dots, tags, and optional feature images.
- [Kanban Board Changelog](https://ui.beste.co/block/changelog21): Three-column kanban board grouping changes by type — Features, Fixes, and Improvements — with stacked cards.
- [Terminal Git Log Changelog](https://ui.beste.co/block/changelog22): 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](https://ui.beste.co/block/changelog23): Structured table view with column headers, alternating row backgrounds, color-coded type badges, and optional links.
- [Callout Highlight Changelog](https://ui.beste.co/block/changelog24): Release feed with prominent callout blocks highlighting the most impactful change per release.
- [Newspaper Changelog](https://ui.beste.co/block/changelog25): Broadsheet newspaper layout with masthead, featured headline story, sidebar briefs, and numbered patch notes in flowing columns.
- [Version Rail Release Timeline](https://ui.beste.co/block/changelog26): 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](https://ui.beste.co/block/changelog27): 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](https://ui.beste.co/block/changelog28): 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](https://ui.beste.co/block/changelog29): 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](https://ui.beste.co/block/changelog30): 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](https://ui.beste.co/block/chat4): 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](https://ui.beste.co/block/chat5): 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](https://ui.beste.co/block/chat6): 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](https://ui.beste.co/block/chat7): 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](https://ui.beste.co/block/chat8): 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](https://ui.beste.co/block/chat9): 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](https://ui.beste.co/block/chat10): 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](https://ui.beste.co/block/chat11): 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](https://ui.beste.co/block/chat12): 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](https://ui.beste.co/block/chat13): 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](https://ui.beste.co/block/chat14): 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](https://ui.beste.co/block/chat15): 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](https://ui.beste.co/block/chat16): 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](https://ui.beste.co/block/chat17): 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](https://ui.beste.co/block/chat18): 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](https://ui.beste.co/block/chat19): 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](https://ui.beste.co/block/chat20): 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](https://ui.beste.co/block/chat21): 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](https://ui.beste.co/block/chat22): 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](https://ui.beste.co/block/chat23): 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](https://ui.beste.co/block/chat24): 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](https://ui.beste.co/block/chat25): 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](https://ui.beste.co/block/chat26): 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](https://ui.beste.co/block/chat27): 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](https://ui.beste.co/block/chat28): 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](https://ui.beste.co/block/chat29): 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](https://ui.beste.co/block/chat30): 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](https://ui.beste.co/block/chat31): 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](https://ui.beste.co/block/comingsoon1): 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](https://ui.beste.co/block/comingsoon2): 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](https://ui.beste.co/block/comingsoon3): 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](https://ui.beste.co/block/comingsoon4): 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](https://ui.beste.co/block/comingsoon5): 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](https://ui.beste.co/block/comingsoon6): 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](https://ui.beste.co/block/comingsoon7): 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](https://ui.beste.co/block/comingsoon8): 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](https://ui.beste.co/block/comingsoon9): 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](https://ui.beste.co/block/comingsoon10): 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](https://ui.beste.co/block/comingsoon11): 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](https://ui.beste.co/block/comingsoon12): 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](https://ui.beste.co/block/comingsoon13): 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](https://ui.beste.co/block/comingsoon14): 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](https://ui.beste.co/block/comingsoon15): 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](https://ui.beste.co/block/comingsoon16): 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](https://ui.beste.co/block/comingsoon17): 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](https://ui.beste.co/block/comingsoon18): 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](https://ui.beste.co/block/comingsoon19): 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](https://ui.beste.co/block/comingsoon20): 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](https://ui.beste.co/block/comingsoon21): 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](https://ui.beste.co/block/comingsoon22): 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](https://ui.beste.co/block/comingsoon23): 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](https://ui.beste.co/block/comingsoon24): 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](https://ui.beste.co/block/comingsoon25): 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](https://ui.beste.co/block/comingsoon26): 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](https://ui.beste.co/block/comingsoon27): 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](https://ui.beste.co/block/comingsoon28): 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](https://ui.beste.co/block/comingsoon29): 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](https://ui.beste.co/block/comingsoon30): 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](https://ui.beste.co/block/comingsoon31): 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](https://ui.beste.co/block/comingsoon32): 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](https://ui.beste.co/block/comingsoon33): 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](https://ui.beste.co/block/comingsoon34): 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](https://ui.beste.co/block/comingsoon35): 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](https://ui.beste.co/block/comingsoon36): 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](https://ui.beste.co/block/comingsoon37): 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](https://ui.beste.co/block/comingsoon38): 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](https://ui.beste.co/block/comingsoon39): 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](https://ui.beste.co/block/comingsoon40): 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](https://ui.beste.co/block/comingsoon41): 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](https://ui.beste.co/block/comingsoon42): 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](https://ui.beste.co/block/comingsoon43): 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](https://ui.beste.co/block/comingsoon44): 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](https://ui.beste.co/block/comingsoon45): 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](https://ui.beste.co/block/comingsoon46): 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](https://ui.beste.co/block/comingsoon47): 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](https://ui.beste.co/block/comingsoon48): 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](https://ui.beste.co/block/comingsoon49): 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](https://ui.beste.co/block/comingsoon50): 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](https://ui.beste.co/block/comingsoon51): 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](https://ui.beste.co/block/comingsoon52): 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](https://ui.beste.co/block/comingsoon53): 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](https://ui.beste.co/block/comingsoon54): 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](https://ui.beste.co/block/comingsoon55): 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](https://ui.beste.co/block/comingsoon56): 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](https://ui.beste.co/block/comingsoon57): 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](https://ui.beste.co/block/comingsoon58): 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](https://ui.beste.co/block/comingsoon59): 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](https://ui.beste.co/block/comingsoon60): 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](https://ui.beste.co/block/comingsoon61): 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](https://ui.beste.co/block/comingsoon62): 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](https://ui.beste.co/block/comingsoon63): 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](https://ui.beste.co/block/comingsoon64): 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](https://ui.beste.co/block/comingsoon65): 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](https://ui.beste.co/block/comingsoon66): 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](https://ui.beste.co/block/comingsoon67): 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](https://ui.beste.co/block/comingsoon68): 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](https://ui.beste.co/block/comingsoon69): 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](https://ui.beste.co/block/comingsoon70): 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](https://ui.beste.co/block/comingsoon71): 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](https://ui.beste.co/block/comingsoon72): 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](https://ui.beste.co/block/comingsoon73): 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](https://ui.beste.co/block/comingsoon74): 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](https://ui.beste.co/block/comingsoon75): 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](https://ui.beste.co/block/comingsoon76): 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](https://ui.beste.co/block/comingsoon77): 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](https://ui.beste.co/block/comingsoon78): 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](https://ui.beste.co/block/comingsoon79): 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](https://ui.beste.co/block/crypto1): 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](https://ui.beste.co/block/crypto24): Governance proposal cards with for/against vote bars and quorum progress. Status badges (active, passed, rejected), countdown timers, and proposer addresses.
- [Airdrop Claim Card](https://ui.beste.co/block/crypto29): Token airdrop claim interface with eligibility checklist. Shows allocation amount, criteria met count, expiration timer, and claim button with wallet connection.
- [Contract Address List](https://ui.beste.co/block/crypto35): 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](https://ui.beste.co/block/cta8): Minimal centered call-to-action with heading, description, and action buttons. Perfect for newsletter signups and conversion sections.
- [Split Layout Newsletter CTA](https://ui.beste.co/block/cta9): 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](https://ui.beste.co/block/cta10): Call-to-action with avatar stack, subscriber count, and testimonial quote for building trust and boosting conversions.
- [Banner CTA](https://ui.beste.co/block/cta11): Horizontal banner call-to-action with heading and action buttons side by side. Perfect for inline conversion sections between content blocks.
- [Stats CTA](https://ui.beste.co/block/cta12): Call-to-action section with impressive statistics and trust indicators above action buttons. Perfect for data-driven conversion sections.
- [Multi-Card CTA](https://ui.beste.co/block/cta13): 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](https://ui.beste.co/block/cta14): Call-to-action with a vertical list of benefit checkmarks and action buttons. Perfect for highlighting value propositions before conversion.
- [Minimal CTA](https://ui.beste.co/block/cta15): Ultra-minimal call-to-action with a single bold heading and action button. Perfect for clean, distraction-free conversion sections.
- [Logo Cloud CTA](https://ui.beste.co/block/cta16): Call-to-action with trusted-by logo cloud and action buttons. Perfect for building credibility with brand recognition before conversion.
- [Split Comparison CTA](https://ui.beste.co/block/cta17): 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](https://ui.beste.co/block/cta18): Full-width call-to-action with background image overlay, heading, and action buttons. Perfect for bold, visually striking conversion sections.
- [Steps CTA](https://ui.beste.co/block/cta19): Three-step process visualization with numbered steps and call-to-action. Perfect for showing how easy it is to get started.
- [Quote-Led CTA](https://ui.beste.co/block/cta20): Large testimonial quote as the hero element with call-to-action buttons below. Perfect for social proof driven conversion.
- [Notification CTA](https://ui.beste.co/block/cta21): Compact notification-style call-to-action card with icon, message, and inline action button. Perfect for subtle inline conversion prompts.
- [Highlight Card CTA](https://ui.beste.co/block/cta22): Card-style call-to-action with value-driven highlight metrics in a bordered grid. Perfect for data-backed conversion sections.
- [Two-Tier CTA](https://ui.beste.co/block/cta23): 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](https://ui.beste.co/block/cta24): 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](https://ui.beste.co/block/cta25): Grid of short testimonial quotes with centered call-to-action below. Perfect for social proof driven conversion.
- [Countdown CTA](https://ui.beste.co/block/cta26): Urgency-driven call-to-action with countdown numbers and limited-time offer messaging. Perfect for launches and time-sensitive promotions.
- [Pill Tags CTA](https://ui.beste.co/block/cta27): Call-to-action with scattered topic pills and tags showing what subscribers receive. Perfect for newsletter and content subscription sections.
- [Big Number CTA](https://ui.beste.co/block/cta28): Single massive statistic as the visual centerpiece with supporting text and action buttons. Perfect for impact-driven conversion sections.
- [Dual CTA](https://ui.beste.co/block/cta29): 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](https://ui.beste.co/block/cta30): Expandable FAQ questions paired with an inline call-to-action. Perfect for addressing objections before conversion.
- [Newsletter Preview CTA](https://ui.beste.co/block/cta31): 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](https://ui.beste.co/block/cta32): Horizontal progress bars with metric labels showing platform performance alongside call-to-action. Perfect for data-driven trust building.
- [Compact Bar CTA](https://ui.beste.co/block/cta33): 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](https://ui.beste.co/block/cta34): Vertically stacked bordered sections with alternating content and a final call-to-action. Perfect for storytelling-driven conversion.
- [Avatar Wall CTA](https://ui.beste.co/block/cta35): Dense grid of subscriber avatars with centered heading overlay and call-to-action. Perfect for community-driven conversion.
- [Accent Sidebar CTA](https://ui.beste.co/block/cta36): Card with colored accent left border and inline call-to-action. Perfect for attention-grabbing inline conversion prompts.
- [Feature Table CTA](https://ui.beste.co/block/cta37): Simple feature comparison table with checkmarks and call-to-action button below. Perfect for quick plan or feature comparison sections.
- [Aurora Spotlight CTA](https://ui.beste.co/block/cta38): 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](https://ui.beste.co/block/cta39): Call-to-action addressing common objections with question-answer pairs and conversion button. Perfect for overcoming hesitation.
- [Bento CTA](https://ui.beste.co/block/cta40): 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](https://ui.beste.co/block/cta41): 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](https://ui.beste.co/block/cta42): Rotating testimonial quotes with author info and persistent call-to-action buttons. Perfect for social proof that stays fresh.
- [Numbered List CTA](https://ui.beste.co/block/cta43): Numbered reasons or benefits list with large ordinals and call-to-action at the bottom. Perfect for persuasive, structured conversion arguments.
- [Image Marquee CTA](https://ui.beste.co/block/cta44): 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](https://ui.beste.co/block/cta45): 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](https://ui.beste.co/block/cta46): Interactive image comparison slider with draggable handle for before and after views. Supports both mouse and touch input.
- [Stacked Photo Deck CTA](https://ui.beste.co/block/cta47): 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](https://ui.beste.co/block/cta48): 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](https://ui.beste.co/block/cta49): Cinematic call-to-action with a looping background video, gradient overlay, and bottom-aligned content for an immersive hero section.
- [Diagonal Split Image CTA](https://ui.beste.co/block/cta50): Split layout with two images divided diagonally, each slowly panning in opposite directions. Creates a bold editorial feel with smooth animation.
- [Vertical Marquee CTA](https://ui.beste.co/block/cta51): Two vertical image columns scrolling in opposite directions frame the centered call-to-action content. Creates a dynamic gallery wall effect.
- [Media Accordion CTA](https://ui.beste.co/block/cta52): 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](https://ui.beste.co/block/cta53): Looping background video behind a frosted glass content card with badge, heading, description, and action buttons. Creates an immersive, cinematic feel.
- [Split Video CTA](https://ui.beste.co/block/cta54): 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](https://ui.beste.co/block/cta55): 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](https://ui.beste.co/block/cta56): 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](https://ui.beste.co/block/cta57): 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](https://ui.beste.co/block/cta58): 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](https://ui.beste.co/block/cta59): Centered CTA content above a continuously scrolling horizontal strip of looping video thumbnails. Creates an energetic, dynamic showcase feel.
- [Video Blinds Reveal CTA](https://ui.beste.co/block/cta60): 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](https://ui.beste.co/block/cta61): 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](https://ui.beste.co/block/cta62): 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](https://ui.beste.co/block/cta63): Asymmetric bento-style grid with one large video spanning two rows alongside two stacked smaller videos. CTA content sits above the grid.
- [Statement CTA](https://ui.beste.co/block/cta64): Bold full-width call to action on a dark panel with dual buttons.
- [Newsletter CTA](https://ui.beste.co/block/cta65): Split card with a subscribe form beside an image.
- [Marquee CTA](https://ui.beste.co/block/cta66): Centered call to action over a faint scrolling word-marquee background.
- [Image CTA](https://ui.beste.co/block/cta67): Cinematic full-bleed image CTA with an overlaid content panel.
- [Contact CTA](https://ui.beste.co/block/cta68): Centered contact call to action with an availability badge and big headline.
- [Worth Keeping CTA](https://ui.beste.co/block/cta69): Full-bleed monochrome closing CTA with a giant scrolling marquee behind a single centered seal button.
- [Editorial Asymmetric CTA](https://ui.beste.co/block/cta70): An oversized editorial CTA with a left-weighted heading, a pinned seal button, and a ruled baseline with monospace index marks.
- [Framed Studio Call](https://ui.beste.co/block/cta71): 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](https://ui.beste.co/block/cta72): A monochrome newsletter CTA band pairing an oversized statement with an inline email-capture form and a reassurance note.
- [Closing CTA Panel](https://ui.beste.co/block/cta73): 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](https://ui.beste.co/block/cta74): 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](https://ui.beste.co/block/cta75): 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](https://ui.beste.co/block/cta76): 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](https://ui.beste.co/block/cta77): 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](https://ui.beste.co/block/cta78): 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](https://ui.beste.co/block/cta79): 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](https://ui.beste.co/block/cta80): 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](https://ui.beste.co/block/cta81): 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](https://ui.beste.co/block/cta82): 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](https://ui.beste.co/block/cta83): 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](https://ui.beste.co/block/cta84): 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](https://ui.beste.co/block/cta85): 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](https://ui.beste.co/block/cta86): 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](https://ui.beste.co/block/cta87): 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](https://ui.beste.co/block/cta88): 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](https://ui.beste.co/block/cta89): 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](https://ui.beste.co/block/cta90): 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](https://ui.beste.co/block/cta91): 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](https://ui.beste.co/block/cta92): 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](https://ui.beste.co/block/dashboard1): 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](https://ui.beste.co/block/dashboard2): 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](https://ui.beste.co/block/dashboard3): 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](https://ui.beste.co/block/dashboard4): 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](https://ui.beste.co/block/dashboard5): 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](https://ui.beste.co/block/dashboard6): 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](https://ui.beste.co/block/dashboard7): 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](https://ui.beste.co/block/dashboard8): 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](https://ui.beste.co/block/dashboard9): 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](https://ui.beste.co/block/dashboard10): 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](https://ui.beste.co/block/dashboard11): 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](https://ui.beste.co/block/dashboard12): 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](https://ui.beste.co/block/dashboard13): 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](https://ui.beste.co/block/devtools1): Interactive REST API endpoint reference with method badges, expandable parameter details, and response types. Grouped by resource.
- [Webhook Event Stream](https://ui.beste.co/block/devtools2): Real-time webhook event log with delivery status indicators, expandable JSON payloads, and response time tracking.
- [Multi-Language Code Tabs](https://ui.beste.co/block/devtools3): 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](https://ui.beste.co/block/devtools4): Application error tracking feed with severity indicators, occurrence counts, and source locations. Summary pills show error distribution.
- [Feature Flags Manager](https://ui.beste.co/block/devtools5): Interactive feature flag management with toggle switches, rollout progress bars, and environment badges.
- [Application Log Viewer](https://ui.beste.co/block/devtools6): Terminal-style structured log viewer with level filtering. Color-coded INFO, WARN, ERROR, and DEBUG entries with timestamps and source labels.
- [API Response Examples](https://ui.beste.co/block/devtools7): API documentation cards showing response examples with color-coded status badges. Headers section, JSON body with copy button, success/error variants.
- [API Key Manager](https://ui.beste.co/block/devtools8): API key management panel with masked credentials, reveal/copy controls, scope badges, and active/revoked status indicators.
- [Database Migration Timeline](https://ui.beste.co/block/devtools9): Timeline-style database migration tracker with applied, pending, and failed status indicators. Shows migration names, descriptions, and timestamps.
- [Cron Job Scheduler](https://ui.beste.co/block/devtools10): Scheduled task manager showing cron expressions, last/next run times, duration, and active/paused/failed status indicators.
- [Audit Activity Log](https://ui.beste.co/block/devtools11): Filterable audit trail showing user actions with create, update, delete, and access type indicators. Includes resource, user, and timestamp info.
- [Rate Limit Dashboard](https://ui.beste.co/block/devtools12): API rate limit monitor with color-coded usage bars per endpoint. Shows current usage, limits, and visual threshold indicators.
- [Environment Config Viewer](https://ui.beste.co/block/devtools13): Tabbed environment variable viewer for comparing configuration across production, staging, and development environments.
- [JSON Formatter Tool](https://ui.beste.co/block/devtools14): Interactive JSON editor with format, minify, and real-time validation. Valid/invalid status badge, copy button, and syntax error display.
- [Package Dependency Health](https://ui.beste.co/block/devtools15): Dependency version tracker with update availability, security fix indicators, and version comparison arrows.
- [Queue Monitor](https://ui.beste.co/block/devtools16): Background job queue monitor showing processed, pending, and failed counts with healthy, warning, and critical status indicators.
- [Service Health Board](https://ui.beste.co/block/devtools17): Infrastructure status board showing service health with operational, degraded, and down indicators. Displays uptime percentages and latency metrics.
- [Performance Waterfall](https://ui.beste.co/block/devtools18): Network request waterfall chart with cascading timing bars. Color-coded by duration — green for fast, amber for medium, red for slow.
- [Keyboard Shortcuts Reference](https://ui.beste.co/block/devtools19): Grouped keyboard shortcuts with styled keycap visuals. Shows key combinations with shadow-styled kbd elements and descriptions.
- [Code Diff Viewer](https://ui.beste.co/block/devtools20): Unified code diff viewer with dark terminal background. Green additions, red deletions, and gray context lines with file headers.
- [Network Request Monitor](https://ui.beste.co/block/devtools33): Real-time HTTP request interceptor with recording controls. Method badges, status codes, duration timing, size info, and filterable by method/type.
- [Load Test Dashboard](https://ui.beste.co/block/devtools37): 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](https://ui.beste.co/block/devtools38): 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](https://ui.beste.co/block/devtools49): Test coverage dashboard with expandable file tree. Coverage metrics for statements, branches, functions, and lines with color-coded progress bars.
- [Bundle Size Analyzer](https://ui.beste.co/block/devtools52): 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](https://ui.beste.co/block/devtools56): Database table browser with expandable schema views. Shows columns, types, primary/foreign keys, and relationships. Row counts and nullable indicators.
- [Bundle Chunk Analyzer](https://ui.beste.co/block/devtools92): 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](https://ui.beste.co/block/devtools93): 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](https://ui.beste.co/block/devtools94): 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](https://ui.beste.co/block/ecommerce1): Responsive product grid with ratings, sale badges, and add to cart buttons. Perfect for shop pages and product catalogs.
- [Product Detail with Variants](https://ui.beste.co/block/ecommerce2): 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](https://ui.beste.co/block/ecommerce3): 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](https://ui.beste.co/block/ecommerce4): 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](https://ui.beste.co/block/ecommerce5): 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](https://ui.beste.co/block/ecommerce6): 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](https://ui.beste.co/block/ecommerce7): 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](https://ui.beste.co/block/ecommerce8): 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](https://ui.beste.co/block/ecommerce11): Measurement chart table with chest, waist, hips, and length columns. Perfect for clothing product pages and sizing reference.
- [Related Products Grid](https://ui.beste.co/block/ecommerce14): Product recommendations grid with images, prices, and add to cart buttons. Perfect for cross-selling and upselling on product pages.
- [Shipping Info Cards](https://ui.beste.co/block/ecommerce15): Icon cards displaying shipping, delivery, tracking, and returns policies. Perfect for product pages and checkout information.
- [Payment Methods Display](https://ui.beste.co/block/ecommerce16): Payment options grid showing credit cards, digital wallets, and bank transfers. Perfect for checkout pages and footer trust signals.
- [Order History List](https://ui.beste.co/block/ecommerce17): 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](https://ui.beste.co/block/ecommerce19): Code input form with loading states, validation, and balance display on success. Perfect for checkout pages and account credit sections.
- [Sale Countdown Timer](https://ui.beste.co/block/ecommerce23): 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](https://ui.beste.co/block/ecommerce26): Product page with thumbnail image gallery, color swatches, size buttons, and feature icons. Perfect for premium product showcases.
- [Category Cards Grid](https://ui.beste.co/block/ecommerce27): Category collection grid with overlay images, item counts, and shop now links. Perfect for homepage category navigation and collection pages.
- [Featured Products Grid](https://ui.beste.co/block/ecommerce28): 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](https://ui.beste.co/block/ecommerce29): Featured product with live countdown timer, discount badge, feature list, and large CTA. Perfect for daily deals and promotional landing pages.
- [Outfit Builder](https://ui.beste.co/block/ecommerce31): 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](https://ui.beste.co/block/ecommerce32): Brand logo cards with product counts and hover effects linking to brand pages. Perfect for multi-brand stores and brand discovery.
- [Collection Showcase Grid](https://ui.beste.co/block/ecommerce33): Featured collection card with supporting collection tiles, image overlays, and product counts. Perfect for homepage collection highlights.
- [Gift Finder by Budget](https://ui.beste.co/block/ecommerce34): 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](https://ui.beste.co/block/ecommerce35): Review cards with star ratings, product thumbnails, verified badges, and helpfulness counts. Perfect for social proof and testimonial sections.
- [Trust Badges Section](https://ui.beste.co/block/ecommerce36): Icon badges for shipping, returns, security, and support in default, compact, or detailed variants. Perfect for building trust near checkout buttons.
- [Shop the Look](https://ui.beste.co/block/ecommerce37): 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](https://ui.beste.co/block/ecommerce38): 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](https://ui.beste.co/block/ecommerce39): 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](https://ui.beste.co/block/ecommerce40): 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](https://ui.beste.co/block/ecommerce41): 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](https://ui.beste.co/block/ecommerce42): 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](https://ui.beste.co/block/ecommerce43): 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](https://ui.beste.co/block/ecommerce44): 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](https://ui.beste.co/block/ecommerce45): 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](https://ui.beste.co/block/ecommerce46): 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](https://ui.beste.co/block/education12): 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](https://ui.beste.co/block/education13): 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](https://ui.beste.co/block/education17): 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](https://ui.beste.co/block/education22): A faculty spotlight featuring professor photo, biography, research interests, publications count, and inspirational quote. Perfect for showcasing instructors and academic staff.
- [Learner Leaderboard](https://ui.beste.co/block/education25): 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](https://ui.beste.co/block/education26): 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](https://ui.beste.co/block/education48): 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](https://ui.beste.co/block/education53): 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](https://ui.beste.co/block/education78): 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](https://ui.beste.co/block/education79): 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](https://ui.beste.co/block/education86): 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](https://ui.beste.co/block/education91): 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](https://ui.beste.co/block/education99): A global partnerships section showcasing partner institutions with location details and exchange statistics. Perfect for universities highlighting international collaborations.
- [Institutional Quick Facts](https://ui.beste.co/block/education100): 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](https://ui.beste.co/block/education101): 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](https://ui.beste.co/block/education102): 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](https://ui.beste.co/block/error1): 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](https://ui.beste.co/block/error2): 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](https://ui.beste.co/block/error3): 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](https://ui.beste.co/block/error4): 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](https://ui.beste.co/block/error5): 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](https://ui.beste.co/block/error6): 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](https://ui.beste.co/block/error7): 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](https://ui.beste.co/block/error8): 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](https://ui.beste.co/block/error9): 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](https://ui.beste.co/block/error10): 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](https://ui.beste.co/block/error11): 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](https://ui.beste.co/block/error12): 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](https://ui.beste.co/block/error13): 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](https://ui.beste.co/block/error14): 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](https://ui.beste.co/block/error15): 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](https://ui.beste.co/block/error16): 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](https://ui.beste.co/block/error17): 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](https://ui.beste.co/block/error18): 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](https://ui.beste.co/block/error19): 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](https://ui.beste.co/block/error20): 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](https://ui.beste.co/block/error21): 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](https://ui.beste.co/block/error22): 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](https://ui.beste.co/block/error23): 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](https://ui.beste.co/block/error24): 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](https://ui.beste.co/block/error25): 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](https://ui.beste.co/block/error26): 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](https://ui.beste.co/block/error27): 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](https://ui.beste.co/block/error28): 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](https://ui.beste.co/block/error29): 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](https://ui.beste.co/block/error30): 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](https://ui.beste.co/block/error31): 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](https://ui.beste.co/block/error32): 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](https://ui.beste.co/block/error33): 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](https://ui.beste.co/block/error34): 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](https://ui.beste.co/block/error35): 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](https://ui.beste.co/block/error36): 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](https://ui.beste.co/block/error37): 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](https://ui.beste.co/block/event4): 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](https://ui.beste.co/block/event5): 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](https://ui.beste.co/block/event7): 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](https://ui.beste.co/block/event10): 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](https://ui.beste.co/block/event13): Featured speaker spotlight with large portrait, bio, session topic, and social media links. Perfect for highlighting conference keynote presenters.
- [Speaker Sessions Schedule](https://ui.beste.co/block/event14): Speaker cards displaying multiple sessions per presenter with times, locations, and session types. Perfect for multi-track conferences with recurring speakers.
- [Featured Keynotes Gallery](https://ui.beste.co/block/event15): Visual speaker grid with full-height portrait images, gradient overlays, and keynote topics. Perfect for showcasing headline speakers at major conferences.
- [Panel Discussion Section](https://ui.beste.co/block/event16): Panel session card featuring moderator highlight, panelist grid, discussion topic, and scheduled time. Perfect for industry panels and expert roundtables.
- [Event Hosts Section](https://ui.beste.co/block/event17): 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](https://ui.beste.co/block/event19): 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](https://ui.beste.co/block/event20): Speaker submission CTA with submission deadline, benefits checklist, and proposal guidelines. Perfect for conferences seeking talk proposals.
- [Featured Sessions Grid](https://ui.beste.co/block/event25): Session cards displaying talk titles, speakers, times, locations, and remaining capacity. Perfect for conference agendas and session discovery.
- [Workshop Registration List](https://ui.beste.co/block/event26): 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](https://ui.beste.co/block/event27): Schedule cards for coffee breaks, lunch, and social events with timing, locations, and activity highlights. Perfect for showing networking opportunities.
- [Live Session Now Playing](https://ui.beste.co/block/event28): 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](https://ui.beste.co/block/event29): 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](https://ui.beste.co/block/event30): 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](https://ui.beste.co/block/event33): Interactive pricing calculator with quantity selector, tiered discounts, and real-time savings display. Perfect for group ticket sales and team registrations.
- [Ticket Selection Cart](https://ui.beste.co/block/event36): Multi-ticket type selector with quantity controls, availability tracking, and checkout total. Perfect for event ticketing with multiple pass options.
- [Sold Out Waitlist Form](https://ui.beste.co/block/event38): 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](https://ui.beste.co/block/event40): Bundle pricing cards showing included items, savings percentages, and feature lists. Perfect for conference packages combining passes, workshops, and recordings.
- [Become a Sponsor CTA](https://ui.beste.co/block/event53): Two-column sponsorship pitch with benefit highlights, audience reach statistics, and contact CTAs. Perfect for attracting event sponsors and partners.
- [Sponsorship Tiers Comparison](https://ui.beste.co/block/event54): Tiered sponsorship packages with pricing cards and feature comparison matrix showing benefits per level. Perfect for sponsor prospectus and partnership pages.
- [Featured Partner Spotlight](https://ui.beste.co/block/event58): Two-column partner showcase with company logo, description, highlights, and testimonial quote. Perfect for highlighting platinum sponsors and key partners.
- [Workshop Registration Form](https://ui.beste.co/block/event66): Interactive workshop selector with capacity tracking, attendee info form, and pricing summary. Perfect for paid workshops and training session signups.
- [Code of Conduct Section](https://ui.beste.co/block/event79): 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](https://ui.beste.co/block/event93): 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](https://ui.beste.co/block/event94): 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](https://ui.beste.co/block/event95): 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](https://ui.beste.co/block/event96): 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](https://ui.beste.co/block/event97): 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](https://ui.beste.co/block/event98): 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](https://ui.beste.co/block/event99): 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](https://ui.beste.co/block/event100): 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](https://ui.beste.co/block/event101): 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](https://ui.beste.co/block/faq7): 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](https://ui.beste.co/block/faq8): Questions with answers displayed below in a simple list. Best for FAQs with shorter answers that don't require expansion.
- [Three Column Grid](https://ui.beste.co/block/faq9): Q&A pairs arranged in a responsive grid layout. Ideal for displaying concise answers in a scannable, multi-column format.
- [Tabbed Categories](https://ui.beste.co/block/faq10): Sidebar navigation with category tabs and accordion content. Perfect for organizing large FAQ sets across multiple topics.
- [Searchable Accordion](https://ui.beste.co/block/faq11): Search input with accordion items that filter in real-time. Essential for FAQs with many questions that users need to quickly locate.
- [Grouped Sections](https://ui.beste.co/block/faq12): FAQs organized into titled sections with accordions underneath. Excellent for presenting related questions grouped by topic.
- [Side-by-Side Image](https://ui.beste.co/block/faq13): Accordion paired with a large image on left or right. Use when you want visual context alongside your FAQ answers.
- [With CTA Card](https://ui.beste.co/block/faq14): Accordion followed by a call-to-action card below. Great for converting users by offering additional contact options at the end.
- [Modal Dialog Cards](https://ui.beste.co/block/faq15): Clickable question cards that open answers in a modal dialog. Perfect for card-based layouts that need expanded views.
- [Numbered List](https://ui.beste.co/block/faq16): Questions displayed with numbered badges and answers below. Ideal for step-by-step guides or priority-ordered FAQs.
- [Two Column Q&A](https://ui.beste.co/block/faq17): Questions on left, answers on right in a two-column grid layout. Works well for balanced, side-by-side presentation.
- [Timeline Layout](https://ui.beste.co/block/faq18): Alternating left-right cards connected by a vertical line. Great for creating a narrative flow through related questions.
- [Chat Conversation](https://ui.beste.co/block/faq19): Message-style bubbles simulating a chat interface. Perfect for a friendly, conversational tone in your FAQ section.
- [Tabbed Cards](https://ui.beste.co/block/faq20): Horizontal tabs with card-based content below for each category. Clean for organizing FAQs by topic tabs.
- [Icon Grid Cards](https://ui.beste.co/block/faq21): Cards in a grid with icons and short answers. Ideal for highlighting key features or benefits with visual elements.
- [Search with Grid](https://ui.beste.co/block/faq22): Search input with results displayed in a two-column grid. Best for knowledge bases with searchable, card-based results.
- [Horizontal Scroll Cards](https://ui.beste.co/block/faq23): Cards that scroll horizontally with fade edges. Good for mobile-friendly carousels of FAQ items.
- [Split View List](https://ui.beste.co/block/faq24): Question list on left, selected answer on right with image. Effective for visual answers with image headers.
- [Terminal Window](https://ui.beste.co/block/faq25): Terminal-style interface with commands and outputs. Perfect for developer FAQs or technical documentation.
- [Sticky Notes](https://ui.beste.co/block/faq26): Colorful rotated note cards in a grid. Creates a playful, informal design for casual FAQs.
- [Card Carousel](https://ui.beste.co/block/faq27): Single card that rotates through questions with progress dots and navigation buttons. Great for featured question rotation.
- [Glassmorphism Cards](https://ui.beste.co/block/faq28): Frosted glass effect cards in a two-column grid. Modern aesthetic for sleek, contemporary designs.
- [Magazine Columns](https://ui.beste.co/block/faq29): Two-column layout with left accent borders and different styling. Print-magazine inspired for balanced layouts.
- [Blur Reveal on Hover](https://ui.beste.co/block/faq30): Question with blurred answer that unblurs on hover. Interactive approach for answers that unfold visually.
- [Kanban Columns](https://ui.beste.co/block/faq31): Three vertical columns with icons and card stacks. Useful for organizing FAQs into distinct categories like a kanban board.
- [Quote Style Cards](https://ui.beste.co/block/faq32): Cards with quote icons in corners, arranged in a grid. Elegant design for emphasizing key points with typography.
- [Timeline Steps](https://ui.beste.co/block/faq33): Vertical timeline with alternating content and numbered dots. Perfect for onboarding or journey-based FAQs.
- [Minimal Plus-Minus](https://ui.beste.co/block/faq34): Simple accordion using plus/minus icons with minimal styling. Clean, distraction-free accordion approach.
- [Emoji Icon Grid](https://ui.beste.co/block/faq35): Grid cards with emoji icons and short answers. Fun, visual approach with emoji-based categorization.
- [Large Number List](https://ui.beste.co/block/faq36): Questions with large faded numbers and answers. Prominent numbering creates strong visual hierarchy.
- [AI Chat Interface](https://ui.beste.co/block/faq37): Chat-style bubble interface with AI assistant styling. Great for modern conversational FAQ experiences.
- [Left Border Accent](https://ui.beste.co/block/faq38): Accordion items with colored left border on active state. Subtle visual indicator of expansion.
- [Slide-Out Panels](https://ui.beste.co/block/faq39): Questions that slide open to reveal answers with bottom border separator. Smooth reveal animation.
- [Markdown Code Block](https://ui.beste.co/block/faq40): FAQ displayed as code documentation in a terminal-style block. Perfect for developer-focused content.
- [Photo Cards](https://ui.beste.co/block/faq41): Cards with images and text below in a grid. Ideal when each answer has relevant supporting imagery.
- [3D Flip Cards](https://ui.beste.co/block/faq42): Cards that flip 180 degrees on hover to show answer. Interactive 3D effect for engaging presentation.
- [Metro Tiles](https://ui.beste.co/block/faq43): Colorful tiles with icons and white text. Bold, modern design inspired by metro UI patterns.
- [Minimal Two Column](https://ui.beste.co/block/faq44): Simple two-column layout with questions and answers. Ultra-minimalist design with no extra styling.
- [Show More Expandable](https://ui.beste.co/block/faq45): Card stack with show more button to reveal additional items. Good for progressive disclosure of FAQs.
- [Tag Filter Grid](https://ui.beste.co/block/faq46): Filterable grid using tag pills at top. Perfect for FAQs that need multi-category filtering.
- [Horizontal Split View](https://ui.beste.co/block/faq47): Questions on left buttons, answers on right panel. Interview-style layout for selected item display.
- [Info Icon Tooltips](https://ui.beste.co/block/faq48): Info icons that show tooltips on hover with answer text. Compact design with hover-revealed content.
- [Inline Compact](https://ui.beste.co/block/faq49): Questions and answers on same line with colon separator. Extremely compact format for dense content.
- [Window Style Cards](https://ui.beste.co/block/faq50): Cards styled like OS windows with title bars and close buttons. Retro OS design aesthetic.
- [Two-Tone Headers](https://ui.beste.co/block/faq51): Cards with colored header section and white content area. Clear visual separation with color blocking.
- [Bubble Pills](https://ui.beste.co/block/faq52): Questions as clickable pills with answers expanding below. Bubble-shaped buttons for interactive selection.
- [Numbered Pairs](https://ui.beste.co/block/faq53): Two-column grid with large numbers and Q&A pairs. Clean numbered format with clear visual hierarchy.
- [Vertical Tab Panel](https://ui.beste.co/block/faq54): Left sidebar tabs with right content panel. Traditional tab interface for category-based FAQs.
- [Multi-Open Accordion](https://ui.beste.co/block/faq55): Accordion allowing multiple items open simultaneously with plus/minus icons. Flexible expansion approach.
- [Checkmark List](https://ui.beste.co/block/faq56): Grid cards with green checkmarks emphasizing answers. Positive confirmation visual for affirmative FAQs.
- [Cards With Links](https://ui.beste.co/block/faq57): Question-answer cards with external link buttons below. Drives users to related resources or docs.
- [Auto-Play Carousel](https://ui.beste.co/block/faq58): Animated carousel with progress bar and auto-advance through questions. Engaging for featured FAQs.
- [Typewriter Terminal](https://ui.beste.co/block/faq59): Terminal-style interface with typing effect for answers. Animated typing creates dynamic reveal effect.
- [Gradient Border Glow](https://ui.beste.co/block/faq60): Cards with animated gradient borders and shine effects on hover. Premium feel with advanced CSS effects.
- [Morphing Animated](https://ui.beste.co/block/faq61): Advanced animations with ripple effects, morphing orbs, and shimmer. Highly interactive with multiple effect layers.
- [Scroll-Triggered Reveal](https://ui.beste.co/block/faq62): Cards animate in as you scroll with staggered timing. Scroll-based animation creates engaging reveal.
- [Spotlight Focus](https://ui.beste.co/block/faq63): Clicked card highlights while others dim with spotlight effect. Creates focused attention on selected answer.
- [Neon Glow Effects](https://ui.beste.co/block/faq64): Cyberpunk-styled cards with neon glow, scan lines, and text shadows. Futuristic aesthetic with glowing effects.
- [Stacked Card Flip](https://ui.beste.co/block/faq65): Cards stack on top of each other that expand when clicked. Physical stack metaphor with expansion.
- [Sliding Background](https://ui.beste.co/block/faq66): Questions with sliding primary color background on hover and click. Smooth background animation reveal.
- [Glass Morphism Accordion](https://ui.beste.co/block/faq67): 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](https://ui.beste.co/block/faq68): 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](https://ui.beste.co/block/faq69): Numbered FAQ accordion beside a contact card with image, prompt and a contact CTA.
- [Two-Column FAQ](https://ui.beste.co/block/faq70): FAQ accordion split into two independent columns.
- [Minimal FAQ](https://ui.beste.co/block/faq71): Oversized single-column FAQ accordion with generous spacing.
- [Tabbed FAQ](https://ui.beste.co/block/faq72): Category-tabbed FAQ using shadcn Tabs with an accordion per category.
- [Sticky FAQ](https://ui.beste.co/block/faq73): Sticky intro and CTA beside a single-column FAQ accordion.
- [FAQ Cards](https://ui.beste.co/block/faq74): Always-open FAQ presented as a scannable grid of Q&A cards.
- [FAQ With Contact Image](https://ui.beste.co/block/faq75): 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](https://ui.beste.co/block/faq76): 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](https://ui.beste.co/block/faq77): A type-forward FAQ with a sticky heading rail and a numbered accordion list of expandable questions.
- [FAQ with Contact Aside](https://ui.beste.co/block/faq78): An accordion of studio FAQs paired with a bordered aside card inviting a direct conversation.
- [Sticky Split FAQ](https://ui.beste.co/block/faq79): 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](https://ui.beste.co/block/faq80): 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](https://ui.beste.co/block/faq81): 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](https://ui.beste.co/block/faq82): 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](https://ui.beste.co/block/faq83): 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](https://ui.beste.co/block/faq84): 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](https://ui.beste.co/block/faq85): 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](https://ui.beste.co/block/faq86): 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](https://ui.beste.co/block/faq87): 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](https://ui.beste.co/block/faq88): 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](https://ui.beste.co/block/faq89): 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](https://ui.beste.co/block/faq90): 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](https://ui.beste.co/block/faq91): 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](https://ui.beste.co/block/faq92): 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](https://ui.beste.co/block/feature1): 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](https://ui.beste.co/block/feature2): 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](https://ui.beste.co/block/feature3): 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](https://ui.beste.co/block/feature4): 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](https://ui.beste.co/block/feature5): Left-aligned headline followed by a compact two-column grid of capability rows. Each row leads with a Lucide icon.
- [Capability Carousel](https://ui.beste.co/block/feature8): 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](https://ui.beste.co/block/feature9): 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](https://ui.beste.co/block/feature22): 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](https://ui.beste.co/block/feature23): 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](https://ui.beste.co/block/feature24): 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](https://ui.beste.co/block/feature25): 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](https://ui.beste.co/block/feature26): 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](https://ui.beste.co/block/feature28): 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](https://ui.beste.co/block/feature29): 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](https://ui.beste.co/block/feature30): 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](https://ui.beste.co/block/feature33): 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](https://ui.beste.co/block/feature34): 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](https://ui.beste.co/block/feature53): 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](https://ui.beste.co/block/feature55): 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](https://ui.beste.co/block/feature59): 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](https://ui.beste.co/block/feature60): 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](https://ui.beste.co/block/feature61): 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](https://ui.beste.co/block/feature63): 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](https://ui.beste.co/block/feature65): 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](https://ui.beste.co/block/feature68): 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](https://ui.beste.co/block/feature70): 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](https://ui.beste.co/block/feature71): 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](https://ui.beste.co/block/feature72): 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](https://ui.beste.co/block/feature73): 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](https://ui.beste.co/block/feature74): 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](https://ui.beste.co/block/feature75): 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](https://ui.beste.co/block/feature76): 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](https://ui.beste.co/block/feature107): 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](https://ui.beste.co/block/feature108): 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](https://ui.beste.co/block/feature109): Masonry/columns layout gallery with variable height cards and linked images. Perfect for portfolio, project showcase, or irregular grid galleries.
- [Tabbed Feature Cards](https://ui.beste.co/block/feature112): 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](https://ui.beste.co/block/feature115): 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](https://ui.beste.co/block/feature116): 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](https://ui.beste.co/block/feature117): 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](https://ui.beste.co/block/feature118): 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](https://ui.beste.co/block/feature119): Responsive grid of goal cards with percentage progress bars and labels. Excellent for OKR tracking, quarterly goals, or progress visualization.
- [Category Tiles with Counts](https://ui.beste.co/block/feature120): Responsive grid of category cards with icons and listing counts. Perfect for category browse, marketplace sections, or navigation options.
- [Rating Cards with Stars](https://ui.beste.co/block/feature121): 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](https://ui.beste.co/block/feature122): 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](https://ui.beste.co/block/feature123): 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](https://ui.beste.co/block/feature125): 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](https://ui.beste.co/block/feature126): Responsive grid of large stat numbers with labels and descriptions. Perfect for impact metrics, company statistics, or scale indicators.
- [Centered Stats with Large Typography](https://ui.beste.co/block/feature130): Center-aligned large stat display with minimal spacing and minimal decoration. Perfect for impressive scaling statistics or key performance numbers.
- [Video Tutorial Thumbnails](https://ui.beste.co/block/feature131): 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](https://ui.beste.co/block/feature134): Single centered pricing card with price, feature list, and CTA button. Perfect for single plan display, pricing showcase, or product offering.
- [Integration Logos Grid](https://ui.beste.co/block/feature135): Centered flexbox grid of company/product logos with grayscale hover effects. Excellent for customer logos, integrations, or partnerships showcase.
- [Numbered Steps Grid](https://ui.beste.co/block/feature136): Responsive grid of numbered step cards with titles and descriptions. Perfect for process visualization, onboarding steps, or sequential workflows.
- [Bordered Grid Layout](https://ui.beste.co/block/feature138): 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](https://ui.beste.co/block/feature139): 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](https://ui.beste.co/block/feature144): Responsive grid of service cards with descriptions and arrow icons. Ideal for services listing, solutions overview, or offering showcase.
- [Benefits Checklist](https://ui.beste.co/block/feature146): Responsive grid of benefit items with checkmark icons and descriptions. Perfect for benefits list, value proposition, or key advantages.
- [Tech Stack Tool Grid](https://ui.beste.co/block/feature147): Responsive grid of tool cards with icons, descriptions, and linked tiles. Excellent for tech stack showcase, integrated tools, or component library.
- [Contact Method Cards](https://ui.beste.co/block/feature149): 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](https://ui.beste.co/block/feature150): Centered card with star rating, review count, and stat proofs layout. Ideal for social proof, trust indicators, or customer validation.
- [Announcement Highlight Box](https://ui.beste.co/block/feature151): Centered single card with badge, heading, description, and highlight pill. Great for announcements, feature release highlights, or promotional callouts.
- [Icon Badge Pills Row](https://ui.beste.co/block/feature152): Centered flexbox row of inline feature badges with icons. Perfect for quick feature list, key benefits, or inline feature highlights.
- [Feature Comparison Table](https://ui.beste.co/block/feature155): 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](https://ui.beste.co/block/feature157): Two-column layout with left text content and right image, reversible. Perfect for feature explanation, product story, or benefit illustration.
- [Notification Status List](https://ui.beste.co/block/feature158): Vertical stacked notification-style list with items, descriptions, and status badges. Great for updates feed, changelog, or activity log display.
- [Centered Icon Cards Grid](https://ui.beste.co/block/feature160): 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](https://ui.beste.co/block/feature161): 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](https://ui.beste.co/block/feature162): 3-column grid of numbered steps with titles and descriptions. Ideal for onboarding flows, process overviews, and how-it-works sections.
- [Bento Feature Grid](https://ui.beste.co/block/feature163): 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](https://ui.beste.co/block/feature164): 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](https://ui.beste.co/block/feature165): 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](https://ui.beste.co/block/feature166): 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](https://ui.beste.co/block/feature167): 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](https://ui.beste.co/block/feature168): 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](https://ui.beste.co/block/feature169): 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](https://ui.beste.co/block/feature170): 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](https://ui.beste.co/block/feature171): 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](https://ui.beste.co/block/feature172): 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](https://ui.beste.co/block/feature173): 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](https://ui.beste.co/block/feature174): 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](https://ui.beste.co/block/feature175): 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](https://ui.beste.co/block/feature176): 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](https://ui.beste.co/block/feature177): Feature cards with 3+2 bento layout and flush media
- [Sticky Benefits Timeline](https://ui.beste.co/block/feature178): Two-column benefits section with sticky left content and scrollable timeline
- [Sticky Stats Scroller](https://ui.beste.co/block/feature179): Two-column layout with sticky stats and scrollable feature cards
- [Sticky Image Scroller](https://ui.beste.co/block/feature180): Two-column layout with sticky image and scrollable feature cards
- [Feature Cards over Background Media](https://ui.beste.co/block/feature181): Glass-morphism feature cards grid over fullscreen background media with icon badges and invertColor support
- [Bento Feature Grid over Media](https://ui.beste.co/block/feature182): Bento-style grid with mixed card sizes over background media, featured large card spanning two columns
- [Split Image Card with Feature Stack](https://ui.beste.co/block/feature183): Two-column layout with large image card on left and stacked glass feature cards on right
- [Numbered Editorial Cards over Media](https://ui.beste.co/block/feature184): Numbered feature cards in staggered grid over background media with editorial large-number styling
- [Image Feature Cards Grid over Media](https://ui.beste.co/block/feature185): Three-column image feature cards grid with sticky header over background media and glass-morphism styling
- [Stats + Feature Cards over Media](https://ui.beste.co/block/feature186): Hero-style stats row with feature card grid below over background media with glass-morphism styling
- [Two-Column Alternating Cards over Media](https://ui.beste.co/block/feature187): Alternating two-column feature cards with large icons over background media, left-right zigzag layout
- [Icon Strip + Detail Card over Media](https://ui.beste.co/block/feature188): Horizontal icon strip navigation with expandable detail card below over background media
- [Masonry Feature Cards over Media](https://ui.beste.co/block/feature189): Masonry-style two-column cards with alternating heights and image accents over background media
- [Large Icon Cards with Dividers over Media](https://ui.beste.co/block/feature190): Full-width feature cards separated by dividers with large icons and descriptions over background media
- [Tagged Feature Cards with Accent Bar](https://ui.beste.co/block/feature191): Three-column feature cards with accent top bar, tag pills, and icon badges over background media
- [Hero Card + Grid Cards over Media](https://ui.beste.co/block/feature192): Large hero card with image at top followed by three-column feature card grid over background media
- [Asymmetric Tall + Compact Cards over Media](https://ui.beste.co/block/feature193): Alternating rows with tall highlight card and stacked compact cards over background media
- [Three Cards With Asset Media](https://ui.beste.co/block/feature194): 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](https://ui.beste.co/block/feature195): 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](https://ui.beste.co/block/feature196): 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](https://ui.beste.co/block/feature197): 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](https://ui.beste.co/block/feature198): 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](https://ui.beste.co/block/feature199): 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](https://ui.beste.co/block/feature200): 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](https://ui.beste.co/block/feature201): 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](https://ui.beste.co/block/feature202): 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](https://ui.beste.co/block/feature203): 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](https://ui.beste.co/block/feature204): 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](https://ui.beste.co/block/feature205): 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](https://ui.beste.co/block/feature206): 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](https://ui.beste.co/block/feature207): Service section: eyebrow and large title with a right-aligned summary, a wide hero image, and a bold closing statement.
- [Expertise Accordion](https://ui.beste.co/block/feature208): Horizontal expanding accordion of services with vertical labels, expanding to reveal image, description and tag pills.
- [Sticky Services](https://ui.beste.co/block/feature209): Sticky intro column beside a scrollable stack of numbered service blocks.
- [Service Cards](https://ui.beste.co/block/feature210): Three-up service cards with accent icon chips and learn-more links.
- [Alternating Features](https://ui.beste.co/block/feature211): Alternating image-and-copy feature rows with checklists.
- [Capabilities Bento](https://ui.beste.co/block/feature212): Asymmetric bento of capabilities: an image hero cell, accent cell and icon cells.
- [Tabbed Features](https://ui.beste.co/block/feature213): Tabbed feature showcase with copy, checklist and screenshot per workstream.
- [Feature Tabs Explorer](https://ui.beste.co/block/feature214): 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](https://ui.beste.co/block/feature215): 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](https://ui.beste.co/block/feature216): 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](https://ui.beste.co/block/feature217): 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](https://ui.beste.co/block/feature218): 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](https://ui.beste.co/block/feature219): 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](https://ui.beste.co/block/feature220): 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](https://ui.beste.co/block/feature221): 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](https://ui.beste.co/block/feature222): Process section with a header and a vertical list of four numbered steps separated by top borders.
- [Tabbed Phase Showcase](https://ui.beste.co/block/feature223): Header with a tabbed showcase where each tab pairs a rounded image with a phase title and description.
- [Capability Checklist Split](https://ui.beste.co/block/feature224): 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](https://ui.beste.co/block/feature225): 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](https://ui.beste.co/block/feature226): 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](https://ui.beste.co/block/feature227): Sticky left intro paired with a stacked, numbered list of feature blocks, each with a title, description, and small image.
- [Annotated core layout](https://ui.beste.co/block/feature228): A central core image framed by feature cards that each reference how a module connects back to the system's core.
- [Accordion Image Sync](https://ui.beste.co/block/feature229): 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](https://ui.beste.co/block/feature230): 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](https://ui.beste.co/block/feature231): Clickable tab chips switch a large spotlight panel with image, title, description, and a checklist, with an optional auto-loop.
- [Stat-backed feature rows](https://ui.beste.co/block/feature232): 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](https://ui.beste.co/block/feature233): 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](https://ui.beste.co/block/feature234): 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](https://ui.beste.co/block/feature235): Feature and testimonial hybrid: a quote card on bg-muted beside a 2x2 grid of icon feature highlights.
- [Feature manifesto grid](https://ui.beste.co/block/feature236): A text-only feature manifesto: a hairline-bordered grid of short statements, each a bold title and a single explanatory line.
- [Product Accordion Feature](https://ui.beste.co/block/feature237): 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](https://ui.beste.co/block/feature238): 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](https://ui.beste.co/block/feature239): 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](https://ui.beste.co/block/feature240): 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](https://ui.beste.co/block/feature241): 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](https://ui.beste.co/block/feature242): 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](https://ui.beste.co/block/feature243): 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](https://ui.beste.co/block/feature244): 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](https://ui.beste.co/block/feature245): 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](https://ui.beste.co/block/feature246): 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](https://ui.beste.co/block/feature247): 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](https://ui.beste.co/block/feature248): 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](https://ui.beste.co/block/feature249): 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](https://ui.beste.co/block/feature250): 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](https://ui.beste.co/block/feature251): 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](https://ui.beste.co/block/feature252): 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](https://ui.beste.co/block/feature253): 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](https://ui.beste.co/block/feature254): 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](https://ui.beste.co/block/feature255): 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](https://ui.beste.co/block/feature256): 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](https://ui.beste.co/block/feature257): 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](https://ui.beste.co/block/feature258): 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](https://ui.beste.co/block/feature259): 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](https://ui.beste.co/block/feature260): 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](https://ui.beste.co/block/feature261): 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](https://ui.beste.co/block/feature262): 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](https://ui.beste.co/block/feature263): 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](https://ui.beste.co/block/feature264): 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](https://ui.beste.co/block/feature265): 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](https://ui.beste.co/block/feature266): 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](https://ui.beste.co/block/feature267): 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](https://ui.beste.co/block/feature268): 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](https://ui.beste.co/block/fitness5): 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](https://ui.beste.co/block/fitness6): 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](https://ui.beste.co/block/fitness32): Location section with map preview, address, hours, parking, and public transit info. Perfect for gym contact pages and multi-location fitness centers.
- [Transformation Gallery](https://ui.beste.co/block/fitness33): 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](https://ui.beste.co/block/fitness39): Program grid with images, duration, frequency, skill level, and enrollment buttons. Perfect for fitness program catalogs and workout plan selection.
- [Honest Programme Match](https://ui.beste.co/block/fitness40): 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](https://ui.beste.co/block/food3): 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](https://ui.beste.co/block/food4): 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](https://ui.beste.co/block/food5): 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](https://ui.beste.co/block/food6): Auto-playing image slideshow showcasing restaurant ambiance with slide titles and navigation controls. Perfect for restaurant homepages and venue presentations.
- [Classic Menu Layout](https://ui.beste.co/block/food7): Traditional menu with categorized sections, dietary badges (V, VG, GF), and a legend. Perfect for restaurant menus and food ordering pages.
- [Featured Dishes Grid](https://ui.beste.co/block/food8): 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](https://ui.beste.co/block/food9): Interactive menu with category tabs, accompanying images, and item listings with prices. Perfect for restaurants with multiple menu sections.
- [Wine List Menu](https://ui.beste.co/block/food10): 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](https://ui.beste.co/block/food11): Alternating layout showcasing dishes with large images, chef's notes as blockquotes, and pricing. Perfect for highlighting signature items and chef recommendations.
- [Drinks Menu](https://ui.beste.co/block/food12): 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](https://ui.beste.co/block/food13): 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](https://ui.beste.co/block/food14): 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](https://ui.beste.co/block/food15): 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](https://ui.beste.co/block/food16): 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](https://ui.beste.co/block/food38): 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](https://ui.beste.co/block/food39): Location cards grid with venue images, addresses, hours, phone numbers, and direction links. Perfect for restaurant chains and multi-venue businesses.
- [Executive Chef Profile](https://ui.beste.co/block/food41): 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](https://ui.beste.co/block/food42): Team member cards with portrait photos, roles, experience badges, and hover image zoom. Perfect for staff introductions and restaurant about pages.
- [Culinary Journey Timeline](https://ui.beste.co/block/food43): Vertical timeline with alternating content, year badges, milestone images, and connecting line. Perfect for chef stories and restaurant history pages.
- [Behind the Scenes Kitchen](https://ui.beste.co/block/food44): 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](https://ui.beste.co/block/food45): 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](https://ui.beste.co/block/food47): 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](https://ui.beste.co/block/food48): 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](https://ui.beste.co/block/food50): 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](https://ui.beste.co/block/food51): 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](https://ui.beste.co/block/food52): 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](https://ui.beste.co/block/food53): Bundle pricing cards with images, savings badges, itemized contents, and order buttons. Perfect for family meals, combo deals, and catering packages.
- [Welcome Discount Banner](https://ui.beste.co/block/food54): 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](https://ui.beste.co/block/food61): 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](https://ui.beste.co/block/footer9): 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](https://ui.beste.co/block/footer10): 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](https://ui.beste.co/block/footer11): 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](https://ui.beste.co/block/footer13): 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](https://ui.beste.co/block/footer15): 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](https://ui.beste.co/block/footer16): 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](https://ui.beste.co/block/footer18): 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](https://ui.beste.co/block/footer19): 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](https://ui.beste.co/block/footer20): 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](https://ui.beste.co/block/footer21): 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](https://ui.beste.co/block/footer22): 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](https://ui.beste.co/block/footer23): 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](https://ui.beste.co/block/footer27): 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](https://ui.beste.co/block/footer28): 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](https://ui.beste.co/block/footer29): 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](https://ui.beste.co/block/footer31): Fine dining footer with business hours, location details, phone number, menu links, and reservation button. Perfect for restaurants and hospitality venues.
- [Healthcare Services Footer](https://ui.beste.co/block/footer32): Medical facility footer with emergency contact banner, service navigation, patient resources, and certification badges. Perfect for hospitals, clinics, and healthcare providers.
- [Travel Booking Footer](https://ui.beste.co/block/footer41): 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](https://ui.beste.co/block/footer55): 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](https://ui.beste.co/block/footer69): 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](https://ui.beste.co/block/footer73): 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](https://ui.beste.co/block/footer100): 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](https://ui.beste.co/block/footer101): 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](https://ui.beste.co/block/footer102): Complete studio mega footer with brand column, link columns, socials and legal bar.
- [CTA Footer](https://ui.beste.co/block/footer103): Dark closing-CTA footer with a big statement, email and compact links.
- [Newsletter Footer](https://ui.beste.co/block/footer104): Footer led by a subscribe form beside link columns.
- [Dark Studio Footer](https://ui.beste.co/block/footer105): 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](https://ui.beste.co/block/footer106): 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](https://ui.beste.co/block/footer107): 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](https://ui.beste.co/block/footer108): 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](https://ui.beste.co/block/footer109): 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](https://ui.beste.co/block/footer110): 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](https://ui.beste.co/block/footer111): 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](https://ui.beste.co/block/footer112): 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](https://ui.beste.co/block/footer113): 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](https://ui.beste.co/block/footer114): 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](https://ui.beste.co/block/footer115): 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](https://ui.beste.co/block/footer116): 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](https://ui.beste.co/block/footer117): 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](https://ui.beste.co/block/footer118): 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](https://ui.beste.co/block/footer119): 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](https://ui.beste.co/block/footer120): 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](https://ui.beste.co/block/footer121): 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](https://ui.beste.co/block/footer122): 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](https://ui.beste.co/block/gallery1): 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](https://ui.beste.co/block/gallery2): 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](https://ui.beste.co/block/gallery3): 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](https://ui.beste.co/block/gallery4): 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](https://ui.beste.co/block/gallery5): 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](https://ui.beste.co/block/gallery6): 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](https://ui.beste.co/block/gallery7): 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](https://ui.beste.co/block/gallery8): 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](https://ui.beste.co/block/gallery9): 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](https://ui.beste.co/block/gallery10): 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](https://ui.beste.co/block/gallery11): 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](https://ui.beste.co/block/gallery12): 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](https://ui.beste.co/block/gallery13): 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](https://ui.beste.co/block/gallery14): 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](https://ui.beste.co/block/gallery15): 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](https://ui.beste.co/block/gallery16): 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](https://ui.beste.co/block/gallery17): 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](https://ui.beste.co/block/gallery18): 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](https://ui.beste.co/block/gallery19): 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](https://ui.beste.co/block/gallery20): 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](https://ui.beste.co/block/gallery21): 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](https://ui.beste.co/block/gallery22): 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](https://ui.beste.co/block/gallery23): 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](https://ui.beste.co/block/gallery24): 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](https://ui.beste.co/block/gallery25): 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](https://ui.beste.co/block/health1): 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](https://ui.beste.co/block/health2): 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](https://ui.beste.co/block/health3): Doctor cards grid showing specialists with ratings, availability status, and next appointment slots. Perfect for healthcare platforms and telemedicine booking systems.
- [Wellness Hero Section](https://ui.beste.co/block/health4): 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](https://ui.beste.co/block/health5): Service cards displaying medical specialties with appointment durations, feature lists, and CTAs. Perfect for hospitals, clinics, and healthcare provider websites.
- [Wellness Editorial Section](https://ui.beste.co/block/health6): 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](https://ui.beste.co/block/health7): 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](https://ui.beste.co/block/health16): 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](https://ui.beste.co/block/health17): 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](https://ui.beste.co/block/health18): 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](https://ui.beste.co/block/hero7): 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](https://ui.beste.co/block/hero19): 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](https://ui.beste.co/block/hero20): Two-column carousel with animated content transitions, thumbnail strip navigation, and vertical progress indicator. Perfect for product showcases and feature highlights.
- [Fullscreen Vertical Carousel](https://ui.beste.co/block/hero21): 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](https://ui.beste.co/block/hero24): 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](https://ui.beste.co/block/hero25): 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](https://ui.beste.co/block/hero35): 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](https://ui.beste.co/block/hero36): 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](https://ui.beste.co/block/hero37): 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](https://ui.beste.co/block/hero38): 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](https://ui.beste.co/block/hero43): 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](https://ui.beste.co/block/hero45): 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](https://ui.beste.co/block/hero46): 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](https://ui.beste.co/block/hero48): 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](https://ui.beste.co/block/hero50): 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](https://ui.beste.co/block/hero51): 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](https://ui.beste.co/block/hero53): 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](https://ui.beste.co/block/hero57): 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](https://ui.beste.co/block/hero59): 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](https://ui.beste.co/block/hero61): 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](https://ui.beste.co/block/hero63): 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](https://ui.beste.co/block/hero65): 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](https://ui.beste.co/block/hero68): Centered hero with three feature highlights displayed as icon cards with descriptions below the CTA. Perfect for platform and infrastructure products.
- [Email Signup Hero](https://ui.beste.co/block/hero69): 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](https://ui.beste.co/block/hero71): 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](https://ui.beste.co/block/hero72): 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](https://ui.beste.co/block/hero75): 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](https://ui.beste.co/block/hero76): 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](https://ui.beste.co/block/hero77): 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](https://ui.beste.co/block/hero78): 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](https://ui.beste.co/block/hero79): 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](https://ui.beste.co/block/hero80): Centered hero with inset background media and overlapping product image
- [Fullscreen Hero with Quick-Access Cards](https://ui.beste.co/block/hero81): Cinematic fullscreen hero with inset background media and glassmorphism quick-access cards
- [Left-Aligned Hero with Gradient Overlay](https://ui.beste.co/block/hero82): Left-aligned fullscreen hero with inset background media and directional gradient overlay
- [Bottom-Aligned Hero with Quick Links](https://ui.beste.co/block/hero83): Bottom-aligned fullscreen hero with inset background media and right-side quick link cards
- [Split Hero with Edge-to-Edge Media](https://ui.beste.co/block/hero84): 50/50 split hero with content left and edge-to-edge video/image right with checklist items
- [Fullscreen Hero with Floating Testimonials](https://ui.beste.co/block/hero85): Cinematic fullscreen hero with inset background video and floating glassmorphism testimonial cards
- [Fullscreen Hero with Logo Cloud](https://ui.beste.co/block/hero86): Cinematic fullscreen hero with inset background video and trusted-by logo strip
- [Floating Glassmorphism Card Hero](https://ui.beste.co/block/hero87): Fullscreen hero with centered glassmorphism card floating over inset background video
- [Lead Capture Hero with Email Input](https://ui.beste.co/block/hero88): Fullscreen hero with email capture input over inset background video
- [Reverse Split Hero with Testimonial](https://ui.beste.co/block/hero89): 50/50 split hero with video/image left and content with testimonial quote right
- [Stacked Hero with Media Top](https://ui.beste.co/block/hero90): Vertical split hero with video/image on top and content section below
- [Split Hero with Feature List Panel](https://ui.beste.co/block/hero91): 50/50 split hero with muted content panel and feature list left, video/image right
- [Split Hero with Bento Feature Grid](https://ui.beste.co/block/hero92): 50/50 split hero with content left and bento feature grid overlay on video right
- [Asymmetric Split Hero with Quick Links](https://ui.beste.co/block/hero93): 40/60 asymmetric split hero with narrow content panel and vertical quick links over video
- [Reverse Split Hero with Pill Grid](https://ui.beste.co/block/hero94): Reverse split hero with compact 3x2 pill grid over video left, content right
- [Fullscreen Hero with Bento Grid](https://ui.beste.co/block/hero95): Fullscreen hero with centered heading and 4-column bento feature grid over inset background video
- [Split Hero with Metric Dashboard](https://ui.beste.co/block/hero96): 50/50 split hero with content left and metric dashboard cards with trend badges over video right
- [Bottom-Aligned Hero with Stack Cards](https://ui.beste.co/block/hero97): Fullscreen bottom-aligned hero with vertical stack cards and inset background video with gradient overlay
- [Cinematic Hero with Social Proof](https://ui.beste.co/block/hero98): Cinematic hero with announcement pill, avatar social proof, and overlapping dashboard media
- [Fullscreen Hero with Marquee Ticker](https://ui.beste.co/block/hero99): Cinematic fullscreen hero with scrolling marquee keyword band over inset background video
- [Fullscreen Hero with Browser Mockup](https://ui.beste.co/block/hero100): Fullscreen hero with centered content and browser window frame mockup over inset background video
- [Split Hero with Terminal Card](https://ui.beste.co/block/hero101): Fullscreen split hero with content left and realistic terminal/CLI card right over inset background video
- [Split Hero with Timeline Steps](https://ui.beste.co/block/hero102): 50/50 split hero with content left and vertical numbered timeline overlay on video right
- [Mobile App Hero with Phone Mockup](https://ui.beste.co/block/hero103): Fullscreen hero with app store buttons and phone mockup over inset background video
- [IDE Mockup Split Hero](https://ui.beste.co/block/hero104): 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](https://ui.beste.co/block/hero105): Fullscreen hero with two overlapping angled phone mockups and app store buttons over inset background video
- [Mobile Hero with Flanking Features](https://ui.beste.co/block/hero106): Fullscreen hero with centered phone mockup flanked by feature columns on each side over inset background video
- [Mobile Hero with 3D Perspective Phone](https://ui.beste.co/block/hero107): Fullscreen split hero with content left and 3D perspective-tilted phone mockup right over inset background video
- [Mobile Hero with Review Card](https://ui.beste.co/block/hero108): Fullscreen hero with phone mockup, star rating review card, and app store buttons over inset background video
- [Bounded Carousel Hero](https://ui.beste.co/block/hero109): 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](https://ui.beste.co/block/hero110): 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](https://ui.beste.co/block/hero111): 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](https://ui.beste.co/block/hero112): Two-column studio hero with a two-tone headline, dual CTAs, tall image and a client wordmark strip.
- [Statement Reel Hero](https://ui.beste.co/block/hero113): Centered big-type studio hero with start and watch-the-film actions over a cinematic banner.
- [Collage Hero](https://ui.beste.co/block/hero114): Split studio hero with a two-tone headline and a four-image arranged collage.
- [Cinematic Image Hero](https://ui.beste.co/block/hero115): Full-bleed background-image hero with a legibility scrim and bottom-aligned eyebrow, headline, copy and CTAs.
- [Studio Reel Hero](https://ui.beste.co/block/hero116): Editorial hero with twin vertical image marquees scrolling in opposite directions beside the headline.
- [Giant Wordmark Hero](https://ui.beste.co/block/hero117): 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](https://ui.beste.co/block/hero118): 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](https://ui.beste.co/block/hero119): 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](https://ui.beste.co/block/hero120): 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](https://ui.beste.co/block/hero121): 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](https://ui.beste.co/block/hero122): 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](https://ui.beste.co/block/hero123): Trust hero with a heading, description and CTA beside a tall portrait image, over a grayscale logo marquee.
- [Profile Hero With Chart](https://ui.beste.co/block/hero124): 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](https://ui.beste.co/block/hero125): Centered eyebrow, oversized heading and CTA above a responsive 3-up portrait gallery with monospace captions.
- [Waitlist Email Hero](https://ui.beste.co/block/hero126): Centered waitlist hero with eyebrow, big heading, description, an inline email-capture form and an overlapping avatar trust row.
- [Slideshow Hero with Background Crossfade](https://ui.beste.co/block/hero127): 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](https://ui.beste.co/block/hero128): 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](https://ui.beste.co/block/hero129): 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](https://ui.beste.co/block/hero130): 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](https://ui.beste.co/block/hero131): 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](https://ui.beste.co/block/hero132): 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](https://ui.beste.co/block/hero133): 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](https://ui.beste.co/block/hero134): 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](https://ui.beste.co/block/hero135): 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](https://ui.beste.co/block/hero136): 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](https://ui.beste.co/block/hero137): 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](https://ui.beste.co/block/hero138): 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](https://ui.beste.co/block/hero139): 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](https://ui.beste.co/block/hero140): 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](https://ui.beste.co/block/hero141): 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](https://ui.beste.co/block/hero142): 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](https://ui.beste.co/block/hero143): 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](https://ui.beste.co/block/hero144): 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](https://ui.beste.co/block/hero145): 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](https://ui.beste.co/block/hero146): 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](https://ui.beste.co/block/hero147): 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](https://ui.beste.co/block/hero148): 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](https://ui.beste.co/block/hero149): 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](https://ui.beste.co/block/hero150): 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](https://ui.beste.co/block/hero151): 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](https://ui.beste.co/block/hero153): 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](https://ui.beste.co/block/hero154): 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](https://ui.beste.co/block/hero155): 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](https://ui.beste.co/block/hero156): 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](https://ui.beste.co/block/hero157): 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](https://ui.beste.co/block/hero158): 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](https://ui.beste.co/block/hero159): 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](https://ui.beste.co/block/hero160): 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](https://ui.beste.co/block/hero161): 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](https://ui.beste.co/block/hero162): 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](https://ui.beste.co/block/hero163): 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](https://ui.beste.co/block/hero164): 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](https://ui.beste.co/block/hero165): 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](https://ui.beste.co/block/hero166): 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](https://ui.beste.co/block/hero167): 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](https://ui.beste.co/block/hero168): 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](https://ui.beste.co/block/legal1): Displays a cookie notification with accept, reject, and customize buttons. Perfect for GDPR-compliant websites requiring user consent.
- [Privacy Policy Accordion](https://ui.beste.co/block/legal2): Shows privacy policy content with expandable accordion sections for each topic. Perfect for organizing lengthy privacy policies into scannable segments.
- [Terms of Service Summary](https://ui.beste.co/block/legal3): 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](https://ui.beste.co/block/legal4): 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](https://ui.beste.co/block/legal5): Shows DPA details with controller/processor parties, dates, and processing purposes. Perfect for displaying B2B data processing contracts with status badges.
- [Consent Preferences Manager](https://ui.beste.co/block/legal6): Displays cookie categories with toggle switches to manage consent preferences. Perfect for allowing users to customize their privacy settings granularly.
- [Legal Disclaimer Banner](https://ui.beste.co/block/legal7): Shows a disclaimer message with warning or info styling and last updated date. Perfect for displaying liability warnings and informational notices.
- [Age Verification Gate](https://ui.beste.co/block/legal8): Displays an age verification prompt with configurable minimum age and confirm/deny buttons. Perfect for age-restricted content or product pages.
- [Copyright Footer](https://ui.beste.co/block/legal9): Shows copyright notice, trademark attributions, and links to legal pages. Perfect for website footers requiring comprehensive legal information.
- [DMCA Takedown Notice](https://ui.beste.co/block/legal10): Guides users through DMCA submission with numbered steps and warnings. Perfect for copyright protection pages accepting infringement reports.
- [Compliance Checklist](https://ui.beste.co/block/legal11): Displays regulatory requirements with checkmarks, progress bar, and completion percentage. Perfect for showcasing compliance status across multiple standards.
- [NDA Template Card](https://ui.beste.co/block/legal12): Shows NDA details with type (mutual/unilateral), duration, and key terms covered. Perfect for presenting confidentiality agreement summaries with download options.
- [Software License Card](https://ui.beste.co/block/legal13): Displays license type with allowed permissions and limitations in checkmark format. Perfect for open-source projects or software documentation pages.
- [Compliance Badges Grid](https://ui.beste.co/block/legal14): 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](https://ui.beste.co/block/legal15): Lists data categories with types, retention periods, and deletion methods. Perfect for transparency pages explaining how long user data is stored.
- [Cookie Categories Explainer](https://ui.beste.co/block/legal16): Explains cookie types (essential, functional, analytics, marketing) with icons and examples. Perfect for cookie policy pages educating users on tracking technologies.
- [Document Version Timeline](https://ui.beste.co/block/legal17): 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](https://ui.beste.co/block/legal18): 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](https://ui.beste.co/block/legal19): Shows WCAG conformance level, accessibility features, and issue reporting options. Perfect for demonstrating commitment to digital accessibility standards.
- [Financial Disclaimer](https://ui.beste.co/block/legal20): Displays investment risk warnings with gain/loss icons and bullet-point cautions. Perfect for fintech or investment platforms requiring regulatory disclosures.
- [Medical Disclaimer](https://ui.beste.co/block/legal21): Shows healthcare warnings with an emergency notice section for critical situations. Perfect for health-related websites requiring medical advice disclaimers.
- [Affiliate Disclosure](https://ui.beste.co/block/legal22): Displays FTC-compliant disclosure with affiliate network badges and transparency text. Perfect for content sites monetized through affiliate marketing.
- [Testimonial Disclaimer](https://ui.beste.co/block/legal23): Shows disclaimer about customer testimonials with star decoration and important notes. Perfect for product pages featuring reviews or success stories.
- [Earnings Disclaimer](https://ui.beste.co/block/legal24): Displays income disclaimer with warnings about results varying based on effort. Perfect for courses, coaching programs, or business opportunity pages.
- [Refund Policy Card](https://ui.beste.co/block/legal25): 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](https://ui.beste.co/block/legal26): 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](https://ui.beste.co/block/legal27): 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](https://ui.beste.co/block/legal28): 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](https://ui.beste.co/block/legal29): 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](https://ui.beste.co/block/legal30): 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](https://ui.beste.co/block/legal31): 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](https://ui.beste.co/block/legal32): Outlines the dispute resolution process with numbered steps from informal negotiation to binding arbitration. Includes governing law and jurisdiction details.
- [Export Compliance Notice](https://ui.beste.co/block/legal33): Displays export control and sanctions compliance information with restricted regions list and compliance requirements. Required for software with international distribution.
- [Children's Privacy Notice](https://ui.beste.co/block/legal34): 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](https://ui.beste.co/block/legal35): Displays trademark, patent, and copyright ownership information with registration details and usage restrictions. Suitable for product pages and legal sections.
- [Whistleblower Policy Card](https://ui.beste.co/block/legal36): Anonymous reporting and whistleblower protection policy with reporting channels, protection guarantees, and a secure report submission button. Required for corporate compliance programs.
- [Indemnification Notice](https://ui.beste.co/block/legal37): Outlines indemnification obligations with covered scenarios and exclusions. Shows which party indemnifies the other and under what conditions.
- [Limitation of Liability](https://ui.beste.co/block/legal38): Displays liability caps, excluded damages, and maximum liability amounts. A standard clause for SaaS terms of service and commercial agreements.
- [Force Majeure Clause](https://ui.beste.co/block/legal39): Force majeure card listing qualifying events that excuse performance, notification requirements, and obligations during the force majeure period.
- [Confidentiality Agreement Card](https://ui.beste.co/block/legal40): Summarizes confidentiality obligations with what is considered confidential, permitted disclosures, duration, and remedies. Suitable for vendor onboarding and partnership agreements.
- [Privacy Policy Summary](https://ui.beste.co/block/legal41): Simple privacy policy overview card listing key data practices. Ideal for sign-up flows, footers, or settings pages.
- [Terms of Service](https://ui.beste.co/block/legal42): Text-focused terms of service card with numbered sections. Each section has a heading and paragraph content for full legal text.
- [Privacy Policy Page](https://ui.beste.co/block/legal43): Full privacy policy content card with sections covering data collection, usage, sharing, retention, rights, and security. Ideal for dedicated privacy pages.
- [Cookie Policy](https://ui.beste.co/block/legal44): 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](https://ui.beste.co/block/legal45): 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](https://ui.beste.co/block/legal46): Expandable privacy FAQ using accordion pattern. Each question reveals a detailed answer on click. Ideal for help centers and privacy pages.
- [Data Retention Table](https://ui.beste.co/block/legal47): 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](https://ui.beste.co/block/legal48): 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](https://ui.beste.co/block/legal49): 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](https://ui.beste.co/block/legal50): 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](https://ui.beste.co/block/legal51): 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](https://ui.beste.co/block/legal52): 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](https://ui.beste.co/block/legal53): 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](https://ui.beste.co/block/legal54): 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](https://ui.beste.co/block/legal55): 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](https://ui.beste.co/block/legal56): 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](https://ui.beste.co/block/legal57): 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](https://ui.beste.co/block/logos6): 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](https://ui.beste.co/block/logos7): Centered grid of client wordmarks with a trusted-by intro.
- [Logo Marquee](https://ui.beste.co/block/logos8): Full-bleed auto-scrolling client wordmark marquee with edge fades.
- [Logo Grid Wall](https://ui.beste.co/block/logos9): Partitioned bordered grid of client wordmark cells.
- [Logos Split](https://ui.beste.co/block/logos10): Headline and blurb beside a grid of client wordmarks.
- [Logos With Stat](https://ui.beste.co/block/logos11): A headline stat of trust above a centered row of client wordmarks.
- [Hairline Client Wall](https://ui.beste.co/block/logos12): 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](https://ui.beste.co/block/logos13): 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](https://ui.beste.co/block/logos14): 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](https://ui.beste.co/block/logos15): 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](https://ui.beste.co/block/navbar19): 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](https://ui.beste.co/block/navbar30): 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](https://ui.beste.co/block/navbar31): 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](https://ui.beste.co/block/navbar32): 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](https://ui.beste.co/block/navbar33): 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](https://ui.beste.co/block/navbar34): 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](https://ui.beste.co/block/navbar35): 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](https://ui.beste.co/block/navbar36): 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](https://ui.beste.co/block/navbar37): 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](https://ui.beste.co/block/navbar38): 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](https://ui.beste.co/block/navbar39): 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](https://ui.beste.co/block/navbar40): 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](https://ui.beste.co/block/navbar41): Two-tier studio navbar with an availability utility strip, square-mark wordmark, index-numbered links and a seal CTA.
- [Grid Cell Navbar](https://ui.beste.co/block/navbar42): Table-inspired navbar with full-height bordered link cells, an availability cell and a dark full-height seal CTA cell.
- [Dark Announcement Navbar](https://ui.beste.co/block/navbar43): Dark studio navbar with a primary announcement bar, wordmark with tagline divider, uppercase links and a primary seal CTA.
- [Centered Logo Navbar](https://ui.beste.co/block/navbar44): 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](https://ui.beste.co/block/navbar45): 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](https://ui.beste.co/block/navbar46): Studio navbar with hover dropdown submenus on desktop, described sublinks, a seal CTA and an inline-expanded mobile menu.
- [Mega Menu Navbar](https://ui.beste.co/block/navbar47): Studio navbar whose Work item opens a full-width mega panel with category links and three featured project thumbnails.
- [Masthead Navbar](https://ui.beste.co/block/navbar48): 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](https://ui.beste.co/block/navbar49): 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](https://ui.beste.co/block/navbar50): 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](https://ui.beste.co/block/navbar51): 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](https://ui.beste.co/block/navbar52): 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](https://ui.beste.co/block/navbar53): 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](https://ui.beste.co/block/navbar54): 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](https://ui.beste.co/block/navbar55): 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](https://ui.beste.co/block/navbar56): 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](https://ui.beste.co/block/navbar57): 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](https://ui.beste.co/block/navbar58): 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](https://ui.beste.co/block/navbar59): 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](https://ui.beste.co/block/navbar60): 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](https://ui.beste.co/block/navbar61): 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](https://ui.beste.co/block/navbar62): 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](https://ui.beste.co/block/navbar63): 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](https://ui.beste.co/block/navbar64): 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](https://ui.beste.co/block/navbar65): 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](https://ui.beste.co/block/navbar66): 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](https://ui.beste.co/block/navbar67): 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](https://ui.beste.co/block/navbar68): 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](https://ui.beste.co/block/navbar69): 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](https://ui.beste.co/block/navbar70): 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](https://ui.beste.co/block/navbar71): 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](https://ui.beste.co/block/navbar72): 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](https://ui.beste.co/block/navbar73): 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](https://ui.beste.co/block/navbar74): 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](https://ui.beste.co/block/news1): Animated breaking news ticker with live indicator, category badges, and auto-rotating headlines.
- [Featured News Grid](https://ui.beste.co/block/news2): News section with large featured article and side list. Includes category badges, author info, and timestamps.
- [Live News Feed](https://ui.beste.co/block/news3): Real-time news feed with category tabs, live indicators, trending badges, and source attribution.
- [Magazine News Grid](https://ui.beste.co/block/news4): Magazine-style news section with large featured article and 2x2 grid. Dynamic category filtering.
- [News Timeline](https://ui.beste.co/block/news5): Vertical news timeline with timestamps, breaking news indicators, and optional article images.
- [Horizontal News Cards](https://ui.beste.co/block/news6): Horizontal news cards with author info, read time, trending indicators, and hover effects.
- [Newspaper Style](https://ui.beste.co/block/news7): Classic newspaper layout with serif typography, featured article spanning two columns, and sidebar articles.
- [Numbered Headlines](https://ui.beste.co/block/news8): Compact numbered headline list with large index numbers, category badges, and source attribution.
- [Trending Cards Grid](https://ui.beste.co/block/news9): Four-column news card grid with gradient overlays, category badges, and author info.
- [Video News Feature](https://ui.beste.co/block/news10): Video-focused news section with large thumbnail, play button overlay, duration badge, and related stories sidebar.
- [Masonry News Grid](https://ui.beste.co/block/news11): Masonry-style news grid with large, medium, and small article cards. Dynamic sizing based on article importance.
- [World News by Region](https://ui.beste.co/block/news12): Global news grid with color-coded region indicators, hot story badges, and source attribution.
- [Stock Market News](https://ui.beste.co/block/news13): Financial news feed with stock symbols, price changes, trend indicators, volume data, and animated progress bars.
- [Minimal Big Numbers](https://ui.beste.co/block/news14): Minimal news list with oversized numbers, large typography, and clean dividers. Perfect for weekly roundups.
- [News Carousel](https://ui.beste.co/block/news15): Featured news carousel with large images, navigation arrows, and progress dots. Side-by-side layout on desktop.
- [Quick News Bites](https://ui.beste.co/block/news16): Compact quick news list with bullet points, source attribution, and external link indicators. Perfect for news digests.
- [Sports Match Center](https://ui.beste.co/block/news17): Live sports scores with team form indicators, possession bar, match events (goals, cards), venue info, and upcoming match support.
- [Audio News Player](https://ui.beste.co/block/news18): Fully functional audio player with Now Playing card, playlist view, progress bar, skip controls, and waveform animation.
- [Terminal News Feed](https://ui.beste.co/block/news19): Hacker-style terminal with boot sequence animation, typing effects, priority badges, and command-line aesthetic.
- [Vintage Newspaper](https://ui.beste.co/block/news20): Classic newspaper front page layout with masthead, headline hierarchy, three-column text, and drop caps.
- [Split-Flap Display](https://ui.beste.co/block/news21): Retro airport departure board style news ticker with character-by-character flip animation and auto-rotating headlines.
- [Two Perspectives](https://ui.beste.co/block/news22): Side-by-side comparison of different viewpoints on a topic, with color-coded columns and author info.
- [Weekly Calendar View](https://ui.beste.co/block/news23): News organized by day with calendar-style headers, timeline layout, and category badges.
- [Newsletter with Featured](https://ui.beste.co/block/news24): Newsletter signup sidebar with featured story and additional headlines. Sticky subscription form.
- [Category Hub](https://ui.beste.co/block/news25): News categories grid with story counts, top story preview, and browse links.
- [Opinion & Editorial](https://ui.beste.co/block/news26): Opinion pieces with pull quotes, author profiles, and category badges. Editorial-style layout.
- [3D Story Carousel](https://ui.beste.co/block/news27): Immersive 3D carousel with stacked cards, smooth transitions, depth effects, and navigation controls.
- [Data Statistics Dashboard](https://ui.beste.co/block/news28): Data journalism style cards with animated numbers, change indicators, progress bars, and key statistics.
- [News Stories](https://ui.beste.co/block/news29): Instagram-style story circles with fullscreen viewer, auto-advance progress bars, channel avatars, and LIVE badges.
- [Editorial Magazine](https://ui.beste.co/block/news30): Premium magazine-style editorial layout with featured story, author byline, and numbered trending sidebar.
- [Bento News Grid](https://ui.beste.co/block/news31): Asymmetric bento box layout with large hero, gradient stat cards, and image tiles in a visually striking grid.
- [Magazine Cover](https://ui.beste.co/block/news32): Editorial magazine layout with dramatic cover story, serif typography, author bylines, and featured story grid.
- [Live News Feed](https://ui.beste.co/block/news33): Real-time news timeline with live indicator, breaking/developing badges, timestamps, and chronological updates.
- [Newsletter Preview](https://ui.beste.co/block/news34): Email newsletter style news layout with editor's note, categorized stories, and subscription CTA.
- [News Spotlight Theater](https://ui.beste.co/block/news35): Cinematic full-screen news slideshow with animated transitions, auto-play, spotlight effect, and dramatic typography.
- [Press Coverage List](https://ui.beste.co/block/news36): 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](https://ui.beste.co/block/news37): 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](https://ui.beste.co/block/news38): 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](https://ui.beste.co/block/news39): 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](https://ui.beste.co/block/news40): 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](https://ui.beste.co/block/news41): 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](https://ui.beste.co/block/news42): 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](https://ui.beste.co/block/onboarding1): 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](https://ui.beste.co/block/onboarding2): 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](https://ui.beste.co/block/onboarding3): 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](https://ui.beste.co/block/onboarding4): 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](https://ui.beste.co/block/onboarding5): 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](https://ui.beste.co/block/onboarding6): 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](https://ui.beste.co/block/onboarding7): 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](https://ui.beste.co/block/onboarding8): 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](https://ui.beste.co/block/onboarding9): 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](https://ui.beste.co/block/onboarding10): 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](https://ui.beste.co/block/onboarding11): 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](https://ui.beste.co/block/onboarding12): 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](https://ui.beste.co/block/onboarding13): 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](https://ui.beste.co/block/onboarding14): 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](https://ui.beste.co/block/onboarding15): 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](https://ui.beste.co/block/onboarding16): 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](https://ui.beste.co/block/onboarding17): 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](https://ui.beste.co/block/onboarding18): Onboarding screen with toggle switches for configuring notification channels and frequency. Perfect for apps that need granular notification consent during setup.
- [Profile Setup Card](https://ui.beste.co/block/onboarding19): 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](https://ui.beste.co/block/onboarding20): 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](https://ui.beste.co/block/onboarding21): 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](https://ui.beste.co/block/onboarding22): 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](https://ui.beste.co/block/onboarding23): 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](https://ui.beste.co/block/onboarding24): 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](https://ui.beste.co/block/onboarding25): 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](https://ui.beste.co/block/onboarding26): 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](https://ui.beste.co/block/onboarding27): 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](https://ui.beste.co/block/onboarding28): 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](https://ui.beste.co/block/onboarding29): 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](https://ui.beste.co/block/onboarding30): 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](https://ui.beste.co/block/onboarding31): 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](https://ui.beste.co/block/onboarding32): 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](https://ui.beste.co/block/onboarding33): 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](https://ui.beste.co/block/onboarding34): 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](https://ui.beste.co/block/onboarding35): 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](https://ui.beste.co/block/onboarding36): 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](https://ui.beste.co/block/onboarding37): 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](https://ui.beste.co/block/onboarding38): 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](https://ui.beste.co/block/onboarding39): 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](https://ui.beste.co/block/onboarding40): 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](https://ui.beste.co/block/onboarding41): 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](https://ui.beste.co/block/onboarding42): 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](https://ui.beste.co/block/onboarding43): 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](https://ui.beste.co/block/podcast1): 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](https://ui.beste.co/block/podcast2): 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](https://ui.beste.co/block/podcast4): 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](https://ui.beste.co/block/podcast14): 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](https://ui.beste.co/block/podcast38): 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](https://ui.beste.co/block/podcast41): 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](https://ui.beste.co/block/podcast42): 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](https://ui.beste.co/block/podcast49): 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](https://ui.beste.co/block/podcast52): 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](https://ui.beste.co/block/podcast53): 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](https://ui.beste.co/block/podcast54): 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](https://ui.beste.co/block/portfolio61): 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](https://ui.beste.co/block/portfolio62): 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](https://ui.beste.co/block/portfolio67): 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](https://ui.beste.co/block/portfolio70): 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](https://ui.beste.co/block/portfolio79): 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](https://ui.beste.co/block/portfolio84): 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](https://ui.beste.co/block/portfolio88): 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](https://ui.beste.co/block/portfolio89): 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](https://ui.beste.co/block/portfolio90): 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](https://ui.beste.co/block/portfolio92): Repository showcase with stars, forks, contribution counts, maintainer/contributor badges, and language tags. Perfect for developers highlighting their open source work.
- [Mentorship Pricing Plans](https://ui.beste.co/block/portfolio94): 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](https://ui.beste.co/block/portfolio97): 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](https://ui.beste.co/block/portfolio98): 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](https://ui.beste.co/block/portfolio99): 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](https://ui.beste.co/block/portfolio100): 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](https://ui.beste.co/block/portfolio101): Portfolio grid of project cards with hover-zoom imagery, numbered titles, category tags and a seal arrow link.
- [Work Marquee](https://ui.beste.co/block/portfolio102): Full-bleed auto-scrolling marquee of studio projects with a header and view-all CTA.
- [Bento Gallery](https://ui.beste.co/block/portfolio103): Asymmetric bento mosaic of project tiles with overlaid titles and hover seal arrows.
- [Interactive Work Index](https://ui.beste.co/block/portfolio104): A numbered project index that cross-fades a sticky image preview as each row is hovered.
- [Typographic Index](https://ui.beste.co/block/portfolio105): Oversized type project index where each row reveals a thumbnail and shifts to the accent on hover.
- [Filtered Work Tabs](https://ui.beste.co/block/portfolio106): Discipline-tabbed project gallery using shadcn Tabs with a grid of cards per category.
- [Filterable Project Grid](https://ui.beste.co/block/portfolio107): 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](https://ui.beste.co/block/portfolio108): 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](https://ui.beste.co/block/portfolio109): Three alternating case-study rows pairing a large rounded image with a title, description, detail line, and an editorial link.
- [Featured project + grid](https://ui.beste.co/block/portfolio110): One large featured project with image, category, and title, followed by a row of smaller project cards. Monochrome studio styling.
- [Staggered Editorial Gallery](https://ui.beste.co/block/portfolio111): 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](https://ui.beste.co/block/portfolio112): 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](https://ui.beste.co/block/portfolio113): 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](https://ui.beste.co/block/portfolio114): 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](https://ui.beste.co/block/portfolio115): Compact recent-work list of ruled rows, each a link with a small thumbnail, title, year, and an arrow.
- [Awards & Highlights Ledger](https://ui.beste.co/block/portfolio116): Recognition section pairing a ruled list of awards with two to three highlighted project thumbnails.
- [Case Study Spotlight](https://ui.beste.co/block/portfolio117): 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](https://ui.beste.co/block/post3): 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](https://ui.beste.co/block/post4): Minimal design with tags above title and author metadata below. Perfect for technical articles or educational content that prioritizes readability.
- [Card-Based Article](https://ui.beste.co/block/post5): 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](https://ui.beste.co/block/post6): Prominent author profile with large avatar display, followed by featured image below title. Best for thought leadership or expert opinion pieces.
- [Compact Quick Read](https://ui.beste.co/block/post7): 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](https://ui.beste.co/block/post8): 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](https://ui.beste.co/block/post9): 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](https://ui.beste.co/block/post10): 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](https://ui.beste.co/block/post11): 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](https://ui.beste.co/block/post12): Two-column layout with main article and right sidebar containing related article cards with thumbnails. Perfect for discovery-focused content.
- [Hero Image Dominant](https://ui.beste.co/block/post13): 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](https://ui.beste.co/block/post14): 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](https://ui.beste.co/block/post15): Article with two-column intro section separating key points before main content begins. Perfect for explainers that need dual perspectives.
- [Essay with Drop Cap](https://ui.beste.co/block/post16): 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](https://ui.beste.co/block/post17): Newsletter-style layout with issue number, dashed dividers between sections, and subscribe button. Perfect for weekly roundups or curated content.
- [Article with Code Snippets](https://ui.beste.co/block/post18): Technical article with code blocks featuring language labels, filenames, and copy-to-clipboard buttons. Ideal for programming tutorials.
- [Step-by-Step Tutorial](https://ui.beste.co/block/post19): Tutorial layout with numbered steps, prerequisites box, terminal commands, and completion message. Perfect for hands-on guides.
- [Documentation Getting Started](https://ui.beste.co/block/post20): Documentation-focused layout with version badge, info/warning/tip boxes, and previous/next navigation. Best for technical documentation.
- [Changelog Timeline View](https://ui.beste.co/block/post21): Timeline-style changelog with version badges, dates, and color-coded change types. Ideal for release notes and version history.
- [API Reference Documentation](https://ui.beste.co/block/post22): Technical reference with endpoint cards, HTTP method badges, and side-by-side request/response examples. Perfect for API documentation.
- [Literary Essay Separators](https://ui.beste.co/block/post23): Centered essay layout with large typography, ornamental separators, and author bio footer. Ideal for reflective essays or creative writing.
- [Visual Story Photo Grid](https://ui.beste.co/block/post24): 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](https://ui.beste.co/block/post25): Interview layout showing interviewer and interviewee with avatars, hero image, and question-answer pairs. Ideal for interviews and conversations.
- [Case Study with Metrics](https://ui.beste.co/block/post26): Case study format with client info, overview box, metrics grid, sectioned content, and testimonial callout. Perfect for portfolio pieces.
- [News Article Sidebar](https://ui.beste.co/block/post27): Newspaper-style layout with byline, serif typography, author bio sidebar, and trending articles list. Ideal for news or journalism.
- [Minimalist Short Form](https://ui.beste.co/block/post28): Ultra-minimal essay with light typography, sparse content, horizontal rule separators, and small images. Best for contemplative short pieces.
- [Sports Match Report](https://ui.beste.co/block/post29): 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](https://ui.beste.co/block/post30): Article with prominent share buttons for Twitter/LinkedIn, copy link function, and engagement-focused layout. Ideal for thought leadership.
- [Educational Article Images](https://ui.beste.co/block/post31): Educational article with clear heading hierarchy, embedded images with captions, and readable body text. Good for informational content.
- [Highlightable Content](https://ui.beste.co/block/post32): Article with text selection and highlighting feature allowing readers to save key quotes. Great for reference material or learning content.
- [Entrepreneur Profile](https://ui.beste.co/block/post33): Personal essay with large author bio, social links, extensive credentials, and expertise areas displayed. Perfect for founder stories.
- [Guest Post Editor Note](https://ui.beste.co/block/post34): Guest article with editor's introduction note, separate author profile for contributor, and clear attribution. Ideal for contributed content.
- [Multi-Author Research](https://ui.beste.co/block/post35): Report with multiple author profiles showing titles and contributions, team collaboration visual. Perfect for research or team-authored content.
- [Expert Column Credentials](https://ui.beste.co/block/post36): Expert opinion column displaying credentials, publications count, expertise areas, and callout boxes. Ideal for expert columns and thought leadership.
- [Columnist Opinion Column](https://ui.beste.co/block/post37): Opinion column layout with columnist profile, previous articles list, and editorial styling. Perfect for recurring contributor pieces and thought leadership.
- [Video Article Layout](https://ui.beste.co/block/post38): Article with featured video player, thumbnail preview, and watch time display. Ideal for video-first content with accompanying text.
- [Podcast Episode Page](https://ui.beste.co/block/post39): Podcast episode layout with audio player, host/guest profiles, timestamps, and show notes. Perfect for podcast transcripts and episode pages.
- [Recipe Card Layout](https://ui.beste.co/block/post40): 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](https://ui.beste.co/block/post41): Visual essay with photographer credit, location info, and image galleries. Perfect for photography portfolios and visual storytelling.
- [Product Review Article](https://ui.beste.co/block/post42): Product review with rating categories, pros/cons list, and verdict section. Ideal for tech reviews and product comparisons.
- [Multi-Part Series Article](https://ui.beste.co/block/post43): Series article with part navigation, progress bar, and previous/next links. Perfect for tutorials and multi-chapter content.
- [Online Course Lesson](https://ui.beste.co/block/post44): Course lesson layout with module navigation, progress tracking, and downloadable resources. Perfect for e-learning platforms.
- [Multi-Chapter Guide](https://ui.beste.co/block/post45): Documentation-style guide with chapter navigation, table of contents, and previous/next navigation. Perfect for comprehensive tutorials.
- [DIY How-To Tutorial](https://ui.beste.co/block/post46): Step-by-step tutorial with tools needed, learning outcomes, and tips per step. Perfect for DIY projects and hands-on guides.
- [Resource Roundup](https://ui.beste.co/block/post47): Curated list format with resource cards, descriptions, and links. Great for collections and recommendations.
- [Live Blog Updates](https://ui.beste.co/block/post48): Live blog format with timestamped updates, breaking news badges, and auto-refresh. Perfect for live event coverage and breaking news.
- [Magazine Essay Style](https://ui.beste.co/block/post49): Elegant magazine-style article with drop cap, pull quotes, and image credits. Perfect for long-form essays and feature articles.
- [Opinion Editorial Article](https://ui.beste.co/block/post50): Opinion piece with agree/disagree voting, editor's response, and discussion section. Perfect for editorial and op-ed content.
- [Product Comparison Article](https://ui.beste.co/block/post51): Head-to-head comparison with feature matrix, pros/cons, and winner verdict. Perfect for product shootouts and buying guides.
- [Ranked List Article](https://ui.beste.co/block/post52): Numbered list article with ratings, highlights, and jump navigation. Perfect for top-10 lists and curated recommendations.
- [Interactive Poll Article](https://ui.beste.co/block/post53): Article with embedded poll, vote tracking, and results display. Perfect for reader engagement and community feedback.
- [Interactive Quiz Article](https://ui.beste.co/block/post54): Quiz format with multiple choice questions, scoring, and results. Perfect for educational content and audience engagement.
- [Interactive Checklist Article](https://ui.beste.co/block/post55): Article with checkable items, progress tracking, and print/download options. Perfect for actionable guides and checklists.
- [Searchable FAQ Article](https://ui.beste.co/block/post56): FAQ article with search, category filters, and helpful vote buttons. Perfect for help centers and knowledge bases.
- [Article with Comments](https://ui.beste.co/block/post57): Article with full comment system, replies, likes, and featured comments. Perfect for community-driven discussions.
- [Product Launch Article](https://ui.beste.co/block/post58): Product launch post with features showcase, pricing tiers, and CTAs. Perfect for announcements and release notes.
- [Event Recap Article](https://ui.beste.co/block/post59): Conference/event recap with speaker profiles, key takeaways, and resources. Perfect for event summaries and conference coverage.
- [Research Paper Summary](https://ui.beste.co/block/post60): Academic article with abstract, key findings, and references. Perfect for research summaries and study highlights.
- [Book Review Article](https://ui.beste.co/block/post61): Book review with cover image, publication details, rating, and pros/cons. Perfect for literary reviews and reading recommendations.
- [Case Study Article](https://ui.beste.co/block/post62): Case study with client details, metrics, team members, and results. Perfect for portfolio pieces and success stories.
- [Interview Transcript Article](https://ui.beste.co/block/post63): Interview with Q&A format, audio player, and speaker timestamps. Perfect for podcast interviews and conversations.
- [Podcast Episode with Chapters](https://ui.beste.co/block/post64): Podcast with chapter markers, transcript segments, and show notes. Perfect for long-form audio content with navigation.
- [AMA Session Recap](https://ui.beste.co/block/post65): Ask Me Anything format with host profile, upvoted questions, and answers. Perfect for Q&A sessions and community engagement.
- [Debate Format Article](https://ui.beste.co/block/post66): Two-sided debate with for/against positions, arguments, and rebuttals. Perfect for controversial topics and opinion pieces.
- [Panel Discussion Recap](https://ui.beste.co/block/post67): Panel discussion summary with panelist profiles, key quotes, and takeaways. Perfect for conference and webinar recaps.
- [Course Lesson with Video](https://ui.beste.co/block/post69): Video lesson page with instructor, navigation, progress tracking, and downloadable resources. Perfect for online courses.
- [Knowledge Base Article](https://ui.beste.co/block/post71): Searchable FAQ with category filters, helpful votes, and related questions. Perfect for help centers and documentation.
- [Book Review with Purchase](https://ui.beste.co/block/post72): Detailed book review with author bio, ratings, and purchase links. Perfect for literary reviews and book recommendations.
- [Community Member Spotlight](https://ui.beste.co/block/post78): Member profile with achievements, social links, and contributions. Perfect for community highlights and user stories.
- [Open Source Project Page](https://ui.beste.co/block/post82): Project showcase with maintainers, releases, install commands, and features. Perfect for GitHub readme-style documentation.
- [Poetry Collection Article](https://ui.beste.co/block/post85): Poetry showcase with poet bio, formatted verses, dedications, and audio. Perfect for literary magazines and poetry publications.
- [Travel Journal Article](https://ui.beste.co/block/post86): Travel diary with dated entries, location info, weather, and photo galleries. Perfect for travel blogs and adventure stories.
- [Editorial Article Layout](https://ui.beste.co/block/post87): 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](https://ui.beste.co/block/pricing6): Three-tier pricing table with monthly/yearly billing toggle and popular plan badge. Perfect for SaaS products with tiered subscription plans.
- [Dual Plan Comparison](https://ui.beste.co/block/pricing7): Two-tier pricing with highlighted recommended plan and feature lists. Perfect for freemium products with a clear upgrade path.
- [Feature Comparison Table](https://ui.beste.co/block/pricing8): 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](https://ui.beste.co/block/pricing9): Single pricing plan with selectable optional add-ons that toggle on click. Perfect for simple products with modular upsells.
- [Horizontal Tier Cards](https://ui.beste.co/block/pricing10): Four-tier horizontal pricing cards with pill-style billing toggle. Perfect for comparing multiple plan options side by side.
- [Usage-Based Slider](https://ui.beste.co/block/pricing11): Usage-based pricing calculator with interactive slider showing tiered breakpoints. Perfect for API services and consumption-based products.
- [Enterprise Contact Sales](https://ui.beste.co/block/pricing12): Enterprise pricing section with custom pricing, feature list, and client logo trust indicators. Perfect for B2B products targeting large organizations.
- [Per-Seat Calculator](https://ui.beste.co/block/pricing13): Per-seat pricing calculator with slider control and automatic volume discount display. Perfect for team collaboration tools with user-based pricing.
- [Lifetime Deal](https://ui.beste.co/block/pricing14): Lifetime deal pricing with crossed-out original price and urgency countdown timer. Perfect for product launches and limited-time promotions.
- [Free vs Pro Table](https://ui.beste.co/block/pricing15): 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](https://ui.beste.co/block/pricing16): Clean single-plan pricing with inline feature badges in a compact layout. Perfect for focused products with one clear offering.
- [Pricing with FAQ](https://ui.beste.co/block/pricing17): Single plan pricing card paired with an expandable FAQ accordion section. Perfect for reducing purchase friction with inline answers.
- [Individual vs Team Toggle](https://ui.beste.co/block/pricing18): Tabbed pricing switching between Individual and Team plans with different feature sets. Perfect for products offering both personal and business tiers.
- [Credit Pack Pricing](https://ui.beste.co/block/pricing19): 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](https://ui.beste.co/block/pricing20): Pricing card featuring an embedded customer testimonial with star rating. Perfect for building trust alongside pricing information.
- [Minimalist Three-Tier](https://ui.beste.co/block/pricing21): 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](https://ui.beste.co/block/pricing22): Flexible pricing with selectable suggested amounts and custom input option. Perfect for indie products, open source, and creator tools.
- [Annual with Monthly Breakdown](https://ui.beste.co/block/pricing23): Annual pricing tiers showing per-month equivalent cost and yearly savings. Perfect for encouraging annual commitments with clear value display.
- [Startup Stage Pricing](https://ui.beste.co/block/pricing24): Startup-focused pricing tiers based on funding stage from bootstrapped to Series B+. Perfect for B2B tools offering startup programs.
- [Agency Service Packages](https://ui.beste.co/block/pricing25): Service package cards with project timelines, deliverables list, and fixed pricing. Perfect for agencies and freelancers selling project-based work.
- [ROI Calculator](https://ui.beste.co/block/pricing26): Interactive ROI calculator with slider inputs showing potential savings and return projection. Perfect for enterprise tools demonstrating value.
- [API Tiered Rates](https://ui.beste.co/block/pricing27): API pricing table showing tiered rate per request with volume discount breakdown. Perfect for developer APIs and infrastructure services.
- [Tabbed Billing Cycles](https://ui.beste.co/block/pricing28): Pricing cards with tabbed selection for monthly, quarterly, and annual billing. Perfect for flexible subscription models with multiple commitment options.
- [Pricing with FAQ Accordion](https://ui.beste.co/block/pricing29): Single plan pricing card with collapsible FAQ accordion for common questions. Perfect for reducing support queries on pricing pages.
- [Budget Slider Selector](https://ui.beste.co/block/pricing30): 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](https://ui.beste.co/block/pricing31): Customizable pricing with base plan and selectable add-ons that update total dynamically. Perfect for modular products with optional features.
- [Modular Pricing Builder](https://ui.beste.co/block/pricing32): Interactive pricing builder with toggleable feature modules and real-time total calculation. Perfect for enterprise products with customizable packages.
- [Pricing with Tooltips](https://ui.beste.co/block/pricing33): Pricing tiers with hover tooltips explaining each feature in detail. Perfect for complex products with features that need explanation.
- [Radio Card Selection](https://ui.beste.co/block/pricing34): Plan selection using radio button cards with visual selection state. Perfect for checkout flows and single-plan selection interfaces.
- [Regional Currency Pricing](https://ui.beste.co/block/pricing35): Pricing with dropdown region/currency selector showing localized prices. Perfect for global products with regional pricing tiers.
- [Service Package Tiers](https://ui.beste.co/block/pricing36): Service package cards with tier badges, feature lists, and delivery timelines. Perfect for consulting and professional services.
- [Toggle Group Add-ons](https://ui.beste.co/block/pricing37): Base plan pricing with toggle group buttons for selecting add-ons. Perfect for products with a la carte feature selection.
- [Pricing with Ratings](https://ui.beste.co/block/pricing38): Pricing cards displaying star ratings and review counts for social proof. Perfect for marketplaces and consumer products.
- [Checkbox Feature Builder](https://ui.beste.co/block/pricing39): Interactive pricing with checkbox feature selection and real-time price updates. Perfect for customizable service packages.
- [Minimal Toggle Selector](https://ui.beste.co/block/pricing40): Clean minimal plan selector with button-style toggles and compact layout. Perfect for simple products with few options.
- [Switch Toggle Add-ons](https://ui.beste.co/block/pricing41): Base plan pricing with switch toggles for enabling optional add-ons. Perfect for SaaS products with feature upgrades.
- [Grouped Feature Sections](https://ui.beste.co/block/pricing42): Single plan pricing with features organized into separated category groups. Perfect for products with many features to categorize.
- [Hover Card Details](https://ui.beste.co/block/pricing43): Pricing cards with hover cards showing expanded feature details on mouse over. Perfect for dense information without clutter.
- [Collapsible Feature Groups](https://ui.beste.co/block/pricing44): Pricing cards with collapsible feature sections that expand on click. Perfect for compact layouts with many features.
- [Enterprise Volume Calculator](https://ui.beste.co/block/pricing45): Enterprise pricing calculator with user count slider and volume discount tiers. Perfect for B2B products with usage-based enterprise pricing.
- [Skeleton Loading State](https://ui.beste.co/block/pricing46): Pricing cards with skeleton placeholders demonstrating loading states. Perfect for async pricing data or dynamic plan fetching.
- [Limited Time Countdown](https://ui.beste.co/block/pricing47): Promotional pricing with live countdown timer showing urgency. Perfect for flash sales and limited-time discount campaigns.
- [Guarantee Badges](https://ui.beste.co/block/pricing48): Pricing cards featuring money-back guarantee and satisfaction badges. Perfect for reducing purchase anxiety and building trust.
- [Tabbed Plan Features](https://ui.beste.co/block/pricing49): Pricing with tabs to switch between plans showing categorized feature lists. Perfect for detailed feature comparison by plan.
- [Payment Method Display](https://ui.beste.co/block/pricing50): Single plan pricing showcasing accepted payment method icons. Perfect for checkout pages and e-commerce pricing.
- [Icon Feature Highlights](https://ui.beste.co/block/pricing51): Pricing cards with icon-highlighted key features for visual scanning. Perfect for emphasizing unique plan benefits.
- [Discount Code Input](https://ui.beste.co/block/pricing52): Pricing section with discount/promo code input field and apply button. Perfect for coupon-based promotions and affiliate programs.
- [Product Bundle Pricing](https://ui.beste.co/block/pricing53): Bundle pricing cards showing combined products with savings percentage. Perfect for product suites and software bundles.
- [Plan Recommendation Quiz](https://ui.beste.co/block/pricing54): Interactive questionnaire that recommends the best plan based on user answers. Perfect for helping users choose between complex options.
- [Step-by-Step Plan Builder](https://ui.beste.co/block/pricing55): Multi-step wizard for building a custom plan with progressive disclosure. Perfect for complex configurations and guided setup.
- [Sticky Summary Sidebar](https://ui.beste.co/block/pricing56): Plan cards with sticky sidebar showing selected plan summary and total. Perfect for long pricing pages with multiple options.
- [Volume Discount Table](https://ui.beste.co/block/pricing57): Per-seat pricing table showing volume discount tiers and price-per-user breakpoints. Perfect for team products with tiered pricing.
- [Pricing with Slogan Panel](https://ui.beste.co/block/pricing58): Two-panel pricing card with scrollable features list and dark slogan panel with background image overlay.
- [Tiered Plan Tabs](https://ui.beste.co/block/pricing59): Tabbed membership pricing: feature list, headline price with CTA, and a plan summary panel per tab.
- [Three Tiers](https://ui.beste.co/block/pricing60): Three pricing tiers with an emphasized popular plan and feature lists.
- [Billing Toggle Pricing](https://ui.beste.co/block/pricing61): Three plans with a monthly/yearly billing toggle and feature lists.
- [Plan Comparison](https://ui.beste.co/block/pricing62): Feature comparison grid with plans as columns and check/dash cells.
- [Two Engagement Plans](https://ui.beste.co/block/pricing63): Two large contrasting plan panels (light vs dark) for engagement models.
- [Spotlight Plan & Add-ons](https://ui.beste.co/block/pricing64): A single spotlight plan beside a list of modular add-ons.
- [Monochrome Pricing Tiers](https://ui.beste.co/block/pricing65): Three monochrome engagement tiers with editorial big-number pricing and an inverted featured plan.
- [Single Plan Retainer](https://ui.beste.co/block/pricing66): One bordered card pairing a big monochrome price and CTA with a two-column feature checklist.
- [Comparison Matrix Pricing](https://ui.beste.co/block/pricing67): A monochrome plan comparison matrix with ruled feature rows, check/minus cells, and per-plan CTAs.
- [Seat Slider Price Calculator](https://ui.beste.co/block/pricing68): 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](https://ui.beste.co/block/pricing69): 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](https://ui.beste.co/block/pricing70): 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](https://ui.beste.co/block/pricing71): 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](https://ui.beste.co/block/pricing72): 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](https://ui.beste.co/block/pricing73): 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](https://ui.beste.co/block/product1): 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](https://ui.beste.co/block/product2): A large product image flanked by numbered feature callout cards, each naming and describing a part of the product.
- [Product Spec Sheet](https://ui.beste.co/block/product3): Editorial spec sheet pairing a product image with a bordered key/value grid of dimensions, weight, battery, and materials.
- [Every-Angle Gallery](https://ui.beste.co/block/product4): 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](https://ui.beste.co/block/product5): Split product intro: a tall product image beside a heading, description, and three icon highlights with an editorial spec link.
- [Product Variant Explorer](https://ui.beste.co/block/product6): Variant explorer that swaps the product image and spec line as you click between finishes.
- [What's in the Box](https://ui.beste.co/block/product7): What's-in-the-box section pairing a product image with a checklist of included items, each with an optional note.
- [Product Overlap Card](https://ui.beste.co/block/product8): 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](https://ui.beste.co/block/product9): Clickable tabs switch a feature panel with a large product image, title, and description. Supports an optional auto-loop.
- [Product Macro Detail Grid](https://ui.beste.co/block/product10): Editorial grid of macro close-up shots, each captioned with the material or detail it shows.
- [Split Product Highlights Plain](https://ui.beste.co/block/product11): 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](https://ui.beste.co/block/product12): 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](https://ui.beste.co/block/productlist1): 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](https://ui.beste.co/block/productlist2): 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](https://ui.beste.co/block/productlist3): 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](https://ui.beste.co/block/productlist4): 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](https://ui.beste.co/block/productlist5): 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](https://ui.beste.co/block/reveal1): 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](https://ui.beste.co/block/reveal2): 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](https://ui.beste.co/block/reveal3): A type-forward manifesto whose ruled statement lines fade and rise into view as the section enters the viewport.
- [Scroll-Reveal Gallery](https://ui.beste.co/block/reveal4): An editorial scroll-reveal gallery where images fade and rise into view with monospace captions and alternating rhythm.
- [Editorial Statement Reveal](https://ui.beste.co/block/reveal5): 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](https://ui.beste.co/block/reveal6): 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](https://ui.beste.co/block/reveal7): 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](https://ui.beste.co/block/reveal8): 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](https://ui.beste.co/block/reveal9): 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](https://ui.beste.co/block/reveal10): 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](https://ui.beste.co/block/reveal11): 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](https://ui.beste.co/block/reveal12): 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](https://ui.beste.co/block/reveal13): 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](https://ui.beste.co/block/saas13): 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](https://ui.beste.co/block/saas14): Three-step onboarding process with numbered circles and connecting lines. Perfect for explaining product workflows or signup processes.
- [Team Members Grid](https://ui.beste.co/block/saas15): Team member cards with circular photos, names, roles, and social media links (Twitter, LinkedIn, GitHub). Perfect for about pages showcasing company leadership.
- [Changelog Timeline](https://ui.beste.co/block/saas16): 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](https://ui.beste.co/block/saas23): 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](https://ui.beste.co/block/saas31): Career openings list with job title, department badge, location, and employment type. Perfect for company career pages with clickable job postings.
- [Press Coverage](https://ui.beste.co/block/saas34): Media mentions list with publication source badges, headlines, and dates. Perfect for showcasing company press coverage and news articles.
- [Connected Integrations](https://ui.beste.co/block/saas55): Integration management card showing connected apps with logos, sync status, and connect/disconnect actions. Perfect for settings pages managing third-party integrations.
- [Analytics Dashboard](https://ui.beste.co/block/saas87): 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](https://ui.beste.co/block/saas97): 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](https://ui.beste.co/block/saas98): Feature split pairing a focused pitch with a built monochrome app-window mockup of skeletons, nav, and metrics.
- [SaaS Integrations Grid](https://ui.beste.co/block/saas99): An editorial integrations section pairing a big-type pitch with a bordered mosaic of grayscale partner logo tiles.
- [Billing Split](https://ui.beste.co/block/saas100): 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](https://ui.beste.co/block/saas101): 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](https://ui.beste.co/block/saas102): 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](https://ui.beste.co/block/saas103): 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](https://ui.beste.co/block/saas104): 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](https://ui.beste.co/block/saas105): 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](https://ui.beste.co/block/saas106): 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](https://ui.beste.co/block/saas107): 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](https://ui.beste.co/block/saas108): 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](https://ui.beste.co/block/settings59): 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](https://ui.beste.co/block/settings64): 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](https://ui.beste.co/block/settings65): 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](https://ui.beste.co/block/settings66): 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](https://ui.beste.co/block/showcase1): 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](https://ui.beste.co/block/showcase2): 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](https://ui.beste.co/block/showcase3): 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](https://ui.beste.co/block/showcase4): 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](https://ui.beste.co/block/showcase5): 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](https://ui.beste.co/block/showcase6): 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](https://ui.beste.co/block/showcase7): 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](https://ui.beste.co/block/showcase10): 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](https://ui.beste.co/block/showcase12): 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](https://ui.beste.co/block/showcase13): 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](https://ui.beste.co/block/showcase14): 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](https://ui.beste.co/block/showcase15): 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](https://ui.beste.co/block/showcase16): 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](https://ui.beste.co/block/showcase17): 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](https://ui.beste.co/block/showcase18): 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](https://ui.beste.co/block/showcase19): 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](https://ui.beste.co/block/showcase20): 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](https://ui.beste.co/block/showcase21): 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](https://ui.beste.co/block/showcase22): 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](https://ui.beste.co/block/showcase23): 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](https://ui.beste.co/block/showcase24): 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](https://ui.beste.co/block/showcase25): 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](https://ui.beste.co/block/showcase26): 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](https://ui.beste.co/block/showcase27): 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](https://ui.beste.co/block/showcase28): 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](https://ui.beste.co/block/showcase29): 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](https://ui.beste.co/block/showcase30): 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](https://ui.beste.co/block/showcase31): 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](https://ui.beste.co/block/showcase32): 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](https://ui.beste.co/block/showcase33): 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](https://ui.beste.co/block/showcase34): 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](https://ui.beste.co/block/showcase35): 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](https://ui.beste.co/block/showcase36): Browser-framed product screenshot with surrounding feature callouts.
- [Showcase Scroller](https://ui.beste.co/block/showcase37): Horizontally scrollable row of wide product showcase frames with captions.
- [Sticky Showcase](https://ui.beste.co/block/showcase38): A pinned product image beside a scrolling list of feature steps.
- [Tabbed Showcase](https://ui.beste.co/block/showcase39): Tabbed product screenshots in a browser frame with captions.
- [UI Bento Showcase](https://ui.beste.co/block/showcase40): Bento mosaic mixing product screenshots with text and accent tiles.
- [Editorial Project Index](https://ui.beste.co/block/showcase41): A ruled, type-forward project index where each row reveals a floating thumbnail on hover.
- [Mosaic Frame Gallery](https://ui.beste.co/block/showcase42): An asymmetric mosaic image gallery with mixed-span tiles and monospace frame captions.
- [Featured Project Dossier](https://ui.beste.co/block/showcase43): 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](https://ui.beste.co/block/showcase44): 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](https://ui.beste.co/block/showcase45): 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](https://ui.beste.co/block/showcase46): 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](https://ui.beste.co/block/showcase47): 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](https://ui.beste.co/block/showcase48): 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](https://ui.beste.co/block/showcase49): 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](https://ui.beste.co/block/social1): 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](https://ui.beste.co/block/social2): 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](https://ui.beste.co/block/social3): Comment section with nested replies, like counts, reply functionality, and expandable threads. Perfect for blog posts, articles, or discussion forums.
- [Notification Feed](https://ui.beste.co/block/social4): 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](https://ui.beste.co/block/social5): Vertical timeline showing posts, photos, comments, follows, shares, and videos with color-coded icons. Perfect for activity feeds and user history pages.
- [Chat Conversation](https://ui.beste.co/block/social6): 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](https://ui.beste.co/block/social7): Group cards with cover images, member count, privacy indicators, category badges, and join buttons. Perfect for community discovery and group listings.
- [Event Cards](https://ui.beste.co/block/social8): Event listings with cover images, date/time, location, attendee previews, and RSVP buttons (Going/Interested). Perfect for event discovery and community calendars.
- [Follow Suggestions](https://ui.beste.co/block/social9): 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](https://ui.beste.co/block/social10): Conversation list with avatars, online status indicators, message previews, timestamps, unread badges, and search. Perfect for messaging app inboxes.
- [Trending Topics](https://ui.beste.co/block/social11): Ranked trending topics list with hashtags, post counts, growth percentages, and category badges. Perfect for sidebar widgets showing what is trending.
- [Stories Carousel](https://ui.beste.co/block/social12): Horizontal scrolling stories bar with gradient ring indicators for unread stories and add-your-own button. Perfect for Instagram-style ephemeral content.
- [Interactive Poll](https://ui.beste.co/block/social13): 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](https://ui.beste.co/block/social15): Emoji reaction picker with hover tooltips, selection highlighting, and reaction counts per emoji type. Perfect for adding reactions to posts and comments.
- [Saved Bookmarks](https://ui.beste.co/block/social20): Bookmarked articles list with thumbnails, titles, descriptions, source info, and remove actions. Perfect for reading lists and saved content collections.
- [Team Presence List](https://ui.beste.co/block/social23): 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](https://ui.beste.co/block/social24): Rich link previews showing Open Graph images, titles, descriptions, and site favicons. Perfect for displaying shared URLs in feeds and messages.
- [Referral Invite Card](https://ui.beste.co/block/social26): 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](https://ui.beste.co/block/social27): Ranked leaderboard with crown/medal icons, user avatars, scores, and position change indicators (up/down). Perfect for gamification and competitive features.
- [Compact Profile Header](https://ui.beste.co/block/social32): 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](https://ui.beste.co/block/social46): 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](https://ui.beste.co/block/social47): 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](https://ui.beste.co/block/social48): 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](https://ui.beste.co/block/social49): 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](https://ui.beste.co/block/social50): 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](https://ui.beste.co/block/social51): 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](https://ui.beste.co/block/social52): 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](https://ui.beste.co/block/social53): 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](https://ui.beste.co/block/social54): 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](https://ui.beste.co/block/social55): 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](https://ui.beste.co/block/social56): 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](https://ui.beste.co/block/social57): 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](https://ui.beste.co/block/stats1): 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](https://ui.beste.co/block/stats2): 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](https://ui.beste.co/block/stats3): 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](https://ui.beste.co/block/stats4): 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](https://ui.beste.co/block/stats5): 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](https://ui.beste.co/block/stats6): Compact horizontal row of stats separated by vertical dividers. Minimal design ideal for use between other sections.
- [Accent Border Stats Cards](https://ui.beste.co/block/stats7): Stats cards with a colored top border accent, icon, value, label, and description. Great for highlighting platform capabilities.
- [Full-Width Stats Banner](https://ui.beste.co/block/stats8): 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](https://ui.beste.co/block/stats9): 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](https://ui.beste.co/block/stats10): Infinite horizontal scrolling ticker of stats that pauses on hover. Eye-catching social proof strip for between sections.
- [Ring Progress Stats](https://ui.beste.co/block/stats11): Stats displayed inside circular SVG progress rings with animated counters. Great for visualizing percentages and performance metrics.
- [Spotlight Stat with Supporting Metrics](https://ui.beste.co/block/stats12): One hero-sized featured stat with a row of smaller supporting metrics below. Perfect for emphasizing a single key achievement.
- [Floating Stats over Image](https://ui.beste.co/block/stats13): Stat cards that float over a wide background image, overlapping the bottom edge. Creates a dynamic layered visual effect.
- [Trend Indicator Stats](https://ui.beste.co/block/stats14): Dashboard-style stat cards with colored trend badges showing up, down, or neutral changes. Perfect for quarterly reports and growth metrics.
- [Bento Grid Stats](https://ui.beste.co/block/stats15): Asymmetric bento-style grid with mixed single and double-width stat cards. Ideal for year-in-review and annual report sections.
- [Video Background Stats](https://ui.beste.co/block/stats16): Full-width video background with dark overlay and translucent glassmorphism stat cards. Immersive hero-style stats section.
- [Zigzag Image Stats](https://ui.beste.co/block/stats17): Alternating rows of images and stats that swap sides. Each row pairs a photo with key metrics and descriptions.
- [Image Card Stats](https://ui.beste.co/block/stats18): 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](https://ui.beste.co/block/stats19): 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](https://ui.beste.co/block/stats20): Split layout with stacked stats on the left and a browser window mockup displaying a screenshot on the right.
- [Spring Entrance Stats](https://ui.beste.co/block/stats21): Stats cards that spring up with staggered delay when scrolled into view. Uses framer-motion spring physics for a natural feel.
- [Odometer Flip Stats](https://ui.beste.co/block/stats22): Airport departure board-style odometer animation where each digit flips individually with spring physics as numbers count up on scroll.
- [Animated Bar Chart Stats](https://ui.beste.co/block/stats23): Horizontal progress bars that grow with spring animation on scroll. Each bar shows a label, value, and percentage fill.
- [Clip-Path Reveal Stats](https://ui.beste.co/block/stats24): Large stats that reveal with a horizontal clip-path curtain animation and spring-powered number entrance. Elegant and cinematic.
- [3D Card Flip Stats](https://ui.beste.co/block/stats25): 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](https://ui.beste.co/block/stats26): 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](https://ui.beste.co/block/stats27): Magazine-style numbered list layout with large sequence numbers, stat values, and a sticky sidebar heading for an editorial feel.
- [Timeline Milestone Stats](https://ui.beste.co/block/stats28): Horizontal timeline with year markers and key metrics at each milestone, ideal for showing company growth and history.
- [Tabbed Category Stats](https://ui.beste.co/block/stats29): Stats organized into switchable tabs by category using shadcn Tabs, letting users explore different metric groups.
- [Testimonial + Stats](https://ui.beste.co/block/stats30): A featured customer quote paired with supporting metrics for maximum social proof and credibility.
- [Sparkline Dashboard Stats](https://ui.beste.co/block/stats31): Mini dashboard cards with SVG sparkline trend charts, change indicators, and key metrics for a data-rich stats section.
- [Giant Watermark Stats](https://ui.beste.co/block/stats32): Editorial magazine-style layout with oversized translucent numbers as background watermarks behind each stat row.
- [Alternating Giant Typography Stats](https://ui.beste.co/block/stats33): Editorial layout with oversized bold stat values alternating left and right alignment, creating a dynamic typographic rhythm.
- [Terminal Output Stats](https://ui.beste.co/block/stats34): Developer-focused terminal aesthetic with monospace font, command prompt, and stats displayed as CLI output with a blinking cursor.
- [Orbit Layout Stats](https://ui.beste.co/block/stats35): Central hero metric surrounded by satellite stats in a circular orbit arrangement on desktop, with a linear stack on mobile.
- [JSON API Response Stats](https://ui.beste.co/block/stats36): Stats displayed as a syntax-highlighted JSON API response inside a code block with endpoint URL header and colored tokens.
- [Git Log Stats](https://ui.beste.co/block/stats37): Stats styled as a git commit log with commit hashes, timestamps, branch visualization lines, and metric values as commit messages.
- [Server Monitoring Stats](https://ui.beste.co/block/stats38): Monitoring dashboard aesthetic with status indicators, metric rows, live status badges, and a dark panel background.
- [E-Commerce Revenue Dashboard](https://ui.beste.co/block/stats39): Key e-commerce KPI cards showing revenue, orders, average order value, and conversion rate with period comparison badges.
- [Product Showcase Stats](https://ui.beste.co/block/stats40): Bestseller product cards with images, star ratings, units sold, and revenue figures for e-commerce social proof.
- [Live Social Proof Stats](https://ui.beste.co/block/stats41): Real-time social proof section with live activity indicators, recent order count, review scores, and urgency-building metrics for e-commerce.
- [Review Distribution Stats](https://ui.beste.co/block/stats42): 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](https://ui.beste.co/block/stats43): Delivery and shipping metrics with icon cards showing average delivery time, on-time rate, and coverage for e-commerce trust building.
- [Sales Milestone Stats](https://ui.beste.co/block/stats44): Celebration-style milestone section with a prominent central metric and supporting stats, perfect for announcing sales achievements.
- [Category Performance Stats](https://ui.beste.co/block/stats45): Product category cards with images and sales metrics showing units sold and growth percentage for each category.
- [Trust Badge Stats](https://ui.beste.co/block/stats46): E-commerce trust signals with large icons and supporting stats for security, returns, shipping, and support guarantees.
- [Weekly Market Snapshot](https://ui.beste.co/block/stats47): Weekly real estate market activity grid with key metrics, change indicators, and trend badges in a bordered card layout.
- [Real Estate Market Overview](https://ui.beste.co/block/stats48): Local market dashboard showing median home price, days on market, inventory, and year-over-year changes for real estate.
- [Agent Profile Stats](https://ui.beste.co/block/stats49): Real estate agent profile card with photo, performance metrics, and client rating for agent landing pages.
- [Neighborhood Report Card](https://ui.beste.co/block/stats50): Neighborhood livability report card with letter grades, progress bars, and descriptions for walkability, schools, transit, and safety.
- [Investment ROI Stats](https://ui.beste.co/block/stats51): Property investment metrics in a clean table layout showing cap rate, cash-on-cash return, rental yield, and appreciation.
- [Mortgage Breakdown Stats](https://ui.beste.co/block/stats52): Monthly mortgage payment breakdown with visual proportion bars showing principal, interest, taxes, and insurance.
- [Home Valuation Estimate](https://ui.beste.co/block/stats53): Home value estimate card with price range indicator, estimated value, and comparable recent sales data.
- [Portfolio Overview Stats](https://ui.beste.co/block/stats54): Real estate portfolio dashboard with total value, monthly income, occupancy rate, and property count for investors.
- [Listing to Sold Journey](https://ui.beste.co/block/stats55): Step-by-step journey from listing to closing with key metrics at each stage, showing the real estate sales process.
- [Market Trend Stats](https://ui.beste.co/block/stats56): Real estate market trend indicators with directional arrows and year-over-year comparisons for key housing metrics.
- [Stats Band](https://ui.beste.co/block/stats57): Four-up oversized stats band with dividers under a section header.
- [Stat Cards](https://ui.beste.co/block/stats58): Stat cards with accent highlight, icon chips and big numbers.
- [Image Stats Split](https://ui.beste.co/block/stats59): A tall image beside a headline and a grid of key studio stats.
- [Stat Ribbon](https://ui.beste.co/block/stats60): Horizontal icon stat ribbon on a muted surface.
- [Typographic Stats](https://ui.beste.co/block/stats61): Oversized number rows with labels and context, editorial style.
- [Video With Stat Cards](https://ui.beste.co/block/stats62): 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](https://ui.beste.co/block/stats63): 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](https://ui.beste.co/block/stats64): An oversized monochrome stat band with rule-divided figures and editorial labels beneath each.
- [Asymmetric Lead Stat](https://ui.beste.co/block/stats65): One oversized lead figure paired with a ruled, right-aligned stack of supporting stats split by a vertical rule.
- [Outcome Metric Rows](https://ui.beste.co/block/stats66): 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](https://ui.beste.co/block/stats67): 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](https://ui.beste.co/block/stats68): 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](https://ui.beste.co/block/stats69): 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](https://ui.beste.co/block/stats70): 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](https://ui.beste.co/block/stats71): 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](https://ui.beste.co/block/stats72): 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](https://ui.beste.co/block/stats73): 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](https://ui.beste.co/block/stats74): 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](https://ui.beste.co/block/terminal1): 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](https://ui.beste.co/block/terminal2): 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](https://ui.beste.co/block/terminal3): 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](https://ui.beste.co/block/testimonial1): Full-width swipeable testimonial carousel with autoplay and dot navigation. Perfect for highlighting multiple customer quotes on landing pages.
- [Centered Quote](https://ui.beste.co/block/testimonial6): Minimalist single testimonial with centered quote and author details. Perfect for hero sections or standalone social proof elements.
- [Quote Cards Grid](https://ui.beste.co/block/testimonial8): 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](https://ui.beste.co/block/testimonial11): Two-column layout with large image, star rating, and bordered author section. Perfect for featuring executive testimonials or detailed case study quotes.
- [Video Testimonials](https://ui.beste.co/block/testimonial12): Video testimonial cards with thumbnail previews, play buttons, and modal player. Perfect for customer success stories or product review videos.
- [Stats and Quote](https://ui.beste.co/block/testimonial14): 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](https://ui.beste.co/block/testimonial15): Company logo cloud combined with a featured testimonial card below. Perfect for showcasing trusted brands alongside customer endorsements.
- [Gradient Testimonial with CTA](https://ui.beste.co/block/testimonial16): 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](https://ui.beste.co/block/testimonial18): Side-by-side before/after comparison lists with a testimonial quote below. Perfect for demonstrating transformation results or product impact stories.
- [Case Study Card](https://ui.beste.co/block/testimonial19): 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](https://ui.beste.co/block/testimonial23): Grid of testimonial cards with category tags like Performance, Support, or Pricing. Perfect for organizing customer feedback by feature or benefit type.
- [Testimonial Carousel](https://ui.beste.co/block/testimonial25): Horizontally scrollable testimonial cards with full-bleed portraits, overlaid quote and author.
- [Quote Wall](https://ui.beste.co/block/testimonial26): Masonry column wall of varied-length testimonial cards with avatars.
- [Spotlight Quote](https://ui.beste.co/block/testimonial27): Single large spotlight testimonial with author block and prev/next navigation.
- [Marquee Quotes](https://ui.beste.co/block/testimonial28): Two opposing auto-scrolling marquee rows of testimonial cards.
- [Sticky Quote List](https://ui.beste.co/block/testimonial29): Sticky featured testimonial and rating beside a scrollable list of quote cards.
- [Rated Reviews](https://ui.beste.co/block/testimonial30): Centered grid of star-rated testimonial cards with avatars.
- [Stats With Testimonial Gallery](https://ui.beste.co/block/testimonial31): 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](https://ui.beste.co/block/testimonial32): 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](https://ui.beste.co/block/testimonial33): 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](https://ui.beste.co/block/testimonial34): Two rows of monochrome quote cards scrolling in opposite directions with edge fades.
- [Oversized Pull-Quote Testimonial](https://ui.beste.co/block/testimonial35): A single dramatic pull-quote with a decorative mark, centered above a rounded avatar, name, and role.
- [Masonry Quote Wall](https://ui.beste.co/block/testimonial36): A monochrome masonry wall of varying-height testimonial cards in a CSS columns layout.
- [Editorial Quote Proof](https://ui.beste.co/block/testimonial41): 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](https://ui.beste.co/block/testimonial42): 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](https://ui.beste.co/block/testimonial43): 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](https://ui.beste.co/block/testimonial44): 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](https://ui.beste.co/block/testimonial45): 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](https://ui.beste.co/block/testimonial46): 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](https://ui.beste.co/block/travel1): 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](https://ui.beste.co/block/travel2): 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](https://ui.beste.co/block/travel5): 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](https://ui.beste.co/block/travel6): 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](https://ui.beste.co/block/travel7): 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](https://ui.beste.co/block/travel8): 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](https://ui.beste.co/block/travel9): 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](https://ui.beste.co/block/travel12): 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](https://ui.beste.co/block/travel17): 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](https://ui.beste.co/block/travel18): 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](https://ui.beste.co/block/travel19): 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](https://ui.beste.co/block/travel20): 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](https://ui.beste.co/block/travel21): 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](https://ui.beste.co/block/travel22): 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](https://ui.beste.co/block/travel23): 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](https://ui.beste.co/block/travel24): 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](https://ui.beste.co/block/travel25): 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](https://ui.beste.co/block/travel34): 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](https://ui.beste.co/block/travel36): 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](https://ui.beste.co/block/travel41): 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](https://ui.beste.co/block/travel42): 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](https://ui.beste.co/block/usecase1): 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](https://ui.beste.co/block/usecase2): 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](https://ui.beste.co/block/usecase3): 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](https://ui.beste.co/block/usecase4): 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](https://ui.beste.co/block/usecase5): 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](https://ui.beste.co/block/usecase7): Expandable accordion layout with icons, images, descriptions, and feature lists inside each panel. Perfect for detailed solution explanations with visual content.
- [Vertical Timeline](https://ui.beste.co/block/usecase8): 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](https://ui.beste.co/block/usecase9): 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](https://ui.beste.co/block/usecase10): 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](https://ui.beste.co/block/usecase11): 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](https://ui.beste.co/block/usecase12): 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](https://ui.beste.co/block/usecase14): 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](https://ui.beste.co/block/usecase15): 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](https://ui.beste.co/block/usecase17): 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](https://ui.beste.co/block/usecase18): 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](https://ui.beste.co/block/usecase19): 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](https://ui.beste.co/block/usecase20): 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](https://ui.beste.co/block/usecase22): 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](https://ui.beste.co/block/usecase23): 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](https://ui.beste.co/block/usecase32): 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](https://ui.beste.co/block/usecase37): 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](https://ui.beste.co/block/usecase40): 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](https://ui.beste.co/block/usecase41): 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](https://ui.beste.co/block/usecase42): 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](https://ui.beste.co/block/usecase43): 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](https://ui.beste.co/block/usecase44): 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](https://ui.beste.co/block/usecase45): 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](https://ui.beste.co/block/usecase46): 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](https://ui.beste.co/block/usecase47): 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](https://ui.beste.co/block/usecase48): 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](https://ui.beste.co/block/usecase49): 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](https://ui.beste.co/block/usecase50): 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](https://ui.beste.co/block/usecase51): 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](https://ui.beste.co/block/usecase52): 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](https://ui.beste.co/block/usecase53): 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](https://ui.beste.co/block/workflow1): 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](https://ui.beste.co/block/workflow2): Three feature cards that swap icons for live workflow pieces: an app picker, a configurable step, and an active toggle.
- [Accordion With Workflow Media](https://ui.beste.co/block/workflow3): 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](https://ui.beste.co/block/workflow4): 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](https://ui.beste.co/block/workflow5): Two-column CTA paired with a failed-run retry card. Copy talks reliability while the asset shows the actual recovery surface.
- [Trigger Library Showcase](https://ui.beste.co/block/workflow6): 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](https://ui.beste.co/block/workflow7): 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](https://ui.beste.co/block/workflow8): 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](https://ui.beste.co/block/workflow9): 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](https://ui.beste.co/block/workflow10): 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](https://ui.beste.co/block/workflow11): Minimal centered hero with a three-tile strip of workflow pieces underneath: delay, email, and approval surfaces.
- [Workflow Canvas Hero](https://ui.beste.co/block/workflow12): 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](https://ui.beste.co/block/workflow13): 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](https://ui.beste.co/block/workflow14): Full-width run history table showing live workflow runs with status pills, duration, started-at timestamps, and per-row actions.
- [Recipe Marketplace Grid](https://ui.beste.co/block/workflow15): 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](https://ui.beste.co/block/workflow16): 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](https://ui.beste.co/block/workflow17): 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](https://ui.beste.co/block/workflow18): Three pricing tiers tuned to workflow products: run quotas, workflow counts, and integration limits with a featured plan highlighted.
- [Workflow Onboarding Checklist](https://ui.beste.co/block/workflow19): 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](https://ui.beste.co/block/workflow20): 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](https://ui.beste.co/block/workflow21): 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](https://ui.beste.co/block/workflow22): 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](https://ui.beste.co/block/workflow23): Minimal quota meter card: header with usage label, large used/limit counter, a single progress bar, and a reset countdown footer.
- [Upcoming Schedules Banner](https://ui.beste.co/block/workflow24): 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](https://ui.beste.co/block/workflow25): How-we-work section: a square visual beside a step panel with prev/next navigation, step title, description and a stat.
- [Process Flow](https://ui.beste.co/block/workflow26): Horizontal connected process steps with numbered nodes on a continuous rail.
- [Process Ascent](https://ui.beste.co/block/workflow27): Ascending-staircase process timeline where each phase climbs above the last, with oversized index numerals, cadence labels and per-phase deliverables.
- [Phase Tabs](https://ui.beste.co/block/workflow28): Tabbed engagement phases with deliverables, duration and imagery.
- [Engagement Timeline](https://ui.beste.co/block/workflow29): Mini-gantt of engagement phases with duration bars over a week scale.
- [Phase Selector](https://ui.beste.co/block/workflow30): Sticky clickable phase list driving a detail panel with checklist and image.
- [Sprint Cadence](https://ui.beste.co/block/workflow31): A weekly sprint rhythm shown as day columns of activities.
- [Process Accordion](https://ui.beste.co/block/workflow32): Expandable numbered process steps revealing deliverables and duration.
- [Stage Rail](https://ui.beste.co/block/workflow33): Interactive process rail with a filling progress spine; selecting a stage swaps its media and deliverables.
- [Phase Outcomes](https://ui.beste.co/block/workflow34): Each engagement phase mapped from its inputs to its outcomes.
- [Method Pillars](https://ui.beste.co/block/workflow35): A featured methodology panel alongside supporting principle pillars.
- [Process Timeline](https://ui.beste.co/block/workflow36): A single-rail vertical process timeline with numbered nodes and per-step duration and owner meta.
- [Parallel Tracks](https://ui.beste.co/block/workflow37): Two parallel workstream swimlanes aligned across shared phase columns.
- [Cascade Process](https://ui.beste.co/block/workflow38): Process steps cascading in a diagonal staircase with connecting markers.
- [Phase Index](https://ui.beste.co/block/workflow39): A numbered phase index that cross-fades a sticky detail panel as each phase is hovered.
- [Process Board](https://ui.beste.co/block/workflow40): A kanban-style board showing studio work moving across stage columns.
- [Timeline Scroller](https://ui.beste.co/block/workflow41): A horizontally scrollable dated milestone timeline with alternating cards on a continuous axis.
- [Phase Bands](https://ui.beste.co/block/workflow42): Full-width phase bands anchored by oversized ghost numerals with duration meta.
- [Weekly Plan](https://ui.beste.co/block/workflow43): Week-grouped task checklists each with a focus tag and a progress bar.
- [Overview & Phases](https://ui.beste.co/block/workflow44): A sticky process overview with summary stats beside an expandable phase accordion.
- [Process Metrics](https://ui.beste.co/block/workflow45): Each process stage paired with a prominent SLA-style metric.
- [Numbered Process Steps](https://ui.beste.co/block/workflow46): 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](https://ui.beste.co/block/workflow47): 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](https://ui.beste.co/block/workflow48): 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](https://ui.beste.co/block/workflow49): 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](https://ui.beste.co/block/workflow50): 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](https://ui.beste.co/block/workflow51): 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](https://ui.beste.co/block/workflow52): 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](https://ui.beste.co/block/workflow53): 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](https://ui.beste.co/block/workflow54): 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](https://ui.beste.co/block/workflow55): 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.

## Optional

- [GitHub](https://github.com/beste-co/beste-ui): Source code and contributions