archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

refactor(docs): overall documentation (#3274)

Browse Source 
* fix(docs): update framer motion version in docs

* refactor(docs): hoisted dependencies setup

* refactor(docs): add bun command

* refactor(docs): revise tailwindcss setup

* refactor(docs): add missing highlight lines and content in nextjs page

* fix(docs): incorrect highlighted lines in input

* refactor(docs): remove unnecessary space

* refactor(docs): add color and revise content

* refactor(docs): revise indentation in nextjs page
This commit is contained in:
աӄա 2024-06-22 22:06:26 +08:00 committed by GitHub
parent b32072551b
commit 87ca7594ed
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
24 changed files with 256 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/docs/components/docs/components/package-managers.tsx
View File

@ -97,9 +97,9 @@ export const PackageManagers = ({
})}
</Tabs>
{showGlobalInstallWarning && (
<Blockquote className="my-2">
No need to install this package if <Code>@nextui-org/react</Code> is already installed
globally.
<Blockquote className="my-2" color="warning">
The above command is for individual installation only. You may skip this step if{" "}
<Code>@nextui-org/react</Code> is already installed globally.
</Blockquote>
)}
</>

7
apps/docs/content/blog/nextui-v2.mdx
View File

@ -60,7 +60,11 @@ into React Server Components issues.
NextUI v2.0 comes with a TailwindCSS plugin that enables the customization and addition of default themes.
This plugin allows you to customize colors and layouts tokens that are used by NextUI components.
```js {8,13-14}
<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 {9,14-15}
// tailwind.config.js
const {nextui} = require("@nextui-org/react");
@ -68,6 +72,7 @@ const {nextui} = require("@nextui-org/react");
module.exports = {
content: [
// ...
// make sure it's pointing to the ROOT node_module
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
],
theme: {

6
apps/docs/content/docs/components/accordion.mdx
View File

@ -151,7 +151,7 @@ Here's an example of how to customize the accordion styles:
<CodeDemo title="Custom Accordion Styles" files={accordionContent.customStyles} />
<Spacer y={4} />{" "}
<Spacer y={4} />
## Data Attributes
@ -172,7 +172,7 @@ Here's an example of how to customize the accordion styles:
- **data-pressed**:
When the accordion item is pressed. Based on [usePress](https://react-spectrum.adobe.com/react-aria/usePress.html).
<Spacer y={4} />{" "}
<Spacer y={4} />
## Accessibility
@ -182,7 +182,7 @@ Here's an example of how to customize the accordion styles:
- `aria-disabled` attribute for the accordion item.
- `aria-controls` attribute for the accordion item.
<Spacer y={4} />{" "}
<Spacer y={4} />
## API

4
apps/docs/content/docs/components/avatar.mdx
View File

@ -150,7 +150,7 @@ You can customize any part of the avatar by using the `classNames` prop, each `s
<CodeDemo title="Custom Avatar" files={avatarContent.custom} />
<Spacer y={4} />{" "}
<Spacer y={4} />
## Data Attributes
@ -163,7 +163,7 @@ You can customize any part of the avatar by using the `classNames` prop, each `s
- **data-focus-visible**:
When the avatar is being focused with the keyboard. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html), it is applied when `isFocusable` is `true` or when the `as` property is assigned as `button`.
<Spacer y={4} />{" "}
<Spacer y={4} />
## API

2
apps/docs/content/docs/components/checkbox.mdx
View File

@ -127,7 +127,7 @@ In case you need to customize the checkbox even further, you can use the `useChe
- **data-loading**:
When the checkbox is loading. Based on `isLoading` prop.
<Spacer y={4} />{" "}
<Spacer y={4} />
## Accessibility

2
apps/docs/content/docs/components/chip.mdx
View File

@ -93,7 +93,7 @@ You can customize the `Chip` component by passing custom Tailwind CSS classes to
<CodeDemo title="Custom Styles" files={chipContent.customStyles} />
<Spacer y={4} />{" "}
<Spacer y={4} />
## API

6
apps/docs/content/docs/components/circular-progress.mdx
View File

