sh4dcnv2 · atlas
← libraries

@beste-ui

A curated collection of 1,163+ production-ready shadcn/ui blocks built with React, Tailwind CSS, and Next.js, organized into named categories including hero, feature, pricing, cta, faq, stats, auth, careers, news, ecommerce, onboarding, food, booking, event, travel, blog, chat, portfolio, and more. Each block is individually installable via the shadcn CLI. Free and open source. Use for: quickly assembling diverse landing pages and web-app screens without building blocks from scratch.

250 components pro available react shadcn-cli MIT

Install this registry

shadcn (npm) npx shadcn@latest add https://ui.beste.co/r/registry.json
pnpm pnpm dlx shadcn@latest add https://ui.beste.co/r/registry.json
bun bunx shadcn@latest add https://ui.beste.co/r/registry.json
fetch registry curl -s https://ui.beste.co/r/registry.json

Components

250 total
Team & Mission block

Two-column about section with mission statement, company stats, and team member grid. Perfect for company pages and landing sections.

npx shadcn@latest add https://ui.beste.co/r/about1.json
Values with Team Photo block

Full-width team photo with a three-column values grid below. Great for culture pages and brand storytelling.

npx shadcn@latest add https://ui.beste.co/r/about2.json
Timeline & Milestones block

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.

npx shadcn@latest add https://ui.beste.co/r/about3.json
Founder Quote & Team block

Founder blockquote with avatar, followed by a horizontal team member row. Ideal for leadership pages and company introductions.

npx shadcn@latest add https://ui.beste.co/r/about4.json
Image & Text Split block

Side-by-side layout with a tall image on the left and company story, inline stats, and CTAs on the right.

npx shadcn@latest add https://ui.beste.co/r/about5.json
Numbered Principles block

Asymmetric two-column layout with heading on the left and numbered company principles on the right. Clean and editorial.

npx shadcn@latest add https://ui.beste.co/r/about6.json
Team Cards with Bios block

Three-column grid of team member cards with avatars, roles, and short bios. Great for leadership and team pages.

npx shadcn@latest add https://ui.beste.co/r/about7.json
Stats with Descriptions block

Four-column stats grid with large numbers, titles, and supporting descriptions. Perfect for impact and results sections.

npx shadcn@latest add https://ui.beste.co/r/about8.json
Mission & Trust Logos block

Centered mission statement with a logo strip of trusted partners below. Ideal for building credibility on landing and about pages.

npx shadcn@latest add https://ui.beste.co/r/about9.json
Bento Grid About block

Asymmetric bento grid combining a mission card, team photo, stats, and stacked avatars. A modern, compact about section.

npx shadcn@latest add https://ui.beste.co/r/about10.json
Hero Banner with Avatars block

Wide hero image with gradient overlay text, inline stats, and a stacked avatar strip of team members.

npx shadcn@latest add https://ui.beste.co/r/about11.json
Process Steps block

Four-column numbered process cards showing how your company works. Each step has a large number, title, and description.

npx shadcn@latest add https://ui.beste.co/r/about12.json
Company Profile block

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.

npx shadcn@latest add https://ui.beste.co/r/about13.json
Stats Bar with Story Card block

Horizontal stats row at the top followed by a centered story card with heading, body text, and CTAs.

npx shadcn@latest add https://ui.beste.co/r/about14.json
Letter from the CEO block

Editorial-style open letter with paragraphs, a personal signature with avatar, and a call-to-action. Great for founder stories.

npx shadcn@latest add https://ui.beste.co/r/about15.json
Vision Mission Values block

Three-column cards for vision, mission, and values with labeled headers. Clean editorial layout for company positioning.

npx shadcn@latest add https://ui.beste.co/r/about16.json
Awards & Recognition block

Vertical list of awards and accolades with icons, titles, organizations, and years. Ideal for press and credibility sections.

npx shadcn@latest add https://ui.beste.co/r/about17.json
Office Locations Grid block

Four-column grid of office cards with city, country, address, and team size. Ideal for global companies.

npx shadcn@latest add https://ui.beste.co/r/about18.json
Company At a Glance block

Full company overview with panoramic image, story paragraph, key facts list, leadership quote, and stats row. A rich, multi-section layout for company landing …

npx shadcn@latest add https://ui.beste.co/r/about19.json
Team Photo & List block

Wide team photo, member list with avatars, team stats grid, and a culture quote. A rich team showcase layout.

npx shadcn@latest add https://ui.beste.co/r/about20.json
Checklist & Image Split block

Two-column layout with checklist highlights on the left, featured image and testimonial quote on the right, plus a full-width stats row.

npx shadcn@latest add https://ui.beste.co/r/about21.json
Q&A About Us block

Asymmetric two-column layout with heading on the left and question-answer pairs on the right. A conversational way to introduce your company.

npx shadcn@latest add https://ui.beste.co/r/about22.json
Story, Image & Team Row block

Two-column layout with company story, stats, and leadership quote on the left, team photo and avatar row on the right.

npx shadcn@latest add https://ui.beste.co/r/about23.json
Company Heritage & Features block

Company story with image, border-accented feature highlights, and stats row. Great for craft, heritage, and product-focused brands.

npx shadcn@latest add https://ui.beste.co/r/about24.json
Animated Stats & Value Cards block

Side-by-side intro with animated number counters on scroll, expanding accent bars, and hover-lift value cards. For impact-driven companies.

npx shadcn@latest add https://ui.beste.co/r/about25.json
Interactive Pillar Tabs & Image block

Centered header with interactive hover tabs that crossfade a side image. Accordion descriptions and sliding accent line. For studios and agencies.

