Sections

Components

Utilities

Forms

Hooks

useIsMobile

Laravel

Copy Markdown

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:

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.

Then move into your project directory:

cd my-app

[

Use the Shark preset

Initialize Shark UI in your Laravel app with the registry preset.

](#use-the-shark-preset)[

Use the CLI

Configure Shark UI in your Laravel app directly from the terminal.

](#use-the-cli)

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:

pnpmbunnpmyarn

pnpm dlx shadcn@latest init @shark/style -t laravel

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:

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/switch

You can also install every component at once:

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/ui

Then import and use components like this:

resources/js/pages/index.tsx

import { Switch } from "@/components/ui/switch";

const MyPage = () => {
  return (
    <div>
      <Switch />
    </div>
  );
};

export default MyPage;

Use the CLI#

Run the CLI#

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

pnpmbunnpmyarn

pnpm dlx shadcn@latest init @shark/style