Installation

Scaffold a new Dashfy project with the CLI, or add Dashfy to an existing app.

The fastest way to start a Dashfy project is the dashfy CLI, which scaffolds a runnable app and can set extensions up for you.

Available for Next.js, Vite, React Router, Astro, and TanStack Start.

Scaffold a project

Create a new app

Run init to scaffold the minimal starter. You will be prompted to choose extensions, which Dashfy sets up in the new project for you:

pnpm dlx dashfy@latest init

Prefer the full, pre-configured demo? Use the vite-app template instead:

pnpm dlx dashfy@latest init -t vite-app

Supported templates: vite-app, astro-app, next-app, react-router-app, and start-app.

Install dependencies

If you scaffolded with --no-install, install dependencies inside the new project directory (cd my-app):

pnpm install

Start developing

Run the dev server for both the client and server:

pnpm run dev:all

Open http://localhost:3000 to see your dashboard. The Dashfy server runs on http://localhost:5001.

Templates

The CLI provides these templates:

Template	Description
`vite-starter`	Minimal Vite app (default). The CLI prompts for extensions and sets them up.
`vite-app`	Full Vite demo with GitHub, System, and Market Live extensions, no prompts.
`astro-starter`	Minimal Astro app. The CLI prompts for extensions and sets them up.
`astro-app`	Full Astro demo with GitHub, System, and Market Live extensions, no prompts.
`next-starter`	Minimal Next.js app. The CLI prompts for extensions and sets them up.
`next-app`	Full Next.js demo with GitHub, System, and Market Live extensions, no prompts.
`react-router-starter`	Minimal React Router app. The CLI prompts for extensions and sets them up.
`react-router-app`	Full React Router demo with GitHub, System, and Market Live extensions, no prompts.
`start-starter`	Minimal TanStack Start app. The CLI prompts for extensions and sets them up.
`start-app`	Full TanStack Start demo with GitHub, System, and Market Live extensions, no prompts.

pnpm dlx dashfy@latest init my-app -t [template]

Choose your framework

Each framework guide includes a "Use the CLI" path and an "Existing Project" section with the manual setup steps for that framework. Pick your framework below.

Next.js

Vite

React Router

Astro

TanStack Start

Manual

Add extensions

Extensions (widgets + data sources) are resolved from a hosted registry. Add one to an existing project with add:

pnpm dlx dashfy@latest add @dashfy/github

This installs the @dashfy/ext-* package and sets it up automatically: widgets are registered in your app file (App.tsx, or the file set in dashfy.json), the server API is registered in your server bootstrap, required environment variables are added to .env, and a starter widget block is appended to your dashboard config. See Extensions and the CLI reference for details.

PreviousIntroduction NextQuick start