npx shadcn@latest add https://ui.beste.co/r/about26.json
Split Intro & Animated Timeline block

Left intro with image, right vertical timeline with staggered scroll-reveal animation. Numbered steps with sliding content. For startup journeys.

npx shadcn@latest add https://ui.beste.co/r/about27.json
Marquee Stats & Team Split block

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…

npx shadcn@latest add https://ui.beste.co/r/about28.json
Wide Banner & Product Cards block

Centered header with wide panoramic image, product cards with layered attributes, and sourcing grid.

npx shadcn@latest add https://ui.beste.co/r/about29.json
Banner Split & Process Steps block

Panoramic image with split header showing numbered process steps alongside. For studios and creative agencies.

npx shadcn@latest add https://ui.beste.co/r/about30.json
Hero Overlay & Suite Cards block

Dark-overlay hero image with heading, suite/room cards with temperature and capacity badges. For hotels and hospitality.

npx shadcn@latest add https://ui.beste.co/r/about31.json
Two Image Layout block

Centered heading with description, followed by two images side-by-side. Configurable image ratio (equal, left larger, right larger). Always horizontal on mobil…

npx shadcn@latest add https://ui.beste.co/r/about32.json
About With Stats Band block

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 be…

npx shadcn@latest add https://ui.beste.co/r/about33.json
About Stats Grid block

About section: eyebrow label, two-tone heading, two portraits beside a 2x2 stats grid.

npx shadcn@latest add https://ui.beste.co/r/about34.json
About Media Reel block

About section with eyebrow, stacked stats and a read-more CTA beside a media card with a watch-reel play button.

npx shadcn@latest add https://ui.beste.co/r/about35.json
Edge Label About block

Asymmetric about with a bleeding image, vertical edge label, offset copy and an inline stats row.

npx shadcn@latest add https://ui.beste.co/r/about36.json
Index Columns About block

Three uneven columns: a studio fact index, an oversized statement, and a portrait with signature.

npx shadcn@latest add https://ui.beste.co/r/about37.json
Overlap Heading About block

About where a large heading overlaps a portrait, with a paragraph, CTA and a bottom stat ribbon.

npx shadcn@latest add https://ui.beste.co/r/about38.json
Numeral About block

About anchored by an oversized numeral with a paragraph and a horizontal image strip.

npx shadcn@latest add https://ui.beste.co/r/about39.json
Interleaved About block

Magazine about where copy is interleaved between two staggered offset images.

npx shadcn@latest add https://ui.beste.co/r/about40.json
Story Rail About block

Sticky eyebrow rail beside a story column and an offset captioned image.

npx shadcn@latest add https://ui.beste.co/r/about41.json
Framed Studio Card block

About composed inside a bordered studio card with header marks, portrait and a stats strip.

npx shadcn@latest add https://ui.beste.co/r/about42.json
Heading Hero About block

An oversized about statement hero above three heterogeneous zones: portrait, values and a CTA with stats.

npx shadcn@latest add https://ui.beste.co/r/about43.json
Marquee Accent About block

Layered about over a faint scrolling studio-word marquee with offset images and stats.

npx shadcn@latest add https://ui.beste.co/r/about44.json
Founder Quote About block

A founder-led pull-quote about with a portrait, signature and a facts strip.

npx shadcn@latest add https://ui.beste.co/r/about45.json
About Strip block

An about intro followed by a horizontally scrollable strip mixing image, stat, quote and values cards.

npx shadcn@latest add https://ui.beste.co/r/about46.json
Split Panel About block

A hard light/dark split about panel: dark statement side and a light image-and-facts side.

npx shadcn@latest add https://ui.beste.co/r/about47.json
Principles About block

About pairing a sticky studio statement and image with a numbered list of operating principles.

npx shadcn@latest add https://ui.beste.co/r/about48.json
Founder Statement About block

About built around a dark founder portrait card with a pull-quote, signature, and supporting stats.

npx shadcn@latest add https://ui.beste.co/r/about49.json
Chaptered About block

A pinned studio image beside a numbered, chaptered about story.

npx shadcn@latest add https://ui.beste.co/r/about50.json
Beliefs About block

A statement heading over a belief list punctuated by intermittent inline thumbnails.

npx shadcn@latest add https://ui.beste.co/r/about51.json
Spec Sheet About block

About styled as a technical spec sheet with coordinate marks, a data column and a portrait.

npx shadcn@latest add https://ui.beste.co/r/about52.json
Pinned Photos About block

About with two subtly rotated, captioned studio photos clustered beside the statement.

npx shadcn@latest add https://ui.beste.co/r/about53.json
Inset Card About block

A cinematic wide image with an overlapping inset content card and a stat ribbon.

npx shadcn@latest add https://ui.beste.co/r/about54.json
Four Parts About block

A type-led about with an oversized statement and a four-part Who/What/How/Why grid.

npx shadcn@latest add https://ui.beste.co/r/about55.json
Showcase Hero With Video block

Large heading with dual CTAs and a rating card, a playable video with floating metric cards, and a labelled about block with large paragraphs.

npx shadcn@latest add https://ui.beste.co/r/about56.json
Values And Mission Statement block

Two centered statements on a dark surface, each with an accent heading, an uppercase paragraph, and a small label beneath.

npx shadcn@latest add https://ui.beste.co/r/about57.json
About Statement Card block

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…

npx shadcn@latest add https://ui.beste.co/r/about58.json
About Statement With Pillars block

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 desc…

npx shadcn@latest add https://ui.beste.co/r/about59.json
Team Member Grid block

