UI Pattern Library
Learn the UI patterns behind great layouts — hero sections, sidebars, card grids & more. Each with mockdown examples for AI tools.
Content Sections
Hero areas, CTAs, testimonials, and page blocks
``` [◯ AB] Alice Baker [◯ JS] John Smith ``` Characteristics:
Avatar
User avatar component (image, initials) used in lists, nav, and profiles
``` [Primary] [Secondary] [Ghost] [Outline] [🔍] ``` Characteristics: - Clear primary vs secondary emphasis
Button Variants
Common button styles: primary, secondary, ghost, outline, and icon buttons
``` ────────────── [Big Heading] Short supporting sentence that explains value. [Primary CTA] [Secondary Link] ──────────────
Call To Action (CTA)
Prominent CTA sections used to convert visitors with a clear value proposition and primary action
``` [✓ Feature One] Short description about benefit. [✓ Feature Two] Short description about benefit. [✓ Feature Three] Short description about benefit. ```
Feature List
List or grid of product/features with icons and short descriptions
``` ┌────────────────────────────────────────────────────────┐ │ Company Logo Products Resources Legal Social │ │ © 2026 Company Name • Terms • Privacy • Contact │ └────────────────────────────────────────────────────────┘ ```
Footer
Page footer with site links, legal info, and secondary navigation
``` ┌──────────────────────────────────────────────────────────┐ │ │ │ 🚀 Welcome to Acme │ │ │ │ Build better products, faster │
Hero Section
A large, attention-grabbing area at the top of a page with headline, subtext, and call-to-action
``` Stay in the loop. Get product updates and tips. [ Email input __________________ ] [Subscribe] ``` Characteristics:
Newsletter Signup
Compact newsletter or mailing-list signup block used in footers or inline CTAs
``` [New] Introducing our 50% discount for students → [Learn more] [Dismiss] ``` Characteristics: - Short headline with a single action
Promotional Banner
Top-of-page or inline banner for short-lived promotions, offers, or announcements
``` ───────── Metrics ───────── 1M+ Users 99.99% Uptime 4.8/5 Average Rating ```
Stats / Metrics
Highlighted statistics or KPIs that communicate product impact at a glance
``` ──────── Testimonials ──────── "Product X helped our team ship faster." — Jane Doe, Acme Co. [Logo Grid] ```
Testimonial / Social Proof
Quotes, logos, and endorsements that build trust and credibility
``` ┌─────────────────────────┐ │ ✅ Saved successfully │ (x) └─────────────────────────┘ ```
Toast Notifications
Brief, transient messages for system feedback and status updates
Data Display
Tables, card grids, stats, and dashboards
``` ┌───────────────┬───────────────┬───────────────┐ │ │ │ │ │ ┌─────────┐ │ ┌─────────┐ │ ┌─────────┐ │ │ │ [Image] │ │ │ [Image] │ │ │ [Image] │ │ │ │ │ │ │ │ │ │ │ │
Card Grid
Multiple cards arranged in a responsive grid layout, commonly used for displaying collections of items or data
``` ‹ Prev 1 2 3 4 5 Next › ``` Characteristics: - Works with server or client paging
Pagination
Controls to navigate through paged content or lists
``` ┌────────┬────────────┬──────────────┬──────────┐ │ Name │ Status │ Updated │ Actions │ ├────────┼────────────┼──────────────┼──────────┤ │ Item A │ Active │ 2026-02-01 │ [Edit] │ │ Item B │ Disabled │ 2026-01-12 │ [Edit] │
Table
Structured rows and columns for dense tabular data with sorting and pagination
Forms & Input
Sign-in, multi-step, and data entry patterns
Navigation
Menus, sidebars, breadcrumbs, and wayfinding
``` Home / Category / Subcategory / Current Item ``` Characteristics: - Compact, horizontal trail
Breadcrumb
Hierarchical trail showing the user's location within a site or app
``` [•••] ▾ ──────────── Edit Move Duplicate
Dropdown Menu
Contextual list of actions or options that appears on click or hover
``` ┌────────────────────────────────────────────┐ │ [Title] [X] │ │ ────────────────────────────────────────── │ │ │ │ │ │ │ Modal body content goes here. │ │
Modal / Dialog
Overlaid modal dialog for focused tasks, confirmations, and complex forms
``` ┌────────────────────────────────────────────────────────┐ │ [Logo] Home Features Pricing Docs [Sign in] │ │ [Primary CTA] │ └────────────────────────────────────────────────────────┘ ```
Navigation Bar
Top navigation bar (primary site/global nav) with branding and key links
``` ┌─────────────┬──────────────────────────────┐ │ Logo │ │ ├─────────────┤ Main Content │ │ › Dashboard │ │ │ › Analytics │ │
Sidebar Navigation
Vertical navigation menu positioned on the side of a page, typically on the left, containing links and menu items
Layout Structures
Grids, columns, and spatial arrangements
``` ▶ What is the refund policy? — When you request a refund, ... ▶ How do I change my plan? — Go to account settings → Billing. ```
Accordion
Collapsible panels that expand to reveal content, useful for FAQs and dense regions
``` [Overview] [Details] [History] [Settings] ──────────────────────────────────────── Panel content for the currently active tab goes here. ```
Tabs
Tabbed navigation for switching between related content panels
``` ┌────────────────────────────────────────────┐ │ Header │ ├──────────────┬──────────────────────────────┤ │ │ │ │ Sidebar │ Main Content │
Two-Column Layout
Side-by-side content arrangement with a main content area and secondary sidebar or complementary section
Ready to build layouts?
Use these patterns as inspiration and building blocks when creating layouts with AI tools like ChatGPT, v0, or Bolt.new.
Browse Layout Prompts →