Density
ExamplesDocsBlogPricingContact
IntroductionInstallationConfigurationToolsAgents.mdSoonCode reviewSoonCoverageSoonLintingllms.txtSoonMCP serverSoonSkillsSoonTestsSoonVisual debug modeFoundationsSizeColorEmphasisComponentsAccordionAlertAlertDialogAreaChartAvatarBadgeBarChartBreadcrumbButtonButtonGroupChatInputChatMessageCheckboxCheckboxGroupCloseComboboxCommandContentContextMenuDialogDrawerFadeFieldFormActionsHeadingHistogramIndicatorInputLabelLegendLineChartListItemMacTrafficLightsNavigationNumberAnimationPaginationPanelPieChartPopoverPreviewCardProgressRadioGroupResizeRailScatterPlotScrollAreaSelectSeparatorSkeletonSliderSpinnerStatSwitchTableTabsTextAnimationTextareaTimelineToastToggleToggleGroupToolbarTooltipTreeViewWindowAdvancedBeta

Foundations

Use Density component props to establish the visual language of your interface.

Color↗Semantic color across Density components.
Size↗Shared component scale.
Emphasis↗Visual hierarchy for component actions.
PreviousVisual debug modeNextSize
Density

The modern design toolkit for data-heavy professional tools

Docs

IntroductionToolsComponentsFoundationsAdvanced

Examples

AI chatCode editor (IDE)Metrics dashboardMore...

Product

PricingContact

© 2026 Directed Works LLC