Getting started, v0.35.0
Default File UI is a design system for breaking the rules, built to feel different on purpose. The Studio tools and this copy source React kit share one token language so you can move from principle to pixel without switching aesthetic halfway through.
Soft midtone kits train every product to look the same. We refuse that default. Default File UI exists so your controls, docks, and type effects can look owned: sharp where it should be sharp, quiet where it should be quiet, and honest about being a working interface.
The docs are not a brochure. They are the system in use. Live demos, color scales, a create studio, and install guides that leave you inside a wired project instead of a blank checklist.
Open any door and you are still in the same house: tokens, components, and install paths that agree with each other.
Live catalogue
60 components with demos, variants, API notes, and the exact registry path to add each one.
Color language
Compact and detailed neutral scales, semantic roles, and a palette browser that shows the tokens your UI actually resolves.
Typography
A type studio for size, family, weight, tracking, and leading, plus recipes and an API reference for every token.
Foundation layer
CSS layers, tokens, hooks, and the cn utility. Start here when you want the kit wired into your project as source you control.
Create studio
Choose a framework, color scale, and install mode with a live preview, then leave with one command that scaffolds a wired app.
Framework guides
Written paths for Next.js, Vite, React Router, TanStack Start, Astro, Laravel, and plain React so setup matches how you already ship.
Agents and MCP
A CLI and stdio MCP server that list components, return full prop tables, check coverage, and install items. Bundled agent skills teach the same rules the kit is built on.
Customizations are not overwritten by a kit release. You upgrade only when you choose to.
Copied files become yours
When you run df-ui add, component files land in your app. Edit them as product code. A new kit release does not overwrite those files unless you choose to upgrade with df-ui add <item> --force.
Package updates stay optional
If you import from @default-file/ui instead, components stay in the dependency. Your app files are never rewritten. You receive kit changes only when you upgrade that package.
Stay on the tokens
Color, type, radius, spacing, and motion come from Default File tokens. New chrome should speak that same language.
Build for tools
Controls, overlays, toolbars, and text effects are shaped for product surfaces and working interfaces, not soft marketing defaults.
The design system uses semver. This docs site tracks v0.35.0. When you run df-ui init, that version is written into df.json. Use df-ui version for the release, and df-ui info to compare it with your project.
Start with Create if you want a command. Start with Installation if you want the written path. Start with the catalogue when you already know what to grab.