beste-ui

An editorial hero with an eyebrow and an oversized full-width light heading, then a lower row pairing a paragraph and two accent buttons with an image tile that floats a live app window frame.

A ruled, type-forward project index where each row reveals a floating thumbnail on hover.

An editorial testimonial with an eyebrow, a large light quote and author on the left, an image tile floating a proof stat on the right, and a centered trust cluster below a hairline rule.

A revision log for writing rather than software, each entry dating the change, linking the piece it belongs to, stating what was altered and, where it exists, the reason on an accent rule.

Two-column studio hero with a two-tone headline, dual CTAs, tall image and a client wordmark strip.

A light editorial hero with an oversized display heading on the left, an offset supporting paragraph and accent button on the right, and a full-bleed image band below.

Two-pane masthead hero: a solid dark editorial panel with eyebrow, value-prop heading, supporting copy, a CTA and an availability note on one side, and a full-bleed image on the other.

Two-column editorial sign-in pairing an oversized typographic brand panel with a clean email and password form. Stacks the panel above the form on mobile. Perfect for brands that want a minimal, editorial first impression.

A large light manifesto statement with an accent-highlighted phrase, an eyebrow above, and a supporting footnote plus outline button beneath a hairline rule.

Two-tier studio navbar with an availability utility strip, square-mark wordmark, index-numbered links and a seal CTA.

Static full-bleed editorial hero with an eyebrow badge, a giant display heading, a supporting paragraph, dual seal CTAs, and an overlapping avatar trust row.

A two-column editorial FAQ pairing a sticky eyebrow, oversized heading, short note, and contact CTA on the left with a ruled, index-marked accordion of questions on the right.

Educational article with clear heading hierarchy, embedded images with captions, and readable body text. Good for informational content.

A social proof section displaying key stats like ratings, enrollment numbers, and completion rates alongside a featured student testimonial. Perfect for course landing pages and enrollment campaigns.

Split-layout hero with interactive email client mockup featuring sidebar, message list, and floating notification. Perfect for email and communication apps.

Full-height success screen with a large confirmation check, a heading and message, a primary continue button, and a support link. Perfect for the final step after email verification or account activation.

Full-height progressive sign-in that asks for the email first, then reveals the password step with the chosen email shown and editable. Perfect for modern email-first and adaptive authentication flows.

A subscription preference list where each list carries how often it sends, and the figure underneath recomputes the monthly email volume as boxes are ticked, down to a stated zero.

Minimal centered hero with inline email input field and submit button for newsletter or waitlist signups. Perfect for coming-soon pages and early access campaigns.

Full-height OTP verification screen with a centered icon, segmented six-digit code input, a verify button that unlocks once the code is complete, and a live resend countdown timer. Perfect for two-factor auth, magic links, and email confirmation flows.

Grid cards with emoji icons and short answers. Fun, visual approach with emoji-based categorization.

Emoji reaction picker with hover tooltips, selection highlighting, and reaction counts per emoji type. Perfect for adding reactions to posts and comments.

Benefits and perks showcase with icon cards in a responsive grid. Highlights company offerings like health, remote work, and growth opportunities.

Referral program section with step-by-step process, bonus highlight card, and submit CTA. Encourages employee referrals.

Featured employee profile with portrait photo, personal quote, and career milestone timeline. Showcases real growth stories.

Employee testimonial cards with quotes, avatars, and roles. Social proof grid showcasing team member experiences and company culture.

A simple empty state section using the Empty component with icon, title, description, and a call-to-action button. Includes standard badge, heading, and description header.

Full-height security setup step where the user picks a two-factor method from selectable cards (authenticator app, SMS, or security key), with a skip option. Perfect for guiding users through enabling 2FA.

EULA card with numbered clauses covering license grant, restrictions, IP, warranties, and liability. Each clause has a title and full legal text.

Three engagement columns on hairlines, each stating its figure and cadence and then listing what the price covers directly against what it deliberately does not.

Boxless pricing where each tier is a ruled column: the name, an oversized figure with its period, a fit line, an inclusion list under a second rule and a pill CTA, with subgrid keeping every internal rule aligned across the three columns.

Mini-gantt of engagement phases with duration bars over a week scale.

Numbered engineering principles list with large counters and descriptions. Showcases team philosophy on shipping, ownership, and simplicity.

Enterprise pricing section with custom pricing, feature list, and client logo trust indicators. Perfect for B2B products targeting large organizations.

Centered hero with security and compliance trust indicators (SOC 2, Uptime, CDN, Encryption) displayed as icon badges. Perfect for enterprise B2B products.

Comprehensive footer with brand section, four navigation columns, social links, and bottom legal links. Perfect for enterprise websites and established businesses with extensive site structures.

Full-height single sign-on screen with a work-email field, a continue-with-SSO button, and Google and Microsoft providers below a divider. Perfect for B2B and enterprise apps that authenticate via identity providers.

Enterprise pricing calculator with user count slider and volume discount tiers. Perfect for B2B products with usage-based enterprise pricing.

Personal essay with large author bio, social links, extensive credentials, and expertise areas displayed. Perfect for founder stories.

Tabbed environment variable viewer for comparing configuration across production, staging, and development environments.

Detailed episode page with cover art, duration, publish date, numbered show notes, and host/guest profiles. Perfect for individual episode pages that provide comprehensive content information.

Responsive grid of episode cards featuring thumbnails, duration badges, categories, and click-to-play video modals. Perfect for episode listings and related content sections.

Application error tracking feed with severity indicators, occurrence counts, and source locations. Summary pills show error distribution.

A time-based escalation path held in a bordered panel, each rung naming the elapsed time, who joins, what changes, and the share of reports that ever reach it, beside a live card for whoever is on call.

Elegant essay-style layout with drop cap on first letter and integrated syntax-highlighted code blocks. Best for literary or technical essays.

Event listings with cover images, date/time, location, attendee previews, and RSVP buttons (Going/Interested). Perfect for event discovery and community calendars.

A single event page opening on a full-bleed photo band with a live countdown anchored into it, then pairing the pitch and two actions with a hairline table of practical facts and a speaker list.

Event hero displaying attendee count, speaker numbers, and country reach statistics with trusted company logos. Perfect for enterprise summits and industry conferences.