beste-ui

Split product intro: a tall product image beside a heading, description, and three icon highlights with an editorial spec link.

Split product intro: a tall product image beside a heading, description, and three icon highlights with editorial body-size copy and a spec link.

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.

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.

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.

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.

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.

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.

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.

Asymmetric two-column layout with large heading on the left and description with buttons on the right. Perfect for editorial-style conversion sections.

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.

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.

Question list on left, selected answer on right with image. Effective for visual answers with image headers.

Tiered sponsorship packages with pricing cards and feature comparison matrix showing benefits per level. Perfect for sponsor prospectus and partnership pages.

Live sports scores with team form indicators, possession bar, match events (goals, cards), venue info, and upcoming match support.

Sports-focused layout with match score display, timeline of match events, stats comparison, and player of the match. Perfect for game recaps.

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.

Clicked card highlights while others dim with spotlight effect. Creates focused attention on selected answer.

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.

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.

A single spotlight plan beside a list of modular add-ons.

Single large spotlight testimonial with author block and prev/next navigation.

One hero-sized featured stat with a row of smaller supporting metrics below. Perfect for emphasizing a single key achievement.

Stats cards that spring up with staggered delay when scrolled into view. Uses framer-motion spring physics for a natural feel.

A weekly sprint rhythm shown as day columns of activities.

Cards stack on top of each other that expand when clicked. Physical stack metaphor with expansion.

Vertical split hero with video/image on top and content section below

Vertical stacked list of linked topics with titles, subtitles, and chevron indicators. Perfect for documentation navigation, topic browsing, or content index.

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.

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.

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

Interactive process rail with a filling progress spine; selecting a stage swaps its media and deliverables.

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.

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.

Startup-focused pricing tiers based on funding stage from bootstrapped to Series B+. Perfect for B2B tools offering startup programs.

Ruled feature rows that pair a large figure with a title and supporting copy, framing each capability by the number it earns.

Stat cards with accent highlight, icon chips and big numbers.

Bold full-width call to action on a dark panel with dual buttons.

Centered big-type studio hero with start and watch-the-film actions over a cinematic banner.

Horizontal icon stat ribbon on a muted surface.

Key statistics row followed by a centered testimonial quote with author avatar. Perfect for combining social proof metrics with executive endorsements.

Four-up oversized stats band with dividers under a section header.

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

Centered header with badge, heading, and description followed by horizontal stat cards. Each card shows a title, large value, and detailed description.

Call-to-action section with impressive statistics and trust indicators above action buttons. Perfect for data-driven conversion sections.

Hero-style stats row with feature card grid below over background media with glass-morphism styling

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

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.