beste-ui

Version history cards with version badges, dates, and update type labels (Feature, Improvement, Fix). Perfect for product update pages and release notes.

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

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 account security settings.

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

Full-bleed monochrome hero with a giant bottom-left heading and a row of equal-width chapter tabs. The active chapter's thin track fills left to right over the interval, then auto-advances and crossfades the background image. Each tab links to its href.

Message-style bubbles simulating a chat interface. Perfect for a friendly, conversational tone in your FAQ section.

Real-time chat interface with message bubbles, online status, read receipts, emoji picker, and file attachments. Perfect for messaging apps and customer support chats.

Chat interface with image attachment previews, file upload indicators, and image gallery display within messages. Supports both user-uploaded images and AI-generated image responses.

2-column grid of checklist items with checkbox icons and strikethrough styling. Great for progress tracking, launch checklists, or task lists.

Interactive pricing with checkbox feature selection and real-time price updates. Perfect for customizable service packages.

Call-to-action with a vertical list of benefit checkmarks and action buttons. Perfect for highlighting value propositions before conversion.

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

Grid cards with green checkmarks emphasizing answers. Positive confirmation visual for affirmative FAQs.

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 change-email link. Perfect for passwordless and email-link flows.

Alternating layout showcasing dishes with large images, chef's notes as blockquotes, and pricing. Perfect for highlighting signature items and chef recommendations.

COPPA-compliant children's privacy notice with age restrictions, parental consent details, and data handling practices for minors. Required for services accessible to children under 13.

A clinician picker whose hairline list of practitioners, each showing their next opening, swaps an image tile floating a live availability card alongside their focus, background, and sites.

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 for paid sign-up and upgrade flows.

CI/CD pipeline monitor with build stages, status indicators, and branch/commit tracking. Shows multiple pipeline runs with success, failed, running, and pending states.

Interactive seat selection grid for cinemas, theaters, and events. Row/column layout with an aisle gap, tier-based pricing (standard/premium/VIP), occupied seats, a live selection summary, and a legend. Includes screen indicator at the top.

Full-screen animated carousel with multiple transition effects, next slide preview, and progress bar. Perfect for immersive storytelling and portfolio showcases.

Centered hero with inset background media and overlapping product image

Cinematic hero with announcement pill, avatar social proof, and overlapping dashboard media

Full-bleed background-image hero with a legibility scrim and bottom-aligned eyebrow, headline, copy and CTAs.

Ultra-wide cinematic video background with a dark gradient overlay. Content is positioned over the video for an immersive, movie-trailer-style hero section.

Centered grid of 6 icon buttons with circular backgrounds and labels. Perfect for tool navigation, quick action buttons, or feature access menu.

Visual progress tracker featuring a circular percentage indicator with completion stats and task list. Perfect for profile setup flows that encourage users to reach 100% completion.

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 unlocks only when the name is free. Perfect for onboarding handle selection.

Traditional menu with categorized sections, dietary badges (V, VG, GF), and a legend. Perfect for restaurant menus and food ordering pages.

Full-screen hero showcasing today's fitness classes with instructor info and available spots. Perfect for gym landing pages and class booking systems.

Minimal design with tags above title and author metadata below. Perfect for technical articles or educational content that prioritizes readability.

A two-column feature section: a vertical list of clickable thread buttons on the left swaps a sticky image panel on the right, with the active item carrying full emphasis and a left border.

Testimonial section driven by a ruled client index: clicking a name swaps the panel beside it, which carries the quote, a round portrait with the attribution, and one ruled outcome figure.

Three testimonials as ruled columns, each led by a grayscale client logo, followed by a large quote and an attribution block that names the person, the role and the project they hired the studio for.

Client logo cloud paired with measurable engagement outcomes.

A grayscale grid of bordered client logo cells followed by a strip of three selected-work thumbnails with titles, each linking out.

Animated terminal that types commands character-by-character with output responses. Perfect for showcasing CLI installation steps or quick-start guides.

Large stats that reveal with a horizontal clip-path curtain animation and spring-powered number entrance. Elegant and cinematic.

A closing call to action on a soft panel, pairing an eyebrow, light heading, paragraph, and two accent buttons with an image tile that floats a live agenda micro-asset.

Test coverage dashboard with expandable file tree. Coverage metrics for statements, branches, functions, and lines with color-coded progress bars.

Unified code diff viewer with dark terminal background. Green additions, red deletions, and gray context lines with file headers.

Browser-chrome card pairing a syntax-highlighted code editor with an AI chat panel — assistant suggestions arrive as inline snippets you can apply with one click. Every label is editable; no media props required.

Browser-chrome card layering a Cmd+K command palette over a backdrop-blurred code editor — search input, grouped commands with keyboard shortcuts, and a navigation hint footer. Every label is editable; no media props required.

Browser-chrome card pairing a syntax-highlighted code editor with a deploy environments panel — health dots, version pills, and a promote-to-production footer. Every label is editable; no media props required.

Browser-chrome card pairing a syntax-highlighted code editor with a live activity feed — pulsing status dot, color-coded events, and an open-log footer. Every label is editable; no media props required.

Browser-chrome card pairing a syntax-highlighted code editor with a live log stream — filter pills, color-coded levels, and a tail-mode footer. Every label is editable; no media props required.

Browser-chrome card pairing a syntax-highlighted code editor with a pull-request review panel — branch arrow, check rows with statuses, reviewer initials, and a merge footer. Every label is editable; no media props required.

Browser-chrome card pairing a syntax-highlighted code editor with a live test-results panel — pass/fail rows, expandable failures, and a coverage footer. Every label is editable; no media props required.