Getting started
Default File UI is a design system for breaking the rules, built to feel different on purpose. Free tools and a 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
27 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.
The kit stays coherent when you treat it like product code, not a sealed black box.
Take the source
Pull components into your repo and edit them like product code, or import from the package when a dependency fits better.
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.
Learn in place
Each component page is a workbench: try the demo, read the API, grab related pieces, and install without leaving the docs.
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.