@ -92,7 +92,7 @@ You can customize the `CircularProgress` component by passing custom Tailwind CS
highlightedLines="9-12"
/>
<Spacer y={4} />{" "}
<Spacer y={4} />
## Data Attributes
@ -103,7 +103,7 @@ You can customize the `CircularProgress` component by passing custom Tailwind CS
- **data-disabled**:
Indicates whether the progress is disabled. Based on `isDisabled` prop.
<Spacer y={4} />{" "}
<Spacer y={4} />
## Accessibility
@ -113,7 +113,7 @@ You can customize the `CircularProgress` component by passing custom Tailwind CS
- Determinate and indeterminate progress support.
- Exposes the `aria-valuenow`, `aria-valuemin`, `aria-valuemax` and `aria-valuetext` attributes.
<Spacer y={4} />{" "}
<Spacer y={4} />
## API

2
apps/docs/content/docs/components/code.mdx
View File

@ -50,7 +50,7 @@ Code is a component used to display inline code.
<CodeDemo title="Colors" files={codeContent.colors} />
<Spacer y={4} />{" "}
<Spacer y={4} />
## API

2
apps/docs/content/docs/components/date-input.mdx
View File

@ -247,7 +247,7 @@ import {parseZonedDateTime} from "@internationalized/date";
- **description**: The description of the date-input.
- **errorMessage**: The error message of the date-input.
<Spacer y={4} />{" "}
<Spacer y={4} />
## Data Attributes

6
apps/docs/content/docs/components/date-picker.mdx
View File

@ -270,7 +270,7 @@ import {I18nProvider} from "@react-aria/i18n";
- **timeInputLabel**: The time-input component's label element.
- **timeInput**: The time-input component element.
<Spacer y={4} />{" "}
<Spacer y={4} />
## Data Attributes
@ -289,7 +289,7 @@ import {I18nProvider} from "@react-aria/i18n";
- **data-disabled**:
When the date-picker is disabled. Based on `isDisabled` prop.
<Spacer y={4} />{" "}
<Spacer y={4} />
## Accessibility
@ -299,7 +299,7 @@ import {I18nProvider} from "@react-aria/i18n";
- Date segments are editable using an easy to use numeric keypad, and all interactions are accessible using touch-based screen readers.
- Integrates with HTML forms, supporting required, minimum and maximum values, unavailable dates, custom validation functions, realtime validation, and server-side validation errors
<Spacer y={4} />{" "}
<Spacer y={4} />
## API

12
apps/docs/content/docs/components/input.mdx
View File

@ -85,14 +85,14 @@ You can change the position of the label by setting the `labelPlacement` propert
You can use the `type` property to change the input type to `password`.
<CodeDemo title="Password Input" highlightedLines="24" files={inputContent.password} />
<CodeDemo title="Password Input" highlightedLines="25" files={inputContent.password} />
### Clear Button
If you pass the `isClearable` property to the input, it will have a clear button at the
end of the input, it will be visible when the input has a value.
<CodeDemo title="Clear Button" highlightedLines="6" files={inputContent.clearButton} />
<CodeDemo title="Clear Button" highlightedLines="7" files={inputContent.clearButton} />
### Start & End Content
@ -142,7 +142,7 @@ You can use the `value` and `onValueChange` properties to control the input valu
You can customize the `Input` component by passing custom Tailwind CSS classes to the component slots.
<CodeDemo title="Custom Styles" highlightedLines="14-32" files={inputContent.customStyles} />
<CodeDemo title="Custom Styles" highlightedLines="13-31" files={inputContent.customStyles} />
### Custom Implementation
@ -155,7 +155,7 @@ In case you need to customize the input even further, you can use the `useInput`
files={inputContent.customImpl}
/>
<Spacer y={4} />{" "}
<Spacer y={4} />
## Data Attributes
@ -178,7 +178,7 @@ In case you need to customize the input even further, you can use the `useInput`
- **data-disabled**:
When the input is disabled. Based on `isDisabled` prop.
<Spacer y={4} />{" "}
<Spacer y={4} />
## Accessibility
@ -188,7 +188,7 @@ In case you need to customize the input even further, you can use the `useInput`
- Required and invalid states exposed to assistive technology via ARIA.
- Support for description and error message help text linked to the input via ARIA.
<Spacer y={4} />{" "}
<Spacer y={4} />
## API

6
apps/docs/content/docs/components/link.mdx
View File

@ -104,7 +104,7 @@ In case you need to customize the link even further, you can use the `useLink` h
<CodeDemo showPreview={false} title="Custom implementation" files={linkContent.customImpl} />
<Spacer y={4} />{" "}
<Spacer y={4} />
## Data Attributes
@ -117,7 +117,7 @@ In case you need to customize the link even further, you can use the `useLink` h
- **data-disabled**:
When the link is disabled. Based on `isDisabled` prop.
<Spacer y={4} />{" "}
<Spacer y={4} />
## Accessibility
@ -126,7 +126,7 @@ In case you need to customize the link even further, you can use the `useLink` h
- Support for disabled links.
- Keyboard users may activate links using the <Kbd>Enter</Kbd> key.
<Spacer y={4} />{" "}
<Spacer y={4} />
## API

