# Density Scope

Source: https://lumeo.nativ.sh/components/density-scope

# Density Scope

A cascading wrapper that sets the Lumeo.Density token for every density-aware descendant. It renders no DOM element of its own — just the cascading value around its content.

## When to Use

-   Make a whole page, panel, or sidebar denser or more spacious in one wrapper
-   Render a dense admin grid at `Compact` without editing each component
-   Give a thumb-first mobile or marketing view `Spacious` hit areas

For the full concept — the density scale, per-component overrides, and the list of density-aware components — see the [Density guide](/docs/density).

Preview Code

Scoping a panel

Compact

Save Cancel 

Comfortable (default)

Save Cancel 

Spacious

Save Cancel 

Copy Code

Preview Code

Interactive — switch the scope

CompactComfortableSpacious

Primary Secondary 

Current scope: Comfortable

Copy Code

Preview Code

Per-component override

Inherits Compact Overrides to Spacious

Copy Code

## API Reference

### DensityScope

Property

Type

Default

Description

Value

Density

Comfortable

The density cascaded to every density-aware descendant: `Compact`, `Comfortable`, or `Spacious`.

ChildContent

RenderFragment?

—

The content the density value applies to.

DensityScope renders no wrapper element, so it is safe to place inside `<tbody>`, `<tr>`, `<ul>`, and other contexts that only permit specific children.

## Related

-   [Density guide](/docs/density) — The full density concept and which components are density-aware
-   [Button](/components/button) — A density-aware component with a Density override parameter