Team section with an eyebrow, big heading, description and CTA above a responsive grid of people cards (portrait image, name, role).

npx shadcn@latest add https://ui.beste.co/r/about60.json
Belief Statement Values block

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.

npx shadcn@latest add https://ui.beste.co/r/about61.json
Milestone Timeline block

About section with a header and a vertical timeline of milestones on a left rail, each marked by a year, title, and description.

npx shadcn@latest add https://ui.beste.co/r/about62.json
Studio Story Split block

Image-led about split with a tall portrait, an offset statement heading, supporting copy, mono studio facts, and a seal CTA.

npx shadcn@latest add https://ui.beste.co/r/about63.json
Principles Card Grid block

Principles section with a header and a three-column grid of six bordered cards, each pairing a circular icon with a title and description.

npx shadcn@latest add https://ui.beste.co/r/about64.json
Centered Manifesto block

Centered manifesto with a very large multi-line statement heading, muted emphasis phrases, a closing line, and a single CTA.

npx shadcn@latest add https://ui.beste.co/r/about65.json
About with Stats Grid block

Two-column about with a tall image on one side and an eyebrow, heading, description, and 2x2 stats grid on the other.

npx shadcn@latest add https://ui.beste.co/r/about66.json
Founder Statement block

Founder statement with a large blockquote followed by an avatar, name, role, and a monospace signature line.

npx shadcn@latest add https://ui.beste.co/r/about67.json
Team Portrait Grid block

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.

npx shadcn@latest add https://ui.beste.co/r/about68.json
Case Study Hero block

A case study header with project metadata grid, service tags, and featured image. Perfect for agency portfolio pages showcasing client work details.

npx shadcn@latest add https://ui.beste.co/r/agency10.json
Studio Manifesto block

Oversized editorial manifesto statement with emphasized phrases, principle chips and a founder signature.

npx shadcn@latest add https://ui.beste.co/r/agency11.json
Studio Values block

Studio values laid out with oversized ghost numerals, titles, descriptions and keywords.

npx shadcn@latest add https://ui.beste.co/r/agency12.json
How We Think block

Sticky studio intro with a portrait beside a stack of numbered principles.

npx shadcn@latest add https://ui.beste.co/r/agency13.json
Studio Team block

A studio team grid of member portraits with names and roles.

npx shadcn@latest add https://ui.beste.co/r/agency14.json
Awards List block

Editorial list of studio awards by year with project and recognition details.

npx shadcn@latest add https://ui.beste.co/r/agency15.json
Studio At A Glance block

Studio overview pairing facts, copy and highlight stats with a clean studio image.

npx shadcn@latest add https://ui.beste.co/r/agency16.json
Principles Selector block

Interactive principle list that swaps a detail panel with image as each is hovered.

npx shadcn@latest add https://ui.beste.co/r/agency17.json
Studio Ethos block

A bold ethos statement beside a list of concrete studio commitments.

npx shadcn@latest add https://ui.beste.co/r/agency18.json
Why Polaris block

A two-column comparison contrasting the Polaris way with a typical agency.

npx shadcn@latest add https://ui.beste.co/r/agency19.json
Clients & Outcomes block

Client logo cloud paired with measurable engagement outcomes.

npx shadcn@latest add https://ui.beste.co/r/agency20.json
Capabilities Accordion block

Ruled, expandable capability rows with oversized type, detail copy, and monospace tag chips.

npx shadcn@latest add https://ui.beste.co/r/agency21.json
Horizontal Process Timeline block

A connected left-to-right sequence of numbered project phases with a ruled timeline and step dots.

npx shadcn@latest add https://ui.beste.co/r/agency22.json
Numbered Services List block

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 de…

npx shadcn@latest add https://ui.beste.co/r/agency23.json
Centered Sign In Card block

Full-height centered sign-in screen with social login providers, email and password fields, a show/hide password toggle, remember-me checkbox, and forgot-passw…

npx shadcn@latest add https://ui.beste.co/r/auth1.json
Split-Screen Sign Up block

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…

npx shadcn@latest add https://ui.beste.co/r/auth2.json
Email Verification Code block

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 re…

npx shadcn@latest add https://ui.beste.co/r/auth3.json
Forgot Password Request block

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-sig…

npx shadcn@latest add https://ui.beste.co/r/auth4.json
Set New Password block

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…

npx shadcn@latest add https://ui.beste.co/r/auth5.json
Magic Link Sign In block

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…

npx shadcn@latest add https://ui.beste.co/r/auth6.json
Account Chooser block

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,…

npx shadcn@latest add https://ui.beste.co/r/auth7.json
Welcome Back Unlock block

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-dif…

npx shadcn@latest add https://ui.beste.co/r/auth8.json
Split-Screen Sign In block

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 hig…

npx shadcn@latest add https://ui.beste.co/r/auth9.json
Face ID Sign In block

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 passw…

npx shadcn@latest add https://ui.beste.co/r/auth10.json
Account Type Selection block

Full-height onboarding step where the user picks an account type from selectable radio cards with icons and descriptions, then continues. Perfect for tailoring…

npx shadcn@latest add https://ui.beste.co/r/auth11.json
Email Confirmed Success block

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 af…

npx shadcn@latest add https://ui.beste.co/r/auth12.json
Centered Sign Up Card block

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 …

npx shadcn@latest add https://ui.beste.co/r/auth13.json
Enterprise SSO Sign In block

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 …

npx shadcn@latest add https://ui.beste.co/r/auth14.json
Phone Number Sign In block

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-…

