InstallationNext.js

Next.js

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

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

    npx --yes -p github:itsvigneshv/default-file-ui#main df-ui init -t next --name my-next-app
  2. 02

    Start the app

    cd my-next-app
npm run dev
  3. 03

    Use a component

    import { Button } from "@default-file/ui/components/df-button"

export function Example() {
  return <Button>Click me</Button>
}

Existing project

Prefer the CLI init in your app folder, or follow the manual steps.

  1. 01

    Create a project

    Skip if you already have a Next.js app.

    npx create-next-app@latest
  2. 02

    Run init in the project

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

    npx --yes -p github:itsvigneshv/default-file-ui#main df-ui init --framework next
  3. 03

    Or install manually

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

    npm install github:itsvigneshv/default-file-ui#main react react-dom lucide-react
  4. 04

    Transpile the package

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

    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`).

    @import "@default-file/ui/css/df-index.css";
  6. 06

    Use a component

    import { Button } from "@default-file/ui/components/df-button"

export function Example() {
  return <Button>Click me</Button>
}

Notes

  • Prefer the package for most apps. For copy-source installs, add foundation first (`itsvigneshv/default-file-ui/foundation`), then individual items from each component page.
  • Interactive kit components ship with `"use client"` where needed and work in Client Components out of the box.

Using a different stack? Choose another framework.