beste-ui

Browser-chrome card pairing a syntax-highlighted code editor with a side upload drawer — folder asset, progress bar, and cancel/continue actions. Every label is editable; no media props required.

Developer-focused chat interface with syntax-highlighted code blocks, language badges, copy-to-clipboard buttons, and file name tabs. Optimized for code generation and programming assistance.

Community standards display with principle cards covering respect, inclusion, and safety with issue reporting contact. Perfect for event policies and community guidelines.

Two-column layout with marketing content and a static code snippet display with copy functionality. Perfect for developer tool landing pages or CLI documentation sections.

A retention table that follows each joining cohort across its first year, tinting every cell by how high the figure is and dashing the months that have not happened yet.

Grid of partner cards featuring circular avatars, names, roles, skill badges, and clickable links. Perfect for showcasing team members, collaborators, or professional network.

Split studio hero with a two-tone headline and a four-image arranged collage.

Stacked cards with expandable sections. Use when you need to present multiple questions with full-length answers in a compact, organized format.

Pricing cards with collapsible feature sections that expand on click. Perfect for compact layouts with many features.

Featured collection card with supporting collection tiles, image overlays, and product counts. Perfect for homepage collection highlights.

A colophon written as a definition list, each hairline row naming one part of how the site is made, the choice itself, why it was made, and an optional link into the detail.

Opinion column layout with columnist profile, previous articles list, and editorial styling. Perfect for recurring contributor pieces and thought leadership.

A client wall with the clients withheld. Instead of logos, an oversized ghost-type marquee repeats a coming soon label behind edge fades, under a centered eyebrow, heading and note, with scroll direction and speed as props.

A centered coming-soon launch page with a brand wordmark, a square eyebrow, an accent-highlighted heading, a working email notify form with a success state, a launch note, and a row of social links.

Features displayed inside an interactive command palette UI with live search filtering, grouped results, keyboard shortcuts, and hover states. Inspired by macOS Spotlight and VS Code command palette.

Developer-focused navbar with Cmd+K command palette for keyboard-driven navigation and actions. Perfect for developer tools, documentation sites, and power-user applications.

Search-forward navbar — a wide rounded search field sits at the center with an animated submit seal, framed by the wordmark, quiet links and a pill CTA.

A centered feature with an eyebrow, light heading, and paragraph over a wide image tile that floats a live command search bar, followed by a row of quick-filter chips.

An e-commerce analytics dashboard: sidebar + search topbar, a four-up KPI row with period deltas, a net-profit area chart, a repeat-rate radial gauge, a busiest-weekday bar chart, and a best-selling products data table.

A community section on a soft surface with four bordered figure cards, each explaining what the number counts, over an image tile that floats a live cluster of member portraits.

Community group card with cover image, privacy status, member/post counts, topic tags, and join button. Perfect for community discovery and group suggestions.

A community section listing four linked places to join as full-width hairline rows, each with an icon tile, a description, a light membership figure, and an arrow that shifts on hover.

Group cards with cover images, member count, privacy indicators, category badges, and join buttons. Perfect for community discovery and group listings.

A community coming-soon section on a soft muted card with a monospace parenthetical eyebrow, a heading, a working email waitlist form, a secondary outline community pill button, and an avatar row with a member count.

Member profile with achievements, social links, and contributions. Perfect for community highlights and user stories.

A community gallery laid out as a masonry of customer photographs at mixed heights, each captioned with what is happening and the practice it came from.

An upcoming sessions list with a date block, format, and remaining seats on each linked hairline row, beside a column that sticks and floats a live card for whoever is hosting next.

A feature with an eyebrow over a hairline rule, a two-column heading, and three bordered cards that each float a compact live micro-asset above a title and description.

Single-line compact call-to-action bar with inline text and button. Perfect for subtle, non-intrusive conversion prompts between content sections.

Centered minimal footer with horizontal navigation, trust badges, and payment method icons. Perfect for smaller online stores wanting a clean checkout-focused layout.

Compact principles grid with a header and a four-up row of top-border items, each with a lucide icon, title and short description.

Compact profile card with cover image, avatar, verified badge, bio, location, website, join date, and post/follower stats. Perfect for profile page headers.

Minimal text-based layout with small featured image and condensed metadata. Ideal for short tips, quick takes, or news briefs.

Two-column compact blog list with small square thumbnails. Space-efficient design showing many posts at once with minimal metadata.

Left-aligned headline followed by a compact two-column grid of capability rows. Each row leads with a Lucide icon.

A header with a badge, heading, and description, followed by many compact items in a two-column grid — each a lucide icon in a rounded bg-muted tile beside a title and one-line description.

Full company overview with panoramic image, story paragraph, key facts list, leadership quote, and stats row. A rich, multi-section layout for company landing pages.

Company story with image, border-accented feature highlights, and stats row. Great for craft, heritage, and product-focused brands.

A company story told as hairline rows keyed by a light year figure, set against a media column that sticks while they scroll and stacks an image tile floating a live growth metric over a captioned photograph.

Onboarding screen for collecting company information including name, team size selector chips, and industry dropdown. Perfect for B2B SaaS apps that need organizational context during setup.

Asymmetric layout with company story and image on the left, and a vertical list of company details on the right. Great for press and investor pages.

A monochrome plan comparison matrix with ruled feature rows, check/minus cells, and per-plan CTAs.

Split-layout image comparison with a sidebar featuring benefit highlights and icons alongside a draggable before/after slider. Perfect for demonstrating product improvements with detailed feature callouts.

Transparent compensation philosophy with salary, equity, bonus, and perks cards. Shows total rewards approach with highlighted details.

Full-featured chatbot window with message thread, AI and user avatars, timestamp display, typing indicator, and rich input area with send button. Suitable as the primary chat experience.

Full-height profile setup step with an avatar uploader, a display name field, and a bio textarea, plus a skip option. Perfect for the post-sign-up onboarding step where users personalize their account.

Shows certification badges in a grid with verified checkmarks and in-progress states. Perfect for trust pages displaying security and compliance credentials.

Displays regulatory requirements with checkmarks, progress bar, and completion percentage. Perfect for showcasing compliance status across multiple standards.