Hero — Announcement rail and wide pitch
Layout tags: sidebar,numbers,spacious
339 patterns, free to copy
Layout patterns for your next page.
Neutral wireframes with copy-paste code and an AI brief. Restyle each pattern in your own design system.
Or connect your agent:
claude mcp add patternbook -- npx -y patternbook-mcp- React + Tailwind v4
- HTML + CSS
- AI brief
All patterns
339 patterns
Composition
Arrangement
Content
Density
Hero — Bento tiles
Layout tags: bento,media,compact
Hero — Centred search bar
Layout tags: centered,form,row
Hero — Centred with email form
Layout tags: centered,form,spacious
Hero — Centred with media below
Layout tags: centered,stacked,media
Hero — Editorial headline and paired media
Layout tags: asymmetric,media,spacious
Hero — Headline over wide media band
Layout tags: asymmetric,media,spacious
Hero — Headline with stats row
Layout tags: asymmetric,numbers,grid
Hero — Invitation with a request form
Layout tags: asymmetric,form,list
Hero — Pitch beside a benefit checklist
Layout tags: asymmetric,list,spacious
Hero — Split with image
Layout tags: split,media,spacious
Hero — Text hero above an endorsement band
Layout tags: stacked,row,spacious
Hero — Text over full-bleed media
Layout tags: layered,media,centered
Hero — Video with an explanatory sidebar
Layout tags: asymmetric,media,sidebar
Navbar — Announcement, search and categories
Layout tags: stacked,row,form
Navbar — App header with tabs
Layout tags: stacked,row,compact
Navbar — Brand beside stacked navigation
Layout tags: asymmetric,row,compact
Navbar — Brand row and category tiles
Layout tags: grid,icons,compact
Navbar — Breadcrumb and section toolbar
Layout tags: row,layered,compact
Navbar — Centered brand with three zones
Layout tags: row,centered,compact
Navbar — Centred masthead
Layout tags: centered,stacked,row
Navbar — Dropdown menus
Layout tags: row,layered,list
Navbar — Floating pill
Layout tags: layered,row,centered
Navbar — Link index with callout
Layout tags: asymmetric,grid,list
Navbar — Logo, links and actions
Layout tags: row,compact
Navbar — Mega menu panel
Layout tags: layered,grid,media
Navbar — Open two-column menu panel
Layout tags: split,list,spacious
Navbar — Workspace sidebar rail
Layout tags: sidebar,list,compact
Features — Accordion beside media
Layout tags: asymmetric,list,media
Features — Alternating media rows
Layout tags: split,media,spacious
Features — Before and after panels
Layout tags: split,list,icons
Features — Bento grid
Layout tags: bento,media,icons
Features — Capability scope matrix
Layout tags: table,compact
Features — Expandable capability cards
Layout tags: grid,list,compact
Features — Icon grid
Layout tags: centered,grid,icons
Features — Intro beside numbered list
Layout tags: asymmetric,list,numbers
Features — List beside media
Layout tags: split,media,icons
Features — Numbered capability ledger
Layout tags: list,row,numbers
Features — Numbered steps
Layout tags: grid,numbers
Features — Paired media and shared capabilities
Layout tags: split,media,row
Features — Two grouped capability checklists
Layout tags: split,list,icons
Features — Wide showcase with three captions
Layout tags: stacked,media,grid
Pricing — Annual price with a payment schedule
Layout tags: split,numbers,list
Pricing — Base plan with optional additions
Layout tags: stacked,grid,numbers
Pricing — Comparison table
Layout tags: table,numbers,compact
Pricing — Free access and a custom pricing form
Layout tags: asymmetric,form,numbers
Pricing — Intro beside two plans
Layout tags: asymmetric,grid,numbers
Pricing — License rows with shared inclusions
Layout tags: sidebar,form,numbers
Pricing — Option picker
Layout tags: asymmetric,form,numbers
Pricing — Price list rows
Layout tags: stacked,list,numbers
Pricing — Rates beside image
Layout tags: split,media,list
Pricing — Seat cost and first payment breakdown
Layout tags: asymmetric,numbers,list
Pricing — Single plan with benefits
Layout tags: asymmetric,list,numbers
Pricing — Three tiers, middle highlighted
Layout tags: centered,grid,numbers
Pricing — Two plans
Layout tags: centered,split,numbers
Pricing — Usage bands with an example bill
Layout tags: asymmetric,table,numbers
Testimonials — Audience and outcome table
Layout tags: table,numbers,compact
Testimonials — Before and after columns
Layout tags: split,spacious
Testimonials — Card grid
Layout tags: centered,grid
Testimonials — Featured quote mosaic
Layout tags: bento,asymmetric
Testimonials — Lead quote over a supporting strip
Layout tags: stacked,row,spacious
Testimonials — Masonry wall
Layout tags: grid,compact
Testimonials — Quote timeline
Layout tags: sidebar,list,spacious
Testimonials — Quote with metrics
Layout tags: split,numbers
Testimonials — Quotes beside image
Layout tags: asymmetric,media
Testimonials — Rating distribution beside quotes
Layout tags: sidebar,numbers,list
Testimonials — Rating summary and review list
Layout tags: list,numbers,compact
Testimonials — Scrolling card row
Layout tags: stacked,row
Testimonials — Single large quote
Layout tags: centered,spacious
Testimonials — Video stories with transcripts
Layout tags: grid,media,spacious
Call to action — Audience choice cards
Layout tags: split,list,spacious
Call to action — Card with image
Layout tags: split,media
Call to action — Centred with actions
Layout tags: centered,stacked,spacious
Call to action — Contact form
Layout tags: split,form
Call to action — Contact route directory
Layout tags: list,icons,compact
Call to action — Dated detail card
Layout tags: asymmetric,numbers
Call to action — Detail card over media
Layout tags: layered,media,asymmetric
Call to action — Email sign-up
Layout tags: split,form
Call to action — Inline banner
Layout tags: row,compact
Call to action — Numbered steps
Layout tags: split,list,numbers
Call to action — Price and inclusions strip
Layout tags: row,numbers,list
Call to action — Readiness checklist close
Layout tags: centered,list,icons
Call to action — Resource download columns
Layout tags: asymmetric,media,list
Call to action — Session time options
Layout tags: centered,form,grid
FAQ — Accordion
Layout tags: centered,list,spacious
FAQ — Accordion beside image
Layout tags: asymmetric,media,list
FAQ — Accordion beside intro
Layout tags: asymmetric,list
FAQ — Answer spotlight with contents
Layout tags: sidebar,spacious
FAQ — Category sidebar
Layout tags: sidebar,list
FAQ — Comparison answer table
Layout tags: table,compact
FAQ — Decision branches
Layout tags: split,list
FAQ — Glossary answer rows
Layout tags: list,sidebar,compact
FAQ — Grouped topic cards
Layout tags: split,list
FAQ — Nested topic disclosures
Layout tags: stacked,list,compact
FAQ — Open answer grid
Layout tags: grid,icons
FAQ — Question and answer rows
Layout tags: asymmetric,list
FAQ — Question index over answers
Layout tags: stacked,list,spacious
FAQ — Two-column accordion
Layout tags: grid,list,compact
Footer — Accordion sitemap
Layout tags: stacked,list,compact
Footer — Address beside a map
Layout tags: asymmetric,media,spacious
Footer — Brand and link columns
Layout tags: asymmetric,grid,compact
Footer — Centred links
Layout tags: centered,row,compact
Footer — Closing call to action band
Layout tags: centered,grid
Footer — Contact, hours and directory
Layout tags: grid,list,compact
Footer — Directory rows with descriptions
Layout tags: list,row,compact
Footer — Document register
Layout tags: table,compact
Footer — Large numbered links
Layout tags: asymmetric,list,numbers
Footer — Newsletter above links
Layout tags: stacked,form,grid
Footer — Oversized wordmark
Layout tags: stacked,grid,spacious
Footer — Single row
Layout tags: row,compact
Footer — Two audience directories
Layout tags: split,list,spacious
Footer — Utility rail beside directory
Layout tags: sidebar,form,grid
Profile cards — Biography above a portrait footer
Layout tags: stacked,media,compact
Profile cards — Centred with stats row
Layout tags: stacked,centered,numbers
Profile cards — Cover banner with overlapping avatar
Layout tags: stacked,layered,media
Profile cards — Expandable details
Layout tags: stacked,compact
Profile cards — Identity and credential timeline
Layout tags: stacked,list,compact
Profile cards — Identity and featured project
Layout tags: stacked,media,compact
Profile cards — Identity beside a vertical metric rail
Layout tags: sidebar,numbers,compact
Profile cards — Identity row with details list
Layout tags: stacked,list,compact
Profile cards — Identity with a contact grid
Layout tags: stacked,grid,compact
Profile cards — Identity with available time slots
Layout tags: stacked,form,compact
Profile cards — Portrait column beside text
Layout tags: asymmetric,media
Profile cards — Row with follow toggle
Layout tags: row,compact
Profile cards — Status badge with skill tags
Layout tags: stacked,compact
Team — Centred header with portrait grid
Layout tags: centered,grid,media
Team — Chronological roster with avatar ends
Layout tags: list,numbers,spacious
Team — Department columns with compact rosters
Layout tags: grid,list,compact
Team — Expandable biography list
Layout tags: stacked,list,compact
Team — Featured lead with roster
Layout tags: asymmetric,list,media
Team — Group portrait and individual contacts
Layout tags: asymmetric,media,grid
Team — Groups with label column
Layout tags: sidebar,grid,media
Team — Intro beside roster list
Layout tags: split,list,compact
Team — Portrait and biography rows
Layout tags: asymmetric,list,media,spacious
Team — Team roster as a contact table
Layout tags: table,list,compact
Team — Tile directory
Layout tags: grid,compact
Team — Two horizontal profile spotlights
Layout tags: split,media,spacious
Team — Working principles with identity footers
Layout tags: grid,stacked,spacious
Product cards — Compact product order summary
Layout tags: stacked,media,numbers
Product cards — Digital product with included files
Layout tags: stacked,list,icons
Product cards — Featured product and related list
Layout tags: asymmetric,media,list
Product cards — Four-column product grid
Layout tags: grid,media
Product cards — Horizontal with media column
Layout tags: asymmetric,media,compact
Product cards — Image with overlaid badge and actions
Layout tags: layered,media
Product cards — Image with price footer
Layout tags: stacked,media
Product cards — Paired product bundle
Layout tags: split,media,numbers
Product cards — Specs row with price footer
Layout tags: stacked,numbers,compact
Product cards — Three-view gallery card
Layout tags: asymmetric,media,compact
Product cards — Thumbnail and expandable specifications
Layout tags: stacked,media,compact
Product cards — Variant picker
Layout tags: stacked,form,media
Stat cards — Activity calendar
Layout tags: grid,numbers,compact
Stat cards — Benchmark range
Layout tags: numbers,compact
Stat cards — Figure with bar chart
Layout tags: stacked,numbers
Stat cards — Figure with change and link
Layout tags: stacked,numbers,compact
Stat cards — Icon, label and value row
Layout tags: row,icons,numbers,compact
Stat cards — Paired reporting periods
Layout tags: split,numbers,compact
Stat cards — Progress toward a target
Layout tags: stacked,numbers
Stat cards — Ranked contributor list
Layout tags: list,numbers,compact
Stat cards — Ring gauge beside summary
Layout tags: split,numbers
Stat cards — Stage funnel
Layout tags: list,numbers,compact
Stat cards — Three metrics in one panel
Layout tags: grid,numbers,compact
Stat cards — Threshold status rail
Layout tags: sidebar,numbers,compact
Stat cards — Total with breakdown rows
Layout tags: list,numbers,compact
Testimonial cards — Attribution rail beside quote
Layout tags: sidebar,compact
Testimonial cards — Before and after statements
Layout tags: stacked,compact
Testimonial cards — Centred quote with logo
Layout tags: centered,spacious
Testimonial cards — Criteria scores with quote
Layout tags: list,numbers,compact
Testimonial cards — Outcome figure above quote
Layout tags: stacked,numbers
Testimonial cards — Portrait column beside quote
Layout tags: asymmetric,media
Testimonial cards — Quote and source citation
Layout tags: sidebar,compact
Testimonial cards — Quote with author footer
Layout tags: stacked,spacious
Testimonial cards — Social post
Layout tags: stacked,compact
Testimonial cards — Speech bubble with author below
Layout tags: stacked,layered
Testimonial cards — Star rating review
Layout tags: stacked,icons,compact
Testimonial cards — Two connected voices
Layout tags: stacked,list,compact
Testimonial cards — Video with transcript excerpt
Layout tags: stacked,media,compact
Blog cards — Abstract and citation
Layout tags: stacked,sidebar,compact
Blog cards — Article contents card
Layout tags: stacked,list,compact
Blog cards — Cover image above text
Layout tags: stacked,media
Blog cards — Date column beside text
Layout tags: asymmetric,numbers,compact
Blog cards — Document preview and report
Layout tags: sidebar,media,compact
Blog cards — Featured post with list
Layout tags: asymmetric,list,media
Blog cards — Issue editorial
Layout tags: stacked,numbers,compact
Blog cards — Media column beside text
Layout tags: asymmetric,media
Blog cards — Ordered article series
Layout tags: list,numbers,compact
Blog cards — Paired article digest
Layout tags: split,compact
Blog cards — Text only with author header
Layout tags: stacked,compact
Blog cards — Text over full-bleed media
Layout tags: layered,media
Blog cards — Text with thumbnail at right
Layout tags: asymmetric,media,compact
Buttons — Bulk selection bar
Layout tags: row,split,numbers,compact
Buttons — Command tiles with descriptions
Layout tags: grid,icons,compact
Buttons — Confirmation footer
Layout tags: stacked,split,compact
Buttons — Icon toolbar with primary action
Layout tags: row,icons,compact
Buttons — Inline actions below item rows
Layout tags: list,stacked,compact
Buttons — Joined button groups
Layout tags: row,compact
Buttons — Previous and next destination cards
Layout tags: split,row,compact
Buttons — Primary, secondary and tertiary
Layout tags: grid,icons,compact
Buttons — Sizes and icon placement
Layout tags: row,icons,compact
Buttons — Split button with menu
Layout tags: row,layered,compact
Buttons — Stacked full-width actions
Layout tags: stacked,compact
Buttons — Step navigation with progress
Layout tags: stacked,row,numbers,compact
Inputs — Date range with a shared note
Layout tags: split,form,compact
Inputs — Dimensions with proportions and units
Layout tags: split,form,numbers,compact
Inputs — Field grid with mixed widths
Layout tags: grid,form,compact
Inputs — Label, hint and error states
Layout tags: stacked,form,compact
Inputs — Labels inside tall fields
Layout tags: stacked,form,compact
Inputs — Leading and trailing addons
Layout tags: stacked,form,icons,compact
Inputs — One-time code row
Layout tags: row,form,compact
Inputs — Range with endpoints and an exact field
Layout tags: row,form,numbers,compact
Inputs — Search with scope filters
Layout tags: stacked,form,icons,compact
Inputs — Textarea with counter and action bar
Layout tags: stacked,form,compact
Inputs — URL field with a linked-page preview
Layout tags: stacked,form,icons,compact
Inputs — Upload zone with a native file field
Layout tags: centered,stacked,form,icons,compact
Badges — Access badges in a comparison table
Layout tags: table,compact
Badges — Capability badges in a small grid
Layout tags: grid,icons,compact
Badges — Counts and dot indicators
Layout tags: layered,numbers,icons,compact
Badges — Document header with provenance
Layout tags: split,stacked,compact
Badges — Featured credential with tags
Layout tags: stacked,numbers,compact
Badges — Grouped totals with state labels
Layout tags: row,numbers,compact
Badges — Joined label and value tokens
Layout tags: grid,row,compact
Badges — Labelled tag groups
Layout tags: stacked,compact
Badges — Milestone status strip
Layout tags: row,numbers,compact
Badges — Removable filter chips
Layout tags: row,compact
Badges — Status in list rows
Layout tags: list,compact
Badges — Styles, sizes and indicators
Layout tags: row,compact
Toggles — Checkbox group with nested options
Layout tags: stacked,form,compact
Toggles — Checkbox tile grid
Layout tags: grid,form,compact
Toggles — Checklist rows with descriptions
Layout tags: list,form,compact
Toggles — Consent row with a separate explanation
Layout tags: stacked,form,compact
Toggles — Enabled mode with a summary preview
Layout tags: split,stacked,form,compact
Toggles — Icon radio choice grid
Layout tags: grid,icons,form,compact
Toggles — Permission checkbox matrix
Layout tags: table,form,compact
Toggles — Radio cards
Layout tags: grid,form,numbers,compact
Toggles — Segmented controls and toggle buttons
Layout tags: row,compact
Toggles — Settings list with switches
Layout tags: list,form,compact
Toggles — Switch states and sizes
Layout tags: grid,compact
Toggles — Switch with dependent delivery options
Layout tags: stacked,form,compact
Tabs — Bottom bar with icons
Layout tags: stacked,icons,media,compact
Tabs — Centered period choices and a metric
Layout tags: centered,stacked,numbers,compact
Tabs — Counted links with More menu
Layout tags: row,layered,numbers,compact
Tabs — Counted views beneath a toolbar
Layout tags: stacked,row,numbers,compact
Tabs — Disclosure selector that becomes a tab row
Layout tags: stacked,layered,compact
Tabs — Enclosed tabs on a bordered panel
Layout tags: row,layered,compact
Tabs — Grouped view choices in two columns
Layout tags: grid,stacked,compact
Tabs — Numbered stage views
Layout tags: row,stacked,numbers,compact
Tabs — Segmented pills with panel
Layout tags: row,list,compact
Tabs — Selector cards above a content panel
Layout tags: grid,stacked,icons,compact
Tabs — Underline with panels
Layout tags: row,compact
Tabs — Vertical rail with panel
Layout tags: sidebar,icons,compact
Dropdowns — Account menu with profile header
Layout tags: layered,icons,compact
Dropdowns — Action menu with sections and shortcuts
Layout tags: layered,icons,compact
Dropdowns — Breadcrumb branch disclosure
Layout tags: layered,list,compact
Dropdowns — Disclosure with paired native settings
Layout tags: layered,stacked,form,compact
Dropdowns — Filter menu with checkboxes
Layout tags: layered,form,compact
Dropdowns — Navigation flyout with descriptions
Layout tags: layered,icons,list
Dropdowns — Nested destination disclosures
Layout tags: layered,list,compact
Dropdowns — Picker with option tiles
Layout tags: layered,grid,form,compact
Dropdowns — Select menu with descriptions
Layout tags: layered,form,compact
Dropdowns — Sort field and direction panel
Layout tags: layered,form,compact
Dropdowns — Two-column commands and resources
Layout tags: layered,split,list,compact
Dropdowns — Workspace switcher with a create action
Layout tags: layered,list,form,compact
Login — Account picker with credential pane
Layout tags: split,list,form
Login — Card over full-bleed media
Layout tags: layered,media,form
Login — Centred card
Layout tags: centered,form,compact
Login — Context column beside form
Layout tags: asymmetric,list,form
Login — Inline credential row
Layout tags: stacked,row,form,compact
Login — Organization domain gateway
Layout tags: stacked,row,form
Login — Passkey action with fallback disclosure
Layout tags: split,stacked,form
Login — Passwordless email link
Layout tags: centered,form,icons,spacious
Login — Pending device approval with session details
Layout tags: split,list,compact
Login — Recovery steps beside email form
Layout tags: split,list,form
Login — Single sign-on first
Layout tags: centered,list,form
Login — Split with media panel
Layout tags: split,media,form
Login — Verification code with delivery rail
Layout tags: split,row,form
Sign-up — Accept an invitation
Layout tags: centered,form,compact
Sign-up — Benefits panel beside form
Layout tags: split,form,icons
Sign-up — Centred card with providers
Layout tags: centered,form,compact
Sign-up — Consent checklist with account strip
Layout tags: stacked,list,form
Sign-up — Form with next-steps aside
Layout tags: asymmetric,form,list
Sign-up — Interest choices with email footer
Layout tags: grid,stacked,form
Sign-up — Multi-step with progress
Layout tags: stacked,row,form
Sign-up — Plan choice then details
Layout tags: stacked,grid,form,numbers
Sign-up — Profile identity above credential panel
Layout tags: stacked,row,form
Sign-up — Purpose rail beside credentials
Layout tags: sidebar,list,form
Sign-up — Referral entry with benefit summary
Layout tags: split,form,compact
Sign-up — Waitlist with inline email
Layout tags: centered,row,form,spacious
Sign-up — Workspace form with setup summary
Layout tags: split,form,list
Settings — Active sessions with security footer
Layout tags: stacked,list,compact
Settings — Billing cards and invoices
Layout tags: asymmetric,numbers,table
Settings — Danger zone
Layout tags: stacked,list,form
Settings — Described rows
Layout tags: asymmetric,list,form
Settings — Grouped keyboard shortcuts
Layout tags: grid,list,compact
Settings — Integration directory with access scopes
Layout tags: grid,form,compact
Settings — Item list with detail panel
Layout tags: sidebar,list,form
Settings — Live preview beside controls
Layout tags: split,media,form
Settings — Locale choices with format examples
Layout tags: split,form,compact
Settings — Notification channel matrix
Layout tags: split,table,form
Settings — Profile editor with identity rail
Layout tags: sidebar,form,stacked
Settings — Sidebar navigation with sections
Layout tags: sidebar,form,icons
Settings — Stacked cards with save rows
Layout tags: stacked,form,compact
Data table — Audit log with date bands
Layout tags: table,list,compact
Data table — Dense table with priority columns
Layout tags: stacked,table,numbers,compact
Data table — Expandable rows
Layout tags: stacked,table,list
Data table — Filter sidebar
Layout tags: sidebar,table,form
Data table — Grouped table sections
Layout tags: stacked,table,numbers
Data table — Inline editable record rows
Layout tags: table,form,compact
Data table — Line items with totals footer
Layout tags: stacked,table,numbers
Data table — People-by-day availability grid
Layout tags: table,grid,compact
Data table — Row selection with bulk actions
Layout tags: stacked,table,form,compact
Data table — Rows become cards on mobile
Layout tags: stacked,table,list
Data table — Side-by-side record comparison
Layout tags: table,split,compact
Data table — Summary metrics above table
Layout tags: stacked,numbers,table
Data table — Toolbar, tabs and pagination
Layout tags: stacked,table,compact
Empty state — Access required
Layout tags: stacked,icons,compact
Empty state — Centred icon with action
Layout tags: centered,icons,compact
Empty state — Empty archive with retention summary
Layout tags: split,compact,list
Empty state — Empty collection beside example gallery
Layout tags: split,grid,media
Empty state — Empty workspace with starting paths
Layout tags: grid,stacked,spacious
Empty state — Error with retry
Layout tags: stacked,icons,compact
Empty state — First-run checklist
Layout tags: stacked,list,compact
Empty state — Illustration beside text
Layout tags: asymmetric,media,compact
Empty state — Import area with format guidance
Layout tags: split,form,spacious
Empty state — Maintenance notice with time window
Layout tags: centered,row,numbers
Empty state — No results with suggestions
Layout tags: stacked,list,icons
Empty state — Offline notice with saved-content rail
Layout tags: split,list,compact
Empty state — Preview rows above action
Layout tags: stacked,list,compact
Dashboard — Activity feed
Layout tags: stacked,list,compact
Dashboard — App shell with sidebar
Layout tags: sidebar,grid,numbers
Dashboard — Bento overview
Layout tags: bento,numbers,media
Dashboard — Calendar beside daily agenda
Layout tags: sidebar,list,numbers
Dashboard — Goal progress with review sidebar
Layout tags: sidebar,list,numbers
Dashboard — KPI row, chart and ranked list
Layout tags: asymmetric,grid,numbers
Dashboard — Main list with summary rail
Layout tags: sidebar,list,numbers
Dashboard — Request inbox with detail pane
Layout tags: split,list,compact
Dashboard — Resource allocation ledger
Layout tags: stacked,list,numbers
Dashboard — Sequential conversion funnel
Layout tags: grid,numbers,compact
Dashboard — Status tile board
Layout tags: stacked,grid,numbers,compact
Dashboard — Status-column work board
Layout tags: grid,list,compact
Dashboard — Two panels, trend and list
Layout tags: split,numbers,list