Getting started

Create

Tune your framework, color scale, and install mode with a live preview, then copy one command to scaffold a fully wired app. Prefer a written walkthrough? Open the installation guide.

FrameworkScaffolds a fresh app for this stack.

Project name

Package manager

Color scaleDetailed uses every step; compact uses the usual stops. Both token sets always exist.

Control densityControl size. Separate from color scale.

Corner radiusBase --radius for the full scale.

Corner shapeCircular arcs or continuous squircle.

Hover borderDefault hover border on field controls. Override per control if needed.

Install modeImport from the package, or copy component source into your app.

PreviewDark surface

DefaultSecondaryOutline

Enable notifications

Your setup command

Setup command

1
npx --yes -p @default-file/ui df-ui init -t react --name my-app --color-scale detailed

Then use it

Component import

1
import { Button } from "@default-file/ui/components/df-button"

Full React guide

What this does

Create a new React app named my-app
Install @default-file/ui with react, react-dom, and lucide-react
Import df-index.css once at the app root
Set data-df-color-scale="detailed" on <html> (aliases follow this; both --df-*-detailed-* and --df-*-compact-* always exist)
Set data-df-density="cozy" on <html> (cozy is the default control size; comfortable is larger; compact is tighter)
Set data-df-hover-border="on" on <html> (on paints field hover borders; off keeps the resting border)