refactor(docs): overall documentation #3274
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
WalkthroughThe changes primarily focus on improving clarity and consistency in the NextUI documentation, particularly around installation instructions and setup for different environments and package managers. Key updates include refining instructions for pnpm usage, updating dependencies (e.g., Framer Motion from version 4 to 11), and adjusting Tailwind CSS setup steps. The goal is to provide a more streamlined, error-free setup experience, especially for pnpm and monorepo users, thus addressing several common pain points in the guide. Changes
Sequence Diagram(s)Not applicable due to the nature of the changes being primarily documentation-related with no significant control flow modifications. Assessment against linked issues
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Outside diff range and nitpick comments (12)
apps/docs/content/docs/components/chip.mdx (1)
Line range hint
109-111: Correct the preposition for "side" to "on" in the descriptions.- | Avatar to be rendered in the left side of the chip. | - | + | Avatar to be rendered on the left side of the chip. | - | - | Element to be rendered in the left side of the chip. This prop overrides the `avatar` prop. | - | + | Element to be rendered on the left side of the chip. This prop overrides the `avatar` prop. | - | - | Element to be rendered in the right side of the chip. This prop overrides the default close button when `onClose` is passed. | - | + | Element to be rendered on the right side of the chip. This prop overrides the default close button when `onClose` is passed. | - |apps/docs/content/docs/customization/theme.mdx (1)
Line range hint
153-153: Consider adding a hyphen to "Theme based variants".- ### Theme based variants + ### Theme-based variantsapps/docs/content/docs/guide/installation.mdx (2)
Line range hint
71-71: Consider rephrasing "leave out" to enhance clarity.- If you leave out the component name, the CLI will prompt you to select the components you want to add. + If you omit the component name, the CLI will prompt you to select the components you want to add.
Line range hint
137-249: Reduce repetition of the phrase "you need to" by varying the sentence structure.- Then you need to add the following code to your `tailwind.config.js` file: + Then, add the following code to your `tailwind.config.js` file: - If you want to use the [Button](/docs/components/button) component, you need to run one of the following commands in your terminal: + To use the [Button](/docs/components/button) component, run one of the following commands in your terminal: - After modifying the `.npmrc` file, you need to run `pnpm install` again to ensure that the dependencies are installed correctly. + After modifying the `.npmrc` file, run `pnpm install` again to ensure that the dependencies are installed correctly. - You only need to add the styles of the components you're using to your `tailwind.config.js` file. + Only add the styles of the components you're using to your `tailwind.config.js` file.Tools
LanguageTool
[style] ~137-~137: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing. (REP_NEED_TO_VB)
Context: ...is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can fol...
[style] ~138-~138: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing. (REP_NEED_TO_VB)
Context: ...tion) to install Tailwind CSS. Then you need to add the following code to your `tailwin...apps/docs/content/docs/guide/upgrade-to-v2.mdx (2)
Line range hint
26-26: Add a comma after "By default" for grammatical correctness.- By default it uses Server Components. + By default, it uses Server Components.
Line range hint
61-187: Reduce repetition of the phrase "you need to" by varying the sentence structure.- NextUI is built on top of Tailwind CSS, so you need to install Tailwind CSS first. + NextUI is built on top of Tailwind CSS, so begin by installing Tailwind CSS. - Then you need to add the following code to your `tailwind.config.js` file: + Then, add the following code to your `tailwind.config.js` file:Tools
LanguageTool
[style] ~176-~176: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing. (REP_NEED_TO_VB)
Context: ...Blockquote> If you are using pnpm, you need to add the following line to your.npmrc...
[style] ~186-~186: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing. (REP_NEED_TO_VB)
Context: ...is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can fol...
[style] ~187-~187: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing. (REP_NEED_TO_VB)
Context: ...xtjs) to install Tailwind CSS. Then you need to add the following code to your `tailwi...apps/docs/content/docs/frameworks/nextjs.mdx (3)
203-203: Repetition of the provider setup under a different section. While it's the same code, it's used here for clarity in a different context (Setup Provider section).Consider referencing the earlier snippet to avoid duplication, ensuring the documentation remains DRY.
358-358: The RootLayout setup is repeated here under a different section. This might be intentional for educational purposes, but it's generally good to avoid code duplication.Reference the earlier snippet to maintain DRY principles in documentation.
442-442: The provider setup under thepagesdirectory is repeated. While this might be for clarity, referencing previous sections can help reduce redundancy.Consider linking to the previous instance of this setup to maintain DRY principles.
apps/docs/content/docs/components/date-input.mdx (2)
Line range hint
271-271: Use "an" instead of "a" before words that start with a vowel sound for grammatical correctness.- When the date-input has a end content. + When the date-input has an end content.
Line range hint
308-309: Use "on" instead of "in" with "side" to correct prepositional usage.- Element to be rendered in the left side of the date input. + Element to be rendered on the left side of the date input. - Element to be rendered in the right side of the date input. + Element to be rendered on the right side of the date input.apps/docs/content/docs/components/date-picker.mdx (1)
Line range hint
322-323: Use "on" instead of "in" with "side" to correct prepositional usage.- Element to be rendered in the left side of the date-picker. + Element to be rendered on the left side of the date-picker. - Element to be rendered in the right side of the date-picker. + Element to be rendered on the right side of the date-picker.
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (24)
- apps/docs/components/docs/components/package-managers.tsx (1 hunks)
- apps/docs/content/blog/nextui-v2.mdx (1 hunks)
- apps/docs/content/docs/components/accordion.mdx (3 hunks)
- apps/docs/content/docs/components/avatar.mdx (2 hunks)
- apps/docs/content/docs/components/checkbox.mdx (1 hunks)
- apps/docs/content/docs/components/chip.mdx (1 hunks)
- apps/docs/content/docs/components/circular-progress.mdx (3 hunks)
- apps/docs/content/docs/components/code.mdx (1 hunks)
- apps/docs/content/docs/components/date-input.mdx (1 hunks)
- apps/docs/content/docs/components/date-picker.mdx (3 hunks)
- apps/docs/content/docs/components/input.mdx (5 hunks)
- apps/docs/content/docs/components/link.mdx (3 hunks)
- apps/docs/content/docs/components/radio-group.mdx (3 hunks)
- apps/docs/content/docs/components/snippet.mdx (1 hunks)
- apps/docs/content/docs/components/spinner.mdx (1 hunks)
- apps/docs/content/docs/components/switch.mdx (3 hunks)
- apps/docs/content/docs/components/textarea.mdx (3 hunks)
- apps/docs/content/docs/customization/theme.mdx (1 hunks)
- apps/docs/content/docs/frameworks/astro.mdx (3 hunks)
- apps/docs/content/docs/frameworks/nextjs.mdx (13 hunks)
- apps/docs/content/docs/frameworks/remix.mdx (4 hunks)
- apps/docs/content/docs/frameworks/vite.mdx (3 hunks)
- apps/docs/content/docs/guide/installation.mdx (7 hunks)
- apps/docs/content/docs/guide/upgrade-to-v2.mdx (8 hunks)
Files skipped from review due to trivial changes (6)
- apps/docs/components/docs/components/package-managers.tsx
- apps/docs/content/docs/components/circular-progress.mdx
- apps/docs/content/docs/components/code.mdx
- apps/docs/content/docs/components/radio-group.mdx
- apps/docs/content/docs/components/snippet.mdx
- apps/docs/content/docs/components/switch.mdx
Additional context used
LanguageTool
apps/docs/content/docs/components/spinner.mdx
[uncategorized] ~9-~9: You might be missing the article “the” here. (AI_EN_LECTOR_MISSING_DETERMINER_THE)
Context: ...ontent/components/spinner"; # Spinner Spinner express an unspecified wait time or dis...
[uncategorized] ~10-~10: This verb does not appear to agree with the subject. Consider using a different form. (AI_EN_LECTOR_REPLACEMENT_VERB_AGREEMENT)
Context: ...omponents/spinner"; # Spinner Spinner express an unspecified wait time or display the...
[uncategorized] ~10-~10: This verb does not appear to agree with the subject. Consider using a different form. (AI_EN_LECTOR_REPLACEMENT_VERB_AGREEMENT)
Context: ...ner express an unspecified wait time or display the length of a process. <ComponentLin...apps/docs/content/docs/frameworks/vite.mdx
[uncategorized] ~25-~25: The grammatical number of this noun doesn’t look right. Consider replacing it. (AI_EN_LECTOR_REPLACEMENT_NOUN_NUMBER)
Context: ...React project, run one of the following command to install NextUI: <PackageManagers ...
[style] ~52-~52: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing. (REP_NEED_TO_VB)
Context: ...is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can fol...
[style] ~53-~53: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing. (REP_NEED_TO_VB)
Context: ...eact) to install Tailwind CSS. Then you need to add the following code to your `tailwi...
[style] ~80-~80: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing. (REP_NEED_TO_VB)
Context: ...der Setup After installing NextUI, you need to set up theNextUIProviderat the `roo...apps/docs/content/docs/frameworks/remix.mdx
[style] ~51-~51: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing. (REP_NEED_TO_VB)
Context: ...is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can fol...
[style] ~52-~52: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing. (REP_NEED_TO_VB)
Context: ...emix) to install Tailwind CSS. Then you need to add the following code to your `tailwi...
[style] ~81-~81: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing. (REP_NEED_TO_VB)
Context: ...der Setup After installing NextUI, you need to set up theNextUIProviderat the `roo...
[uncategorized] ~83-~83: Possible missing comma found. (AI_HYDRA_LEO_MISSING_COMMA)
Context: ...r application. Go to the src directory and insideroot.tsx, wrap `NextUIProvider...apps/docs/content/docs/frameworks/astro.mdx
[style] ~57-~57: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing. (REP_NEED_TO_VB)
Context: ...is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can fol...
[style] ~58-~58: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing. (REP_NEED_TO_VB)
Context: ...stro) to install Tailwind CSS. Then you need to add the following code to your `tailwi...
[uncategorized] ~101-~101: A comma may be missing after the conjunctive/linking adverb ‘Otherwise’. (SENT_START_CONJUNCTIVE_LINKING_ADVERB_COMMA)
Context: ...ake it visible only on the client side. Otherwise some functionalities of NextUI componen...apps/docs/content/docs/components/chip.mdx
[grammar] ~109-~109: In this case, the usual preposition with “side” is “on”, not “in”. Did you mean “on the left side”? (IN_ON_THE_RIGHT_HAND_SIDE)
Context: ... | Avatar to be rendered in the left side of the chip. ...
[grammar] ~110-~110: In this case, the usual preposition with “side” is “on”, not “in”. Did you mean “on the left side”? (IN_ON_THE_RIGHT_HAND_SIDE)
Context: ... | Element to be rendered in the left side of the chip. This prop overrides the `a...
[grammar] ~111-~111: In this case, the usual preposition with “side” is “on”, not “in”. Did you mean “on the right side”? (IN_ON_THE_RIGHT_HAND_SIDE)
Context: ... | Element to be rendered in the right side of the chip. This prop overrides the de...apps/docs/content/docs/customization/theme.mdx
[uncategorized] ~153-~153: This expression is usually spelled with a hyphen. (BASED_HYPHEN)
Context: ...purple-dark">... ``` ### Theme based variants NextUI enables you to apply T...apps/docs/content/docs/guide/installation.mdx
[style] ~71-~71: To strengthen your wording, consider replacing the phrasal verb “leave out”. (OMIT_EXCLUDE)
Context: ...Block bash nextui add --all ``` If you leave out the component name, the CLI will prompt...
[style] ~137-~137: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing. (REP_NEED_TO_VB)
Context: ...is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can fol...
[style] ~138-~138: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing. (REP_NEED_TO_VB)
Context: ...tion) to install Tailwind CSS. Then you need to add the following code to your `tailwin...
[style] ~218-~218: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing. (REP_WANT_TO_VB)
Context: ...nt you want to use. For example, if you want to use the [Button](/docs/components/butto...
[style] ~243-~243: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing. (REP_NEED_TO_VB)
Context: ... After modifying the.npmrcfile, you need to runpnpm installagain to ensure that...
[style] ~247-~247: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing. (REP_NEED_TO_VB)
Context: ...n you use individual packages. You only need to add the styles of the components you're...
[style] ~249-~249: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing. (REP_NEED_TO_VB)
Context: .../docs/components/button) component, you need to add the following code to your `tailwin...apps/docs/content/docs/guide/upgrade-to-v2.mdx
[uncategorized] ~26-~26: Did you mean: “By default,”? (BY_DEFAULT_COMMA)
Context: ...duces a newapp/directory structure. By default it uses Server Components. As NextUI c...
[style] ~61-~61: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing. (REP_NEED_TO_VB)
Context: ...is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can fol...
[style] ~62-~62: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing. (REP_NEED_TO_VB)
Context: ...xtjs) to install Tailwind CSS. Then you need to add the following code to your `tailwi...
[style] ~176-~176: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing. (REP_NEED_TO_VB)
Context: ...Blockquote> If you are using pnpm, you need to add the following line to your.npmrc...
[style] ~186-~186: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing. (REP_NEED_TO_VB)
Context: ...is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can fol...
[style] ~187-~187: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing. (REP_NEED_TO_VB)
Context: ...xtjs) to install Tailwind CSS. Then you need to add the following code to your `tailwi...apps/docs/content/docs/components/avatar.mdx
[style] ~77-~77: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym. (ENGLISH_WORD_REPEAT_BEGINNING_RULE)
Context: ... random, accessible background color. - If there's nonameprop, we use a defaul...
[style] ~78-~78: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym. (ENGLISH_WORD_REPEAT_BEGINNING_RULE)
Context: ...nameprop, we use a default avatar. If theshowFallbackis not passed, the f...
[uncategorized] ~97-~97: Did you mean: “By default,”? (BY_DEFAULT_COMMA)
Context: ...g a function to thegetInitialsprop. By default we merge the first characters of each w...apps/docs/content/docs/components/link.mdx
[uncategorized] ~84-~84: If this is a compound adjective that modifies the following noun, use a hyphen. (EN_COMPOUND_ADJECTIVE_INTERNAL)
Context: ...k>` component works with frameworks and client side routers like [Next.js](https://nextjs.o...
[style] ~126-~126: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym. (ENGLISH_WORD_REPEAT_BEGINNING_RULE)
Context: ...nts or custom element types via ARIA. - Support for disabled links. - Keyboard users ma...
[uncategorized] ~149-~149: You might be missing the article “a” here. (AI_EN_LECTOR_MISSING_DETERMINER_A)
Context: ... Whether the link should be rendered as block with a hover effect. ...apps/docs/content/docs/components/checkbox.mdx
[style] ~71-~71: Consider using a different verb to strengthen your wording. (MAKE_SURE_ENSURE)
Context: ... passed to your icon component. Please make sure thatisSelected,isIndeterminate, a...apps/docs/content/blog/nextui-v2.mdx
[uncategorized] ~203-~203: Possible missing comma found. (AI_HYDRA_LEO_MISSING_COMMA)
Context: ...automatically handles TailwindCSS class conflicts and all NextUI components are built on ...
[uncategorized] ~226-~226: You might be missing the article “the” here. (AI_EN_LECTOR_MISSING_DETERMINER_THE)
Context: ...t Install only what you need, reducing CSS bundle as it will only include styles f...
[uncategorized] ~281-~281: Possible missing comma found. (AI_HYDRA_LEO_MISSING_COMMA)
Context: ...s/tabs): Organize content into separate views where only one view is visible at a tim...
[style] ~317-~317: Consider using a more formal and expressive alternative to ‘amazing’. (AWESOME)
Context: ...nstallation). We can't wait to see the amazing things you'll build with *NextUI v2.0...apps/docs/content/docs/frameworks/nextjs.mdx
[uncategorized] ~24-~24: Did you mean: “By default,”? (BY_DEFAULT_COMMA)
Context: ...duces a newapp/directory structure. By default it uses Server Components. As NextUI c...
[style] ~77-~77: To strengthen your wording, consider replacing the phrasal verb “leave out”. (OMIT_EXCLUDE)
Context: ...Block bash nextui add --all ``` If you leave out the component name, the CLI will prompt...
[style] ~170-~170: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing. (REP_NEED_TO_VB)
Context: ...is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can fol...
[style] ~171-~171: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing. (REP_NEED_TO_VB)
Context: ...xtjs) to install Tailwind CSS. Then you need to add the following code to your `tailwi...
[style] ~280-~280: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing. (REP_NEED_TO_VB)
Context: .../pagesNext.js project structure, you need to follow the steps below. ### create-nex...
[style] ~316-~316: To strengthen your wording, consider replacing the phrasal verb “leave out”. (OMIT_EXCLUDE)
Context: ...Block bash nextui add --all ``` If you leave out the component name, the CLI will prompt...
[style] ~409-~409: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing. (REP_NEED_TO_VB)
Context: ...is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can fol...
[style] ~410-~410: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing. (REP_NEED_TO_VB)
Context: ...xtjs) to install Tailwind CSS. Then you need to add the following code to your `tailwi...apps/docs/content/docs/components/input.mdx
[grammar] ~212-~212: In this case, the usual preposition with “side” is “on”, not “in”. Did you mean “on the left side”? (IN_ON_THE_RIGHT_HAND_SIDE)
Context: ... | Element to be rendered in the left side of the input. ...
[grammar] ~213-~213: In this case, the usual preposition with “side” is “on”, not “in”. Did you mean “on the right side”? (IN_ON_THE_RIGHT_HAND_SIDE)
Context: ... | Element to be rendered in the right side of the input. ...apps/docs/content/docs/components/textarea.mdx
[grammar] ~153-~153: In this case, the usual preposition with “side” is “on”, not “in”. Did you mean “on the left side”? (IN_ON_THE_RIGHT_HAND_SIDE)
Context: ... | Element to be rendered in the left side of the input. ...
[grammar] ~154-~154: In this case, the usual preposition with “side” is “on”, not “in”. Did you mean “on the right side”? (IN_ON_THE_RIGHT_HAND_SIDE)
Context: ... | Element to be rendered in the right side of the input. ...apps/docs/content/docs/components/accordion.mdx
[grammar] ~10-~10: There seems to be a noun/verb agreement error. Did you mean “displays” or “displayed”? (SINGULAR_NOUN_VERB_AGREEMENT)
Context: ...nts/accordion"; # Accordion Accordion display a list of high-level options that can e...
[grammar] ~66-~66: The past tense and past participle of the verb “to split” is “split”. Alternatively you could use “separated” or “divided”. (SPLITTED)
Context: ...ants:light,shadow,borderedandsplitted. #### Light variant <CodeDemo title=...
[grammar] ~80-~80: The past tense and past participle of the verb “to split” is “split”. Alternatively you could use “separated” or “divided”. (SPLITTED)
Context: ...ordionContent.borderedVariant} /> #### Splitted variant <CodeDemo title="Splitted vari...
[style] ~92-~92: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing. (REP_WANT_TO_VB)
Context: ...ndedKeys} /> ### Disabled keys If you want to disable some items, you can set the `di...
[style] ~98-~98: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing. (REP_WANT_TO_VB)
Context: ...bledKeys} /> ### Start content If you want to display some content before the accordi...
[uncategorized] ~108-~108: A different word order might sound more natural. (AI_HYDRA_LEO_WORD_ORDER)
Context: ...ontent.indicator} /> The indicator can be also afunction, which receives the `isOpe...
[uncategorized] ~146-~146: Loose punctuation mark. (UNLIKELY_OPENING_PUNCTUATION)
Context: ...the following properties: -className: The class name of the accordion. Modify...
[style] ~183-~183: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym. (ENGLISH_WORD_REPEAT_BEGINNING_RULE)
Context: ...r the accordion item. -aria-controlsattribute for the accordion item. <Spacer y={4} ...
[typographical] ~193-~193: Consider adding a comma after ‘Usually’ for more clarity. (RB_LY_COMMA)
Context: ... | The contents of the collection. Usually the array ofAccordionItem...
[grammar] ~194-~194: The past tense and past participle of the verb “to split” is “split”. Alternatively you could use “separated” or “divided”. (SPLITTED)
Context: ... |light|shadow|bordered|splitted| The accordion appearance style. ...
[grammar] ~199-~199: Two determiners in a row. Choose either “the” or “each”. (DT_DT)
Context: ...r to display a divider at the bottom of the each accordion item. ...
[grammar] ~237-~237: Did you mean “setting”? Or maybe you should add a pronoun? In active voice, ‘allow’ + ‘to’ takes an object, usually a pronoun. (ALLOW_TO)
Context: ...dion-item-classnames) | Allows to set custom class names for the accordion it...apps/docs/content/docs/components/date-input.mdx
[style] ~100-~100: ‘taken into account’ might be wordy. Consider a shorter alternative. (EN_WORDINESS_PREMIUM_TAKEN_INTO_ACCOUNT)
Context: ...ncerns such as daylight saving time are taken into account when the value is manipulated. [@Inter...
[grammar] ~217-~217: When ‘24-hour’ is used as a modifier, it is usually spelled with a hyphen. (HOUR_HYPHEN)
Context: ...ateInput displays times in either 12 or 24 hour hour format depending on the user's loc...
[uncategorized] ~217-~217: Possible missing comma found. (AI_HYDRA_LEO_MISSING_COMMA)
Context: ...lays times in either 12 or 24 hour hour format depending on the user's locale. However...
[misspelling] ~271-~271: Use “an” instead of ‘a’ if the following word starts with a vowel sound, e.g. ‘an article’, ‘an hour’. (EN_A_VS_AN)
Context: ...nd-content**: When the date-input has a end content. Base on thoseendContent...
[grammar] ~308-~308: In this case, the usual preposition with “side” is “on”, not “in”. Did you mean “on the left side”? (IN_ON_THE_RIGHT_HAND_SIDE)
Context: ... | Element to be rendered in the left side of the date input. ...
[grammar] ~309-~309: In this case, the usual preposition with “side” is “on”, not “in”. Did you mean “on the right side”? (IN_ON_THE_RIGHT_HAND_SIDE)
Context: ... | Element to be rendered in the right side of the date input. ...
[grammar] ~319-~319: When ‘24-hour’ is used as a modifier, it is usually spelled with a hyphen. (HOUR_HYPHEN)
Context: ... | Whether to display the time in 12 or 24 hour format. This is determined by the user'...
[uncategorized] ~320-~320: A comma may be missing after the conjunctive/linking adverb ‘Typically’. (SENT_START_CONJUNCTIVE_LINKING_ADVERB_COMMA)
Context: ...t that is displayed in the date picker. Typically "day" for dates. ...apps/docs/content/docs/components/date-picker.mdx
[style] ~107-~107: ‘taken into account’ might be wordy. Consider a shorter alternative. (EN_WORDINESS_PREMIUM_TAKEN_INTO_ACCOUNT)
Context: ...ncerns such as daylight saving time are taken into account when the value is manipulated. [@Inter...
[typographical] ~224-~224: Usually, there’s no comma before “if”. (IF_NO_COMMA)
Context: ...lows displaying up to 3 months at a time, if screen space permits. <CodeDemo title=...
[grammar] ~322-~322: In this case, the usual preposition with “side” is “on”, not “in”. Did you mean “on the left side”? (IN_ON_THE_RIGHT_HAND_SIDE)
Context: ... | Element to be rendered in the left side of the date-picker. ...
[grammar] ~323-~323: In this case, the usual preposition with “side” is “on”, not “in”. Did you mean “on the right side”? (IN_ON_THE_RIGHT_HAND_SIDE)
Context: ... | Element to be rendered in the right side of the date-picker. ...
[typographical] ~330-~330: Consider adding a comma after ‘Usually’ for more clarity. (RB_LY_COMMA)
Context: ...icon to toggle the date picker popover. Usually a calendar icon. ...
[grammar] ~337-~337: When ‘24-hour’ is used as a modifier, it is usually spelled with a hyphen. (HOUR_HYPHEN)
Context: ... | Whether to display the time in 12 or 24 hour format. This is determined by the user'...
[uncategorized] ~338-~338: A comma may be missing after the conjunctive/linking adverb ‘Typically’. (SENT_START_CONJUNCTIVE_LINKING_ADVERB_COMMA)
Context: ...t that is displayed in the date picker. Typically "day" for dates. ...
Additional comments not posted (36)
apps/docs/content/docs/components/spinner.mdx (1)
71-71: Removed redundant space for consistency and cleaner syntax.apps/docs/content/docs/frameworks/vite.mdx (3)
13-13: Updated Framer Motion to version 11 to match the latest stable release.
32-32: Added installation command for the Bun package manager, accommodating users of this newer tool.
36-49: Enhanced clarity for users of pnpm with specific instructions on hoisting dependencies.apps/docs/content/docs/frameworks/remix.mdx (3)
12-12: Updated Framer Motion to version 11 to ensure compatibility with the latest features and fixes.
31-31: Included Bun installation command to support a broader range of package managers.
35-47: Provided detailed instructions for pnpm users on how to hoist dependencies, improving setup clarity.apps/docs/content/docs/frameworks/astro.mdx (3)
12-12: Updated the Framer Motion dependency to version 11, aligning with best practices for using the latest versions.
37-37: Added Bun as an installation option, catering to users of this emerging package manager.
41-53: Clarified the process for pnpm users regarding dependency hoisting, which is crucial for correct package resolution in monorepos.apps/docs/content/docs/components/avatar.mdx (2)
153-153: Ensure consistent usage of<Spacer y={4} />across the documentation for uniform spacing.
166-166: Ensure consistent usage of<Spacer y={4} />across the documentation for uniform spacing.apps/docs/content/docs/components/link.mdx (2)
107-107: Ensure consistent usage of<Spacer y={4} />across the documentation for uniform spacing.
120-120: Ensure consistent usage of<Spacer y={4} />across the documentation for uniform spacing.apps/docs/content/docs/components/checkbox.mdx (1)
130-130: Ensure consistent usage of<Spacer y={4} />across the documentation for uniform spacing.apps/docs/content/docs/frameworks/nextjs.mdx (10)
14-14: Update to Framer Motion 11 is aligned with the latest library standards.
103-103: This code snippet correctly demonstrates how to set up theNextUIProvider. It's clear and well-structured.
119-119: The code snippet for the RootLayout is well-implemented and follows best practices for React component structure.
150-150: Adding support for thebunpackage manager is a good enhancement, catering to users who prefer this over npm or yarn.
160-166: The instructions for setting up hoisted dependencies with pnpm are clear and beneficial for users working in a monorepo architecture.
178-186: The providedtailwind.config.jssetup is crucial for ensuring styles are applied correctly when usingpnpmand monorepo architecture. This snippet is correctly placed and well-explained.
389-389: The inclusion ofbunin the manual installation section is consistent and ensures that all users, regardless of their preferred package manager, have the necessary instructions.
399-405: The detailed instructions for modifying the.npmrcfile are crucial for pnpm users and are clearly explained.
417-425: The Tailwind CSS setup provided here is essential for ensuring that styles are applied correctly, especially in complex project setups like monorepos.
461-461: Proper use of theButtoncomponent from@nextui-org/reactdemonstrates good practices in component import and usage.apps/docs/content/docs/components/input.mdx (5)
88-88: The highlight for the password input feature is correctly updated to reflect the new line numbers in the code demo.
95-95: The clear button feature is well-documented with the correct line number highlighted for easy reference.
145-145: The custom styles section is correctly highlighted, providing users with clear guidance on how to apply custom styles to theInputcomponent.
158-158: The spacer component is used effectively here to create visual separation in the documentation, improving readability.
191-191: Another effective use of the spacer component to enhance the structure and readability of the documentation.apps/docs/content/docs/components/textarea.mdx (3)
102-102: Effective use of the spacer component to enhance the readability of the documentation.
123-123: Another instance where the spacer component is used to good effect, maintaining consistency in the documentation layout.
133-133: The use of the spacer component here continues to support the structured and easy-to-navigate layout of the documentation.apps/docs/content/docs/components/accordion.mdx (3)
154-154: The spacer component is used effectively here to create visual separation in the documentation, improving readability.
175-175: Another effective use of the spacer component to enhance the structure and readability of the documentation.
185-185: The consistent use of the spacer component across different component documentations helps maintain a uniform layout and readability.
There was a problem hiding this comment.
Actionable comments posted: 1
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (1)
- apps/docs/content/docs/frameworks/nextjs.mdx (15 hunks)
Additional context used
LanguageTool
apps/docs/content/docs/frameworks/nextjs.mdx
[uncategorized] ~24-~24: Did you mean: “By default,”? (BY_DEFAULT_COMMA)
Context: ...duces a newapp/directory structure. By default it uses Server Components. As NextUI c...
[style] ~76-~76: To strengthen your wording, consider replacing the phrasal verb “leave out”. (OMIT_EXCLUDE)
Context: ...Block bash nextui add --all ``` If you leave out the component name, the CLI will prompt...
[style] ~169-~169: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing. (REP_NEED_TO_VB)
Context: ...is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can fol...
[style] ~170-~170: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing. (REP_NEED_TO_VB)
Context: ...xtjs) to install Tailwind CSS. Then you need to add the following code to your `tailwi...
[style] ~279-~279: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing. (REP_NEED_TO_VB)
Context: .../pagesNext.js project structure, you need to follow the steps below. ### create-nex...
[style] ~315-~315: To strengthen your wording, consider replacing the phrasal verb “leave out”. (OMIT_EXCLUDE)
Context: ...Block bash nextui add --all ``` If you leave out the component name, the CLI will prompt...
[style] ~408-~408: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing. (REP_NEED_TO_VB)
Context: ...is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can fol...
[style] ~409-~409: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing. (REP_NEED_TO_VB)
Context: ...xtjs) to install Tailwind CSS. Then you need to add the following code to your `tailwi...
Additional comments not posted (12)
apps/docs/content/docs/frameworks/nextjs.mdx (12)
14-14: Updated the Framer Motion version requirement from 4 to 11.
102-102: Updated the provider setup inapp/providers.tsxandapp/layout.tsxto ensure proper integration with NextUI components.Also applies to: 118-118
149-149: Added support for thebunpackage manager.
153-166: Added detailed instructions for setting up hoisted dependencies with pnpm.
173-185: Updated the Tailwind CSS setup instructions to accommodate pnpm and monorepo users.
388-388: Added support for thebunpackage manager in the manual installation section.
392-405: Detailed the process for hoisting dependencies with pnpm in the manual installation section.
412-424: Updated Tailwind CSS setup to ensure compatibility with pnpm and monorepo architectures.
441-441: Ensure the MyApp component setup with NextUIProvider is correct and functional.
202-202: ```shell
#!/bin/bashCorrecting the regex patterns and re-running the verification script
Check if NextUIProvider is imported correctly
rg 'import {NextUIProvider} from '@nextui-org/react'' apps/docs/content/docs/frameworks/nextjs.mdx
Check if Providers component is defined and used correctly
rg 'export function Providers' apps/docs/content/docs/frameworks/nextjs.mdx
rg 'import {Providers} from "./providers"' apps/docs/content/docs/frameworks/nextjs.mdx--- `28-28`: Ensure the NextUI CLI installation command is correct and functional. --- `54-54`: ```shell #!/bin/bash # Description: Ensure node.js and npm are installed using platform-agnostic methods, then install nextui and verify the automatic installation commands. # Step 1: Check if node.js is installed, install it if not using nvm (Node Version Manager). if ! command -v node &> /dev/null then curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm nvm install node fi # Step 2: Check if npm is installed, install it if not. if ! command -v npm &> /dev/null then curl -L https://www.npmjs.com/install.sh | sh fi # Step 3: Install nextui globally if it is not already installed. if ! command -v nextui &> /dev/null then npm install -g @nextui-org/cli fi # Step 4: Run the installation commands in a clean environment. nextui add button --dry-run nextui add button input --dry-run nextui add --all --dry-run
Closes #2599
📝 Description
⛳️ Current behavior (updates)
🚀 New behavior
💣 Is this a breaking change (Yes/No):
📝 Additional Information
Summary by CodeRabbit