InstallationNext.js

Next.js

Install Default File UI in a Next.js App Router project.

Use Create

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

Open Create for Next.js

Use the CLI

Scaffold a new project with Default File UI already configured.

  1. 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 next --name my-next-app
  2. 02

    Start the app

    Move into my-next-app and run the dev server.

    Start the app (npm)

    npm run dev
  3. 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
  4. 04

    Use a component

    Use a component

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

Existing project

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

  1. 01

    Create a project

    Skip if you already have a Next.js app.

    Create a project

    npx create-next-app@latest
  2. 02

    Configure with the CLI

    Installs the kit, imports CSS, and adds Next transpilePackages.

    Configure with the CLI (npm)

    npx --yes -p @default-file/ui df-ui init --framework next
  3. 03

    Or install manually

    React, React DOM, and lucide-react are peer dependencies.

    Or install manually (npm)

    npm install @default-file/ui react react-dom lucide-react
  4. 04

    Transpile the package

    Required so Next can compile the kit's TypeScript source.

    Transpile the package

    import type { NextConfig } from "next"
     
    const nextConfig: NextConfig = {
      transpilePackages: ["@default-file/ui"],
    }
     
    export default nextConfig
  5. 05

    Import the stylesheet

    Import once at the app root (for example `app/globals.css` or `src/app/globals.css`). 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";
  6. 06

    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
  7. 07

    Use a component

    Use a component

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

Notes

  • Interactive kit components ship with `"use client"` where needed and work in Client Components without extra setup.

Using a different stack? Choose another framework.