mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-09 06:55:07 +00:00
151 lines
3.3 KiB
Plaintext
151 lines
3.3 KiB
Plaintext
---
|
|
title: Laravel
|
|
description: Install and configure shadcn/ui for Laravel.
|
|
---
|
|
|
|
The shadcn CLI does not scaffold a new Laravel app. Start by creating a Laravel app with the React starter kit, then choose how you want to configure shadcn/ui.
|
|
|
|
<Steps>
|
|
|
|
### Create Project
|
|
|
|
Create a new Laravel app using the Laravel installer:
|
|
|
|
```bash
|
|
laravel new my-app
|
|
```
|
|
|
|
If you already have a Laravel app with React and Inertia configured, skip this step.
|
|
|
|
Choose the **React** starter kit when prompted. For more information, see the official [Laravel frontend documentation](https://laravel.com/docs/12.x/frontend).
|
|
|
|
Then move into your project directory:
|
|
|
|
```bash
|
|
cd my-app
|
|
```
|
|
|
|
</Steps>
|
|
|
|
<div className="mt-10 grid gap-4 sm:grid-cols-2 sm:gap-6">
|
|
<LinkedCard
|
|
href="#configure-with-create"
|
|
className="items-start gap-1 p-6 text-sm md:p-6"
|
|
>
|
|
<div className="font-medium">Use shadcn/create</div>
|
|
<div className="leading-relaxed text-muted-foreground">
|
|
Build your preset visually and generate a Laravel init command.
|
|
</div>
|
|
</LinkedCard>
|
|
<LinkedCard
|
|
href="#configure-with-cli"
|
|
className="items-start gap-1 p-6 text-sm md:p-6"
|
|
>
|
|
<div className="font-medium">Use the CLI</div>
|
|
<div className="leading-relaxed text-muted-foreground">
|
|
Configure shadcn/ui in your Laravel app directly from the terminal.
|
|
</div>
|
|
</LinkedCard>
|
|
</div>
|
|
|
|
<div id="configure-with-create" className="scroll-mt-24" />
|
|
## Use shadcn/create
|
|
|
|
<Steps>
|
|
|
|
### Build Your Preset
|
|
|
|
Open [shadcn/create](/create?template=laravel) and build your preset visually. Choose your style, colors, fonts, icons, and more.
|
|
|
|
<Button asChild size="sm">
|
|
<Link
|
|
href="/create?template=laravel"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="mt-6 no-underline!"
|
|
>
|
|
Open shadcn/create
|
|
</Link>
|
|
</Button>
|
|
|
|
### Run the Command
|
|
|
|
Click `Create Project`, choose your package manager, and copy the generated command.
|
|
|
|
The generated command will look similar to this:
|
|
|
|
```bash
|
|
npx shadcn@latest init --preset [CODE] --template laravel
|
|
```
|
|
|
|
Run the command from the root of your Laravel app.
|
|
|
|
When asked to overwrite `components.json` and components, choose `Yes`.
|
|
|
|
### Add Components
|
|
|
|
Add the `Switch` component to your project:
|
|
|
|
```bash
|
|
npx shadcn@latest add switch
|
|
```
|
|
|
|
The command above will add the `Switch` component to `resources/js/components/ui/switch.tsx`. You can then import it like this:
|
|
|
|
```tsx title="resources/js/pages/index.tsx" showLineNumbers {1,6}
|
|
import { Switch } from "@/components/ui/switch"
|
|
|
|
const MyPage = () => {
|
|
return (
|
|
<div>
|
|
<Switch />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default MyPage
|
|
```
|
|
|
|
</Steps>
|
|
|
|
<div id="configure-with-cli" className="scroll-mt-24" />
|
|
## Use the CLI
|
|
|
|
<Steps>
|
|
|
|
### Run the CLI
|
|
|
|
Run the `shadcn` init command from the root of your Laravel app:
|
|
|
|
```bash
|
|
npx shadcn@latest init
|
|
```
|
|
|
|
When asked to overwrite `components.json` and components, choose `Yes`.
|
|
|
|
### Add Components
|
|
|
|
Add the `Switch` component to your project:
|
|
|
|
```bash
|
|
npx shadcn@latest add switch
|
|
```
|
|
|
|
The command above will add the `Switch` component to `resources/js/components/ui/switch.tsx`. You can then import it like this:
|
|
|
|
```tsx title="resources/js/pages/index.tsx" showLineNumbers {1,6}
|
|
import { Switch } from "@/components/ui/switch"
|
|
|
|
const MyPage = () => {
|
|
return (
|
|
<div>
|
|
<Switch />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default MyPage
|
|
```
|
|
|
|
</Steps>
|