@@ -7,7 +7,9 @@ description: How to use NextUI with Laravel
7
7
8
8
Requirements:
9
9
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
11
13
- [ Tailwind CSS 3.4] ( https://tailwindcss.com/docs/guides/vite#react ) or later
12
14
- [ Framer Motion 11.9] ( https://www.framer.com/motion/ ) or later
13
15
@@ -17,9 +19,122 @@ Requirements:
17
19
18
20
To use NextUI in your Laravel project, you need to follow the following steps:
19
21
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
+
20
135
<Steps >
21
136
22
- ### Installation
137
+ ### Add dependencies
23
138
24
139
In your Laravel project, run one of the following command to install NextUI:
25
140
0 commit comments