npx shadcn@latest add https://ui.beste.co/r/auth15.json
Team Invitation Accept block

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 ac…

npx shadcn@latest add https://ui.beste.co/r/auth16.json
Signed Out Confirmation block

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 …

npx shadcn@latest add https://ui.beste.co/r/auth17.json
New Sign-In Security Alert block

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…

npx shadcn@latest add https://ui.beste.co/r/auth18.json
OAuth Authorize App block

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-part…

npx shadcn@latest add https://ui.beste.co/r/auth19.json
Check Your Inbox block

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…

npx shadcn@latest add https://ui.beste.co/r/auth20.json
Passkey Sign In block

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 …

npx shadcn@latest add https://ui.beste.co/r/auth21.json
Recovery Codes block

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 ch…

npx shadcn@latest add https://ui.beste.co/r/auth22.json
Account Locked block

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-pass…

npx shadcn@latest add https://ui.beste.co/r/auth23.json
Complete Your Profile block

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 s…

npx shadcn@latest add https://ui.beste.co/r/auth24.json
Claim Your Username block

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 unloc…

npx shadcn@latest add https://ui.beste.co/r/auth25.json
Choose Your Plan block

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 …

npx shadcn@latest add https://ui.beste.co/r/auth26.json
Sign-In Error block

Full-height authentication error screen with a warning icon, an explanation, an optional error code, and try-again, back, and contact-support actions. Perfect …

npx shadcn@latest add https://ui.beste.co/r/auth27.json
Link Expired block

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…

npx shadcn@latest add https://ui.beste.co/r/auth28.json
Terminal Sign In block

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…

npx shadcn@latest add https://ui.beste.co/r/auth29.json
PIN Keypad Unlock block

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.

npx shadcn@latest add https://ui.beste.co/r/auth30.json
QR Code Device Login block

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 des…

npx shadcn@latest add https://ui.beste.co/r/auth31.json
Editorial Split Sign In block

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. Perf…

npx shadcn@latest add https://ui.beste.co/r/auth32.json
Multi-Step Sign Up Wizard block

Full-height multi-step registration with a numbered progress stepper that advances as the user moves through account, profile, and workspace steps, with back a…

npx shadcn@latest add https://ui.beste.co/r/auth33.json
Email-First Sign In block

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 emai…

npx shadcn@latest add https://ui.beste.co/r/auth34.json
Number Match Approval block

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 n…

npx shadcn@latest add https://ui.beste.co/r/auth35.json
Workspace Switcher block

Full-height workspace picker listing organizations with logo initials, member details, and a create-workspace row, plus a signed-in-as footer. Perfect for mult…

npx shadcn@latest add https://ui.beste.co/r/auth36.json
Connect Wallet block

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 dec…

npx shadcn@latest add https://ui.beste.co/r/auth37.json
Pattern Lock Unlock block

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 ap…

npx shadcn@latest add https://ui.beste.co/r/auth38.json
Enable Two-Factor block

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. P…

npx shadcn@latest add https://ui.beste.co/r/auth39.json
Change Password block

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…

npx shadcn@latest add https://ui.beste.co/r/auth40.json
Delete Account block

Full-height destructive confirmation screen that lists the consequences and requires the user to type a confirmation word before the delete button enables. Per…

npx shadcn@latest add https://ui.beste.co/r/auth41.json
Invite Code Gate block

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.

npx shadcn@latest add https://ui.beste.co/r/auth42.json
Join the Waitlist block

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-a…

npx shadcn@latest add https://ui.beste.co/r/auth43.json
Redirecting to SSO block

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 hando…

npx shadcn@latest add https://ui.beste.co/r/auth44.json
Human Verification block

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. Perfe…

npx shadcn@latest add https://ui.beste.co/r/auth45.json
Confirm It's You block

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 f…

npx shadcn@latest add https://ui.beste.co/r/auth46.json
Recovery Phrase Entry block

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 entere…

npx shadcn@latest add https://ui.beste.co/r/auth47.json
Security Question Setup block

Full-height security question setup with a question select and an answer field, plus a skip option. Perfect for account recovery setup and identity verificatio…

npx shadcn@latest add https://ui.beste.co/r/auth48.json
Studio Bento Grid block

A hand-tiled monochrome bento grid mixing a statement, a stat, an image, a quote, and a CTA into one composition.

npx shadcn@latest add https://ui.beste.co/r/bento1.json
Card Grid with Authors block

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.

npx shadcn@latest add https://ui.beste.co/r/blog3.json
Featured Hero with Grid block

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.

npx shadcn@latest add https://ui.beste.co/r/blog4.json
Horizontal List with Icons block

Vertical stack of horizontal blog cards with left-aligned thumbnails. Features calendar and clock icons for metadata, author titles, and tag badges.

npx shadcn@latest add https://ui.beste.co/r/blog5.json
Category Tabs Filter block

Filterable blog grid with tab navigation for categories. Posts automatically filter by category selection with smooth content switching.

npx shadcn@latest add https://ui.beste.co/r/blog8.json
Alternating Feature Cards block

Large alternating left-right blog cards with full article summaries. Image and content switch sides for visual variety. Read more buttons included.

npx shadcn@latest add https://ui.beste.co/r/blog10.json
Compact Thumbnail List block

Two-column compact blog list with small square thumbnails. Space-efficient design showing many posts at once with minimal metadata.

npx shadcn@latest add https://ui.beste.co/r/blog11.json
Masonry Pinterest Grid block

Pinterest-style masonry layout with varying content heights. CSS columns create organic flow with cards of different summary lengths.

