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 fills every step; compact snaps to the usual stops.
Corner radiusSets the base --radius token; the whole xxs to 4xl scale derives from it.
Install modeImport from the package, or copy component source into your app.
Preview
DefaultSecondaryOutline

Your setup command

npx --yes -p github:itsvigneshv/default-file-ui#main df-ui init -t next --name my-app --color-scale detailed
Then use it
import { Button } from "@default-file/ui/components/df-button"
Full Next.js guide

What this does

  • Create a new Next.js app named my-app
  • Install @default-file/ui with react, react-dom, and lucide-react
  • Import df-index.css once at the app root
  • Add transpilePackages: ["@default-file/ui"] to next.config
  • Set data-df-color-scale="detailed" on <html>