Getting Started Laravel Breeze with Shadcn: Now Easier

If you’ve admired the Shadcn UI library for its beautiful and user-friendly components, you’ll be thrilled to know that integrating it with Laravel has just become significantly easier. The official Shadcn Twitter account recently announced a major update that simplifies the setup process with Laravel Breeze. With just one command, you can now seamlessly integrate Shadcn into your Laravel projects. Here’s what you need to know:

#New Update Overview

Shadcn now supports Laravel Breeze out of the box. The new npx command makes the initial setup a breeze. Simply run:

npx shadcn@latest init

This command sets up everything you need to start using Shadcn with Laravel Breeze, streamlining the process and saving you time.

Here’s how you can integrate those steps into your article:

#Getting Started with Shadcn and Laravel Breeze

To get started with integrating Shadcn into your Laravel Breeze project, follow these steps:

1. Create a New Laravel Project:

Run the following command to set up a new Laravel project with TypeScript, Breeze, React stack, and Git:

laravel new my-app --typescript --breeze --stack=react --git --no-interaction

2. Navigate to Your Project Directory:

cd my-app

3. Initialize Shadcn:

npx shadcn@latest init

This command sets up Shadcn in your project, adding its components alongside the existing Breeze components.

4. Add Shadcn Components: For example, to add a Shadcn button component, run:

npx shadcn@latest add button

5. Explore Shadcn Components: You can check out all available Shadcn components and their documentation here. Use these components in your project as needed.

For more details on the update, check out the official announcement on Shadcn’s Twitter.

#Faq

#Does this override the default components within Breeze with Shadcn ones?

No, the new Shadcn update does not override the default components in Laravel Breeze. Instead, it adds Shadcn components to your project alongside the existing Breeze components. This means you can use both sets of components within the same application.