InstallationAstro

Astro

Install Default File UI in Astro with the React integration.

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

    Start the app

    cd my-astro-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

    Include the React integration. Skip if you already have Astro + React.

    npm create astro@latest
npx astro add react
  2. 02

    Run init in the project

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

    Or install manually

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

    Import the stylesheet

    Import once in a shared layout (for example `src/layouts/Layout.astro`).

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

<html lang="en">
  <body>
    <slot />
  </body>
</html>
  5. 05

    Use a component as an island

    Interactive widgets need a client directive so Astro hydrates them.

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

<Button client:load>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.
  • Static presentational usage can omit a client directive; selects, popovers, sliders, and similar controls need `client:load` or `client:visible`.

Using a different stack? Choose another framework.