npx shadcn@latest add https://ui.beste.co/r/blog12.json
Sidebar with Categories block

Main content area with horizontal post cards plus sidebar. Categories show post counts and popular tags section with clickable badges.

npx shadcn@latest add https://ui.beste.co/r/blog13.json
Grid with Newsletter Card block

Four-column grid mixing blog cards with an integrated newsletter signup card. Email input and subscribe button embedded in the layout.

npx shadcn@latest add https://ui.beste.co/r/blog14.json
Minimal Text List block

Clean text-only blog list with arrow icons. No images, just titles, dates, and authors. Lightweight design with hover arrow animation.

npx shadcn@latest add https://ui.beste.co/r/blog15.json
Month-Grouped Archive block

Blog archive organized by month with compact list entries. Small thumbnails and formatted dates create a scannable chronological view.

npx shadcn@latest add https://ui.beste.co/r/blog18.json
Full-Width Stacked Cards block

Vertically stacked blog cards with 2:1 aspect ratio images. Full article summaries with author avatars and read more buttons. Long-form content showcase.

npx shadcn@latest add https://ui.beste.co/r/blog22.json
Split Image with List block

Two-column layout with featured image on left and article list on right. Divider-separated entries with arrow hover effects.

npx shadcn@latest add https://ui.beste.co/r/blog25.json
Polaroid Photo Gallery block

Playful polaroid-style cards with random rotations and white borders. Cards straighten on hover for a fun, casual photo gallery feel.

npx shadcn@latest add https://ui.beste.co/r/blog26.json
Newspaper Editorial Style block

Classic newspaper layout with serif fonts and bordered headline. Large main story on left, stacked secondary stories on right with dividers.

npx shadcn@latest add https://ui.beste.co/r/blog27.json
Hover Reveal Overlay block

Grid of image cards with gradient overlays. Summaries expand on hover with smooth max-height animation. Titles always visible with white text.

npx shadcn@latest add https://ui.beste.co/r/blog30.json
Full-Width Hero Banners block

Wide cinematic banners with centered text overlay. Large bold titles on semi-transparent backgrounds. Immersive visual storytelling format.

npx shadcn@latest add https://ui.beste.co/r/blog31.json
Tutorial Series Cards block

Multi-part tutorial series with numbered parts. Book icon, part count, and progress-style list. Perfect for step-by-step learning content.

npx shadcn@latest add https://ui.beste.co/r/blog36.json
Timeline Year Archive block

Vertical timeline archive organized by year and month. Calendar icon with border line connecting entries. Compact text-only format.

npx shadcn@latest add https://ui.beste.co/r/blog42.json
Editorial Article Grid block

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 monospace category, a titl…

npx shadcn@latest add https://ui.beste.co/r/blog43.json
Date & Time Picker block

Split-panel booking interface with interactive monthly calendar on the left and time slot grid on the right. Features today highlight, disabled dates, selected…

npx shadcn@latest add https://ui.beste.co/r/booking1.json
Reservation Summary block

Booking confirmation card with service details, date/time, provider info with avatar, price breakdown with subtotal/tax/discount/total, promo code input, cance…

npx shadcn@latest add https://ui.beste.co/r/booking2.json
Appointment List block

Upcoming and past appointments list grouped by date, with service name, provider avatar, time, duration, status badges (confirmed/pending/cancelled), and resch…

npx shadcn@latest add https://ui.beste.co/r/booking3.json
Service Selector block

Service selection grid with category filter tabs, service cards showing icon, name, description, duration, price, and selected state. Ideal for spa, salon, cli…

npx shadcn@latest add https://ui.beste.co/r/booking4.json
Provider Picker block

Staff/provider selection cards with avatar, name, specialty, star rating, review count, availability badge, experience years, and selected state. Grid layout w…

npx shadcn@latest add https://ui.beste.co/r/booking5.json
Restaurant Reservation block

Restaurant table reservation with guest count selector, date/time picker, seating preference (indoor/outdoor/bar), special requests textarea, and booking summa…

npx shadcn@latest add https://ui.beste.co/r/booking6.json
Hotel Room Booking block

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 to…

npx shadcn@latest add https://ui.beste.co/r/booking7.json
Flight Booking block

Flight search results with airline logos, departure/arrival times, duration, stops, class selector (economy/business/first), baggage info, and price comparison…

npx shadcn@latest add https://ui.beste.co/r/booking8.json
Event Ticket Booking block

Event ticket selection with event banner, date/venue info, ticket tier cards (General/VIP/Backstage) with perks list, quantity selector, and order total. Conce…

npx shadcn@latest add https://ui.beste.co/r/booking9.json
Meeting Room Booking block

Coworking meeting room reservation with room cards showing capacity, equipment icons, hourly pricing, time range selector, attendee count, and total cost. Offi…

npx shadcn@latest add https://ui.beste.co/r/booking10.json
Price Calendar block

Google Flights-style price calendar with per-day pricing, cheapest day highlights, expensive day indicators, date range selection, and best deal summary banner…

npx shadcn@latest add https://ui.beste.co/r/booking11.json
Search Bar Hero block

Airbnb/Booking.com-style search bar with location autocomplete, date range picker, guest counter dropdown, and search CTA. Responsive — inline on desktop, stac…

npx shadcn@latest add https://ui.beste.co/r/booking12.json
Live Social Proof Bar block

Booking.com-style social proof ticker with rotating messages: live viewers, recent bookings, scarcity alerts, and location-based activity. Animated transitions…

npx shadcn@latest add https://ui.beste.co/r/booking13.json
Activity Experience Booking block

