Skip to content
Shark

Laravel

Install Shark UI in a Laravel project.

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 Shark UI.

Create Project

Create a new Laravel app using the Laravel installer:

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.

Then move into your project directory:

Use the Shark preset
Initialize Shark UI in your Laravel app with the registry preset.
Use the CLI
Configure Shark UI in your Laravel app directly from the terminal.

Use the Shark Preset

Run the Command

Run the init command with the Shark preset and the Laravel template from the root of your Laravel app:

When asked to overwrite components.json and components, choose Yes.

Add Components

You can add components with the CLI or copy them manually from the component docs:

  • CLI: Run npx shadcn@latest add @shark/<component> (e.g. button, dialog).
  • Manual: Copy component source from Manual tab in the component docs.

For example, add the Switch component to your project:

You can also install every component at once:

Then import and use components like this:

resources/js/pages/index.tsx

Use the CLI

Run the CLI

Run the shadcn init command with the Shark preset from the root of your Laravel app:

When asked to overwrite components.json and components, choose Yes.

Add Components

You can add components with the CLI or copy them manually from the component docs:

  • CLI: Run npx shadcn@latest add @shark/<component> (e.g. button, dialog).
  • Manual: Copy component source from Manual tab in the component docs.

For example, add the Switch component to your project:

You can also install every component at once:

Then import and use components like this:

resources/js/pages/index.tsx