beste-ui

Showcase built as a ruled timetable: selecting an hour swaps a soft panel that floats the matching interface piece over a dotted field, then explains the moment and states one outcome on its own rule.

A centered launch-reminder section with a monospace parenthetical eyebrow, a kicker, an oversized launch-date heading, a supporting line, an add-to-calendar pill button, and a row of calendar-provider links.

A full admin dashboard shell: collapsible icon sidebar, topbar with a ⌘K command palette and account menu, a greeting header, a three-up KPI row with trend badges, and a recent-orders data table. The frame the rest of the dashboard blocks drop into.

Customizable product configurator with color swatches, size selection, material options, and dynamic pricing. Real-time stock tracking per combination. Perfect for configurable products and custom merchandise.

Displays FTC-compliant disclosure with affiliate network badges and transparency text. Perfect for content sites monetized through affiliate marketing.

Service package cards with project timelines, deliverables list, and fixed pricing. Perfect for agencies and freelancers selling project-based work.

Real estate agent profile card with photo, performance metrics, and client rating for agent landing pages.

Displays an age verification prompt with configurable minimum age and confirm/deny buttons. Perfect for age-restricted content or product pages.

Showcase card for an AI agent or assistant with avatar, name, description, capability badges, sample conversation preview, stats row, and action buttons. Perfect for agent directories and AI product pages.

Feature grid section showcasing AI capabilities. Each card includes an icon, title, description, and a mini chat bubble preview demonstrating the capability.

Chat-style bubble interface with AI assistant styling. Great for modern conversational FAQ experiences.

Transparency card disclosing the use of AI and automated decision-making. Lists AI capabilities, data usage, and opt-out options. Compliant with EU AI Act and emerging regulations.

Landing page hero with a prominent AI prompt input, trust stats bar, and a grid of popular prompt example cards. Designed for AI product homepages.

Two-column hero with marketing copy on the left and an interactive prompt playground on the right. Users can type or click example prompts to see mock AI responses.

Beautiful grid of prompt template cards with icons, categories, and descriptions. Features category tabs for filtering and hover animations. Ideal for chat home screens and prompt libraries.

Token airdrop claim interface with eligibility checklist. Shows allocation amount, criteria met count, expiration timer, and claim button with wallet connection.

Claude-style thinking and reasoning display with collapsible thought process sections, numbered step indicators, elapsed time badges, and a polished final answer below.

Perplexity-style AI response with inline numbered citation markers, a source panel showing referenced URLs with favicons and titles, and expandable source previews. Perfect for RAG-powered chat applications.

Centered hero section with a prominent AI search/prompt input bar and clickable suggestion pills. Perfect for AI product landing pages inspired by ChatGPT and Perplexity.

Simulated streaming AI response with word-by-word typewriter animation, blinking cursor, skeleton loading state, and stop generating button. Demonstrates real-time AI output patterns.

Tabbed showcase section where each tab displays a different AI use case with a prompt and response preview. Demonstrates AI versatility for landing pages.

Browser-chrome card rendering an AI prompt and a structured response — markdown blocks (headings, paragraphs, lists, quotes, code), citation list, copy/regenerate/apply footer. Every label is editable; no media props required.

A music release coming-soon section with a square cover image beside an artist name, a monospace parenthetical eyebrow, a title, a release date, a working pre-order email form, and a numbered tracklist.

Featured package card showing destination image, pricing, and included amenities like flights, hotels, and activities with icons. Perfect for promoting vacation packages with transparent inclusions.

A showcase of alternating split rows, each pairing an image tile that floats a live product micro-asset with an eyebrow, a light heading, a paragraph, and a checked bullet list.

Three alternating case-study rows pairing a large rounded image with a title, description, detail line, and an editorial link.

Large alternating left-right blog cards with full article summaries. Image and content switch sides for visual variety. Read more buttons included.

Alternating image-and-copy feature rows with checklists.

Editorial layout with oversized bold stat values alternating left and right alignment, creating a dynamic typographic rhythm.

Zig-zag layout where each feature alternates an image with a content block — a colored icon badge, bold title, and description. Configurable icon badge accent color (emerald, primary, foreground, rose, blue, amber, violet, sky, orange, teal). Ideal for product modules, services, or capabilities.

Feature rows that alternate the image side on every second entry, each pairing an eyebrow, display title and explanation with one oversized outcome figure on its own rule, headed by an outline pill CTA pinned to the top right.

Hero header with a CTA, then alternating image-left / image-right rows. Each row's media slot accepts an image, video, or live registry-component asset.

Three use cases as image and text rows, each numbered and carrying a story, two ruled outcome figures and its own outline pill link; pictures stay top-aligned and the side only alternates from lg, so a tablet keeps every image at the top left.

Former employee showcase with career progression from company role to current position. Demonstrates the company as a career launchpad.

A two-column question grid with every answer already visible on a hairline, so nothing is hidden behind a toggle, closed by a soft panel pointing at a direct reply.

Ask Me Anything format with host profile, upvoted questions, and answers. Perfect for Q&A sessions and community engagement.

Metric cards grid showing key stats (users, revenue, conversion, sessions) with trend indicators and time range selector. Perfect for admin dashboards and analytics overviews.

Centered hero with four floating stat cards positioned around the content displaying key metrics. Perfect for analytics platforms and data-driven products.

Horizontal progress bars that grow with spring animation on scroll. Each bar shows a label, value, and percentage fill.

Split layout with a floating image wrapped in a rotating conic gradient border. Includes a soft glow backdrop and hover zoom for a premium, modern feel.

Split layout with a video card featuring a rotating conic gradient border and gentle floating animation. A glowing backdrop adds depth behind the video.

Coming soon section with floating animated icons and a pulsing status indicator using Framer Motion animations. Perfect for creating visual excitement and a dynamic atmosphere before a product launch.

Side-by-side intro with animated number counters on scroll, expanding accent bars, and hover-lift value cards. For impact-driven companies.

Full-bleed monochrome hero with a giant heading and a row of clickable tab chips that fade between text panels (title, description, stat), auto-advancing on a timer with no background swap.

Minimal navbar with configurable animated underline effects (slide, grow, or fade) on navigation links. Perfect for portfolio sites and creative agencies wanting subtle hover animations.

A centered pre-launch section with a square eyebrow, a heading, a supporting line, a row of accent statistics that count up when scrolled into view, and a dark seal claim-seat button.

A feature that centers one image tile floating a live metrics panel and annotates it from both sides with four icon callouts that collapse under the tile on smaller screens.

A central core image framed by feature cards that each reference how a module connects back to the system's core.