Tours and experiences booking card with hero image overlay, rating, duration, difficulty badge, date picker, traveler counter, language selector, highlights li…

npx shadcn@latest add https://ui.beste.co/r/booking14.json
Booking Confirmation Receipt block

Post-booking success screen with animated check icon, confirmation number, booking summary (service, date/time, location, total), scannable QR code ticket, act…

npx shadcn@latest add https://ui.beste.co/r/booking15.json
Home Cleaning Service Booking block

Residential cleaning service booking with service type tabs (standard/deep/move-out), bedroom/bathroom selectors, recurring frequency pills, add-ons checklist,…

npx shadcn@latest add https://ui.beste.co/r/booking16.json
Ride Booking block

Ride-share style booking with pickup/dropoff address inputs, schedule now/later toggle, ride class selector (economy/comfort/xl) with ETA and fare, payment met…

npx shadcn@latest add https://ui.beste.co/r/booking17.json
Cinema Seat Picker block

Interactive seat selection grid for cinemas, theaters, and events. Row/column layout with an aisle gap, tier-based pricing (standard/premium/VIP), occupied sea…

npx shadcn@latest add https://ui.beste.co/r/booking18.json
Multi-step Booking Wizard block

Stepper-based booking flow with numbered progress dots, animated progress bar, and four steps: service selection, schedule, contact details, and review. Back/N…

npx shadcn@latest add https://ui.beste.co/r/booking19.json
Car Rental Booking block

Vehicle rental flow with pickup and return location fields, date range picker, car class grid (compact/suv/luxury) with image and specs, insurance tier selecto…

npx shadcn@latest add https://ui.beste.co/r/booking20.json
Weekly Class Schedule block

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…

npx shadcn@latest add https://ui.beste.co/r/booking21.json
Spa Day Package Builder block

Multi-service booking composer. Customers assemble their own wellness day by adding services across categories (massage/facial/body/nails/add-ons), with live p…

npx shadcn@latest add https://ui.beste.co/r/booking22.json
Cancellation Flow block

Booking cancellation screen with the original booking summary, cancellation reason picker (radio list with optional notes), live refund breakdown based on canc…

npx shadcn@latest add https://ui.beste.co/r/booking23.json
Job Listings List block

Job listings section with role cards showing department, location, and employment type. Clean list layout with hover effects and apply buttons.

npx shadcn@latest add https://ui.beste.co/r/careers1.json
Job Openings Grid block

Job openings grid with department badges, location tags, and apply buttons. Card-based layout for career pages.

npx shadcn@latest add https://ui.beste.co/r/careers2.json
Department-Grouped Positions block

Department-grouped job listings with minimal row layout. Jobs organized by team with location and type indicators.

npx shadcn@latest add https://ui.beste.co/r/careers3.json
Perks & Open Positions block

Combined perks and job listings section with benefits grid and open positions list. Ideal for complete career pages.

npx shadcn@latest add https://ui.beste.co/r/careers4.json
Featured Role with Positions block

Highlighted featured position card with a compact list of additional openings below. Great for showcasing priority roles.

npx shadcn@latest add https://ui.beste.co/r/careers5.json
Tab-Filtered Job Board block

Tabbed job board with department filters using shadcn Tabs component. Browse positions by team with location and type details.

npx shadcn@latest add https://ui.beste.co/r/careers6.json
Culture Stats with Positions block

Team culture stats bar followed by detailed job position cards. Combines social proof with open roles listing.

npx shadcn@latest add https://ui.beste.co/r/careers7.json
Job Detail Page block

Single job posting detail with responsibilities, requirements, nice-to-haves, and apply CTA. Full position description layout.

npx shadcn@latest add https://ui.beste.co/r/careers8.json
Employee Benefits Grid block

Benefits and perks showcase with icon cards in a responsive grid. Highlights company offerings like health, remote work, and growth opportunities.

npx shadcn@latest add https://ui.beste.co/r/careers9.json
Hiring Process Timeline block

Step-by-step hiring process timeline with numbered stages. Shows candidates the interview journey from application to onboarding.

npx shadcn@latest add https://ui.beste.co/r/careers10.json
Culture & Values block

Company values grid with icon cards and employee testimonial quote. Showcases team culture and work philosophy.

npx shadcn@latest add https://ui.beste.co/r/careers11.json
Career Growth Ladder block

Career progression path with level indicators, role descriptions, and key skills. Shows growth framework from junior to principal level.

npx shadcn@latest add https://ui.beste.co/r/careers12.json
Office Locations Grid block

Global office locations grid with city photos, team size, and role taglines. Showcases company presence worldwide.

npx shadcn@latest add https://ui.beste.co/r/careers13.json
Meet the Team Gallery block

Team member photo grid with names and roles. Square portrait layout for showcasing leadership and team composition.

npx shadcn@latest add https://ui.beste.co/r/careers14.json
Day in the Life Timeline block

A typical workday timeline with time stamps, activity icons, and descriptions. Shows candidates what daily life looks like at the company.

npx shadcn@latest add https://ui.beste.co/r/careers15.json
Employee Testimonials block

Employee testimonial cards with quotes, avatars, and roles. Social proof grid showcasing team member experiences and company culture.

npx shadcn@latest add https://ui.beste.co/r/careers16.json
Job Application Form block

Job application form with input fields, file upload area, and position summary sidebar. Complete apply page layout for career sites.

npx shadcn@latest add https://ui.beste.co/r/careers17.json
Department Overview Grid block

Department cards with team lead, headcount, open roles badge, and links. Helps candidates explore teams before applying.

