Shadcn.io is not affiliated with official shadcn/ui
Density Controls
Display density selector button group for adjusting content spacing and information density in data tables and lists
Information density affects both readability and capacity—density controls balance competing needs. This React component combines shadcn/ui's Button and ButtonGroup components for display density selection with stateful variant toggling between descriptive (Compact, Comfortable, Spacious) and size-based (XS, S, M, L, XL) density labels. Built on Radix UI with variant switching between default (active) and outline (inactive) states using size="sm" for compact settings controls, the pattern delivers content density switchers with clear active state. Perfect for data tables enabling row height adjustment, email clients offering message list density, file managers showing variable item spacing, or any content-heavy interface where users need density control—button groups unify density options, variant switching communicates selection, descriptive labels clarify spacing impact.
Density Controls preview
Installation
Related Components
Chart Controls
Visualization type switchers
Timeline Controls
Time period selectors
Toggle Group
Segmented toggle controls
Data Table
Tabular data display
Outline Button
Border-style button variant
Basic Button Group
Simple grouped buttons
FAQ
Was this page helpful?
Sign in to leave feedback.