Structural Layer
Patterns
Browse 683 UI patterns across 187 families. Filter by domain, tier, or capability.
about
3About Base
About section with company description, image placeholder, and three stat counters.
add about/base About Mission
Mission statement section with centered quote and three cards for Mission, Vision, and Values.
add about/mission About Timeline
Company timeline with alternating entries, year badges, and vertical connecting line.
add about/timeline accordion
3Accordion Base
Clean accordion using native details/summary elements with chevron indicator and smooth rotation.
add accordion/base Accordion Bordered
Accordion with horizontal dividers between items and top/bottom borders for a structured list appearance.
add accordion/bordered Accordion Separated
Accordion with individually bordered and spaced card-like items for a modern, airy layout.
add accordion/separated activity-feed
3Activity Feed Base
Vertical timeline with avatar, name, action text, and timestamp per activity item.
add activity-feed/base Activity Feed Compact
Condensed activity list without timeline decoration, avatar and time on each row.
add activity-feed/compact Activity Feed Grouped
Activity feed with items grouped by date sections like Today and Yesterday.
add activity-feed/grouped ai-chat
4AI Chat Base
Simple chat interface with alternating user and AI message bubbles.
add ai-chat/base AI Chat Multi-Turn
Extended conversation layout with timestamps, system dividers, and a regenerate action.
add ai-chat/multi-turn AI Chat Streaming
Chat interface with a typing indicator showing animated dots during AI response generation.
add ai-chat/streaming AI Chat With Sidebar
Two-column chat layout with conversation history sidebar and active chat area.
add ai-chat/with-sidebar ai-hero
4AI Hero Base
Centered AI product hero with badge, headline, chat-style input, and trust indicators.
add ai-hero/base AI Hero Gradient
Dark gradient AI hero with glowing accent input field and badge for dramatic product launches.
add ai-hero/gradient AI Hero Split
Two-column AI hero with text content on the left and a mock chat interface preview on the right.
add ai-hero/split AI Hero With Quick Actions
AI hero with chat input and quick-action suggestion pills for common tasks.
add ai-hero/with-quick-actions ai-prompt
3AI Prompt Base
Clean AI prompt input with textarea and send button.
add ai-prompt/base AI Prompt With Attachments
AI prompt input with file attachment bar, file chips, and send button.
add ai-prompt/with-attachments AI Prompt With Model Selector
AI prompt input with model dropdown, quick-action pills, and send button.
add ai-prompt/with-model-selector ai-response
3AI Response Base
Clean AI response card with avatar, heading, paragraph, and bullet list for conversational interfaces.
add ai-response/base AI Response Code Block
AI response card featuring inline code block with filename header and syntax-colored output.
add ai-response/code-block AI Response With Actions
AI response card with action bar featuring copy, regenerate, and feedback buttons.
add ai-response/with-actions analyst-scores
1analytics-widget
2Analytics Widget
Visitor analytics card with headline metric, trend badge, and a CSS-only 7-day bar chart
add analytics-widget/base Analytics Widget Top Pages
Ranked list of most-visited pages with view counts, percentage bars, and trend arrows
add analytics-widget/top-pages announcement-bar
2Announcement Bar Base
Dismissible top-of-page banner for announcements, promotions, or release notices.
add announcement-bar/base Announcement Ticker Scroll
Continuously scrolling horizontal text ticker with configurable speed and pause-on-hover — for announcements, press mentions, or sale callouts.
add announcement/ticker-scroll app-icon-strip
1appointment
1audience-filter
2Audience Filter Base
Compact horizontal pill strip that lets visitors self-select their audience segment — links scroll to or filter the relevant section below.
add audience-filter/base Audience Filter Industry
Industry segment pill strip with icons — 11 sectors (Automotive, Banking, Healthcare, Tech, etc.) centered below a section heading.
add audience-filter/industry auth
9Auth Login
Centered login card with email/password form, social login buttons, and forgot password link.
add auth/base Auth Compact Card
Compact sign-in card with a tighter layout, inline recovery link, and social actions.
add auth/compact-card Auth Email First
Minimal sign-in screen with OAuth provider buttons first, then a single email field — no password shown upfront. Magic link or next-step flow.
add auth/email-first Auth Social
Login form with social provider buttons (Google, GitHub, Apple) and email/password fallback.
add auth/social Auth Split
Split-screen signup with registration form on the left and branded panel on the right.
add auth/split Auth Split Brand
Split-screen auth with a stronger product-story brand panel and tighter sign-up form.
add auth/split-brand Auth Split Gradient
Two-panel login page with a gradient feature panel on the left and the login form on the right — includes social login buttons and avatar social proof.
add auth/split-gradient Forgot Password
Centered password reset card with email input, lock icon, and back-to-login link.
add auth/forgot-password Register Form
Full-page registration form with social auth buttons, name/email/password fields, and terms checkbox.
add auth/register avatar
3Avatar Base
Colored circle avatars with initials in four sizes — xs, sm, md, and lg.
add avatar/base Avatar Group
Overlapping avatar stack showing multiple users with a count badge for remaining members.
add avatar/group Avatar With Status
Avatar with an online/offline status indicator dot positioned at the bottom-right corner.
add avatar/with-status awards-list
2Awards List Base
Typographic awards/recognition list with organization, descriptions, and count badges.
add awards-list/base Awards List Strip
Horizontal strip of five award and recognition badges with icon, title, and organization — wraps gracefully on mobile.
add awards-list/strip badge
4Badge Base
Comprehensive badge showcase — filled, soft, outline, with dots, icons, close button, and size variants. Copy the style you need.
add badge/base Badge Danger
Red danger badge for error states, expired items, and critical status indicators.
add badge/danger Badge Success
Green success badge for active states, completed items, and positive status indicators.
add badge/success Badge Warning
Amber warning badge for pending states, review items, and cautionary status indicators.
add badge/warning banner
5Banner Base
Top-of-page announcement bar with message, link, and dismiss button for site-wide notifications.
add banner/base Banner Announcement
Slim top-of-page announcement bar with icon, message, link, and dismiss button.
add banner/announcement Banner Gradient
Eye-catching gradient announcement bar with indigo-to-purple background, CTA link, and dismiss button.
add banner/gradient Cookie Banner
Fixed bottom cookie consent banner with accept/decline buttons and privacy policy link.
add banner/cookie Dismissable Banner
Top-of-page announcement banner that collapses with a smooth animation and persists its dismissed state in localStorage.
add banner/dismissable bento
4Bento Base
Asymmetric bento grid layout showcasing features in varied-size cards with icons and descriptions.
add bento/base Bento Gradient
Bento grid with gradient-filled feature cards, icons, and a hero-sized highlight card.
add bento/gradient Bento Image Grid
Image-focused bento grid with large photo areas, text overlays, and hover effects for visual portfolios and galleries.
add bento/image-grid Featured Bento Grid
Bento grid layout with a prominent featured card spanning multiple rows and columns, surrounded by smaller supporting cards.
add bento/featured blog
16Blog Grid Base
Three-column blog post card grid with image placeholder, category badge, title, excerpt, and meta info.
add blog/base Blog Author Bio
Author profile section with circular avatar, bio, social links, and a list of recent articles.
add blog/author Blog Card Grid
Enhanced blog card grid with author avatars, category tags, hover lift effect, and "Read more" links.
add blog/card Blog Compact List
Dense blog list with small square thumbnails, strong title focus, and lightweight metadata for scanning many posts quickly.
add blog/compact-list Blog Content Hub
Mixed-content resource section with one large featured case study and four compact items spanning blog posts, reports, guides, and webinars — each with a color-coded category badge.
add blog/content-hub Blog Editorial Split
Dark masthead strip with a 2/3-width featured article (16/10 image, eyebrow label, author) and 3 secondary cards with aspect-video thumbnails stacked on the right — editorial magazine style.
add blog/editorial-split Blog Featured
Featured blog layout with one large hero post on the left and a stacked list of smaller posts on the right.
add blog/featured Blog Magazine Grid
Asymmetric magazine-style blog grid with one large lead story and a supporting grid of smaller article cards.
add blog/magazine-grid Blog Media List
Text-dominant blog list with the content on the left and a compact square image on the right, inspired by editorial feeds like Medium.
add blog/media-list Blog Minimal
Clean text-only blog listing with date, category, title, and excerpt in a single-column list.
add blog/minimal Blog Newsletter Inline
In-content email subscription section — 2-column card with copy + subscriber count + avatar stack on the left, email input + Subscribe button + privacy note on the right.
add blog/newsletter-inline Blog Rich Card
Standalone article card with aspect-video thumbnail, colored text eyebrow (not a pill), bold title, description, author avatar with name + date + read time, and an inline Read Article link.
add blog/rich-card Blog Scroll Carousel
Horizontal scroll-snap blog rail for featured articles with square thumbnails and compact metadata.
add blog/carousel Blog Sidebar
Two-column blog layout with article list on the left and sidebar with categories and recent posts on the right.
add blog/sidebar Blog Timeline
Chronological blog archive laid out as a vertical timeline with alternating article cards and month markers.
add blog/timeline Blog Topic Filter
Scrollable horizontal chip strip with left/right arrow buttons for topic filtering, plus a 3-column article grid below and a Load More button — all in one section.
add blog/topic-filter blog-details
3Blog Details Base
Full article layout with category badge, title, author meta, hero image, body text, blockquote, and tags.
add blog-details/base Blog Details With Sidebar
Two-column article layout with sidebar containing table of contents, related posts, and newsletter signup.
add blog-details/with-sidebar Knowledge Base Article
Pillar page layout with sticky ToC sidebar, callout stack, numbered techniques, comparison table, and branch links. Designed for comprehensive guide content.
add blog-details/knowledge-base blog-read-next
1blog-timeline
1brand-kit
1breadcrumb
2Breadcrumb Base
Four breadcrumb styles — chevron with container, slash, pill segments, and in-context with page header. All with semantic nav and aria-current.
add breadcrumb/base Breadcrumb With Icon
Breadcrumb navigation with a home icon for the first item and chevron separators.
add breadcrumb/with-icon browser-support
2Browser Support Base
Horizontal browser compatibility display showing Chrome, Firefox, Safari, and Edge with version numbers and status indicators.
add browser-support/base Browser Support Compact
Minimal inline browser support strip with icons and checkmarks for quick compatibility display.
add browser-support/compact calendar-day
2Calendar Day View
Interactive day-view calendar with hourly grid (6:00–20:00), time-block events, 15-minute slots, and live now-line.
add calendar-day/base Calendar Day View with Task Drop
Day-view calendar grid paired with a task sidebar. Tasks can be dragged from the list and dropped onto time slots to schedule them as time blocks.
add calendar-day/task-drop calendar-widget
2callout
6Callout Base
Neutral callout with left accent border, icon, title, and body text for general-purpose notices.
add callout/base Callout Danger
Red-themed danger callout for critical errors, destructive actions, and security warnings.
add callout/danger Callout Expandable
Collapsible callout using native details/summary element. No JavaScript needed — keyboard and screen reader accessible by default.
add callout/expandable Callout Info
Blue-themed informational callout for supplementary context and helpful details.
add callout/info Callout Tip
Green-themed success/tip callout for best practices, recommendations, and positive guidance.
add callout/tip Callout Warning
Amber-themed warning callout for caveats, deprecated features, and actions requiring caution.
add callout/warning canvas-stage
1cards
28Product Cards
Three-column product card grid with image placeholder, badge, price, and CTA link.
add cards/base Action Cards
Card grid with prominent action buttons, image placeholder, badge, and hover lift effect.
add cards/action Card Pricing
Standalone pricing card component with plan name, price, feature list, and CTA button.
add cards/pricing Card Testimonial
Single testimonial card with star rating, quote text, and author avatar with name and role.
add cards/testimonial Cards AI Scroll
Horizontal scrollende AI-Feature-Cards mit Snap-Scrolling und synchronisierter Dot-Navigation.
add cards/ai-scroll Cards Colored
Color-coded content cards with dark gradient backgrounds, a pixel-grid overlay (mix-blend-screen), and a category badge top-right — featured cards span two columns.
add cards/colored Cards Expand Hover
Horizontal flex row of image cards that expand on hover while siblings shrink — CSS-only flex transition with no JavaScript.
add cards/expand-hover Cards Glass Accent
Feature card grid where each card defines its own --card-accent CSS variable, driving icon color, glow, badge background, and link color.
add cards/glass-accent Cards Hover Spotlight
Feature-Card-Grid mit cursor-folgendem Radial-Glow auf jeder Card — sechs Feature-Punkte in 3×2 Raster.
add cards/hover-spotlight Cards Image Overlay
Three-column cards with full-bleed background images and gradient overlays. Text (category, title, description, arrow link) sits directly on the image. Three gradient treatments shown — dark, neutral, and brand-tinted.
add cards/overlay Cards Mixed Content Blog
Blog card grid where different cards host different media types — image, video embed, photo gallery, and carousel thumbnails in a unified card shell.
add cards/mixed-content-blog Cards Product Grid
Apple homepage-style 2-column product lineup grid — large rounded tiles alternating dark and light, each with product name, tagline, and inline "Weitere Infos | Kaufen" dual CTA links.
add cards/product-grid Cards Promo Split
Two-column promotional cards — one light with strikethrough pricing and a product shape collage, one dark with an AI image mosaic grid. For software product promotions and time-limited offers.
add cards/promo-split Cards Solution Color Coded
Three-column solution overview where each card has a distinct solid background — dark navy, amber, and neutral — with icon, title, description, and link.
add cards/solution-color-coded Cards Stacked Showcase
Three overlapping, slightly-rotated cards with concentric ring decorations — a visual product or model showcase with CSS-only hover rotation effect.
add cards/stacked-showcase Cards Status Board
Mission-Control-Style Spalten-Board mit In-Progress, Ready for Review und Done. Horizontaler Scroll auf Mobile, 3-Spalten-Grid auf Desktop.
add cards/status-board Event Cards
Three event cards with date badge, event title, location, time, and RSVP button.
add cards/event File Cards
2x2 file card grid with file type icons, filename, size, date, and action menu.
add cards/file Horizontal Cards
Two-column grid of horizontal cards with side-by-side image and content layout.
add cards/horizontal Icon Overlay Reveal Cards
Tall image cards with a faint centered icon at rest that reveals full text and brighter icon on hover — minimal at rest, informative on interaction.
add cards/icon-overlay-reveal Image Cards
Three-column image-dominant card grid with category badge overlay, title, excerpt, and author row with avatar and date.
add cards/image Metric Cards
Three metric comparison cards with label, large value, change indicator, and mini bar chart.
add cards/metric Notification Cards
Stacked notification cards with colored status icons, message, timestamp, and dismiss button.
add cards/notification Profile Cards
Four-column profile card grid with avatar, name, role, bio, and social links.
add cards/profile Stat Cards
Four-column gradient stat cards with icon, trend indicator, large number, and label.
add cards/stat Sticky Scroll Stack
Left column stays sticky while right column scrolls through stacked numbered feature cards — for step-by-step explanations or how-it-works sections.
add cards/sticky-scroll-stack Toggle Layout Cards
Article grid with a CSS-only Grid/List view toggle — switches between 3-column grid and horizontal row layout without JavaScript.
add cards/toggle-layout Weather Card
Weather widget card with city name, temperature, weather icon, condition text, and 5-day mini forecast.
add cards/weather careers
1cart-progress
1case-study
3Case Study Meta Header
Portfolio detail header with title, description, metadata row (category, year, role, URL), and hero image.
add case-study/meta-header Case Study Spotlight
Customer spotlight grid with full-bleed gradient cover images, industry category tags, company names, and result metrics.
add case-study/spotlight Case Study Filtered Grid
Full customer stories grid with industry filter chip bar, cover image cards with category label and headline, and a load-more button.
add case-study/filtered-grid category-grid
1changelog
3Changelog Base
Versioned release notes with version badges, change type labels, and download buttons.
add changelog/base Changelog Feed
Vertikale Release-Liste mit Versionspill, Datum, Typ-Badge und Feature-Aufzählung. Timeline-Linie verbindet Einträge.
add changelog/feed Changelog Date Feed
Date-grouped changelog feed with a sticky year/month sidebar index, anchor-linked month headers, and inline monospace category badges per entry.
add changelog/date-feed chart
8Bar Chart with Currency Axis
Bar chart with dollar-formatted Y-axis ticks — shows revenue data with $ prefix on every tick.
add chart/bar-currency Dual Y-Axis Chart
Bar and line chart with two independent Y axes — left for absolute values, right for percentages.
add chart/dual-axis Funnel Chart
Horizontal bar chart visualizing a conversion funnel with percentage labels on each stage.
add chart/funnel Grouped Bar Chart
Side-by-side bars for two datasets — compares users vs page views across device types.
add chart/grouped-bar Line Chart with Currency Tooltips
Line chart with dollar-formatted hover tooltips — revenue trend with $ prefix in the tooltip label.
add chart/line-tooltip Mixed Bar + Line Chart
Combines bars and a line in one chart — ideal for showing volume alongside a ratio or percentage trend.
add chart/mixed Multicolor Bar Chart
Bar chart with individually colored bars and colored axis ticks — each month gets its own hue.
add chart/bar-multicolor Pie Chart with Data Labels
Pie chart with percentage labels rendered directly on each segment using chartjs-plugin-datalabels.
add chart/pie-labels chart-card
4Chart Card Base
Simple chart container card with header, CSS bar chart, and footer link.
add chart-card/base Bar Chart Card
Vertical bar chart card with revenue value, trend badge, and daily breakdown.
add chart-card/bar Donut Chart Card
Donut ring chart card with conic-gradient, center total, and color legend.
add chart-card/donut Line Chart Card
Line chart card with inline SVG polyline, gradient fill, and trend indicator.
add chart-card/line chat-widget
2chatbox
3Chatbox Base
Messenger-style chat widget with header, alternating message bubbles, and input field.
add chatbox/base Chatbox Floating
Rounded chat widget with colored header, messages, quick reply buttons, and input field.
add chatbox/floating Chatbox Minimal
Floating chat bubble button with notification badge and compact chat window.
add chatbox/minimal checkout
6Checkout Base
Two-column checkout layout with billing information form on the left and order summary on the right.
add checkout/base Checkout Express
Express checkout with Apple Pay, Google Pay, and PayPal buttons plus a compact card form fallback.
add checkout/express Checkout Multi-Step
Multi-step checkout with step indicator showing shipping, payment, and review stages with navigation buttons.
add checkout/multi-step Checkout Review
Order review step with item list, shipping address, payment method, and confirm order button.
add checkout/review Checkout With Payment
Checkout form extended with a payment method section including card number, expiry, and CVV fields.
add checkout/with-payment Checkout With Summary
Two-column checkout with billing form on the left and detailed order summary with item thumbnails on the right.
add checkout/with-summary clock-widget
2code-generator
3Code Generator Base
AI code generation interface with prompt input, syntax-highlighted output, and action bar.
add code-generator/base Code Generator Split Pane
Side-by-side code generation layout with prompt settings on the left and code output on the right.
add code-generator/split-pane Code Generator with Preview
Code generation interface with live preview panel showing rendered component output.
add code-generator/with-preview code-preview
7Code Preview Base
Dark terminal-style code display block with macOS-style traffic light dots and monospace formatting.
add code-preview/base API Endpoint List
Collapsible API endpoint rows with colored HTTP method badges (POST/GET/DELETE), monospace URL path, and an inline parameter table on expansion.
add code-preview/api-endpoint Code Language Switcher
Tabbed code block with cURL, Python, and TypeScript panels — CSS-only tab switching via hidden radio inputs, no JavaScript required.
add code-preview/language-switcher Code Preview Install Block
Dark terminal card with CSS-only OS tabs (macOS / Linux / Windows / npm) showing platform-specific install commands with copy buttons and a version footer.
add code-preview/install-block Code Preview Split
Two-column layout pairing a step description with bullet list alongside a dark terminal code block.
add code-preview/split Code Preview With Header
Code block with a labeled header bar showing filename, language icon, and a copy indicator area.
add code-preview/with-header Code Request Response
Stacked request and response code blocks with HTTP method badge, status code badge, copy button, and an error response example with red accent.
add code-preview/request-response collaboration
1coming-soon
2Coming Soon Base
Pre-launch placeholder page with email signup, countdown vibe, and social links.
add coming-soon/base Coming Soon Countdown Overlay
Full-screen dark overlay coming soon page with logo, heading, countdown timer, email subscribe form, and social links.
add coming-soon/countdown-overlay comments
2Comments Base
Blog comment section with a comment form, comment count heading, and existing comments with avatar, author, date, and reply link.
add comments/base Comments Threaded
Threaded comment section with nested replies indented under parent comments using a left border.
add comments/threaded comparison
8Comparison Checklist
Two-column comparison with a vertical divider on desktop, stacked sections on mobile, and differently weighted checklists for primary vs secondary options.
add comparison/checklist Feature Comparison
Three-column feature comparison table with plan tiers, checkmarks, and highlighted recommended plan.
add comparison/base Code Comparison
Side-by-side code comparison with before/after panels using monospace font and color-coded headers.
add comparison/code Comparison Cards
Two separate comparison cards with unequal visual weight, useful for before-after framing or directional decisions without pricing semantics.
add comparison/cards Comparison Competitor
Competitive positioning section — ROI metric cards, side-by-side Gartner score table, and a demo CTA. For "the X alternative" landing pages.
add comparison/competitor Comparison Table
Feature comparison table with checkmarks and crosses across multiple plans or products.
add comparison/table Feature List Comparison
Vertical feature comparison list with sticky header, alternating row backgrounds, and three plan tiers showing check/cross/text values.
add comparison/feature-list Side-by-Side Comparison
Two-column side-by-side plan comparison with feature checklists, recommended badge, and CTA buttons.
add comparison/side-by-side contact
7Contact Form
Two-column contact section with info sidebar and multi-field form.
add contact/base Contact Map
Two-column contact section with form on the left and map placeholder with address details on the right.
add contact/map Contact Map Split
Full-bleed two-column contact section with a map panel on the left and contact details panel on the right.
add contact/map-split Contact Minimal
Simple centered contact form with name, email, and message fields in a narrow single column.
add contact/minimal Contact Split
Split-layout contact section with location info on the left and contact form on the right.
add contact/split Contact with FAQ
Split contact section combining a contact form with an FAQ accordion for self-service support.
add contact/faq Contact With Options
Two-column contact layout — left column shows support channel cards (help, press, privacy, security), right column has the main sales/contact form with character counter.
add contact/with-options cookie-consent
5Cookie Consent Base
Fixed bottom bar cookie banner with accept and settings buttons on a dark background.
add cookie-consent/base Cookie Consent Banner Detailed
Full-width top banner with accept/reject buttons and inline toggle categories for cookie preferences.
add cookie-consent/banner-detailed Cookie Consent Floating
Compact floating bottom-left cookie card with icon, text, accept, and manage buttons.
add cookie-consent/floating Cookie Consent Minimal
Tiny bottom-right corner popup with a short message and single OK button.
add cookie-consent/minimal Cookie Consent Modal
Centered modal overlay with toggleable cookie categories for granular consent management.
add cookie-consent/modal countdown
3Countdown Base
Full-width urgency countdown section with four digit boxes (days, hours, minutes, seconds), centered heading, and CTA button on an indigo background.
add countdown/base Countdown Inline CTA
Compact horizontal strip combining a live countdown timer with a sale price and CTA button side-by-side — a flash sale or launch-offer banner.
add countdown/inline-cta Countdown With Progress Bar
Countdown timer with a progress bar showing limited spots claimed — combines urgency timer with scarcity indicator.
add countdown/with-progress-bar course-card
1course-detail
1crypto-market
1cta
14CTA Base
Centered call-to-action banner with headline, description, and dual action buttons on a dark background.
add cta/base Ask AI CTA
Section with links to Claude, ChatGPT, Perplexity, and Gemini pre-loaded with a product question — lets visitors research your product in their preferred AI assistant.
add cta/ask-ai Centered CTA
Full-width centered call-to-action section with emphasis headline, supporting text, and dual buttons over a subtle background pattern.
add cta/centered CTA App Mockup
App download CTA with Apple and Google Play badges on the left and overlapping phone mockup frames on the right.
add cta/app-mockup CTA Arrow Badge
Dark CTA section with a pill button that has a trailing circular arrow badge — a polished SaaS launch pattern.
add cta/arrow-badge CTA Download
Download-CTA mit Desktop- und Mobile-App-Karten, je mit Plattform-Buttons.
add cta/download CTA Floating Bubble
Fixed floating action button in the bottom-right corner that expands to a mini contact form — pure CSS toggle with no JavaScript required.
add cta/floating-bubble CTA Gradient
Vibrant gradient CTA banner with decorative blur effects, headline, description, and dual buttons.
add cta/gradient CTA Membership
Premium membership upgrade section — 2-column card with feature checklist and CTA on the left, Discord community block and social proof avatars on the right.
add cta/membership CTA Open Source
Open-Source-CTA mit GitHub-Stats (Stars, Issues, Contributors) und Community-Aufruf.
add cta/open-source CTA Recruitment Banner
Full-bleed dark recruitment banner with background gradient, white headline, dual CTAs, and a perks strip — designed for hiring sections.
add cta/recruitment CTA Ticker Sale
Dark full-width section with giant repeating sale text animating behind centered heading and CTA buttons — for flash sales, launch offers, or seasonal promos.
add cta/ticker-sale Inline CTA
Compact inline call-to-action bar with text and action buttons, ideal between content sections.
add cta/inline Split CTA
Full-width CTA section with text on one side and image placeholder on the other, inside a rounded container.
add cta/split currency-widget
2Currency Exchange Widget
Compact currency converter showing exchange rate between two currencies with swap control
add currency-widget/base Crypto Ticker Widget
Live cryptocurrency price list with 24h change indicators and mini sparkline charts
add currency-widget/crypto-ticker daily-planning
1daily-shutdown
1dashboard
7Dashboard
Admin dashboard with stats cards, recent orders table, and top bar navigation.
add dashboard/base Dashboard Activity
Dashboard layout with activity feed on the left and quick stats sidebar on the right.
add dashboard/activity Dashboard Chart
Chart card with CSS-only bar chart, legend, and stats summary row for dashboard analytics.
add dashboard/chart Dashboard Kanban
Kanban board layout with draggable-style columns for task management workflows.
add dashboard/kanban Dashboard Sidebar
Dashboard shell layout with a fixed navigation sidebar, top header, and main content area.
add dashboard/sidebar Dashboard Stats
Four-column stat card row with metric, trend indicator, icon, and comparison text.
add dashboard/stats Dashboard Table
Data table with column headers, row data, status badges, and action buttons.
add dashboard/table dashboard-layout
4Dashboard Layout Base
Sidebar navigation with logo, nav items, user avatar, plus main content area with breadcrumb.
add dashboard-layout/base Dashboard Layout Compact
Narrow icon-only sidebar with tooltips and main content area for maximum workspace.
add dashboard-layout/compact Dashboard Layout Sticky Sidebar Scroll
Two-column layout with sticky left navigation and independently scrolling right content — for documentation, settings, or long-form content pages.
add dashboard-layout/sticky-sidebar-scroll Dashboard Layout With Header
Top header bar with logo, horizontal navigation, search, notifications, and user avatar.
add dashboard-layout/with-header data-stats
5Data Stats Base
Single KPI stat card with icon, value, and percentage change indicator.
add data-stats/base Stats Comparison
Side-by-side period comparison cards with values, percentage badges, and comparison bars.
add data-stats/comparison Stats with Progress
Three-column stat cards with usage values and progress bars.
add data-stats/with-progress Stats with Sparkline
Two-column stat card grid with inline SVG sparkline trend charts.
add data-stats/with-sparkline Stats with Trend
Four-column KPI grid with icons, values, and colored trend arrows.
add data-stats/with-trend data-table
8Data Table
Clean data table with sortable column headers, status badges, and alternating row backgrounds.
add data-table/base Data Table API Params
API parameter documentation table with monospace parameter names, colored type badges, required/optional indicators, default values, and nested object expansion.
add data-table/api-params Data Table Compact
Denser admin table with tighter spacing and short-form status treatment for utility-heavy screens.
add data-table/compact Data Table Selectable
Member management table with row selection, bulk actions, avatars, and status badges.
add data-table/selectable Data Table Striped
Striped table with row selection checkboxes, avatar initials, role badges, and edit/delete actions.
add data-table/striped Data Table Toolbar Heavy
Utility-rich table with a full action toolbar, segmented views, and multi-dimensional filtering.
add data-table/toolbar-heavy Data Table With Filter
Data table with search input and status dropdown filter above the table.
add data-table/with-filter Data Table With Pagination
Data table with pagination bar showing result count and page navigation buttons.
add data-table/with-pagination deal-of-the-day
1deck-structure
1description-list
3Description List Base
Two-column grid of term/detail pairs displayed in bordered cards with semantic dl/dt/dd markup.
add description-list/base Description List Grid
Three-column grid layout for description list items, ideal for displaying many term/detail pairs at once.
add description-list/grid Description List Inline
Horizontal dt/dd pairs displayed in a single row with dividers, perfect for compact metadata bars.
add description-list/inline divider
6Divider
Five divider styles — simple, with label, with icon, dashed, and accent. Each shown in context between content blocks.
add divider/base Statement Divider
Centered statement text between top and bottom borders, designed as a rhetorical transition between larger sections.
add divider/statement Divider Angled
Diagonal section transition using CSS border tricks for a slanted cut between sections.
add divider/angled Divider Wave
SVG wave shape that creates a smooth curved transition between two sections.
add divider/wave Divider with Icon
Horizontal divider with a centered icon or emoji overlaid on the line.
add divider/with-icon Divider with Label
Horizontal divider with a centered text label overlaid on the line.
add divider/with-label drawer
4Drawer Base
Right-aligned side panel with overlay backdrop, form fields, and cancel/save footer.
add drawer/base Drawer Filter
Filter drawer with checkboxes, radio buttons, price range inputs, and apply/reset footer.
add drawer/filter Drawer Slide Over Detail
Detail-oriented slide-over drawer for account, customer, or record inspection without leaving the current page.
add drawer/slide-over-detail Drawer With Tabs
Side panel drawer with tab navigation for Details, History, and Notes sections.
add drawer/with-tabs empty-state
2Empty State
Centered empty state placeholder with icon, title, and description inside a dashed border.
add empty-state/base Empty State with Action
Empty state placeholder with icon, title, description, and a call-to-action button.
add empty-state/with-action error
4Error 404 Base
Minimal centered 404 error page with large error code, friendly message, and navigation buttons.
add error/base Error 404 Animated
Animated 404 error page with floating error code and staggered slide-up entrance.
add error/animated Error Minimal
Clean minimal 404 error page with large error code, message, and back-to-home link.
add error/minimal Error Split
Split-layout 404 error page with illustration area on the left and error message with actions on the right.
add error/split error-500
2Error 500 Base
Centered server error page with large status code, heading, description, and action buttons.
add error-500/base Error 500 With Illustration
Server error page with a broken gear SVG illustration and gradient-styled status code.
add error-500/with-illustration event-schedule
4Event Schedule Base
Conference agenda with day header and time slots showing session title, speaker, and location tag in alternating rows.
add event-schedule/base Event Schedule Sticky Dark
Dark multi-day conference schedule with sticky day-selector navigation, color-coded tracks, and speaker/room metadata per slot.
add event-schedule/sticky-dark Event Schedule Timeline
Vertical timeline with a connecting line, time labels on the left, and session cards on the right.
add event-schedule/timeline Event Schedule With Speakers
Tabbed conference schedule with three day tabs, session cards showing time, talk title, speaker avatar (initials), role, and location badge.
add event-schedule/with-speakers faq
5FAQ Accordion
Clean accordion FAQ using native HTML details/summary — zero JavaScript required.
add faq/base FAQ Columns
Two-column FAQ grid with questions and answers displayed without accordion.
add faq/columns FAQ Minimal
Simple FAQ list with questions as bold headings and answers as plain text, no accordion.
add faq/minimal FAQ Two Column
Two-column FAQ layout with heading and contact CTA on the left, accordion questions on the right — CSS-only toggle with no JavaScript.
add faq/two-column FAQ with Search
FAQ section with search input, category filter tabs, accordion questions in a card container, and support CTA.
add faq/search features
27Feature Media Left
Feature-Sektion mit Medienblock links und erklärender Feature-Liste rechts.
add features/media-left Features Base
Three-column feature grid with icon, title, and description cards for showcasing product capabilities.
add features/base Features Editorial Grid
Four-column values or USP grid with headline and paragraph per block — no icons, no numbers. Pure typographic layout for agency, consulting, and editorial brands.
add features/editorial-grid Feature Media Right
Feature-Sektion mit erklärendem Text links und Medienblock rechts — gespiegelte Variante.
add features/media-right Feature Overlap Card
Feature-Karte mit negativem Margin überlappt einen farbigen Hintergrundstreifen — Layering-Effekt für visuelle Tiefe zwischen zwei Sektionen.
add features/overlap-card Features Alternating
Zigzag feature showcase alternating text and visual blocks for detailed product storytelling with checkmark lists.
add features/alternating Features Bento
Asymmetric bento grid layout with mixed-size feature cards for visual hierarchy.
add features/bento Features Bento First Span
CSS grid where the first feature card spans two rows and is visually dominant — for highlighting a primary capability among secondary ones.
add features/bento-first-span Features Centered
Centered feature grid with icon circles, titles, and descriptions in a 2x3 layout.
add features/centered Features Color Banded
Four stacked feature sections each with a distinct background band — alternating text/visual layout with a dark closing band for visual climax.
add features/color-banded Features Comparison
Before/after comparison with pain points vs benefits in two tinted columns.
add features/comparison Features Hover Reveal
Service list rows with clip-path image reveal and description fade-in on hover.
add features/hover-reveal Features Icon Grid
Icon-focused feature grid with large colored icon circles, titles, and descriptions for visually rich capability showcases.
add features/icon-grid Features Image Grid Asymmetric
Features section with text and bullet list on the left and an asymmetric 2x2 image grid on the right — for teams, products, or visual storytelling.
add features/image-grid-asymmetric Features Image Reveal
Service cards where a colored gradient fades in as background on hover, inverting all text to white.
add features/image-reveal Features List
Split layout with sticky heading on the left and vertical icon feature list on the right.
add features/list Features Numbered
Three feature cards with large oversized number anchors (01, 02, 03) as a visual hierarchy device — clean, bold, and scannable.
add features/numbered Features Quick-Start
Six-card grid with colored icon boxes and individual hover color per card — a dot-grid texture appears on hover for tactile feedback.
add features/quick-start Features Skill Bars
Two-column competency section with icon features and animated progress bars.
add features/skill-bars Features Sticky Left
Two-column layout with a sticky left heading and stacked, divider-separated value cards on the right that scroll past.
add features/sticky-left Features Tab Switcher
Tab-based feature showcase with vertical nav on the left and a live preview panel on the right — popular SaaS pattern for platform overviews.
add features/tab-switcher Features Tool Grid
Product/tool directory with clickable cards, per-tool icon colors, tag pills, and a dark premium upsell section. Ideal for SaaS tool suites and developer resources.
add features/tool-grid Features Vertical Alternating
Stacked feature list with icon alternating left and right per row and thin dividers between — a rhythm-driven alternative to icon grids.
add features/vertical-alternating Features With Screenshots
Alternating feature rows with text and screenshot placeholders in a zigzag layout.
add features/with-screenshots Features with Stats
Split section with stats grid on the left and icon feature list on the right, on a dark background.
add features/stats Split Border Feature Grid
Feature grid defined purely by cell borders with no rounded corners or card backgrounds — editorial, publication-style feature layout.
add features/split-border-grid Stat Highlight Grid
Six bordered stat boxes in a 3-column grid with large accent-colored metric numbers, labels, and brief descriptions — for highlighting key product metrics.
add features/stat-highlight file-manager
1file-tree
2file-upload
2File Upload Base
Drag-and-drop file upload zone with file list showing progress bars and remove actions.
add file-upload/base File Upload Minimal
Compact file input button with file list showing name, size, and status badges.
add file-upload/minimal financial-ticker
1flip-card
1focus-timer
1footer
18Footer Base
Four-column footer with categorized links, social icons, and copyright line for complete page endings.
add footer/base Footer Archive
Blog-style archive footer with monthly archives, categories, and a tag cloud for content-heavy sites.
add footer/archive Footer Centered
Centered footer with navigation links, social icons, and copyright line.
add footer/centered Footer Changelog
Logbook footer pairing brand links with a list of recent product changes and version numbers.
add footer/changelog Footer Command Line
Terminal-styled footer presenting links and license info as shell commands inside a monospace console panel.
add footer/command-line Footer Community
Community footer with channel cards for Discord, GitHub, forum, and events plus a next-call announcement.
add footer/community Footer Contact Only
Minimal contact footer with phone, email, and a book-a-call action — no link grid.
add footer/contact-only Footer Dark
Dark multi-column footer with brand section, link groups, social icons, and copyright.
add footer/dark Footer Mega
Full mega footer with newsletter signup, 4-column link grid, social icons, and legal bar.
add footer/mega Footer Minimal Bar
Single-line footer bar with copyright, legal links, and social icons in one horizontal strip.
add footer/minimal-bar Footer Newsletter
Footer with integrated newsletter signup section, link columns, social icons, and copyright line.
add footer/newsletter Footer Newsletter Columns
Dark footer combining a newsletter subscription form with 3-column link grid above a logo + copyright + social bar.
add footer/newsletter-columns Footer Premium Dark
Premium dark footer with oversized display-typography contact details, 4-column links grid, and large bordered social icon squares.
add footer/premium-dark Footer Signature
Personal closing footer with a founder's note, a handwritten-style signature, and a minimal set of links.
add footer/signature Footer Simple
Minimal single-row footer with logo, navigation links, social icons, and copyright.
add footer/simple Footer Status
Mini-dashboard footer surfacing system status, support hours, response time, and uptime instead of a link grid.
add footer/status Footer Timeline
Company-history footer that lays out milestones along a horizontal timeline from founding to today.
add footer/timeline Footer With Social
Four-column footer with company info, link columns, social icons row, and copyright line.
add footer/with-social forms
10Settings Form
Multi-section settings form with fieldsets, inputs, selects, checkboxes, and action buttons.
add forms/base Checkout Form
Two-column checkout form with contact details, payment info, and order summary sidebar.
add forms/checkout Contact Form
Clean contact form with name, email, subject, and message fields in a responsive two-column grid layout.
add forms/contact Floating Labels Form
Contact form with CSS-animated floating labels that transition upward on focus — two variants shown bordered box and underline-only.
add forms/floating-labels Form Filter Bar
Horizontal search-and-filter bar for app surfaces, listings, and admin views.
add forms/filter-bar Form Inline Validation
Application form with immediate success, error, and helper messages directly under each field.
add forms/inline-validation Form Two Column
Two-column setup form with a contextual side panel and grouped account fields.
add forms/two-column Multi-Step Form
Wizard-style form with step indicator, progress bar, and previous/next navigation for breaking long forms into manageable steps.
add forms/multi-step OTP Input
OTP verification input with 6-digit and 4-digit variants — individual digit boxes with focus styles and resend countdown.
add forms/otp-input Search Form
Advanced search form with query input, filter dropdowns, and action buttons in a responsive grid layout.
add forms/search forum
1gallery
13Gallery Grid
Four-column image gallery grid with hover overlay showing title and category.
add gallery/base Gallery Carousel
Horizontal image carousel with prev/next navigation buttons and dot indicators.
add gallery/carousel Gallery Category Tiles
Six full-cover image tiles in a 3x2 grid with category name, item count, and browse arrow — for shop or portfolio category navigation.
add gallery/category-tiles Gallery Community Showcase
Community creation grid — 5 project cards with preview thumbnail, colored category badge, description, and creator handle, plus a dashed Share-your-project CTA card.
add gallery/community-showcase Gallery Hover Metadata
4x2 image grid where category and title appear as an overlay that fades and slides in on hover — clean photography or portfolio grid.
add gallery/hover-metadata Gallery Lightbox
Image gallery grid with click-to-expand overlay lightbox using native dialog element.
add gallery/lightbox Gallery Masonry
CSS-columns masonry gallery with mixed aspect ratios and hover zoom effect.
add gallery/masonry Gallery Masonry Blog
CSS columns masonry gallery with hover overlays showing blog metadata — date, comment count, and read time per image.
add gallery/masonry-blog Gallery Metadata Grid
Portfolio grid with title and category label below each image. Every even item is offset downward (mt-10) creating a staggered two-row wave pattern. 4-col on desktop, 2-col on mobile.
add gallery/metadata-grid Gallery Rotated Section
Features section with a slightly rotated 2x2 image grid on the right that straightens on hover — a dynamic decorative composition.
add gallery/rotated-section Gallery Stacked Columns
Six equal-width columns, each containing two images with varying aspect ratios (portrait, square, landscape). Items are bottom-aligned, creating an organic silhouette of different column heights.
add gallery/stacked-columns Parallax Columns Gallery
Three-column image grid with CSS vertical offsets per column simulating a parallax stagger effect — no JavaScript required.
add gallery/parallax-columns Photo Grid
Uniform photo grid gallery with hover zoom and title overlay. 3-column layout with camera icon placeholders.
add gallery/grid help-center
1hero
29Hero Base
Clean hero baseline with headline, body copy, and dual CTA for design-system adoption.
add hero/base Hero Animated
Motion-enhanced hero variant using existing animation snippets for subtle entrance transitions.
add hero/animated Hero App Download
Split hero with app store download badges on the left and a phone mockup frame on the right — for mobile app landing pages.
add hero/app-download Hero Border Frame
Hero with decorative 1px-grid column lines flanking the content — a ruled-paper geometry effect with no custom CSS.
add hero/border-frame Hero Carousel Split
Split hero carousel layout with text on the left, image on the right, slide counter with arrows, and slide title tabs — static mockup of a Swiper-ready pattern.
add hero/carousel-split Hero Centered
Centered hero with large headline, description, dual CTA buttons, and trust indicators on a light background.
add hero/centered Hero Checklist Carousel
Two-column hero with a checklist on the left and a stacked card testimonial/screenshot on the right — CSS rotation trick for a carousel peek effect.
add hero/checklist-carousel Hero Creative Collage
Dark hero with colorful CSS-only creative illustrations floating at the edges — sparkles, colored shape clusters, and gradient tiles frame centered copy.
add hero/creative-collage Hero Dark
Dark-themed hero with gradient orbs, bold typography, dual CTAs, and a trust indicator row.
add hero/dark Hero Developer
Always-dark developer-tool hero with CSS-animated cycling status messages, headline, CTAs, and an embedded OS-tab install block (macOS / Linux / Windows).
add hero/developer Hero Device Showcase
Centered hero with overlapping laptop, tablet, and phone CSS mockups beneath the heading — for multi-device product showcases.
add hero/device-showcase Hero Diagonal Pattern Background
Hero with a CSS repeating diagonal stripe pattern behind a centered content card — a texture-forward design without images.
add hero/diagonal-pattern-bg Hero Enterprise Gradient
Dark navy-to-blue gradient enterprise hero with a metric strip and dashboard mockup — built for B2B SaaS, platform, and data products.
add hero/enterprise-gradient Hero Fused Title
Hero mit staggerter Wort-für-Wort Einblendanimation und blinkenden Cursor-Symbolen zwischen Schlüsselwörtern.
add hero/fused-title Hero Gradient
Centered hero with blurred gradient mesh background and glass-style badge.
add hero/gradient Hero Gradient Animated
Hero mit animiertem Mehrfarben-Gradient-Hintergrund via CSS background-position Loop — rein CSS, kein Canvas oder JS.
add hero/gradient-animated Hero Minimal
Ultra-minimal hero with elegant typography, a single CTA, and generous whitespace.
add hero/minimal Hero Play Trigger
Centered hero with a play-button CTA and a below-the-fold video thumbnail that opens a lightweight modal — for product demos and explainer-first landing pages.
add hero/play-trigger Hero Product Preview
Hero mit zentriertem Headline + Dual-CTA, darunter großes abgeschnittenes IDE/App-Mockup mit Vignette-Fade.
add hero/product-preview Hero Product Tile
Apple-style full-width product hero — large centered product name, tagline, inline "Weitere Infos | Kaufen" dual text-link CTAs, and a product image that bleeds off the bottom edge.
add hero/product-tile Hero Split
Full-height split hero with content on the left and large image or illustration area on the right.
add hero/split Hero Split Hover Expand
Two-panel split hero where hovering one side expands it to 60% while the other shrinks — ideal for fashion, real estate, or dual-audience products.
add hero/split-hover-expand Hero Split Stats
Split hero with text on the left and a feature image plus 3-stat bar on the right — combines visual proof with key metrics in the hero.
add hero/split-stats Hero Three-Column Category
Three full-height columns each with background image, dark overlay, category label, title, and CTA — for sites with multiple product or service categories.
add hero/three-column-category Hero Video
Full-width hero section with video background placeholder, overlay, headline, and dual CTA buttons.
add hero/video Hero With Carousel
Centered hero headline and CTAs with a horizontally scrollable featured content carousel directly below — cards overflow left and right for depth.
add hero/with-carousel Hero With Form
Two-column hero with headline and subtitle on the left and an inline signup form card on the right.
add hero/with-form Hero With Image
Two-column hero variant with dedicated media slot for screenshots or product mockups.
add hero/with-image Hero With Stats
Centered hero with headline, subtitle, CTA buttons, and a horizontal stats bar showing key metrics.
add hero/with-stats hr-employee-list
1image-comparer
2Image Comparer Base
Before/after image comparison slider with vertical divider line and drag handle indicator.
add image-comparer/base Image Comparer Vertical
Top/bottom image comparison with horizontal divider and vertical drag handle arrows.
add image-comparer/vertical image-generator
3Image Generator Base
AI image generation interface with prompt input and gradient placeholder output area.
add image-generator/base Image Generator Grid
Gallery-style image generation with 2x2 grid output and hover action overlays.
add image-generator/grid Image Generator with Controls
Image generation interface with style, aspect ratio, and quality controls.
add image-generator/with-controls insights-grid
1integrations
3Integrations Base
Grid of integration cards with icons, descriptions, and detail links.
add integrations/base Integrations Grid
6-Card Integrations-Grid: Logo + Name + Kategorie-Label + Beschreibung. Zeigt welche Tools und Plattformen unterstützt werden.
add integrations/grid Integrations Detail
Single integration page with connection diagram (logo ↔ logo) and numbered setup guide.
add integrations/detail invoice
1job-board
1kanban
1kbd
2legal
1link-card
5Link Card
Card-style navigational link with title, description, and directional arrow icon.
add link-card/base Horizontal Link Card
Side-by-side icon and text layout for navigational link cards with arrow indicator.
add link-card/horizontal Link Card Colorful
Four-column quicklink grid with per-card accent colors — border, icon ring, and a dot-grid background overlay all adopt the card's individual color on hover.
add link-card/colorful Link Card Grid
Two-by-two grid of navigational link cards for documentation or resource hubs.
add link-card/grid Resource Grid
Six-card grid of resource links differentiated by content type — Guide, Video, Docs, Tutorial, What's new, Article — each with a color-coded icon and badge.
add link-card/resource-grid link-in-bio
1logo-cloud
8Logo Cloud Base
Simple trust bar showing partner or customer logos in a centered horizontal row with a headline.
add logo-cloud/base Logo Cloud Grid
Static grid of partner or client logos with heading and even spacing.
add logo-cloud/grid Logo Cloud Hover Blur
Scrolling logo ticker where hovering blurs all siblings — a centered tooltip reveals a call-to-action link.
add logo-cloud/hover-blur Logo Cloud Marquee
Endlos-scrollende Logo-Wall mit zwei Tracks für nahtlosen Loop und Hover-Pause.
add logo-cloud/marquee Logo Cloud Simple
Minimal logo cloud with grayscale placeholders that reveal full color on hover, centered under a trust heading.
add logo-cloud/simple Logo Cloud Sponsors
Tiered open-source sponsor section with Platinum (3 large cards) and Gold (4 medium cards) rows, ending with a dashed "Your logo here" CTA card.
add logo-cloud/sponsors Logo Cloud Tech Roster
Bold text-based tech company name roster — a confident "who runs on us" statement display for infrastructure and AI platform companies.
add logo-cloud/tech-roster Logo Cloud Ticker
Infinite horizontal scrolling logo ticker with fade edges and reduced-motion fallback.
add logo-cloud/ticker media-widget
2mega-menu
4Mega Menu Base
Full-width multi-column dropdown navigation with categorized link groups.
add mega-menu/base Bento Box Mega Menu
Grid-based mega menu with compartmentalized boxes of varied sizes, icon labels, and hover-revealed disclosure arrows.
add mega-menu/bento Mega Menu Product Cards
Three-column mega-menu with icon + name + description product cards in the first two columns and a featured announcement panel with cover image on the right.
add mega-menu/product-cards Mega Menu With Featured
Multi-column navigation with a featured content card for highlighting promotions or announcements.
add mega-menu/with-featured metric-grid
3Metric Grid
2x2 grid of metric cards with colored icon, label, value, and change indicator.
add metric-grid/base Metric Grid Dense
Compact 4-column metric strip in a single card with dividers between cells.
add metric-grid/dense Metric Grid With Chart
2x2 metric grid with mini CSS bar charts showing trend data below each value.
add metric-grid/with-chart mockup
4Browser Mockup
Realistic browser frame with traffic-light controls and URL bar for showcasing web screenshots and UI previews.
add mockup/browser Phone Mockup
Minimal phone frame with dynamic island, status bar, and home indicator for showcasing mobile UI screenshots and app previews.
add mockup/phone Tablet Mockup
iPad-style tablet frame with front camera dot, status bar, and home indicator for showcasing tablet UI screenshots.
add mockup/tablet Terminal Mockup
Dark terminal window with traffic-light buttons, window title, and realistic CLI output for showcasing developer tools, CLI products, and code workflows.
add mockup/terminal modal
8Modal Base
Centered dialog with backdrop overlay, title, body text, and cancel/confirm buttons.
add modal/base Modal Alert
Alert dialog with warning icon, session expiry message, and single OK button.
add modal/alert Modal Confirm
Destructive action confirmation modal with warning icon and red delete button.
add modal/confirm Modal Form
Modal dialog with an embedded contact form including name, email, and message fields.
add modal/form Modal Image
Image lightbox modal with large image area, close button, prev/next navigation, and caption.
add modal/image Modal OTP
OTP verification modal with 6 digit input boxes, verify button, and resend code link.
add modal/otp Modal Settings
Settings modal with tab navigation, toggle switches, and cancel/save footer.
add modal/settings Modal Video
Video modal with 16:9 dark area, play icon overlay, title, and close button.
add modal/video navbar
19Navbar Base
Flexible top navigation with logo, primary links, and auth CTAs for product websites.
add navbar/base Navbar Centered
Navigation bar with logo left, centered navigation links, and action buttons right.
add navbar/centered Navbar Centered Logo
Split navigation with the logo centered between left and right nav groups.
add navbar/centered-logo Navbar Command
Command-center header where a central search field with a ⌘K shortcut is the primary element, flanked by brand and quick actions.
add navbar/command Navbar Dark
Dark-themed top navigation with logo, centered links, and accent CTA for bold product sites.
add navbar/dark Navbar Floating
Detached glass header that floats as a rounded card above the content with a blurred, translucent background.
add navbar/floating Navbar Fullscreen Overlay
Dark fullscreen navigation overlay with staggered item entrances and inline sub-navigation.
add navbar/fullscreen-overlay Navbar Magazine
Editorial masthead header with a large centered wordmark, tagline, utility row, and a centered section navigation.
add navbar/magazine Navbar Mega Menu
Sticky navigation with a hover-triggered mega dropdown showing product categories with icons and descriptions.
add navbar/mega Navbar Pill CTA
Sticky Navbar mit Pill-CTA, Ghost-GitHub-Button und responsivem Mobile-Menu-Toggle.
add navbar/pill-cta Navbar Search
Search-first header where a prominent search field is the primary element, with navigation kept secondary.
add navbar/search Navbar Sidebar Push
Fixed sidebar navigation that pushes page content aside instead of overlaying it.
add navbar/sidebar-push Navbar Split Pills
Floating dual-pill navigation with brand and links in the left capsule, actions in the right. Modern SaaS style.
add navbar/split-pills Navbar Status
Operations header that surfaces live status — system health, project counts, and build state — alongside navigation.
add navbar/status Navbar Tabs
Header navigation styled as file-folder tabs, with the active section visually connected to the content below.
add navbar/tabs Navbar Toolbar
Compact application toolbar with grouped icon actions and dividers, inspired by desktop software.
add navbar/toolbar Navbar Topbar
Slim pre-navigation bar with promotional text, help link, and social icons.
add navbar/topbar Navbar Transparent
Transparent overlay navbar for dark hero sections with glass-style CTA button.
add navbar/transparent Navbar Two-Tier
Two-level header with a slim utility tier (contact, language, sign in) above a full primary navigation tier.
add navbar/two-tier newsletter
5Newsletter Base
Centered email signup section with branded background, input field, and subscribe button for lead capture.
add newsletter/base Newsletter Banner
Full-width newsletter banner with background color, headline, description, and inline signup form.
add newsletter/banner Newsletter Minimal
Compact inline newsletter signup with email input and submit button on a single line.
add newsletter/minimal Newsletter Popup
Modal overlay newsletter signup with centered card, close button, email form, and privacy note on a dark backdrop.
add newsletter/popup Newsletter Split
Gradient newsletter banner with email form on the left and decorative preview cards on the right.
add newsletter/split notification
4Notification Base
Toast notification card with icon, title, message, and dismiss button for in-app alerts.
add notification/base Notification Inbox Panel
Inbox-style notification panel for denser product updates, approvals, and account events.
add notification/inbox-panel Notification Stacked
Multiple stacked toast notifications showing info, warning, and error states together.
add notification/stacked Notification Success
Green-themed success toast with checkmark icon, message, and action link.
add notification/success notification-widget
2Notification Widget
Compact notification list with unread badges, colored status dots, and timestamps
add notification-widget/base Toast Stack
Vertically stacked toast notifications with color-coded severity borders and dismiss buttons
add notification-widget/toast-stack onboarding
2Onboarding Base
Horizontal step indicator wizard with numbered steps, checkmarks for completed steps, form content area, and navigation buttons.
add onboarding/base Onboarding Vertical
Vertical stepper layout with step indicators on the left sidebar and form content on the right.
add onboarding/vertical orbit-feature
1order-summary
2Order Summary Base
Order confirmation card with checkmark, order details, itemized list, totals, and track-order CTA.
add order-summary/base Order Summary Receipt
Receipt-style order summary with monospace typography, dashed dividers, and print button.
add order-summary/receipt order-tracker
1page-header
1pagination
4Pagination Base
Standard numbered pagination with previous/next buttons, page numbers, ellipsis, and current page highlight.
add pagination/base Pagination Compact
Minimal previous/current/next pagination for tighter app views and embedded lists.
add pagination/compact Pagination Simple
Minimal pagination with just Previous and Next buttons and a centered page indicator.
add pagination/simple Pagination With Info
Numbered pagination with a results summary showing the current range and total count.
add pagination/with-info pain-points
1paywall
2Paywall Base
Blurred content overlay with lock icon, pricing, subscribe CTA, and sign-in link.
add paywall/base Paywall Minimal
Fade-out content with gradient mask and a subscribe prompt below the visible preview.
add paywall/minimal platform
1platform-pillars
1podcast-player
1popup
5Popup Base
Success toast notification fixed to the bottom-right with icon, message, and close button.
add popup/base Popup Coupon
Coupon modal with discount badge, dashed code box with copy button, countdown timer, and shop CTA — for flash sales and promotional campaigns.
add popup/coupon Popup Error
Error toast notification with red icon for failure and error messages.
add popup/error Popup Event Booking
Event booking modal with image banner, event details chips, ticket quantity selector, total price, and booking CTA.
add popup/event-booking Popup Warning
Warning toast notification with amber icon for cautionary messages.
add popup/warning portfolio
6Portfolio Base
Project grid with 2x2 cards showing image placeholder, category tag, title, and view link.
add portfolio/base Portfolio Video Cards
Case study grid with dark gradient cards, a play-button overlay on hover, and persistent bottom metadata — optimized for video or image thumbnails.
add portfolio/video-cards Portfolio Case Study
Single case study layout with hero image, project details, challenge/solution/result grid, and CTA.
add portfolio/case-study Portfolio Fullscreen Panels
Stacked full-viewport project panels with scroll-snap navigation.
add portfolio/fullscreen-panels Portfolio Interactive List
Text-first numbered project list with floating image that appears on hover per row.
add portfolio/interactive-list Portfolio With Filter
Filterable project grid with category tabs and 3-column layout of project cards.
add portfolio/with-filter presentation-hero
1pricing
17Pricing Base
Three-tier pricing section with clear plan hierarchy and highlighted default plan.
add pricing/base Pricing Annual Toggle
Three-tier pricing with monthly/annual toggle switch and "Save 20%" badge.
add pricing/annual-toggle Pricing Calculator
Interactive usage-based pricing estimator with connection type toggle, model dropdowns (LLM/STT/TTS), real-time cost display, and per-plan included-minutes comparison.
add pricing/calculator Pricing Compare
Feature comparison table for pricing plans with check/cross icons and text values.
add pricing/compare Pricing Comparison
Feature comparison table across three pricing tiers with checkmarks and CTAs.
add pricing/comparison Pricing Comparison Table
Full feature comparison table with sticky header, checkmarks, text values, and CTA buttons per plan.
add pricing/comparison-table Pricing Current Plan
Single card showing active subscription status with plan name, billing details, feature list, usage bar, upgrade CTA, and cancel link.
add pricing/current-plan Pricing Enterprise
Enterprise pricing section with single large card, two-column feature list, custom pricing CTA, and trust indicators.
add pricing/enterprise Pricing Enterprise Form
Split enterprise pricing section with feature highlights on the left and a contact sales form on the right.
add pricing/enterprise-form Pricing Gradient
Three-tier pricing cards with a gradient-highlighted featured plan and feature lists.
add pricing/gradient Pricing Image Backdrop
Pricing cards with gradient background that scales on hover, creating a visual depth effect.
add pricing/image-backdrop Pricing Minimal
Ultra-clean three-card pricing with plan name, price, one-line description, and CTA button only.
add pricing/minimal Pricing Multi-Product Selector
Horizontal pill tabs for switching between product pricing tiers — each product shows its own set of Free/Pro/Enterprise cards below.
add pricing/multi-product Pricing Open Core
Open-Core-Pricing mit Free-Tier für Einzelpersonen und Pro-Tier für Teams und kommerziellen Einsatz.
add pricing/open-core Pricing Single
Single-plan pricing card with feature list on the left and large price with CTA on the right.
add pricing/single Pricing Spotlight
Three-tier pricing cards with a cursor spotlight effect — a radial gradient follows the pointer on each card.
add pricing/spotlight Pricing Toggle
Three-tier pricing cards with monthly/annual toggle, highlighted plan, and feature checklists.
add pricing/toggle product-bundle
1product-card
3Product Card Base
E-commerce product card with image placeholder, name, description, price, and add-to-cart button in a responsive grid.
add product-card/base Product Card Horizontal
Horizontal product card with image on the left and details on the right, suited for list views.
add product-card/horizontal Product Card With Badge
Product card with promotional badge overlays like "New" or "Sale -20%" and strikethrough pricing.
add product-card/with-badge product-compare
1product-detail
3Product Detail Base
Two-column product detail layout with image, pricing, size selector, quantity control, and add-to-cart CTA.
add product-detail/base Product Detail With Gallery
Product detail layout with main image and thumbnail gallery for multi-angle product viewing.
add product-detail/with-gallery Product Detail With Reviews
Product detail layout extended with a customer reviews section below the product info.
add product-detail/with-reviews product-filter
2Product Filter Base
Vertical filter sidebar with category checkboxes, price range inputs, brand selection, rating filter, and action buttons.
add product-filter/base Product Filter Horizontal
Horizontal filter bar with dropdown-style filter pills, active filter chips with remove buttons, and clear-all action.
add product-filter/horizontal product-grid
3Product Grid Base
Responsive 3-column product card grid with image, title, rating, and price for each item.
add product-grid/base Product Grid Masonry
Masonry-style product grid with varying card heights and promotional badges for visual interest.
add product-grid/masonry Product Grid With Filter
Product grid with sidebar filter panel for category, price range, and rating refinement.
add product-grid/with-filter product-notify-stock
1product-reviews
2Product Reviews Base
Review section with average rating, rating breakdown bars, and individual review cards with avatars.
add product-reviews/base Product Reviews With Photos
Enhanced review section with photo thumbnails on reviews and a Write a Review CTA button.
add product-reviews/with-photos product-sticky-atc
1product-volume-discount
1profile-widget
2profiles
4Profile Base
Centered profile card with gradient avatar, name, title, bio, and social links.
add profiles/base Profile Card
Horizontal profile card with avatar, name, email, and action buttons.
add profiles/card Profile Cover
Profile card with cover image gradient, overlapping avatar, name, title, and stats row.
add profiles/cover Profiles Colorful Grid
Compact ambassador-style profile grid where each card has an individual background color with a matching colored glow shadow — includes a rainbow gradient "You?" CTA card.
add profiles/colorful-grid progress-ring
3Progress Ring Base
Circular SVG progress indicator with percentage text and label, showing multiple completion states.
add progress-ring/base Progress Ring Dashboard
Four color-coded progress rings in a row for system metrics like CPU, memory, disk, and network.
add progress-ring/dashboard Progress Ring With Label
Larger progress ring with centered percentage and label text inside, plus detail text below.
add progress-ring/with-label progress-widget
2Progress Widget
Circular conic-gradient progress ring with percentage display and storage label
add progress-widget/base Goal Tracker
Multi-goal progress tracker with labeled horizontal bars and completion percentages
add progress-widget/goals proof-wall
1property-listing
1property-table
2Property Table
Three-column reference table for CSS custom properties with proper table semantics.
add property-table/base Striped Property Table
Property reference table with alternating row backgrounds for improved readability.
add property-table/striped quote
3Quote Base
Styled blockquote with left accent border and author attribution using semantic figure/figcaption.
add quote/base Quote Large
Large decorative blockquote with an oversized quotation mark SVG and prominent typography.
add quote/large Quote with Avatar
Blockquote with left accent border, circular avatar placeholder, author name, and role attribution.
add quote/with-avatar rating-widget
2Rating Widget
Review summary widget with average score, star display, and rating breakdown bars
add rating-widget/base Testimonial Card
Individual review card with stars, quote, verified badge, and helpful count
add rating-widget/testimonial-card referral-program
1related-articles
2Related Articles Base
A grid of article cards with category tag, title, excerpt, author, and date for linking to related content.
add related-articles/base Related Articles Compact
A minimal list of related article links showing only title and date, without cards or excerpts.
add related-articles/compact report-header
3Report Header
Report page header with title, subtitle, and date range display with calendar icon.
add report-header/base Report Header With Export
Report header with date range, CSV/PDF export buttons, and a refresh action.
add report-header/with-export Report Header With Tabs
Report header with tab navigation for switching between report sections.
add report-header/with-tabs restaurant-menu
1resume
1roadmap
1search
2Search Base
Search input with magnifying glass icon, clear button, and recent search chips.
add search/base Search Command Palette
Command palette search overlay with grouped results, keyboard hints, and categorized navigation.
add search/command-palette see-also
2selector-pills
1services
3Services Reveal List
Numbered service rows with background gradient reveal on hover and tag chips.
add services/reveal-list Services Tag Cloud
Flowing pill navigation listing service areas — colored dot per pill, accessible list role, responsive wrapping layout.
add services/tag-cloud Services Tabbed
Numbered service tab list on the left with image preview panel on the right.
add services/tabbed settings
1shipping-widget
2Shipping Tracker Widget
Order delivery tracker with horizontal step progress bar and carrier details
add shipping-widget/base Order History Widget
Recent orders list with status badges showing delivery, transit, and processing states
add shipping-widget/order-history shopping-cart
3Shopping Cart Base
Full shopping cart with item list, quantity controls, remove buttons, and order summary with checkout CTA.
add shopping-cart/base Shopping Cart Empty
Empty cart state with cart icon, message, and call-to-action to continue shopping.
add shopping-cart/empty Shopping Cart Mini
Compact dropdown-style mini cart with item summary, total, and quick checkout/view-cart actions.
add shopping-cart/mini sidebar
6Sidebar Base
Responsive sidebar navigation with logo, icon links, active states, and user profile section.
add sidebar/base Sidebar App Shell
Full app-shell sidebar with a main workspace stage, supporting rail, and persistent navigation.
add sidebar/app-shell Sidebar Collapsible
Sidebar navigation with expandable/collapsible navigation groups using native HTML details/summary elements.
add sidebar/collapsible Sidebar Dark
Dark-themed sidebar navigation with brand area, sectioned links, active state highlighting, and user profile.
add sidebar/dark Sidebar Settings Nav
Settings-oriented sidebar with section navigation and a focused configuration stage.
add sidebar/settings-nav Sidebar TOC Index
Sticky table-of-contents sidebar with grouped sections (years/chapters), left-border indicator, entry count badges, and optional filter chips.
add sidebar/toc-index skeleton
4Skeleton Base
Card skeleton loader with shimmer animation for loading placeholders.
add skeleton/base Skeleton Content Page
Full-page skeleton with hero, content blocks, and sidebar placeholders for richer loading states.
add skeleton/content-page Skeleton Table
Table skeleton loader with header and body rows for data table placeholders.
add skeleton/table Skeleton Text
Text content skeleton with heading and paragraph lines of varying widths.
add skeleton/text social-proof
7Creator Credit
Social proof block with overlapping avatar stack, dotted-underline attribution links, a user count stat, and a star rating row.
add social-proof/creator-credit Social Proof Base
Trust bar with key metrics displayed in a clean horizontal grid layout.
add social-proof/base Social Follow Buttons
Row of branded social follow buttons with platform icon, name, and follower count — full variant and compact icon-only variant.
add social-proof/follow-buttons Social Proof Compact
Single-line social proof with overlapping avatar stack and trust message.
add social-proof/compact Social Proof With Logos
Logo cloud row with company names above a trust metrics grid.
add social-proof/with-logos Social Sticky Sidebar
Fixed vertical social icon strips on the left and right page edges with slide-out labels on hover — a persistent sharing widget.
add social/sticky-sidebar Tweet Grid
Masonry grid of tweet-style testimonial cards with avatar, handle, quote text, and X/Twitter brand icon — for showing authentic social proof.
add social-proof/tweet-grid solution-grid
1spinner
3Spinner Base
Simple border spinner in three sizes for inline and overlay loading indicators.
add spinner/base Spinner Dots
Three bouncing dots spinner for conversational and chat-style loading indicators.
add spinner/dots Spinner Pulse
Pulsing circle spinner with loading text for prominent loading states.
add spinner/pulse stat-widget
2stats
9Stats Base
Four-column metrics section with large numbers and labels for quantified social proof on landing pages.
add stats/base Community Stats
Open-source community metrics — GitHub stars, Discord members, contributors, downloads — with icon badges and platform links.
add stats/community Stats Animated
Animated stats section with scroll-driven counting numbers using CSS @property.
add stats/animated Stats Comparison
Before-and-after stats section with struck-through old values, accent-colored new values, and percentage change badges.
add stats/comparison Stats Customer Story
Stat cards linking to customer success stories. Each card shows a brand name, bold metric, description, and arrow link.
add stats/customer-story Stats Milestone Grid
Grid aus großen Zahlen mit Suffix-Symbol und kurzem Untertitel — Milestones und Kennzahlen auf einem Blick.
add stats/milestone-grid Stats Minimal
Ultra-minimal horizontal stats row with vertical dividers — pure typography, no cards or shadows.
add stats/minimal Stats with Icons
Four-column stats section with colored icon badges, large numbers, and labels.
add stats/icon Stats with Links
Three-column metric display where each stat links to a relevant destination — case studies, status page, or community.
add stats/with-links stats-display
6Stats Display Base
Four-column grid of stat cards showing a prominent value and label, ideal for snippet or project metrics.
add stats-display/base Stats Colored Blocks
Three key metrics each in a distinct full-bleed colored block — amber, dark slate, and teal — with a dot-grid texture overlay.
add stats-display/colored-blocks Stats Display Centered
Centered stats layout with larger, color-accented values for high-impact metric presentation.
add stats-display/centered Stats Display Trend Comparison
CSS-only horizontal bar chart comparing a product against 3 competitors, with a dominant headline number at the top. No JS, no SVG chart library.
add stats-display/trend-comparison Stats Display With Icon
Stat cards with leading icons for added visual context, combining emoji indicators with values and labels.
add stats-display/with-icon Stats Display With Icon Grid
Four stat metrics in a divided grid with colored icon circles, large numbers, and labels — no cards, just dividers.
add stats-display/with-icon-grid steps
9Steps Base
Three-step horizontal process section with numbered circles and connecting line for explaining workflows.
add steps/base Steps Big Numbers
Three-step horizontal process section where oversized decorative numbers (01/02/03) act as the primary visual element, with title and description below each.
add steps/big-numbers Steps Horizontal
Horizontal process stepper with numbered circles, connector lines, and step descriptions.
add steps/horizontal Steps How It Works
Three-step explainer with large numbers, icons, titles, and descriptions in a clean card layout.
add steps/how-it-works Steps Sequential
Horizontal step section with sequential reveal timing and a gradient progress line, built for process or onboarding flows where items should enter one after another.
add steps/sequential Steps Staggered
Cascading staircase process cards with deliberate horizontal offsets creating visual depth.
add steps/staggered Steps Vertical
Vertical step indicator with connecting line, checkmarks for completed steps, and accent ring for the current step.
add steps/vertical Steps With Connector Icons
Horizontal process steps with numbered icon circles connected by a dashed line — horizontal on desktop, vertical on mobile.
add steps/with-connector-icons Timeline
Vertical timeline with colored dots, dates, category badges, and event descriptions.
add steps/timeline sticky-bar
3Sticky Bar Base
Top announcement bar with accent background, centered message, link, and dismiss button.
add sticky-bar/base Sticky Bar Download Prompt
Bottom bar prompting mobile app download with app icon, star rating, and download button.
add sticky-bar/download-prompt Sticky Bar Pricing
Fixed bottom bar with product name, monthly price, and two CTAs — follows the user as they scroll a product or pricing page.
add sticky-bar/pricing stock-widget
2storage-widget
2Storage Widget
Storage usage card with a segmented usage bar and color-coded legend by file type
add storage-widget/base Storage Widget File Breakdown
Detailed file type list with file counts, sizes, icons, and proportional usage bars
add storage-widget/file-breakdown story-arc
1support-ticket
1tabs
6Tabs Base
Underline-style tabs with border-bottom active indicator and accessible ARIA roles for panel switching.
add tabs/base Glass OKLCH Tabs
Tab navigation with OKLCH-parametrised glass pill backgrounds — hue is controlled by a single CSS custom property.
add tabs/glass-oklch Tabs Media Split
Vertical tab buttons on the left with a large media preview panel on the right. Active tab shows description, inactive tabs are compact.
add tabs/media-split Tabs Pills
Pill-style tabs with rounded background highlight for the active tab, enclosed in a subtle container.
add tabs/pills Tabs Underline
Full-width underline tabs with evenly spaced buttons and a border-bottom active indicator.
add tabs/underline Tabs Vertical Pill
Vertical pill-style tab navigation on the left with image and content preview on the right — for product features, service categories, or portfolio sections.
add tabs/vertical-pill tag-input
3Tag Input Base
Tag chips with remove buttons and an inline text input for adding new tags.
add tag-input/base Tag Input Colored
Tag chips with distinct color variants and status dots for visual categorization.
add tag-input/colored Tag Input With Suggestions
Tag input with a dropdown suggestion list for quick tag selection from predefined options.
add tag-input/with-suggestions task-timer-row
1task-widget
2team
9Team Base
Three-column team member grid with avatar placeholder, name, role, and social media links.
add team/base Team Bubble Cloud
Organic avatar cluster with varied sizes and absolute positioning. More visual and playful than grid layouts.
add team/bubble-cloud Team Cards
Three-column team grid with portrait images and hover overlay showing bio and social links.
add team/card Team Department
Team members grouped by department with section headers and compact member rows.
add team/department Team Grid
Responsive team member grid with photos, names, roles, and social links.
add team/grid Team Leadership
Leadership section with one featured leader card and three smaller team cards below.
add team/leadership Team Masonry Profiles
Masonry team grid where some members have expanded cards with bio and social links — natural height variation without JavaScript.
add team/masonry-profiles Team Minimal
Four-column team grid with circular avatar placeholders, name, and role — no social links or extra decoration.
add team/minimal Team With Bio
Two-column team grid with large avatar, name, role, bio text, and social links per member.
add team/with-bio testimonials
15Testimonial Base
Centered single-quote testimonial with avatar placeholder and attribution line for social proof sections.
add testimonials/base Testimonial Avatar
Avatar-focused single testimonial with large centered photo, star rating, and italic quote for high-trust social proof sections.
add testimonials/avatar Testimonial Featured
Large single featured testimonial with quote mark, italic text, avatar, name, title, and company logo placeholder.
add testimonials/featured Testimonial Grid
Three-column testimonial card grid with star ratings, quotes, and author attribution for high-density social proof.
add testimonials/grid Testimonial Quote
Centered large single-quote testimonial with quotation icon, avatar, attribution, and star rating.
add testimonials/quote Testimonial with Logo & Case Study CTA
Single centered testimonial featuring a company logo, blockquote, author attribution, and a case study call-to-action link.
add testimonials/with-logo-cta Testimonials Asymmetric
Asymmetric grid with a large featured testimonial and two smaller stacked quotes — creates visual weight hierarchy for social proof.
add testimonials/asymmetric Testimonials Carousel
Single-testimonial slider with dot navigation and smooth CSS transitions.
add testimonials/carousel Testimonials CEO Paired
Zwei CEO/Gründer-Quotes nebeneinander mit Avatar-Initialen, Name und Titel — für Vertrauen durch Leadership-Persönlichkeiten.
add testimonials/ceo-paired Testimonials Credential Grid
6-Card Testimonial-Grid mit Avatar-Initialen, Zitat, Name und Credential-Badge (Firma/Titel) pro Karte.
add testimonials/credential-grid Testimonials Masonry
CSS columns masonry layout with varied-length testimonial cards for organic visual flow.
add testimonials/masonry Testimonials Masonry Quotes
Masonry columns of testimonial quote cards with varying heights based on quote length — no JavaScript, pure CSS columns.
add testimonials/masonry-quotes Testimonials Spotlight
Testimonial-Grid mit cursor-folgendem Radial-Glow-Hover-Effekt auf jeder Card.
add testimonials/spotlight Testimonials With Rating
Three-column testimonial cards with 5-star ratings, quotes, and author attribution.
add testimonials/with-rating Testimonials With Video
Three testimonial cards each featuring a video thumbnail with play button, a quote, and author attribution — links to a customer story video.
add testimonials/with-video theme-section
1timeline
3Timeline Alternating
Zigzag timeline with events alternating left and right around a center line.
add timeline/alternating Timeline Horizontal
Horizontal stepped timeline with milestone nodes connected by a progress line.
add timeline/horizontal Timeline Vertical Feed
Vertical activity log with connector line, typed event icons, and date separators.
add timeline/vertical-feed timetable
1tooltip
3Tooltip Base
CSS-only tooltip with arrow, shown on hover in top, right, and bottom positions.
add tooltip/base Tooltip Dark
Dark-themed tooltip variant shown on links, icon buttons, and badges.
add tooltip/dark Tooltip Info
Rich tooltip with title, description, and action link on an info icon button.
add tooltip/info trust-strip
2Trust Strip Base
Three-column payment trust section with accepted methods, money-back guarantee, and SSL badge.
add trust-strip/base Compliance Trust Strip
Enterprise security section with certification badges (SOC 2, ISO 27001, ISO 42001, GDPR, HIPAA) and three security posture statements — for B2B and enterprise landing pages.
add trust-strip/compliance use-case-matrix
2Role-Based Entry Matrix
Audience-entry matrix for sales, product, marketing, founders, and educators with tailored presentation paths.
add use-case-matrix/role-based-entry Use Case Matrix by Department
Horizontal pill tabs for each department (Customer Service, HR, Legal, Finance, Marketing, IT) revealing a split panel with benefits and a chat/UI mockup.
add use-case-matrix/department-tabs waitlist
1weather-widget
2wedding-invitation
1widget-showcase
1widgets
3Widget Base
Simple stat widget card with title, value, trend indicator, and icon.
add widgets/base Widget Calendar
Week view calendar widget showing day columns with colored event blocks.
add widgets/calendar Widget Quick Actions
2x2 grid of action buttons with icons for common dashboard tasks.
add widgets/quick-actions wishlist
2Wishlist Base
Grid of wishlist product cards with image, title, price, add-to-cart button, and heart remove icon.
add wishlist/base Wishlist Compact
Compact list-view wishlist with thumbnail, price, stock availability badge, and action buttons per row.
add wishlist/compact