npx shadcn@latest add https://ui.beste.co/r/careers18.json
Internship Program block

Internship program section with highlights, mentorship details, program summary card, and apply CTA. For recruiting early-career talent.

npx shadcn@latest add https://ui.beste.co/r/careers19.json
Diversity & Inclusion block

Diversity and inclusion section with representation stats and initiative cards. Showcases company commitment to equity and belonging.

npx shadcn@latest add https://ui.beste.co/r/careers20.json
Compensation & Total Rewards block

Transparent compensation philosophy with salary, equity, bonus, and perks cards. Shows total rewards approach with highlighted details.

npx shadcn@latest add https://ui.beste.co/r/careers21.json
Employee Spotlight Story block

Featured employee profile with portrait photo, personal quote, and career milestone timeline. Showcases real growth stories.

npx shadcn@latest add https://ui.beste.co/r/careers22.json
Employee Referral Program block

Referral program section with step-by-step process, bonus highlight card, and submit CTA. Encourages employee referrals.

npx shadcn@latest add https://ui.beste.co/r/careers23.json
Onboarding Journey Preview block

First 90 days onboarding timeline with phase cards and activity checklists. Shows new hires what to expect from orientation to ownership.

npx shadcn@latest add https://ui.beste.co/r/careers24.json
Remote Work Setup block

Work environment section with equipment provisions and work policies. Two-column layout showing what the company provides and how the team operates.

npx shadcn@latest add https://ui.beste.co/r/careers25.json
Hiring by the Numbers block

Recruitment statistics dashboard with key metrics, trends, and detailed hiring process stats. Transparent data-driven hiring showcase.

npx shadcn@latest add https://ui.beste.co/r/careers26.json
Speculative Application CTA block

Bottom-of-page careers CTA for general applications with email, action buttons, and company highlight badges. Captures candidates without matching roles.

npx shadcn@latest add https://ui.beste.co/r/careers27.json
Learning & Development block

Professional development program cards with conference budget, courses, mentorship, and tech talks. Highlights company investment in employee growth.

npx shadcn@latest add https://ui.beste.co/r/careers28.json
Team Events Gallery block

Photo gallery of company events, offsites, and team activities in masonry layout. Visual showcase of team culture and community.

npx shadcn@latest add https://ui.beste.co/r/careers29.json
Team Blog Highlights block

Engineering and team blog article preview cards with images, excerpts, and authors. Showcases technical depth and knowledge sharing culture.

npx shadcn@latest add https://ui.beste.co/r/careers30.json
Role Comparison Table block

Side-by-side role comparison grid showing team, skills, experience, and salary for different positions. Responsive table-to-card layout.

npx shadcn@latest add https://ui.beste.co/r/careers31.json
Alumni Network Showcase block

Former employee showcase with career progression from company role to current position. Demonstrates the company as a career launchpad.

npx shadcn@latest add https://ui.beste.co/r/careers32.json
HR Job Posting Detail block

Formal HR job posting with responsibilities, qualifications, benefits, and sidebar summary. Corporate-style position detail page with apply CTA.

npx shadcn@latest add https://ui.beste.co/r/careers33.json
Engineering Principles block

Numbered engineering principles list with large counters and descriptions. Showcases team philosophy on shipping, ownership, and simplicity.

npx shadcn@latest add https://ui.beste.co/r/careers34.json
Salary Bands Table block

Transparent salary bands with level, role, visual range bars, and equity details. Pay transparency table with responsive card fallback.

npx shadcn@latest add https://ui.beste.co/r/careers35.json
Hiring Manager Profiles block

Team lead profiles with photos, bios, and department badges. Introduces future managers to candidates with detailed backgrounds.

npx shadcn@latest add https://ui.beste.co/r/careers36.json
Job Alerts Signup block

Email subscription form for job alerts with trust indicators. Captures candidate interest for future openings with clean card layout.

npx shadcn@latest add https://ui.beste.co/r/careers37.json
Work Perks Bento Grid block

Bento-style grid of work perks with featured image card and icon cards. Mixed layout showcasing PTO, wellness, equipment, and team events.

npx shadcn@latest add https://ui.beste.co/r/careers38.json
Candidate Experience Guide block

Two-column guide with preparation tips and company commitments to candidates. Sets expectations for the hiring process with contact info.

npx shadcn@latest add https://ui.beste.co/r/careers39.json
Open Roles block

A studio jobs list with role meta, salary and apply arrows.

npx shadcn@latest add https://ui.beste.co/r/careers40.json
Benefits & Perks block

Studio benefits grid with an accent highlight and icon cards.

npx shadcn@latest add https://ui.beste.co/r/careers41.json
Studio Culture block

Culture statement and tenets beside a three-image studio-life collage.

npx shadcn@latest add https://ui.beste.co/r/careers42.json
Hiring Process block

The studio's interview process as a connected, numbered step flow.

npx shadcn@latest add https://ui.beste.co/r/careers43.json
Roles By Department block

Department-tabbed open roles list using shadcn Tabs.

npx shadcn@latest add https://ui.beste.co/r/careers44.json
Life At The Studio block

A captioned masonry photo wall of studio life with an intro and a roles CTA.

npx shadcn@latest add https://ui.beste.co/r/careers45.json
Role Spotlight block

A full featured-role posting with responsibilities, requirements and a sticky apply card.

npx shadcn@latest add https://ui.beste.co/r/careers46.json
Why Join Us block

Team stats band paired with benefit highlights.

npx shadcn@latest add https://ui.beste.co/r/careers47.json
Join The Studio block

Sticky employer-value intro beside a scrollable open-roles list.

