Architecture

How Density works: packages and options for developers.

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.

React components

Density includes ready-made React components that you can use as-is or adapt to your needs. 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.

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.

Tooling

Finally, 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.