React

Name: Default File
Availability: InStock
Author: Vignesh V

Install Default File UI in any React app (manual setup).

Use Create

Design your setup in a live studio, then copy one command tailored to this framework.

Scaffold a new project with Default File UI already configured.

01
Scaffold with the CLI
Creates the framework app and wires Default File UI (package, CSS, and framework config). The kit owns the app stylesheet in a project it scaffolds, so template tokens never shadow kit tokens.
Scaffold with the CLI (npm)
npx --yes -p @default-file/ui df-ui init -t react --name my-react-app
02
Start the app
Move into my-react-app and run the dev server.
Start the app (npm)
npm run dev
03
Add a component
Copy the Button source into your app and import from `@/default-file-ui/components/df-button`. Those files become yours. Later kit releases do not replace them unless you run `df-ui add button --force`. To use the package instead, skip this step and import from `@default-file/ui`.
Add a component (npm)
npx --yes -p @default-file/ui df-ui add button

1
2
3
4
5
import { Button } from "@default-file/ui/components/df-button"
 
export function Example() {
  return <Button>Click me</Button>
}

Configure with the CLI in your app folder, or follow the manual steps.

01
Start from any React app
Create React App, Parcel, Rsbuild, or a custom Webpack setup all work as long as you can import CSS and TSX from `node_modules`.
02
Configure with the CLI
Configure with the CLI (npm)
npx --yes -p @default-file/ui df-ui init --framework react
03
Or install manually
Or install manually (npm)
npm install @default-file/ui react react-dom lucide-react
04
Import the stylesheet
Import once near your app entry (CSS file or `import "@default-file/ui/css/df-index.css"` in JS). Keep this import first in the file. Starter templates often declare their own `--background`, `--foreground`, or `--border` under `:root`. Those names are kit semantic tokens, so remove or rename them to keep kit theming and dark mode intact.
Import the stylesheet
@import "@default-file/ui/css/df-index.css";
05
Add a component
Copy the Button source into your app and import from `@/default-file-ui/components/df-button`. Those files become yours. Later kit releases do not replace them unless you run `df-ui add button --force`. To use the package instead, skip this step and import from `@default-file/ui`.
Add a component (npm)
npx --yes -p @default-file/ui df-ui add button

1
2
3
4
5
import { Button } from "@default-file/ui/components/df-button"
 
export function Example() {
  return <Button>Click me</Button>
}

If your bundler does not transpile packages by default, allow `@default-file/ui` (it ships TypeScript source).

Using a different stack? Choose another framework.