docs: capitalize the React framework name in prose

packages/docs/src/content/docs/components/accordion/index.mdx

@@ -31,7 +31,7 @@ Add `flush` to remove the default `background-color`, some borders, and some rou
 
 ### Always open
 
-Add `alwaysOpen` property to make react accordion items stay open when another item is opened.
+Add `alwaysOpen` property to make React accordion items stay open when another item is opened.
 
 <Example code={AccordionAlwaysOpenExampleRaw} name="AccordionAlwaysOpenExample" componentName="React Accordion">
   <AccordionAlwaysOpenExample client:only="react" />

packages/docs/src/content/docs/components/alert/index.mdx

@@ -43,7 +43,7 @@ Click the button below to show an alert (hidden with inline styles to start), th
 
 ### Link color
 
-Use the `<CAlertLink>` component to immediately give matching colored links inside any react alert component.
+Use the `<CAlertLink>` component to immediately give matching colored links inside any React alert component.
 
 <Example code={AlertLinkColorExampleRaw} name="AlertLinkColorExample" componentName="React Alert">
   <AlertLinkColorExample client:only="react" />
@@ -59,13 +59,13 @@ React Alert can also incorporate supplementary components &amp; elements like he
 
 ### Icons
 
-Similarly, you can use [flexbox utilities](https://coreui.io/bootstrap/docs/utilities/flex) and [CoreUI Icons](https://coreui.io/icons/) to create react alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles.
+Similarly, you can use [flexbox utilities](https://coreui.io/bootstrap/docs/utilities/flex) and [CoreUI Icons](https://coreui.io/icons/) to create React alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles.
 
 <Example code={AlertIcons1ExampleRaw} name="AlertIcons1Example" componentName="React Alert">
   <AlertIcons1Example client:only="react" />
 </Example>
 
-Need more than one icon for your react alerts? Consider using [CoreUI Icons](https://coreui.io/icons/).
+Need more than one icon for your React alerts? Consider using [CoreUI Icons](https://coreui.io/icons/).
 
 <Example code={AlertIcons2ExampleRaw} name="AlertIcons2Example" componentName="React Alert">
   <AlertIcons2Example client:only="react" />

packages/docs/src/content/docs/components/avatar/index.mdx

@@ -47,23 +47,23 @@ Incorporate icons within React avatars, allowing for a visual representation usi
 
 ## Rounded avatars
 
-Use the `shape="rounded"` prop to make react avatars squared with rounded corners.
+Use the `shape="rounded"` prop to make React avatars squared with rounded corners.
 
 <Example code={AvatarRoundedRaw} name="AvatarRounded" componentName="React Avatar">
   <AvatarRounded client:only="react" />
 </Example>
 
 ## Square avatars
 
-Use the `shape="rounded-0"` prop to make react avatars squared.
+Use the `shape="rounded-0"` prop to make React avatars squared.
 
 <Example code={AvatarSquareRaw} name="AvatarSquare" componentName="React Avatar">
   <AvatarSquare client:only="react" />
 </Example>
 
 ## Sizes
 
-Fancy larger or smaller react avatar component? Add `size="xl"`, `size="lg"`, `size="md"` or `size="sm"` for additional sizes.
+Fancy larger or smaller React avatar component? Add `size="xl"`, `size="lg"`, `size="md"` or `size="sm"` for additional sizes.
 
 <Example code={AvatarSizesRaw} name="AvatarSizes" componentName="React Avatar">
   <AvatarSizes client:only="react" />

packages/docs/src/content/docs/components/badge/index.mdx

@@ -37,7 +37,7 @@ React badges can be used as part of links or buttons to provide a counter.
   <Badge2Example client:only="react" />
 </Example>
 
-Remark that depending on how you use them, react badges may be complicated for users of screen readers and related assistive technologies.
+Remark that depending on how you use them, React badges may be complicated for users of screen readers and related assistive technologies.
 
 Unless the context is clear, consider including additional context with a visually hidden piece of additional text.
 
@@ -61,7 +61,7 @@ You can also create more generic indicators without a counter using a few more u
 
 ## Contextual variations
 
-Add any of the below-mentioned `color` props to modify the presentation of a react badge.
+Add any of the below-mentioned `color` props to modify the presentation of a React badge.
 
 <Example code={BadgeContextualVariationsRaw} name="BadgeContextualVariations" componentName="React Badge">
   <BadgeContextualVariations client:only="react" />

packages/docs/src/content/docs/components/breadcrumb/index.mdx

@@ -20,7 +20,7 @@ import BreadcrumbDividers3ExampleJsRaw from './examples/BreadcrumbDividers3Examp
 
 ## How to use React Breadcrumb Component.
 
-The react breadcrumb navigation provides links back to each previous page the user navigated through and shows the current location in a website or an application. You don’t have to add separators, because they automatically added in CSS through ::before and content.
+The React breadcrumb navigation provides links back to each previous page the user navigated through and shows the current location in a website or an application. You don’t have to add separators, because they automatically added in CSS through ::before and content.
 
 <Example code={BreadcrumbExampleRaw} name="BreadcrumbExample" componentName="React Breadcrumb">
   <BreadcrumbExample client:only="react" />
@@ -63,7 +63,7 @@ $breadcrumb-divider: none;
 
 ## Accessibility
 
-Since react breadcrumbs provide navigation, it's useful to add a significant label such as `aria-label="breadcrumb"` to explain the type of navigation implemented in the `<nav>` element. You should also add an `aria-current="page"` to the last item of the set to show that it represents the current page. **CoreUI for React.js automatically add all of this labels to breadcrumb's components.**
+Since React breadcrumbs provide navigation, it's useful to add a significant label such as `aria-label="breadcrumb"` to explain the type of navigation implemented in the `<nav>` element. You should also add an `aria-current="page"` to the last item of the set to show that it represents the current page. **CoreUI for React.js automatically add all of this labels to breadcrumb's components.**
 
 For more information, see the [WAI-ARIA Authoring Practices for the breadcrumb pattern](https://www.w3.org/TR/wai-aria-practices/#breadcrumb).
 

packages/docs/src/content/docs/components/button/index.mdx

@@ -58,7 +58,7 @@ CoreUI includes a bunch of predefined buttons components, each serving its own s
 
 ## Disable text wrapping
 
-If you don't want the react button text to wrap, you can add the `.text-nowrap` className to the `<CButton>`. In Sass, you can set `$btn-white-space: nowrap` to disable text wrapping for each button.
+If you don't want the React button text to wrap, you can add the `.text-nowrap` className to the `<CButton>`. In Sass, you can set `$btn-white-space: nowrap` to disable text wrapping for each button.
 
 ## Button components
 
@@ -117,7 +117,7 @@ To apply theme colors to React ghost buttons, use the `color` and `variant="ghos
 
 ## Sizes
 
-Larger or smaller react buttons? Add `size="lg"` or `size="sm"` for additional sizes.
+Larger or smaller React buttons? Add `size="lg"` or `size="sm"` for additional sizes.
 
 <Example code={ButtonSizesExampleRaw} name="ButtonSizesExample" componentName="React Button">
   <ButtonSizesExample client:only="react" />

packages/docs/src/content/docs/components/card/index.mdx

@@ -69,7 +69,7 @@ import CardGrid4ExampleRaw from './examples/CardGrid4Example.tsx?raw'
 
 ## About
 
-A react card component is a content container. It incorporates options for images, headers, and footers, a wide variety of content, contextual background colors, and excellent display options.
+A React card component is a content container. It incorporates options for images, headers, and footers, a wide variety of content, contextual background colors, and excellent display options.
 
 ## Example
 

packages/docs/src/content/docs/components/icon.mdx

@@ -42,11 +42,11 @@ yarn add @coreui/icons @coreui/icons-react
 
 ## Usage
 
-Import react icons using one of these two options:
+Import React icons using one of these two options:
 
-### Single react icon
+### Single React icon
 
-To use a single react icon, import the `<CIcon>` component and the desired icon(s) from the `@coreui/icons` library. Then, include the `<CIcon>` component in your code and specify the icon prop with the imported icon variable. Additionally, you can set the desired size for the icon using the `size` prop.
+To use a single React icon, import the `<CIcon>` component and the desired icon(s) from the `@coreui/icons` library. Then, include the `<CIcon>` component in your code and specify the icon prop with the imported icon variable. Additionally, you can set the desired size for the icon using the `size` prop.
 
 <Example>
   <IconDemo0 client:only="react" />
@@ -62,7 +62,7 @@ import { cilList, cilShieldAlt } from '@coreui/icons';
 ...
 ```
 
-### All react icons
+### All React icons
 
 To use all icons available in the CoreUI React Icons package, import the CIcon component and the entire `@coreui/icons` library using the `* as` syntax. Then, reference the desired icon within the `icon` prop.
 
@@ -108,7 +108,7 @@ CoreUI React Icons leverage local CSS variables, such as `--ci-primary-color` an
 
 ### Sizing
 
-Set heights of react icons using size property like size="lg" and size="sm".
+Set heights of React icons using size property like size="lg" and size="sm".
 
 ```jsx preview
 <CIcon icon={cilList} size="sm" />
@@ -157,11 +157,11 @@ import { CIconSvg } from '@coreui/icons-react';
 
 ## Accessibility
 
-It's crucial for react icons to be seen by as many people as possible because they have the power to communicate a variety of meaningful information.
+It's crucial for React icons to be seen by as many people as possible because they have the power to communicate a variety of meaningful information.
 
 People who are blind, have low vision, or have other visual impairments make up approximately 10% of the world's population, and more than 5% of people worldwide have hearing loss that makes them unable to function normally.
 
-Therefore, it's crucial to make sure that the assistive equipment for people with disabilities, such as screen readers, either ignores or better understands the react icons you use online.
+Therefore, it's crucial to make sure that the assistive equipment for people with disabilities, such as screen readers, either ignores or better understands the React icons you use online.
 
 Icons are used in one of two ways on websites, apps, and other digital spaces.
 
@@ -177,7 +177,7 @@ In certain circumstances, the details of the icon ought to be concealed from the
 
 You need to make sure that consumers understand the meaning an icon is intended to represent by giving them text-based alternatives.
 
-This applies to both the content you're using icons to represent (such as the status of your shopping cart or the number of unread messages), as well react icons as interactive controls (such as buttons, form elements, toggles, etc.).
+This applies to both the content you're using icons to represent (such as the status of your shopping cart or the number of unread messages), as well React icons as interactive controls (such as buttons, form elements, toggles, etc.).
 
 ### CoreUI React Icons and Accessibility
 
@@ -228,7 +228,7 @@ CoreUI React Icon Component will make the necessary adjustments so that only scr
 </button>
 ```
 
-## Available react icons
+## Available React icons
 
 The CoreUI React Icons package includes a comprehensive library of more than 1500 icons, available in various formats such as SVG, PNG, and Webfonts. These popular icons are meticulously crafted symbols representing common actions and items. You can utilize them in your digital products, whether they are web or mobile applications, to enhance their visual appeal and user experience.
 

packages/docs/src/content/docs/components/list-group/index.mdx

@@ -1,7 +1,7 @@
 ---
 title: "React List Group Component"
 name: "List group"
-description: "React List Group component allows displaying a series of content. Learn how to use react list group to build complex list structure on your website."
+description: "React List Group component allows displaying a series of content. Learn how to use React list group to build complex list structure on your website."
 otherFrameworks:
   - list-group
 ---

packages/docs/src/content/docs/components/modal/index.mdx

@@ -35,7 +35,7 @@ A modal component is a fundamental part of modern UI design, providing a focused
 
 ### Static modal component example
 
-Below is a static react modal component example (meaning its `position` and `display` have been overridden). Included are the modal header, modal body (required for `padding`), and modal footer (optional). We ask that you include react modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.
+Below is a static React modal component example (meaning its `position` and `display` have been overridden). Included are the modal header, modal body (required for `padding`), and modal footer (optional). We ask that you include React modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.
 
 <Example>
   <div className="modal position-static d-block" tabIndex="-1">
@@ -97,7 +97,7 @@ When modals become too long for the user's viewport or device, they scroll indep
   <ModalScrollingLongContentExample client:only="react" />
 </Example>
 
-You can also create a scrollable react modal component that allows scroll the modal body by adding `scrollable` prop.
+You can also create a scrollable React modal component that allows scroll the modal body by adding `scrollable` prop.
 
 <Example code={ModalScrollingLongContent2ExampleRaw} name="ModalScrollingLongContent2Example" componentName="React Modal">
   <ModalScrollingLongContent2Example client:only="react" />
@@ -117,7 +117,7 @@ Add `alignment="center` to `<CModal>` to vertically center the React modal.
 
 ### Tooltips and popovers
 
-`<CTooltips>` and `<CPopovers>` can be placed within react modals as needed. When modal components are closed, any tooltips and popovers within are also automatically dismissed.
+`<CTooltips>` and `<CPopovers>` can be placed within React modals as needed. When modal components are closed, any tooltips and popovers within are also automatically dismissed.
 
 <Example code={ModalTooltipsAndPopoversExampleRaw} name="ModalTooltipsAndPopoversExample" componentName="React Modal">
   <ModalTooltipsAndPopoversExample client:only="react" />

packages/docs/src/content/docs/components/placeholder/index.mdx

@@ -1,7 +1,7 @@
 ---
 title: "React Placeholder Component"
 name: "Placeholder"
-description: "Use loading react placeholders for your components or pages to indicate something may still be loading."
+description: "Use loading React placeholders for your components or pages to indicate something may still be loading."
 otherFrameworks:
   - placeholder
 ---

packages/docs/src/content/docs/components/table/bootstrap.mdx

@@ -128,7 +128,7 @@ Both methods produce the same html code.
 
 ## Variants
 
-Use contextual classes to color react tables, table rows or individual cells.
+Use contextual classes to color React tables, table rows or individual cells.
 
 
 <Example className="theme-bootstrap">
@@ -273,7 +273,7 @@ return <CTable columns={columns} items={items} />
 
 ### Striped rows
 
-Use `striped` property to add zebra-striping to any react table row within the `<CTableBody>`.
+Use `striped` property to add zebra-striping to any React table row within the `<CTableBody>`.
 
 <Example className="theme-bootstrap">
   <TableExample client:only="react" striped />
@@ -299,7 +299,7 @@ Enable `striped` to alternate row background colors for better visual distinctio
 </CTable>
 ```
 
-These classes can also be added to react table variants:
+These classes can also be added to React table variants:
 
 <Example className="theme-bootstrap">
   <TableExample client:only="react" color="dark" striped />
@@ -553,7 +553,7 @@ Add `bordered` property for borders on all sides of the table and cells.
 
 ### Tables without borders
 
-Add `borderless` property for a react table without borders.
+Add `borderless` property for a React table without borders.
 
 <Example className="theme-bootstrap">
   <TableExample client:only="react" borderless />
@@ -714,7 +714,7 @@ You can also put all table components together manually as hitherto.
 
 ## Nesting
 
-Border styles, active styles, and react table component variants are not inherited by nested tables.
+Border styles, active styles, and React table component variants are not inherited by nested tables.
 
 <Example className="theme-bootstrap">
   <TableNestingExample client:only="react" />

packages/docs/src/content/docs/components/table/index.mdx

@@ -35,7 +35,7 @@ import TableResponsiveXxlExampleRaw from './examples/TableResponsiveXxlExample.t
 
 ## How to use React Table Component
 
-Due to the widespread use of `<CTable>` elements across third-party widgets like calendars and date pickers, CoreUI's react tables are **opt-in**. All table styles are not inherited in CoreUI, meaning any nested tables can be styled independent from the parent.
+Due to the widespread use of `<CTable>` elements across third-party widgets like calendars and date pickers, CoreUI's React tables are **opt-in**. All table styles are not inherited in CoreUI, meaning any nested tables can be styled independent from the parent.
 
 Using the most basic table CoreUI, here's how `<CTable>`-based tables look in CoreUI.
 
@@ -131,7 +131,7 @@ Both methods produce the same html code.
 
 ## Variants
 
-Use contextual classes to color react tables, table rows or individual cells.
+Use contextual classes to color React tables, table rows or individual cells.
 
 
 <Example>
@@ -276,7 +276,7 @@ return <CTable columns={columns} items={items} />
 
 ### Striped rows
 
-Use `striped` property to add zebra-striping to any react table row within the `<CTableBody>`.
+Use `striped` property to add zebra-striping to any React table row within the `<CTableBody>`.
 
 <Example>
   <TableExample client:only="react" striped />
@@ -302,7 +302,7 @@ Use `stripedColumns` boolean property to add zebra-striping to any table column.
 </CTable>
 ```
 
-These classes can also be added to react table variants:
+These classes can also be added to React table variants:
 
 <Example>
   <TableExample client:only="react" color="dark" striped />
@@ -346,7 +346,7 @@ These classes can also be added to react table variants:
 
 ### Hoverable rows
 
-Use `hover` property to enable a hover state on react table rows within a `<CTableBody>`.
+Use `hover` property to enable a hover state on React table rows within a `<CTableBody>`.
 
 <Example>
   <TableExample client:only="react" hover />
@@ -556,7 +556,7 @@ Add `bordered` property for borders on all sides of the table and cells.
 
 ### Tables without borders
 
-Add `borderless` property for a react table without borders.
+Add `borderless` property for a React table without borders.
 
 <Example>
   <TableExample client:only="react" borderless />
@@ -717,7 +717,7 @@ You can also put all table components together manually as hitherto.
 
 ## Nesting
 
-Border styles, active styles, and react table component variants are not inherited by nested tables.
+Border styles, active styles, and React table component variants are not inherited by nested tables.
 
 <Example>
   <TableNestingExample client:only="react" />