Density controls the spacing and sizing of all components globally. Set data-density on your root element:
html
Highlighting code...
| Value | Padding | Use case |
|---|---|---|
comfortable | Default | General applications, dashboards |
compact | Reduced | Data-heavy UIs, power users |
cozy | Increased | Touch targets, consumer apps |
The ThemeSwitcherToggle component exposes density switching when mode="full". You can also set it programmatically via the vibe store
from @rokkit/app:
import { vibe } from '@rokkit/app'
vibe.density = 'compact'