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.

Sign up for GitHub

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

chore: update framework installations #4410

Merged
merged 2 commits into from
Dec 22, 2024
Merged

chore: update framework installations #4410

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6d781c6
chore: update framework installations
macci001 Dec 19, 2024
bae581b
chore: adding the nextui cli link
macci001 Dec 20, 2024
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
18 changes: 12 additions & 6 deletions apps/docs/content/docs/frameworks/nextjs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,19 @@ directly in your React Server Components (RSC).
If you are starting a new project, you can use the NextUI CLI to create a new project with NextUI pre-configured:

```bash
npm install -g nextui-cli
nextui init -t app
macci001 marked this conversation as resolved.
Show resolved Hide resolved
```

<Spacer y={4}/>
or

```bash
nextui init -t app
```
<PackageManagers
commands={{
npm: 'npx nextui-cli@latest init -t app',
yarn: 'yarn dlx nextui-cli@latest init -t app',
pnpm: 'pnpm dlx nextui-cli@latest init -t app',
bun: "bunx nextui-cli@latest init -t app"
}}
macci001 marked this conversation as resolved.
Show resolved Hide resolved
/>

### create-next-app

Expand All @@ -47,7 +52,8 @@ If you are starting a new project, you can run one of the following commands to
commands={{
npm: 'npx create-next-app -e https://github.com/nextui-org/next-app-template',
yarn: 'yarn create next-app -e https://github.com/nextui-org/next-app-template',
pnpm: 'pnpm create next-app -e https://github.com/nextui-org/next-app-template'
pnpm: 'pnpm create next-app -e https://github.com/nextui-org/next-app-template',
bun: 'bunx create-next-app -e https://github.com/nextui-org/next-app-template'
}}
/>

Expand Down
102 changes: 101 additions & 1 deletion apps/docs/content/docs/frameworks/remix.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,109 @@ Requirements:

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

### Using NextUI + Remix template

If you are starting a new project, you can run one of the following commands to create a Remix project pre-configured with NextUI:

<PackageManagers
commands={{
npm: 'npx create-remix@latest --template https://github.com/nextui-org/remix-template',
Copy link
Contributor Author

@macci001 macci001 Dec 19, 2024 •
edited by jrgarciadev
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TODO:

  • Making the remix template public.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

yarn: 'yarn create remix --template https://github.com/nextui-org/remix-template',
pnpm: 'pnpm create remix --template https://github.com/nextui-org/remix-template',
bun: 'bunx create-remix@latest --template https://github.com/nextui-org/remix-template',
}}
/>

### 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 (
<NextUIProvider>
{children}
</NextUIProvider>
)
}
```

<Spacer y={4} />

```jsx {6,10,12,14}
// app/layout.tsx

// globals.css includes @tailwind directives
// adjust the path if necessary
import "@/styles/globals.css";
import {Providers} from "./providers";

export default function RootLayout({children}: { children: React.ReactNode }) {
return (
<html lang="en" className='dark'>
<body>
<Providers>
{children}
</Providers>
</body>
</html>
);
}
```
macci001 marked this conversation as resolved.
Show resolved Hide resolved

### Manual Installation

<Steps>

### Installation
### Add dependencies

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

Expand Down
121 changes: 120 additions & 1 deletion apps/docs/content/docs/frameworks/vite.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,128 @@ Requirements:

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

### NextUI CLI (recommended)

If you are starting a new project, you can use the NextUI CLI to create a new project with NextUI pre-configured:

```bash
nextui init -t vite
```

or

<PackageManagers
commands={{
npm: 'npx nextui-cli@latest init -t vite',
yarn: 'yarn dlx nextui-cli@latest init -t vite',
pnpm: 'pnpm dlx nextui-cli@latest init -t vite',
bun: "bunx nextui-cli@latest init -t vite"
}}
/>

### Using NextUI + Vite template

If you are starting a new project, you can run one of the following commands to create a Vite project pre-configured with NextUI:

<PackageManagers
commands={{
npm: 'npx degit https://github.com/nextui-org/vite-template my-vite-app',
yarn: 'yarn dlx degit https://github.com/nextui-org/vite-template my-vite-app',
pnpm: 'pnpm dlx degit https://github.com/nextui-org/vite-template my-vite-app',
bun: 'bunx degit https://github.com/nextui-org/vite-template my-vite-app',
}}
/>

### 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 (
<NextUIProvider>
{children}
</NextUIProvider>
)
}
```

<Spacer y={4} />

```jsx {6,10,12,14}
// app/layout.tsx

// globals.css includes @tailwind directives
// adjust the path if necessary
import "@/styles/globals.css";
import {Providers} from "./providers";

export default function RootLayout({children}: { children: React.ReactNode }) {
return (
<html lang="en" className='dark'>
<body>
<Providers>
{children}
</Providers>
</body>
</html>
);
}
```
macci001 marked this conversation as resolved.
Show resolved Hide resolved

### Manual Installation

<Steps>

### Installation
### Add dependencies

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

Expand Down