Skip to main content
Sync UI provides several accordion styles with minimal animations and theme-aware designs — ensuring smooth performance, clean visuals, and accessibility. Each style below is fully responsive, centered, and takes up the full available width.

Variants

Brutalist

A bold accordion with sharp edges, solid borders, and subtle motion for a distinctive brutalist aesthetic. Features:
  • Sharp rectangular borders
  • Bold box shadows
  • Solid border styling
  • Chevron rotation animation
  • High contrast design

Dashed

A creative accordion with dashed borders that subtly animate into solid lines when expanded. Features:
  • Dashed border styling
  • Chevron right icon with 90° rotation
  • Smooth border transitions
  • Rounded corners
  • Clean, minimalist look

Minimal

A lightweight accordion with thin dividers and subtle hover feedback — perfect for minimalist UIs. Features:
  • Bottom border only
  • Transparent background
  • Hover background effect
  • Chevron right icon rotation
  • Ultra-minimal design

Modern

A clean, modern accordion with rounded corners, soft shadows, and simple plus/minus icons for clarity. Features:
  • Rounded paper wrapper
  • Plus/minus icon toggle
  • Soft shadows
  • Border styling
  • Clear visual hierarchy

Build docs developers (and LLMs) love