npx shadcn@latest add https://ui.beste.co/r/careers48.json
Benefits Breakdown block

Categorized studio benefits with checklists per category.

npx shadcn@latest add https://ui.beste.co/r/careers49.json
Careers Gallery Header block

Centered careers intro with eyebrow, highlighted heading and supporting copy above a three-image gallery — one wide frame beside two portraits.

npx shadcn@latest add https://ui.beste.co/r/careers50.json
Split Milestone Changelog block

Split-layout changelog with milestone context, highlights, metrics, and action buttons.

npx shadcn@latest add https://ui.beste.co/r/changelog2.json
Changelog Release Feed block

Release feed cards with aligned change labels, summaries, and optional CTA buttons.

npx shadcn@latest add https://ui.beste.co/r/changelog3.json
Grouped Changelog Board block

Month-grouped changelog board with aligned labels, release details, and optional links.

npx shadcn@latest add https://ui.beste.co/r/changelog4.json
Milestone Changelog Timeline block

Timeline-style changelog with version badges, dates, and color-coded change types. Ideal for release notes and version history.

npx shadcn@latest add https://ui.beste.co/r/changelog5.json
Minimal Text Changelog block

Ultra-minimal text-only changelog with version headers and dash-prefixed change lists. No badges, no cards, just clean typography.

npx shadcn@latest add https://ui.beste.co/r/changelog6.json
Categorized Release Notes block

Release notes with changes grouped by type — Added, Changed, Fixed — using color-coded category labels.

npx shadcn@latest add https://ui.beste.co/r/changelog7.json
Featured Release Changelog block

Latest release highlighted in a featured card with full details, followed by a compact list of previous releases.

npx shadcn@latest add https://ui.beste.co/r/changelog8.json
Release Card Grid block

Responsive card grid of releases with version badges, descriptions, and optional links. Great for browsable release archives.

npx shadcn@latest add https://ui.beste.co/r/changelog9.json
Dense Inline Release Log block

Compact single-line release rows with color-coded type dots, version tags, and a legend footer. Optimized for dense, scannable API changelogs.

npx shadcn@latest add https://ui.beste.co/r/changelog10.json
Two-Column Date Changelog block

Minimal two-column layout with fixed-width date column on the left and version heading with change list on the right.

npx shadcn@latest add https://ui.beste.co/r/changelog11.json
Large Version Changelog block

Poster-style changelog with oversized version numbers as visual anchors, followed by date, heading, and description text.

npx shadcn@latest add https://ui.beste.co/r/changelog12.json
Accordion Release Changelog block

Collapsible accordion changelog where each release expands to reveal description and change list.

npx shadcn@latest add https://ui.beste.co/r/changelog13.json
Year-Grouped Accordion Changelog block

Releases grouped by year in collapsible accordion panels with release count indicators.

npx shadcn@latest add https://ui.beste.co/r/changelog14.json
Stacked Release Cards block

Stacked release cards with heading, description, change list, and version footer. Clean vertical feed for product updates.

npx shadcn@latest add https://ui.beste.co/r/changelog15.json
Visual Release Notes block

Alternating split layout with feature screenshots on one side and release content on the other. Ideal for marketing-focused product update pages.

npx shadcn@latest add https://ui.beste.co/r/changelog16.json
Team Update Feed block

Author-attributed changelog feed with avatars, roles, rich descriptions, change lists, and tags.

npx shadcn@latest add https://ui.beste.co/r/changelog17.json
Full-Width Showcase Changelog block

Full-width hero images with rich release content below. Marketing-focused changelog for major product announcements.

npx shadcn@latest add https://ui.beste.co/r/changelog18.json
Developer Changelog with Code block

Technical changelog with code blocks showing API changes, migration examples, and usage snippets alongside release notes.

npx shadcn@latest add https://ui.beste.co/r/changelog19.json
Roadmap Status Changelog block

Hybrid roadmap and changelog with shipped, in-progress, and planned items. Includes status dots, tags, and optional feature images.

npx shadcn@latest add https://ui.beste.co/r/changelog20.json
Kanban Board Changelog block

Three-column kanban board grouping changes by type — Features, Fixes, and Improvements — with stacked cards.

npx shadcn@latest add https://ui.beste.co/r/changelog21.json
Terminal Git Log Changelog block

Dark terminal window styled as a git log output with commit hashes, version tags, color-coded change prefixes, and a blinking cursor.

npx shadcn@latest add https://ui.beste.co/r/changelog22.json
Striped Table Changelog block

Structured table view with column headers, alternating row backgrounds, color-coded type badges, and optional links.

npx shadcn@latest add https://ui.beste.co/r/changelog23.json
Callout Highlight Changelog block

Release feed with prominent callout blocks highlighting the most impactful change per release.

npx shadcn@latest add https://ui.beste.co/r/changelog24.json
Newspaper Changelog block

Broadsheet newspaper layout with masthead, featured headline story, sidebar briefs, and numbered patch notes in flowing columns.

npx shadcn@latest add https://ui.beste.co/r/changelog25.json
Rich Prompt Input with Smart Suggestions block

Sophisticated AI prompt input area with auto-expanding textarea, attachment and image upload buttons, model selector, and a grid of contextual prompt suggestio…

npx shadcn@latest add https://ui.beste.co/r/chat4.json
AI Streaming Response with Live Typing block

Simulated streaming AI response with word-by-word typewriter animation, blinking cursor, skeleton loading state, and stop generating button. Demonstrates real-…

npx shadcn@latest add https://ui.beste.co/r/chat5.json