Laravel

Install and configure DGA Registry components for Laravel.

The shadcn CLI does not scaffold a new Laravel app. Start by creating a Laravel app with the React starter kit, then configure shadcn/ui.

Create Project

Create a new Laravel app using the Laravel installer:

laravel new my-app --react

If you already have a Laravel app with React and Inertia configured, skip this step.

Choose the React starter kit when prompted. Then move into your project directory:

cd my-app

Run the CLI

Run the init command to configure shadcn/ui in your Laravel project:

pnpm dlx shadcn@latest init --preset b0 --template laravel

If prompted to overwrite existing components, answer y to continue.

Configure DGA Registry

Add the DGA Registry

Add the DGA registry to your components.json to enable @dga/ imports:

{
  "registries": {
    "@dga": "https://dga-registry.vercel.app/r/{name}.json"
  }
}

Add the Design Tokens

Add this import to the top of your resources/css/app.css:

@import "../../styles/tokens.css";

This loads all DGA color tokens, spacing, and typography variables.

Arabic (RTL) Support

Need RTL support? Re-run init with the --rtl flag:

pnpm dlx shadcn@latest init --preset b0 --template laravel --rtl

Add Components

You can now start adding components to your project:

pnpm dlx shadcn@latest add https://dga-registry.vercel.app/r/switch.json

Example Usage

The command above will add the Switch component to resources/js/components/ui/switch.tsx. You can then import it like this:

1import { Switch } from "@/components/ui/switch"
2
3const MyPage = () => {
4return (
5
6<div>
7<Switch />
8</div>
9)
10}
11
12export default MyPage