6
apps/docs/content/docs/components/radio-group.mdx
View File

@ -100,7 +100,7 @@ In case you need to customize the radio group even further, you can use the `use
<CodeDemo title="Custom Implementation" files={radioGroupContent.customImpl} />
<Spacer y={4} />{" "}
<Spacer y={4} />
## Data Attributes
@ -130,7 +130,7 @@ In case you need to customize the radio group even further, you can use the `use
- **data-disabled**:
When the radio is disabled. Based on `isDisabled` prop.
<Spacer y={4} />{" "}
<Spacer y={4} />
## Accessibility
@ -141,7 +141,7 @@ In case you need to customize the radio group even further, you can use the `use
- Keyboard focus management and cross browser normalization.
- Group and radio labeling support for assistive technology.
<Spacer y={4} />{" "}
<Spacer y={4} />
## API

2
apps/docs/content/docs/components/snippet.mdx
View File

@ -92,7 +92,7 @@ You can customize the copy and copied icons by using the `copyIcon` and `checkIc
- **copyIcon**: The copy icon slot.
- **checkIcon**: The check icon slot.
<Spacer y={4} />{" "}
<Spacer y={4} />
## API

2
apps/docs/content/docs/components/spinner.mdx
View File

@ -68,7 +68,7 @@ Spinner express an unspecified wait time or display the length of a process.
- **circle2**: The second circle of the spinner.
- **label**: The label content.
<Spacer y={4} />{" "}
<Spacer y={4} />
## API

6
apps/docs/content/docs/components/switch.mdx
View File

