Density

Configuration

CSS properties

Configure Density styles to match your brand with theme --dn-* CSS properties. Set a property on an ancestor to customize the Density styles in that subtree. See Density Modern on GitHub for the full list of supported properties.

For example, a parent can give primary buttons one color while a nested part of the interface uses its own primary-button color:

.workspace {
--dn-color-clickable-primary-normal-background: #0f766e;
--dn-color-clickable-primary-normal-border: #0f766e;
--dn-color-clickable-primary-hover-background: #115e59;
--dn-color-clickable-primary-hover-border: #115e59;
--dn-color-clickable-primary-active-background: #134e4a;
--dn-color-clickable-primary-active-border: #134e4a;
}

.workspace .billing-panel {
--dn-color-clickable-primary-normal-background: #7c3aed;
--dn-color-clickable-primary-normal-border: #7c3aed;
--dn-color-clickable-primary-hover-background: #6d28d9;
--dn-color-clickable-primary-hover-border: #6d28d9;
--dn-color-clickable-primary-active-background: #5b21b6;
--dn-color-clickable-primary-active-border: #5b21b6;
}

Building components

Density is a zero-runtime, namespaced CSS library whose data-attribute DOM API lets any HTML, framework, or headless component share its styling.

Use the attributes directly when building your own components:

<article data-dn-depth="2" data-dn-border="border" data-dn-radius="md">
<h2>Trial ending soon</h2>
<p>Choose a plan to keep your workspace active.</p>
<button data-dn-clickable data-dn-emphasis="primary">
  Choose a plan
</button>
</article>