Grid Density Toggle

ProNew

A compact, default and comfortable row density switch built as a radio group with arrow key navigation, paired with row heights for the grid.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Use it in the grid toolbar so people can fit more rows or get more breathing room. Persist the choice per user.


pnpm dlx shadcn@latest add @tealmac-pro/grid-density-toggle

Prop	Type	Description
`value`	`GridDensity`	compact, default or comfortable.
`onValueChange`	`(value) => void`	Called on click or arrow key.
`DENSITY_HEIGHT`	`Record<GridDensity, number>`	28, 36 and 48 px, exported from the kit.

A radiogroup named Row density with one tab stop; Left and Right arrows move and select, wrapping at the ends.
The selected option is shown by background and weight and by aria-checked.