Responsive patterns

Responsive patterns define how components adapt across screen sizes. Going beyond simple hide/show, these patterns cover layout shifts, variant changes, touch target adaptations, and component swaps.

Breakpoints

Standard Tailwind breakpoints:

Breakpoint	Min width	Devices	Tailwind
default	0px	Mobile	(no prefix)
sm	640px	Large mobile, small tablet	`sm:`
md	768px	Tablet, small laptop	`md:`
lg	1024px	Laptop, small desktop	`lg:`
xl	1280px	Desktop	`xl:`
2xl	1536px	Large desktop	`2xl:`

Behavior types

Type	Description	Example
layout-shift	Component rearranges layout	Sidebar → bottom nav
variant-change	Component switches variant	Full button → icon-only
size-adaptation	Dimensions change	Larger touch targets on mobile
content-truncation	Content is shortened	Full text → 2-line truncation
component-swap	Different component entirely	Table → card list
visibility	Show / hide elements	Secondary actions hidden

Core patterns

Navigation: sidebar to bottom

Desktop sidebar becomes bottom navigation on mobile.


  {/* Nav items */}

When to use:

Primary app navigation
Apps with 3-5 main sections

When to avoid:

Content-heavy sites
Simple marketing pages

Button: icon collapse

Full button on desktop becomes icon-only on mobile.

When to use:

Toolbars with multiple actions
Compact mobile layouts

When to avoid:

Primary CTAs
Single action that needs a clear label

Button: stack to inline

Buttons stack vertically on mobile, inline on desktop.

When to use:

Form submit / cancel pairs
Confirmation dialogs

Table: cards on mobile

Table displays as cards on mobile.

{/* Desktop table */}
...{rows.map(...)}
  
  


{/* Mobile cards */}

  {rows.map(row => (
    
      {row.name}
      ...
    
  ))}

When to use:

Tables with many columns
Detail-rich data

When to avoid:

Simple 2-3 column tables
Tables requiring side-by-side comparison

Modal: fullscreen on mobile

Modals expand to fullscreen on mobile.


  {/* Dialog content */}

When to use:

Form dialogs
Detail views

When to avoid:

Simple alerts

Card grid: responsive columns


  {cards.map(...)}

Touch target guidelines

Minimum size: 44 × 44 pixels (h-11 w-11)

Element	Mobile classes
Buttons	`min-h-11 min-w-11`
Icon buttons	`h-11 w-11 p-2`
Nav items	`min-h-11 py-3`
List items	`min-h-11 py-2`

// Good — meets touch target


// Bad — too small

Mobile-first development

Always write mobile styles first, then add breakpoint overrides.

// Mobile-first
className="flex flex-col md:flex-row"
className="w-full md:w-1/2"
className="text-base md:text-sm"

// Desktop-first (anti-pattern)
className="hidden md:block"  // Content hidden on mobile
className="flex-row md:flex-col"  // Reversed logic

Common issues

Input zoom on iOS

iOS Safari zooms when input text is smaller than 16px.

// Good — 16px on mobile prevents zoom


// Bad — triggers zoom on mobile

Table overflow

Tables overflow on narrow screens.

// Option 1: horizontal scroll

  

// Option 2: component swap



// Bad — overflows

Spacing differences
Use larger touch-friendly spacing on mobile.
// Good — more padding on mobile
className="p-4 md:p-3"
className="gap-3 md:gap-2"

// Bad — too cramped on touch
className="p-1"
className="gap-1"
MCP tool usage
Get responsive behavior
// Get patterns for navigation
get_responsive_behavior({ component: 'navigation' })

// Get all layout-shift patterns
get_responsive_behavior({ behaviorType: 'layout-shift' })

// Include breakpoint definitions and rules
get_responsive_behavior({
  component: 'button',
  includeBreakpoints: true,
  includeRules: true
})
Validate implementation
validate_responsive_pattern({
  code: ''
})
// Returns: warning about small touch target

validate_responsive_pattern({
  code: '...'
})
// Returns: warning about desktop-first pattern
Validation checks











Issue Severity Fix
Small touch target Warning Use min-h-11 min-w-11
Desktop-first hiding Warning Use mobile-first approach
Small input text Warning Use text-base md:text-sm
Table without scroll Warning Add overflow-x-auto or card swap
Fixed width without responsive Warning Add breakpoint variants
Decision guide
Building component?
├── Does layout change at breakpoints?
│   └── Yes → Use layout-shift pattern
├── Does variant change at breakpoints?
│   └── Yes → Use variant-change pattern
├── Are there touch targets?
│   └── Yes → Ensure 44px minimum on mobile
├── Is it a table with many columns?
│   └── Yes → Use component-swap (cards) or scroll
└── Is there text that might be too long?
    └── Yes → Consider content-truncation
Was this page helpful?

Issue	Severity	Fix
Small touch target	Warning	Use `min-h-11 min-w-11`
Desktop-first hiding	Warning	Use mobile-first approach
Small input text	Warning	Use `text-base md:text-sm`
Table without scroll	Warning	Add `overflow-x-auto` or card swap
Fixed width without responsive	Warning	Add breakpoint variants