Installation

How to install dependencies and structure your app.

Recommended for new projects: Use DWL Components/create to build your preset visually and generate the right setup command for your framework.

Choose the setup that matches your starting point.

Build your preset visually and generate a setup command.

Scaffold a supported template directly from the terminal.

Add DWL Components to an app you already created.

Use DWL Components/create

Build your preset visually, preview your choices, and generate a framework-specific setup command.

Open DWL Components/create

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

Use the CLI to scaffold a new project directly from the terminal:


pnpm dlx shadcn@latest init -t [framework]

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

For Laravel, create the app first with laravel new, then run npx shadcn@latest init.

Each framework guide includes an Existing Project section with the manual setup steps for that framework.

Pick your framework below and follow that path.

For Laravel, start with laravel new before using DWL Components/create or shadcn init.

Next.js

Vite

TanStack Start

Laravel

React Router

Astro

Manual

On This Page

Build with DWL Components

Use the copied registry, charts, blocks, and create tools in one place.

Start from the DWL Components create flow and customize from there.