diff --git a/apps/docs/config/routes.json b/apps/docs/config/routes.json
index 5f080986d7..6dbda33f6f 100644
--- a/apps/docs/config/routes.json
+++ b/apps/docs/config/routes.json
@@ -81,6 +81,13 @@
"title": "Astro",
"keywords": "astro, nextui",
"path": "/docs/frameworks/astro.mdx"
+ },
+ {
+ "key": "laravel",
+ "title": "Laravel",
+ "keywords": "laravel, nextui",
+ "path": "/docs/frameworks/laravel.mdx",
+ "newPost": true
}
]
},
@@ -515,4 +522,4 @@
]
}
]
-}
\ No newline at end of file
+}
diff --git a/apps/docs/content/docs/frameworks/laravel.mdx b/apps/docs/content/docs/frameworks/laravel.mdx
new file mode 100644
index 0000000000..bab544ce68
--- /dev/null
+++ b/apps/docs/content/docs/frameworks/laravel.mdx
@@ -0,0 +1,238 @@
+---
+title: Laravel
+description: How to use NextUI with Laravel
+---
+
+# Laravel
+
+Requirements:
+
+- [Laravel 11](https://laravel.com/)
+- [PHP v8.2](https://www.php.net/)
+- [React 18](https://reactjs.org/) or later
+- [Tailwind CSS 3.4](https://tailwindcss.com/docs/guides/vite#react) or later
+- [Framer Motion 11.9](https://www.framer.com/motion/) or later
+
+------
+
+
+
+To use NextUI in your Laravel project, you need to follow the following steps:
+
+### Using NextUI + Laravel template
+
+If you are starting a new project, you can run one of the following commands to create a Laravel project pre-configured with NextUI:
+
+
+
+### Automatic Installation
+
+You can add individual components using the CLI. For example, to add a button component:
+
+```codeBlock bash
+nextui add button
+```
+
+This command adds the Button component to your project and manages all related dependencies.
+
+You can also add multiple components at once:
+
+```codeBlock bash
+nextui add button input
+```
+
+Or you can add the main library `@nextui-org/react` by running the following command:
+
+```codeBlock bash
+nextui add --all
+```
+
+If you leave out the component name, the CLI will prompt you to select the components you want to add.
+
+```codeBlock bash
+? Which components would you like to add? › - Space to select. Return to submit
+Instructions:
+ ↑/↓: Highlight option
+ ←/→/[space]: Toggle selection
+ [a,b,c]/delete: Filter choices
+ enter/return: Complete answer
+
+Filtered results for: Enter something to filter
+
+◯ accordion
+◯ autocomplete
+◯ avatar
+◯ badge
+◯ breadcrumbs
+◉ button
+◯ card
+◯ checkbox
+◯ chip
+◯ code
+```
+
+You still need to add the provider to your app manually (we are working on automating this step).
+
+```jsx {3,7,9}
+// app/providers.tsx
+
+import {NextUIProvider} from '@nextui-org/react'
+
+export function Providers({children}: { children: React.ReactNode }) {
+ return (
+
+ {children}
+
+ )
+}
+```
+
+
+
+```jsx {8,23,25}
+// app.tsx or app.jsx
+import '../css/app.css';
+import './bootstrap';
+
+import { createInertiaApp } from '@inertiajs/react';
+import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
+import { createRoot } from 'react-dom/client';
+import {NextUIProvider} from "@nextui-org/react";
+
+const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
+
+createInertiaApp({
+ title: (title) => `${title} - ${appName}`,
+ resolve: (name) =>
+ resolvePageComponent(
+ `./Pages/${name}.tsx`,
+ import.meta.glob('./Pages/**/*.tsx'),
+ ),
+ setup({ el, App, props }) {
+ const root = createRoot(el);
+
+ root.render(
+
+
+
+ );
+ },
+ progress: {
+ color: '#4B5563',
+ },
+});
+```
+
+### Manual Installation
+
+
+
+### Add dependencies
+
+In your Laravel project, run one of the following command to install NextUI:
+
+
+
+### Hoisted Dependencies Setup
+
+
+**Note**: This step is only for those who use `pnpm` to install. If you install NextUI using other package managers, you may skip this step.
+
+
+If you are using pnpm, you need to add the following line to your `.npmrc` file to hoist our packages to the root `node_modules`.
+
+```bash
+public-hoist-pattern[]=*@nextui-org/*
+```
+
+After modifying the `.npmrc` file, you need to run `pnpm install` again to ensure that the dependencies are installed correctly.
+
+### Tailwind CSS Setup
+
+NextUI is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can follow the official
+[installation guide](https://tailwindcss.com/docs/guides/vite#react) to install Tailwind CSS. Then you need to add
+the following code to your `tailwind.config.js` file:
+
+
+**Note**: If you are using pnpm and monorepo architecture, please make sure you are pointing to the ROOT `node_modules`
+
+
+```js {2,8,13-14}
+// tailwind.config.js
+const { nextui } = require("@nextui-org/react");
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: [
+ // ...
+ "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
+ ],
+ theme: {
+ extend: {},
+ },
+ darkMode: "class",
+ plugins: [nextui()]
+}
+```
+
+### Provider Setup
+
+After installing NextUI, you need to set up the `NextUIProvider` at the `root` of your application.
+
+Go to the src directory and inside `app.jsx` or `app.tsx`, wrap `NextUIProvider` around App:
+
+```jsx {8,23,25}
+// app.tsx or app.jsx
+import '../css/app.css';
+import './bootstrap';
+
+import { createInertiaApp } from '@inertiajs/react';
+import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
+import { createRoot } from 'react-dom/client';
+import {NextUIProvider} from "@nextui-org/react";
+
+const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
+
+createInertiaApp({
+ title: (title) => `${title} - ${appName}`,
+ resolve: (name) =>
+ resolvePageComponent(
+ `./Pages/${name}.tsx`,
+ import.meta.glob('./Pages/**/*.tsx'),
+ ),
+ setup({ el, App, props }) {
+ const root = createRoot(el);
+
+ root.render(
+
+
+
+ );
+ },
+ progress: {
+ color: '#4B5563',
+ },
+});
+```
+
+
+
+
+ Version 2 is only compatible with React 18 or later. If you are using React 17 or earlier, please use version 1 of NextUI.
+