Installation

How to install dependencies and structure your app.

Note: We have the exact same installation process as shadcn/ui.

Frameworks

Next.js

Installation with Next.js

Vite

Installation with Vite

Laravel

Installation with Laravel

React Router

Installation with React Router

Remix

Installation with Remix

Astro

Installation with Astro

Tanstack

Installation with Tanstack

Tanstack Router

Installation with Tanstack Router

Gatsby

Installation with Gatsby

Manual

Manual Installation

TypeScript

This project and the components are written in TypeScript. We recommend using TypeScript for your project as well.

However we provide a JavaScript version of the components as well. The JavaScript version is available via the cli.

To opt-out of TypeScript, you can use the tsx flag in your components.json file.

components.json

{
  "style": "default",
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/app/globals.css",
    "baseColor": "zinc",
    "cssVariables": true
  },
  "rsc": false,
  "tsx": false,
  "aliases": {
    "utils": "~/lib/utils",
    "components": "~/components"
  }
}

To configure import aliases, you can use the following jsconfig.json:

jsconfig.json

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
}

CLI

Use the shadcn CLI to add components to your project.

Next.js

Install and configure shadcn/ui for Next.js.