beste-ui

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

A single-rail vertical process timeline with numbered nodes and per-step duration and owner meta.

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.

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.

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.

A large product image flanked by numbered feature callout cards, each naming and describing a part of the product.

Bundle pricing cards showing combined products with savings percentage. Perfect for product suites and software bundles.

Responsive product grid with ratings, sale badges, and add to cart buttons. Perfect for shop pages and product catalogs.

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.

Head-to-head comparison with feature matrix, pros/cons, and winner verdict. Perfect for product shootouts and buying guides.

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.

Product page with thumbnail image gallery, color swatches, size buttons, and feature icons. Perfect for premium product showcases.

Product page hero with color and size selectors, quantity picker, and wishlist button. Perfect for detailed product pages with multiple variants.

Clickable tabs switch a feature panel with a large product image, title, and description. Supports an optional auto-loop.

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.

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.

Tabbed product details with description, feature list, specifications table, customer reviews with ratings, and shipping information. Perfect for comprehensive product pages with detailed information.

Product launch post with features showcase, pricing tiers, and CTAs. Perfect for announcements and release notes.

Editorial grid of macro close-up shots, each captioned with the material or detail it shows.

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.

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.

Product review with rating categories, pros/cons list, and verdict section. Ideal for tech reviews and product comparisons.

Review cards with star ratings, product thumbnails, verified badges, and helpfulness counts. Perfect for social proof and testimonial sections.

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.

Bestseller product cards with images, star ratings, units sold, and revenue figures for e-commerce social proof.

Editorial spec sheet pairing a product image with a bordered key/value grid of dimensions, weight, battery, and materials.

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.

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.

Variant explorer that swaps the product image and spec line as you click between finishes.

A professional development hero with certification programs list, success stats, and call-to-action buttons. Perfect for corporate training and upskilling platforms.

User profile card with cover photo, avatar, bio, location, website, followers/following stats, and follow button. Perfect for user profile headers on social platforms.

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.

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.

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.

Responsive grid of project cards with team member avatar stacks. Ideal for active projects showcase, team portfolio, or ongoing work display.

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.

Responsive three-column image gallery with hover zoom effects, captions, and optional clickable cards. Perfect for showcasing project portfolios or work samples.

Editorial project index of ruled rows — padded numeral, project name, client and year, with a floating thumbnail revealed on hover.

Portfolio grid of project cards with hover-zoom imagery, numbered titles, category tags and a seal arrow link.

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.

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.

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.

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.

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.

A footer that gives its left half to a working subscribe row and its right half to three link columns, closed by a colophon line sitting opposite the legal links.

A six-column mosaic that carries a whole publication at once: the newest piece as a photographic tile, two counted figures, a reader quote, an inverted subscribe cell and a row of subject chips.

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.

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.