Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(docs): nextUI with laravel #4432

Merged
merged 7 commits into from
Jan 2, 2025
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion apps/docs/config/routes.json
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,12 @@
"title": "Astro",
"keywords": "astro, nextui",
"path": "/docs/frameworks/astro.mdx"
},
{
"key": "laravel",
"title": "Laravel",
"keywords": "laravel, nextui",
"path": "/docs/frameworks/laravel.mdx"
jrgarciadev marked this conversation as resolved.
Show resolved Hide resolved
}
]
},
Expand Down Expand Up @@ -515,4 +521,4 @@
]
}
]
}
}
123 changes: 123 additions & 0 deletions apps/docs/content/docs/frameworks/laravel.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
---
title: Laravel
description: How to use NextUI with Laravel
---

# Laravel

Requirements:

- [Laravel](https://laravel.com/)
- [Tailwind CSS 3.4](https://tailwindcss.com/docs/guides/vite#react) or later
- [Framer Motion 11.9](https://www.framer.com/motion/) or later

------

<CarbonAd/>

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

<Steps>

### Installation

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

<PackageManagers
commands={{
npm: 'npm i @nextui-org/react framer-motion',
yarn: 'yarn add @nextui-org/react framer-motion',
pnpm: 'pnpm add @nextui-org/react framer-motion',
bun: "bun add @nextui-org/react framer-motion"
}}
/>

### Hoisted Dependencies Setup

<Blockquote color="primary">
**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.
</Blockquote>

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:

<Blockquote color="primary">
**Note**: If you are using pnpm and monorepo architecture, please make sure you are pointing to the ROOT `node_modules`
</Blockquote>

```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(
<NextUIProvider>
<App {...props} />
</NextUIProvider>
);
},
progress: {
color: '#4B5563',
},
});
```

</Steps>

<Blockquote
color="warning"
>
Version 2 is only compatible with React 18 or later. If you are using React 17 or earlier, please use <Link href="https://v1.nextui.org/docs/getting-started" isExternal>version 1 of NextUI</Link>.
</Blockquote>
Loading