beste-ui

A support section listing four linked contact channels as a hairline matrix, each with an icon tile, its response time, and its hours, beside a soft panel floating a live card for whoever is on shift.

A three-pane helpdesk inbox: an icon rail, a searchable ticket list with status filters and unread markers, and a live conversation pane. Clicking a ticket loads its thread, and the composer actually appends replies (⌘/Ctrl+Enter to send).

A pre-launch survey card with a square eyebrow, a heading, a single-choice question with selectable radio options, and a working rounded email-capture form with a success state.

Capability section with a row of pill filters that swap the list below: each entry becomes a ruled three-column row holding the title, an explanation and the typical duration pinned right.

Base plan pricing with switch toggles for enabling optional add-ons. Perfect for SaaS products with feature upgrades.

Two-row navbar with brand, availability status and seal CTA on top, and an underlined active-tab link row that scrolls horizontally on mobile.

Pricing cards with tabbed selection for monthly, quarterly, and annual billing. Perfect for flexible subscription models with multiple commitment options.

Horizontal tabs with card-based content below for each category. Clean for organizing FAQs by topic tabs.

Sidebar navigation with category tabs and accordion content. Perfect for organizing large FAQ sets across multiple topics.

Stats organized into switchable tabs by category using shadcn Tabs, letting users explore different metric groups.

Category-tabbed FAQ using shadcn Tabs with an accordion per category.

Tab-based interface showing 3 cards per tab, with button toggles at top. Excellent for segmented features by department, plan, or use case.

Tabbed feature showcase with copy, checklist and screenshot per workstream.

Interactive menu with category tabs, accompanying images, and item listings with prices. Perfect for restaurants with multiple menu sections.

Header with a tabbed showcase where each tab pairs a rounded image with a phase title and description.

Tab-switched grid of plan cards. Each card shows title, full-width CTA button, subtitle (price), description, and a checklist with check icons. Layout is responsive: ≤2 cards center as flex, multiples of 4 use a 4-column grid, otherwise a 3-column grid. Ideal for pricing, plan comparisons, and tiered packages.

Pricing with tabs to switch between plans showing categorized feature lists. Perfect for detailed feature comparison by plan.

Multi-section policy card using tabs to switch between data use, security, cookies, and user rights content. Compact way to present multiple policies.

A tabbed showcase with an eyebrow over a hairline rule and a two-column heading, where each tab reveals a light title, checked bullets, and an image tile floating a live product micro-asset.

Tabbed product screenshots in a browser frame with captions.

Tabbed showcase where each tab swaps a team's typical workflow surface. Left side carries the story, right side carries the live asset.

Tabbed job board with department filters using shadcn Tabs component. Browse positions by team with location and type details.

Complete reservation form with date picker, time slots, guest count, and contact fields alongside restaurant image. Perfect for restaurant booking pages and fine dining websites.

Navbar with tab-style navigation supporting underline or pill active states for app-like navigation. Perfect for dashboards and admin panels with section-based interfaces.

Filterable grid using tag pills at top. Perfect for FAQs that need multi-category filtering.

Three-column feature cards with accent top bar, tag pills, and icon badges over background media

Grid of testimonial cards with category tags like Performance, Support, or Pricing. Perfect for organizing customer feedback by feature or benefit type.

A newsletter CTA that asks before it asks for an address: subjects, then cadence, then the email, and the column swaps itself for a confirmation that reads back exactly what was chosen.

A project detail dashboard for staffing: sidebar + action topbar with a project actions menu, a project header with status pills, a five-up stat strip with project meta, functional pipeline sub-tabs, a search / recently-active toggle / filters-menu toolbar that live-filters the grid, and a responsive grid of nine talent cards with wishlist and invite toggles.

Engineering and team blog article preview cards with images, excerpts, and authors. Showcases technical depth and knowledge sharing culture.

Three-column grid of team member cards with avatars, roles, and short bios. Great for leadership and team pages.

Split-layout hero with full chat interface mockup featuring channels sidebar, message threads, online users, and floating notification. Perfect for collaboration and messaging apps.

Interactive pricing calculator with quantity selector, tiered discounts, and real-time savings display. Perfect for group ticket sales and team registrations.

Photo gallery of company events, offsites, and team activities in masonry layout. Visual showcase of team culture and community.

Full-height invitation acceptance screen showing the inviter's avatar and team name, a pre-filled disabled email, and name and password fields to set up the account. Perfect for team onboarding and invite-link flows.

Team section with an eyebrow, big heading, description and CTA above a responsive grid of people cards (portrait image, name, role).

Team member cards with circular photos, names, roles, and social media links (Twitter, LinkedIn, GitHub). Perfect for about pages showcasing company leadership.

Two-column about section with mission statement, company stats, and team member grid. Perfect for company pages and landing sections.

Wide team photo, member list with avatars, team stats grid, and a culture quote. A rich team showcase layout.

A team section with an eyebrow over a hairline rule, a two-column heading, and a grid of portrait cards each with a name and role.

Team members grouped by status (online, away, busy, offline) with colored indicators and status messages. Perfect for workspace sidebars showing who is available.

Author-attributed changelog feed with avatars, roles, rich descriptions, change lists, and tags.

Responsive grid of technology/tool badges with icons in bordered pills. Perfect for tech stack display, tools used, or integration showcase.

Responsive grid of tool cards with icons, descriptions, and linked tiles. Excellent for tech stack showcase, integrated tools, or component library.

Onboarding screen with a grid of starter templates to choose from, each with a preview thumbnail, title, and description. Perfect for project creation flows in design tools and project management apps.

Features presented as terminal commands with outputs inside a realistic terminal window. Dark terminal aesthetic with syntax-colored commands, flags, and a blinking cursor. Unique developer-focused design.

Dark terminal window styled as a git log output with commit hashes, version tags, color-coded change prefixes, and a blinking cursor.

Hacker-style terminal with boot sequence animation, typing effects, priority badges, and command-line aesthetic.