beste-ui

Two-column section combining product image with large customer quote, author avatar, name, and role. Perfect for social proof sections alongside product visuals.

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.

Infinite horizontal scrolling ticker of stats that pauses on hover. Eye-catching social proof strip for between sections.

Centered header above three vertically auto-scrolling columns of rated review cards with fade masks, pause-on-hover, and a closing CTA.

An editorial scroll-reveal gallery where images fade and rise into view with monospace captions and alternating rhythm.

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.

Cards animate in as you scroll with staggered timing. Scroll-based animation creates engaging reveal.

Search input with accordion items that filter in real-time. Essential for FAQs with many questions that users need to quickly locate.

FAQ article with search, category filters, and helpful vote buttons. Perfect for help centers and knowledge bases.

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.

A centered hero whose main action is a search field rather than a button, with the week's most looked-up terms as chips beneath it and the size of the archive stated at the bottom.

Navbar with prominent search input, navigation links, and action button for search-driven experiences. Perfect for marketplaces, directories, and content platforms prioritizing discovery.

Centered hero with prominent search input field and popular search suggestion pills below. Perfect for documentation sites, knowledge bases, and support centers.

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.

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.

Search input with results displayed in a two-column grid. Best for knowledge bases with searchable, card-based results.

Featured dish spotlight with seasonal badges, availability dates, pricing, and order button. Perfect for highlighting limited-time menu items and chef specials.

Seasonal menu section with availability dates, featured dish cards with hover effects, and CTA button. Perfect for promoting winter, spring, summer, or fall menus.

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.

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.

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.

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.

Onboarding screen for configuring account security including two-factor authentication, recovery email, and backup codes. Perfect for apps that prioritize security during onboarding.

Segmented control style tabs with split layout showing image, description, and bullet point features. Perfect for comparing solution approaches or product capabilities.

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.

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.

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.

A picture-free work index laid out as four aligned columns, year, client, what was done and the discipline, with the column heads appearing only once the row can hold them.

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.

An index of writing that was planned as runs rather than posts, pairing each series and how far along it is with its numbered parts in the column beside it.

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.

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.

Monitoring dashboard aesthetic with status indicators, metric rows, live status badges, and a dark panel background.

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.

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.

Three-up service cards with accent icon chips and learn-more links.

Centered header, three-column grid of capability cards, and an optional CTA with bottom text. Each card leads with a Lucide icon.

Infrastructure status board showing service health with operational, degraded, and down indicators. Displays uptime percentages and latency metrics.

Service section: eyebrow and large title with a right-aligned summary, a wide hero image, and a bold closing statement.

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.

Responsive grid of service cards with descriptions and arrow icons. Ideal for services listing, solutions overview, or offering showcase.

Service package cards with tier badges, feature lists, and delivery timelines. Perfect for consulting and professional services.

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.

A hairline service list that puts the starting price on the page, each row carrying the engagement name with its duration underneath, one line of scope, and the figure aligned right.

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.

Three-tier pricing cards for group dining with included items, minimum guests, and booking buttons. Perfect for prix fixe menus and event dining packages.

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.

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.