React Button Group - View Switcher
View mode switcher button group for toggling between grid, list, and card layouts in content interfaces
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Layout affects findability—view controls empower content discovery. This React component combines shadcn/ui's Button and ButtonGroup components with Lucide React's GridIcon, ListIcon, and LayoutGridIcon for layout mode selection with stateful variant toggling. Built on Radix UI with variant switching between default (active) and outline (inactive) states using size="sm" for compact toolbar controls, the pattern delivers view mode switchers with clear layout indication. Perfect for file managers like Finder or Explorer offering multiple view modes, e-commerce platforms showing products as grid or list, media galleries toggling between thumbnail views, or any content interface where layout should adapt to user preference—button groups unify view options, variant switching communicates active mode, icon recognition accelerates layout identification.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/button-group-interactive-1.jsonnpx shadcn@latest add https://www.shadcn.io/registry/button-group-interactive-1.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/button-group-interactive-1.jsonbunx shadcn@latest add https://www.shadcn.io/registry/button-group-interactive-1.jsonRelated patterns you will also like
Chart Controls
Visualization type switchers
Segmented Control
Tab-like navigation
Toggle Group
Segmented toggle controls
Outline Button
Border-style button variant
Data Table
List view layout
Card Component
Card view layout