Introduction

Welcome to Density!

Density is a web-based design toolkit made for data-heavy, professional-class software applications. Density is designed to support packing large amounts of data into small spaces–without sacrificing clarity or performance. Our goal is to help companies with complex products ship quickly, with best-in-class design quality.

Density is designed to be deeply flexible and extensible. The architecture lets you and your agents use fully baked components easily, or build completely custom components that feel native to your platform.

Density was informed by my 20 years of experience as a YC technical founder and builder of complex data systems in AI, agriculture, climate, healthcare, finance, and industrial applications.

Here are some things that make Density unique.

Visual hierarchy

Density supports six different layers of button emphasis, for example, compared to just primary and secondary options in many design systems.

This means designers have a lot more room to draw attention to the critical parts of the UI–and add plenty more data–without confusing users.

Component library

Density includes ready-made React components that you can use as-is or adapt to your needs. Its components are for products, not marketing sites, with a focus on data visualization, tabular data, and 3D canvas tools.

Like shadcn/ui, you can easily copy and customize these components to match your needs.

import { Button } from "density-base-ui";

export default function ButtonExample() {
  return <Button type="button">Save changes</Button>;
}

Density components are more opinionated than libraries like shadcn/ui. They provide a simpler, single-component API rather than forcing authors to use composition, which enforces consistency and accessibility at a higher level.

Density components are built on open source libraries such as Base UI and React Aria, so applications have enterprise-grade accessibility, keyboard navigability, and render performance built in. We use peer dependencies so you can upgrade those packages independently and receive their security updates immediately.

AI tooling

Density comes prepackaged with a modern stack of AI harness tools that allow coding agents to build and edit Density applications. These skills can install and update the Density library, convert existing UI to Density components, and create new UI with Density from within your agent.

Advanced: Density core

Under the hood, Density components use the Density CSS for styling.

This is a lower-level, zero-runtime, completely namespaced CSS library with a data-attribute DOM API. You can use it with any headless library, any JS framework, or with vanilla HTML. It’s just CSS.

import "density-css";

Use Density core to build your own components, or style any element to look like part of your UI ad hoc.

You can created complex, novel UI without losing visual consistency with the rest of your app. Density is unopinionated about your HTML and JavaScript, giving you complete flexibility to create custom UIs that feel consistent with the rest of your app.

Data visualization

Density is designed specifically to visualize high amounts of complex data.