@ -97,7 +97,7 @@ In case you need to customize the switch even further, you can use the `useSwitc
<CodeDemo title="Custom Implementation" files={switchContent.customImpl} />
<Spacer y={4} />{" "}
<Spacer y={4} />
## Data Attributes
@ -118,7 +118,7 @@ In case you need to customize the switch even further, you can use the `useSwitc
- **data-disabled**:
When the switch is disabled. Based on `isDisabled` prop.
<Spacer y={4} />{" "}
<Spacer y={4} />
## Accessibility
@ -129,7 +129,7 @@ In case you need to customize the switch even further, you can use the `useSwitc
- Labeling support for assistive technology.
- Exposed as a switch to assistive technology via ARIA
<Spacer y={4} />{" "}
<Spacer y={4} />
## API

6
apps/docs/content/docs/components/textarea.mdx
View File

@ -99,7 +99,7 @@ You can use the `value` and `onValueChange` properties to control the input valu
- **description**: The description of the textarea.
- **errorMessage**: The error message of the textarea.
<Spacer y={4} />{" "}
<Spacer y={4} />
## Data Attributes
@ -120,7 +120,7 @@ You can use the `value` and `onValueChange` properties to control the input valu
- **data-disabled**:
When the textarea is disabled. Based on `isDisabled` prop.
<Spacer y={4} />{" "}
<Spacer y={4} />
## Accessibility
@ -130,7 +130,7 @@ You can use the `value` and `onValueChange` properties to control the input valu
- Required and invalid states exposed to assistive technology via ARIA.
- Support for description and error message help text linked to the input via ARIA.
<Spacer y={4} />{" "}
<Spacer y={4} />
## API

7
apps/docs/content/docs/customization/theme.mdx
View File

@ -28,7 +28,11 @@ app's look and feel.
The first step to using NextUI's theming capability is adding the `nextui` plugin to your
`tailwind.config.js` file. Below is an example of how to do this:
```js {8,13-14}
<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 {9,14-15}
// tailwind.config.js
const {nextui} = require("@nextui-org/react");
@ -36,6 +40,7 @@ const {nextui} = require("@nextui-org/react");
module.exports = {
content: [
// ...
// make sure it's pointing to the ROOT node_module
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
],
theme: {

35
apps/docs/content/docs/frameworks/astro.mdx
View File

@ -9,7 +9,7 @@ Requirements:
- [React 18](https://reactjs.org/) or later
- [Tailwind CSS 3.4](https://tailwindcss.com/docs/guides/astro) or later
- [Framer Motion 4](https://www.framer.com/motion/) or later
- [Framer Motion 11](https://www.framer.com/motion/) or later
------
@ -34,11 +34,23 @@ In your Astro project, run one of the following command to install NextUI:
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
<Spacer y={4}/>
<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
@ -46,8 +58,11 @@ NextUI is built on top of Tailwind CSS, so you need to install Tailwind CSS firs
[installation guide](https://tailwindcss.com/docs/guides/astro) to install Tailwind CSS. Then you need to add
the following code to your `tailwind.config.cjs` 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 {8,13-14}
```js {9,14-15}
// tailwind.config.cjs
const { nextui } = require("@nextui-org/react");
@ -55,7 +70,8 @@ const { nextui } = require("@nextui-org/react");
module.exports = {
content: [
// ...
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
// make sure it's pointing to the ROOT node_module
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
@ -85,17 +101,6 @@ import {Button} from '@nextui-org/react';
Note that you have to add `client:visible` to the component to make it visible only on the client side. Otherwise
some functionalities of NextUI components may not work properly.
### Setup pnpm (optional)
If you are using pnpm, you need to add the following code to your `.npmrc` file:
```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.
</Steps>
<Blockquote

91
apps/docs/content/docs/frameworks/nextjs.mdx
View File

@ -11,7 +11,7 @@ Requirements:
- [Next.js 12](https://nextjs.org/) or later
- [React 18](https://reactjs.org/) or later
- [Tailwind CSS 3.4](https://tailwindcss.com/docs/guides/nextjs) or later
- [Framer Motion 4](https://www.framer.com/motion/) or later
- [Framer Motion 11](https://www.framer.com/motion/) or later
------
@ -25,7 +25,7 @@ Next.js 13 introduces a new `app/` directory structure. By default it uses Serve
As NextUI components use React hooks, we added the `use client;` at build time, so you can import them
directly in your React Server Components (RSC).
## NextUI CLI (recommended)
### 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:
@ -51,8 +51,7 @@ If you are starting a new project, you can run one of the following commands to
}}
/>
## Automatic Installation
### Automatic Installation
You can add individual components using the CLI. For example, to add a button component:
@ -100,7 +99,7 @@ Filtered results for: Enter something to filter
You still need to add the provider to your app manually (we are working on automating this step).
```jsx
```jsx {7,9}
// app/providers.tsx
import {NextUIProvider} from '@nextui-org/react'
@ -114,7 +113,9 @@ export function Providers({children}: { children: React.ReactNode }) {
}
```
```jsx
<Spacer y={4} />
```jsx {7,9,11}
// app/layout.tsx
import {Providers} from "./providers";
@ -132,7 +133,6 @@ export default function RootLayout({children}: { children: React.ReactNode }) {
}
```
### Manual Installation
<Steps>
@ -146,17 +146,35 @@ In your Next.js project, run one of the following commands to install NextUI:
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/nextjs) 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 {8,13-14}
```js {9,14-15}
// tailwind.config.js
import {nextui} from "@nextui-org/react";
@ -164,6 +182,7 @@ import {nextui} from "@nextui-org/react";
const config = {
content: [
// ...
// make sure it's pointing to the ROOT node_module
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
],
theme: {
@ -180,7 +199,7 @@ export default config;
Go to your `app/providers.tsx` or `app/providers.jsx` (create it if it doesn't exist) and wrap the Component with the `NextUIProvider`:
```jsx
```jsx {8,10}
// app/providers.tsx
'use client'
@ -239,20 +258,8 @@ export default function Page() {
```
> **Important 🚨**: Note that you need to import the component from the individual package, not from `@nextui-org/react`.
### Setup pnpm (optional)
If you are using pnpm, you need to add the following code to your `.npmrc` file:
```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.
</Steps>
<Spacer y={8} />
## Pages Directory Setup
### NextUI CLI (recommended)
@ -331,7 +338,7 @@ Filtered results for: Enter something to filter
You still need to add the provider to your app manually (we are working on automating this step).
```jsx
```jsx {7,9}
// app/providers.tsx
import {NextUIProvider} from '@nextui-org/react'
@ -345,7 +352,9 @@ export function Providers({children}: { children: React.ReactNode }) {
}
```
```jsx
<Spacer y={4} />
```jsx {7,9,11}
// app/layout.tsx
import {Providers} from "./providers";
@ -376,17 +385,35 @@ In your Next.js project, run one of the following commands to install NextUI:
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/nextjs) 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 {8,13-14}
```js {9,14-15}
// tailwind.config.js
import {nextui} from "@nextui-org/react";
@ -394,6 +421,7 @@ import {nextui} from "@nextui-org/react";
const config = {
content: [
// ...
// make sure it's pointing to the ROOT node_module
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
],
theme: {
@ -410,7 +438,7 @@ export default config;
Go to pages`/_app.js` or `pages/_app.tsx` (create it if it doesn't exist) and wrap the Component with the `NextUIProvider`:
```jsx
```jsx {6,8}
// pages/_app.js
import {NextUIProvider} from '@nextui-org/react'
@ -429,7 +457,7 @@ export default MyApp;
Now you can import any NextUI component wherever you want:
```jsx
```jsx {1}
import {Button} from '@nextui-org/react'
export default function Page() {
@ -440,17 +468,6 @@ export default function Page() {
)
}
```
### Setup pnpm (optional)
If you are using pnpm, you need to add the following code to your `.npmrc` file:
```bash
public-hoist-pattern[]=*@nextui-org/*
```
After modifying the `.npmrc` file, you must run `pnpm install` again to ensure the dependencies are installed correctly.
</Steps>
<Blockquote

32
apps/docs/content/docs/frameworks/remix.mdx
View File

@ -9,7 +9,7 @@ Requirements:
- [React 18](https://reactjs.org/) or later
- [Tailwind CSS 3.4](https://tailwindcss.com/docs/guides/remix) or later
- [Framer Motion 4](https://www.framer.com/motion/) or later
- [Framer Motion 11](https://www.framer.com/motion/) or later
------
@ -28,9 +28,23 @@ In your Remix project, run one of the following command to install NextUI:
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
@ -38,8 +52,11 @@ NextUI is built on top of Tailwind CSS, so you need to install Tailwind CSS firs
[installation guide](https://tailwindcss.com/docs/guides/remix) 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>
```ts {9,14-15}
```ts {10,15-16}
// tailwind.config.ts
const { nextui } = require("@nextui-org/react");
@ -48,6 +65,7 @@ import type { Config } from 'tailwindcss'
export default {
content: [
// ...
// make sure it's pointing to the ROOT node_module
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
],
theme: {
@ -95,16 +113,6 @@ export default function App() {
}
```
### Setup pnpm (optional)
If you are using pnpm, you need to add the following code to your `.npmrc` file:
```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.
</Steps>
<Blockquote

30
apps/docs/content/docs/frameworks/vite.mdx
View File

@ -10,7 +10,7 @@ Requirements:
- [Vite 2](https://vitejs.dev/) or later
- [React 18](https://reactjs.org/) or later
- [Tailwind CSS 3.4](https://tailwindcss.com/docs/guides/vite#react) or later
- [Framer Motion 4](https://www.framer.com/motion/) or later
- [Framer Motion 11](https://www.framer.com/motion/) or later
------
@ -29,15 +29,33 @@ In your Vite React project, run one of the following command to install NextUI:
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 {8,13-14}
// tailwind.config.js
@ -80,16 +98,6 @@ ReactDOM.createRoot(document.getElementById('root')).render(
)
```
### Setup pnpm (optional)
If you are using pnpm, you need to add the following code to your `.npmrc` file:
```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.
</Steps>
<Blockquote

67
apps/docs/content/docs/guide/installation.mdx
View File

@ -9,7 +9,7 @@ Requirements:
- [React 18](https://reactjs.org/) or later
- [Tailwind CSS 3.4](https://tailwindcss.com/) or later
- [Framer Motion 4](https://www.framer.com/motion/) or later
- [Framer Motion 11](https://www.framer.com/motion/) or later
---
@ -94,11 +94,11 @@ Filtered results for: Enter something to filter
## Manual Installation
If you prefer not to use the CLI, follow these steps to manually set up NextUI in your project:
If you prefer not to use the CLI, you may try either global installation or individual installation to set up NextUI in your project:
### Global Installation
The easiest way to get started with NextUI is to use the global installation. Which means
The easiest way to get started with NextUI is to use the global installation, which means
that all the components are imported from a single package.
Follow the steps below to install all NextUI components:
@ -118,13 +118,31 @@ To install NextUI, run one of the following commands in your terminal:
}}
/>
#### 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/installation) to install Tailwind CSS. Then you need to add
the following code to your `tailwind.config.js` file:
```js {8,13-14}
<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 {9,14-15}
// tailwind.config.js
const {nextui} = require("@nextui-org/react");
@ -132,6 +150,7 @@ const {nextui} = require("@nextui-org/react");
module.exports = {
content: [
// ...
// make sure it's pointing to the ROOT node_module
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
],
theme: {
@ -162,16 +181,6 @@ function App() {
}
```
#### Setup pnpm (optional)
If you are using pnpm, you need to add the following code to your `.npmrc` file:
```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.
</Steps>
### Individual Installation
@ -180,7 +189,9 @@ NextUI is also available as individual packages. You can install each package se
is useful if you want to reduce the size of your CSS bundle as it will only include styles for the components
you're actually using.
> **Note**: JavaScript bundle size will not change due to tree shaking support in NextUI.
<Blockquote color="primary">
**Note**: JavaScript bundle size will not change due to tree shaking support in NextUI.
</Blockquote>
Follow the steps below to install each package separately:
@ -217,6 +228,20 @@ in your terminal:
}}
/>
#### 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
TailwindCSS setup changes a bit when you use individual packages. You only need to add the
@ -278,18 +303,6 @@ function App() {
);
}
```
#### Setup pnpm (optional)
If you are using pnpm, you need to add the following code to your `.npmrc` file:
```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.
</Steps>
<Blockquote color="warning">

88
apps/docs/content/docs/guide/upgrade-to-v2.mdx
View File

@ -10,7 +10,7 @@ Requirements:
- [React 18](https://reactjs.org/) or later
- [Tailwind CSS 3.4](https://tailwindcss.com/) or later
- [Framer Motion 4](https://www.framer.com/motion/) or later
- [Framer Motion 11](https://www.framer.com/motion/) or later
-----
@ -42,6 +42,20 @@ In your Next.js project, run one of the following command to install NextUI:
}}
/>
### 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
@ -49,7 +63,7 @@ NextUI is built on top of Tailwind CSS, so you need to install Tailwind CSS firs
the following code to your `tailwind.config.js` file:
```js {8,13-14}
```js {9,14-15}
// tailwind.config.js
const { nextui } = require("@nextui-org/react");
@ -57,6 +71,7 @@ const { nextui } = require("@nextui-org/react");
module.exports = {
content: [
// ...
// make sure it's pointing to the ROOT node_module
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
],
theme: {
@ -131,16 +146,6 @@ export default function Page() {
> **Important 🚨**: Note that you need to import the component from the individual package, not the from `@nextui-org/react`.
### Setup pnpm (optional)
If you are using pnpm, you need to add the following code to your `.npmrc` file:
```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.
</Steps>
<Spacer y={8} />
@ -162,6 +167,20 @@ In your Next.js project, run one of the following command to install NextUI:
}}
/>
### 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
@ -169,7 +188,7 @@ NextUI is built on top of Tailwind CSS, so you need to install Tailwind CSS firs
the following code to your `tailwind.config.js` file:
```js {8,13-14}
```js {9,14-15}
// tailwind.config.js
const { nextui } = require("@nextui-org/react");
@ -177,6 +196,7 @@ const { nextui } = require("@nextui-org/react");
module.exports = {
content: [
// ...
// make sure it's pointing to the ROOT node_module
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
],
theme: {
@ -222,16 +242,6 @@ export default function Page() {
}
```
### Setup pnpm (optional)
If you are using pnpm, you need to add the following code to your `.npmrc` file:
```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.
</Steps>
## React upgrade steps
@ -250,7 +260,6 @@ NextUI v2 requires React 18 or later. To upgrade React, run the following comman
}}
/>
### Install Framer motion
In v2, NextUI now requires `framer-motion` as a dependency. To install both, use the following command:
@ -263,11 +272,29 @@ In v2, NextUI now requires `framer-motion` as a dependency. To install both, use
}}
/>
### 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.
### TailwindCSS Setup
NextUI v2 now uses Tailwind CSS. Add the NextUI plugin to your `tailwind.config.js` file:
```js {9, 13-14}
<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 {9,14-15}
// tailwind.config.js
const { nextui } = require("@nextui-org/react");
@ -275,6 +302,7 @@ const { nextui } = require("@nextui-org/react");
module.exports = {
content: [
// ...
// make sure it's pointing to the ROOT node_module
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
],
theme: {
@ -322,16 +350,6 @@ export default function Page() {
}
```
### Setup pnpm (optional)
If you are using pnpm, you need to add the following code to your `.npmrc` file:
```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.
</Steps>
<Blockquote