Skip to content

Commit 14abdc0

Browse files
committed
chore(docs): update laravel.mdx
1 parent 6258adc commit 14abdc0

File tree

1 file changed

+117
-2
lines changed

1 file changed

+117
-2
lines changed

apps/docs/content/docs/frameworks/laravel.mdx

+117-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ description: How to use NextUI with Laravel
77

88
Requirements:
99

10-
- [Laravel](https://laravel.com/)
10+
- [Laravel 11](https://laravel.com/)
11+
- [PHP v8.2](https://www.php.net/)
12+
- [React 18](https://reactjs.org/) or later
1113
- [Tailwind CSS 3.4](https://tailwindcss.com/docs/guides/vite#react) or later
1214
- [Framer Motion 11.9](https://www.framer.com/motion/) or later
1315

@@ -17,9 +19,122 @@ Requirements:
1719

1820
To use NextUI in your Laravel project, you need to follow the following steps:
1921

22+
### Using NextUI + Laravel template
23+
24+
If you are starting a new project, you can run one of the following commands to create a Laravel project pre-configured with NextUI:
25+
26+
<PackageManagers
27+
commands={{
28+
npm: 'npx create-laravel@latest --template https://github.com/nextui-org/laravel-template',
29+
yarn: 'yarn create laravel --template https://github.com/nextui-org/laravel-template',
30+
pnpm: 'pnpm create laravel --template https://github.com/nextui-org/laravel-template',
31+
bun: 'bunx create-laravel@latest --template https://github.com/nextui-org/laravel-template',
32+
}}
33+
/>
34+
35+
### Automatic Installation
36+
37+
You can add individual components using the CLI. For example, to add a button component:
38+
39+
```codeBlock bash
40+
nextui add button
41+
```
42+
43+
This command adds the Button component to your project and manages all related dependencies.
44+
45+
You can also add multiple components at once:
46+
47+
```codeBlock bash
48+
nextui add button input
49+
```
50+
51+
Or you can add the main library `@nextui-org/react` by running the following command:
52+
53+
```codeBlock bash
54+
nextui add --all
55+
```
56+
57+
If you leave out the component name, the CLI will prompt you to select the components you want to add.
58+
59+
```codeBlock bash
60+
? Which components would you like to add? › - Space to select. Return to submit
61+
Instructions:
62+
↑/↓: Highlight option
63+
←/→/[space]: Toggle selection
64+
[a,b,c]/delete: Filter choices
65+
enter/return: Complete answer
66+
67+
Filtered results for: Enter something to filter
68+
69+
◯ accordion
70+
◯ autocomplete
71+
◯ avatar
72+
◯ badge
73+
◯ breadcrumbs
74+
◉ button
75+
◯ card
76+
◯ checkbox
77+
◯ chip
78+
◯ code
79+
```
80+
81+
You still need to add the provider to your app manually (we are working on automating this step).
82+
83+
```jsx {3,7,9}
84+
// app/providers.tsx
85+
86+
import {NextUIProvider} from '@nextui-org/react'
87+
88+
export function Providers({children}: { children: React.ReactNode }) {
89+
return (
90+
<NextUIProvider>
91+
{children}
92+
</NextUIProvider>
93+
)
94+
}
95+
```
96+
97+
<Spacer y={4} />
98+
99+
```jsx {8,23,25}
100+
// app.tsx or app.jsx
101+
import '../css/app.css';
102+
import './bootstrap';
103+
104+
import { createInertiaApp } from '@inertiajs/react';
105+
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
106+
import { createRoot } from 'react-dom/client';
107+
import {NextUIProvider} from "@nextui-org/react";
108+
109+
const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
110+
111+
createInertiaApp({
112+
title: (title) => `${title} - ${appName}`,
113+
resolve: (name) =>
114+
resolvePageComponent(
115+
`./Pages/${name}.tsx`,
116+
import.meta.glob('./Pages/**/*.tsx'),
117+
),
118+
setup({ el, App, props }) {
119+
const root = createRoot(el);
120+
121+
root.render(
122+
<NextUIProvider>
123+
<App {...props} />
124+
</NextUIProvider>
125+
);
126+
},
127+
progress: {
128+
color: '#4B5563',
129+
},
130+
});
131+
```
132+
133+
### Manual Installation
134+
20135
<Steps>
21136

22-
### Installation
137+
### Add dependencies
23138

24139
In your Laravel project, run one of the following command to install NextUI:
25140

0 commit comments

Comments
 (0)