beste-ui

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.

A single narrow card that asks only for an email, then replaces itself in place with a sent state that echoes the address back and offers to start again with another one.

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.

Image gallery of previous conference speakers with year badges, topics, and hover zoom effects. Perfect for showcasing event history and alumni speakers.

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.

Single plan pricing showcasing accepted payment method icons. Perfect for checkout pages and e-commerce pricing.

Payment options grid showing credit cards, digital wallets, and bank transfers. Perfect for checkout pages and footer trust signals.

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.

Flexible pricing with selectable suggested amounts and custom input option. Perfect for indie products, open source, and creator tools.

Network request waterfall chart with cascading timing bars. Color-coded by duration — green for fast, amber for medium, red for slow.

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

Per-seat pricing calculator with slider control and automatic volume discount display. Perfect for team collaboration tools with user-based pricing.

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.

Hero section with circular avatar photo, name, role/title, bio description, and CTA button. Perfect for personal portfolio landing pages and professional introductions.

Interactive session picker with add/remove toggles, personal schedule summary, and calendar export. Perfect for multi-track conferences where attendees build agendas.

Trainer showcase with photo, certifications, rating, and client stats in a floating card. Perfect for personal training services and fitness coaching pages.

Full-width phase bands anchored by oversized ghost numerals with duration meta.

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.

A numbered phase index that cross-fades a sticky detail panel as each phase is hovered.

Each engagement phase mapped from its inputs to its outcomes.

Sticky clickable phase list driving a detail panel with checklist and image.

Tabbed engagement phases with deliverables, duration and imagery.

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.

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.

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.

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.

Cards with images and text below in a grid. Ideal when each answer has relevant supporting imagery.

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.

Visual essay with photographer credit, location info, and image galleries. Perfect for photography portfolios and visual storytelling.

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.

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.

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.

Call-to-action with scattered topic pills and tags showing what subscribers receive. Perfect for newsletter and content subscription sections.

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.

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.

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

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.

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.

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.

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.

Feature comparison grid with plans as columns and check/dash cells.

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.

Comparison table showing features across Starter, Pro, and Enterprise tiers with checkmarks. Perfect for pricing pages that need clear feature differentiation.

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.

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.

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.

Interactive questionnaire that recommends the best plan based on user answers. Perfect for helping users choose between complex options.

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.