diff --git a/packages/coreui-react/src/components/accordion/CAccordion.tsx b/packages/coreui-react/src/components/accordion/CAccordion.tsx
index 5504f915..1bc9e391 100644
--- a/packages/coreui-react/src/components/accordion/CAccordion.tsx
+++ b/packages/coreui-react/src/components/accordion/CAccordion.tsx
@@ -96,11 +96,10 @@ export const CAccordion = forwardRef<HTMLDivElement, CAccordionProps>(
return (
<div
- className={classNames(
- mergedClassNames.ACCORDION,
- { [mergedClassNames.ACCORDION_FLUSH]: flush },
+ className={classNames(mergedClassNames.ACCORDION, {
+ [mergedClassNames.ACCORDION_FLUSH]: flush,
className,
- )}
+ })}
{...rest}
ref={ref}
>
@@ -117,6 +116,7 @@ CAccordion.propTypes = {
activeItemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
children: PropTypes.node,
className: PropTypes.string,
+ customClassNames: PropTypes.object,
flush: PropTypes.bool,
}
diff --git a/packages/coreui-react/src/components/alert/CAlert.tsx b/packages/coreui-react/src/components/alert/CAlert.tsx
index 3efdb78f..f43d6219 100644
--- a/packages/coreui-react/src/components/alert/CAlert.tsx
+++ b/packages/coreui-react/src/components/alert/CAlert.tsx
@@ -8,42 +8,120 @@ import { CCloseButton } from '../close-button/CCloseButton'
import { useForkedRef } from '../../hooks'
import { colorPropType } from '../../props'
import type { Colors } from '../../types'
+import { mergeClassNames } from '../../utils'
export interface CAlertProps extends HTMLAttributes<HTMLDivElement> {
/**
- * A string of all className you want applied to the component.
+ * Apply a CSS fade transition to the alert.
+ *
+ * @since 5.5.0
+ *
+ * @example
+ * <CAlert animation={false} color="success">No animation alert</CAlert>
+ */
+ animation?: boolean
+
+ /**
+ * A string of additional CSS class names to apply to the alert component.
+ *
+ * @example
+ * <CAlert className="my-custom-class" color="danger">Custom Class Alert</CAlert>
*/
className?: string
+
/**
* Sets the color context of the component to one of CoreUI’s themed colors.
*
* @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
+ *
+ * @example
+ * <CAlert color="warning">Warning Alert</CAlert>
*/
color: Colors
+
/**
- * Optionally add a close button to alert and allow it to self dismiss.
+ * Custom class names to override or extend the default CSS classes used within the `CAlert` component.
+ * Each key corresponds to a specific part of the Alert component, allowing for granular styling control.
+ *
+ * @since v5.5.0
+ *
+ * @example
+ * const customClasses = {
+ * ALERT: 'my-custom-alert',
+ * ALERT_DISMISSIBLE: 'my-custom-dismissible',
+ * }
+ *
+ * <CAlert customClassNames={customClasses} />
+ */
+ customClassNames?: Partial<typeof ALERT_CLASS_NAMES>
+
+ /**
+ * Optionally add a close button to the alert and allow it to self-dismiss.
+ *
+ * @example
+ * <CAlert dismissible color="success">
+ * Dismissible Alert
+ * </CAlert>
*/
dismissible?: boolean
+
/**
- * Callback fired when the component requests to be closed.
+ * Callback fired when the alert requests to be closed. This occurs when the close button is clicked.
+ *
+ * @example
+ * const handleClose = () => {
+ * console.log('Alert closed')
+ * }
+ *
+ * <CAlert dismissible color="danger" onClose={handleClose}>
+ * Dismissible Alert with Callback
+ * </CAlert>
*/
onClose?: () => void
+
/**
- * Set the alert variant to a solid.
+ * Set the alert variant to a solid background. This changes the alert's appearance to have a solid color.
+ *
+ * @example
+ * <CAlert variant="solid" color="primary">
+ * Solid Variant Alert
+ * </CAlert>
*/
variant?: 'solid' | string
+
/**
- * Toggle the visibility of component.
+ * Toggle the visibility of the alert component. When set to `false`, the alert will be hidden.
+ *
+ * @example
+ * const [visible, setVisible] = useState(true)
+ *
+ * <CAlert visible={visible} onClose={() => setVisible(false)} color="info">
+ * Toggleable Alert
+ * </CAlert>
*/
visible?: boolean
}
+export const ALERT_CLASS_NAMES = {
+ /**
+ * Base class for the alert container.
+ */
+ ALERT: 'alert',
+
+ /**
+ * Applied when the `dismissible` prop is enabled.
+ */
+ ALERT_DISMISSIBLE: 'alert-dismissible',
+}
+
export const CAlert = forwardRef<HTMLDivElement, CAlertProps>(
(
{
children,
+ animation = true,
className,
color = 'primary',
+ customClassNames,
dismissible,
variant,
visible = true,
@@ -60,6 +138,11 @@ export const CAlert = forwardRef<HTMLDivElement, CAlertProps>(
setVisible(visible)
}, [visible])
+ const mergedClassNames = mergeClassNames<typeof ALERT_CLASS_NAMES>(
+ ALERT_CLASS_NAMES,
+ customClassNames,
+ )
+
return (
<Transition
in={_visible}
@@ -72,10 +155,11 @@ export const CAlert = forwardRef<HTMLDivElement, CAlertProps>(
{(state) => (
<div
className={classNames(
- 'alert',
+ mergedClassNames.ALERT,
variant === 'solid' ? `bg-${color} text-white` : `alert-${color}`,
{
- 'alert-dismissible fade': dismissible,
+ [mergedClassNames.ALERT_DISMISSIBLE]: dismissible,
+ fade: animation,
show: state === 'entered',
},
className,
@@ -94,9 +178,11 @@ export const CAlert = forwardRef<HTMLDivElement, CAlertProps>(
)
CAlert.propTypes = {
+ animation: PropTypes.bool,
children: PropTypes.node,
className: PropTypes.string,
color: colorPropType.isRequired,
+ customClassNames: PropTypes.object,
dismissible: PropTypes.bool,
onClose: PropTypes.func,
variant: PropTypes.string,
diff --git a/packages/coreui-react/src/components/alert/CAlertHeading.tsx b/packages/coreui-react/src/components/alert/CAlertHeading.tsx
index 9f47eb3a..d2fea717 100644
--- a/packages/coreui-react/src/components/alert/CAlertHeading.tsx
+++ b/packages/coreui-react/src/components/alert/CAlertHeading.tsx
@@ -3,23 +3,74 @@ import PropTypes from 'prop-types'
import classNames from 'classnames'
import { PolymorphicRefForwardingComponent } from '../../helpers'
+import { mergeClassNames } from '../../utils'
export interface CAlertHeadingProps extends HTMLAttributes<HTMLHeadingElement> {
/**
- * Component used for the root node. Either a string to use a HTML element or a component.
+ * The component used for the root node. It can be a string representing a HTML element or a React component.
+ *
+ * @default 'h4'
+ *
+ * @example
+ * // Using default 'h4' element
+ * <CAlertHeading>Alert Heading</CAlertHeading>
+ *
+ * // Using a custom component
+ * const CustomHeading = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>((props, ref) => (
+ * <div ref={ref} {...props} />
+ * ))
+ *
+ * <CAlertHeading as={CustomHeading}>Custom Alert Heading</CAlertHeading>
*/
as?: ElementType
+
/**
- * A string of all className you want applied to the base component.
+ * A string of additional CSS class names to apply to the React Alert Heading component.
+ *
+ * @example
+ * <CAlertHeading className="my-custom-class">Custom Class Alert Heading</CAlertHeading>
*/
className?: string
+
+ /**
+ * Custom class names to override or extend the default CSS classes used within the `CAlertHeading` component.
+ * Each key corresponds to a specific part of the React Alert Heading component, allowing for granular styling control.
+ *
+ * @since v5.0.0
+ *
+ * @example
+ * const customClasses = {
+ * ALERT_HEADING: 'my-custom-alert-heading',
+ * }
+ *
+ * <CAlertHeading customClassNames={customClasses}>
+ * Custom Styled Alert Heading
+ * </CAlertHeading>
+ */
+ customClassNames?: Partial<typeof ALERT_HEADING_CLASS_NAMES>
+}
+
+export const ALERT_HEADING_CLASS_NAMES = {
+ /**
+ * Base class for the React Alert Heading container.
+ */
+ ALERT_HEADING: 'alert-heading',
}
export const CAlertHeading: PolymorphicRefForwardingComponent<'h4', CAlertHeadingProps> =
forwardRef<HTMLHeadingElement, CAlertHeadingProps>(
- ({ children, as: Component = 'h4', className, ...rest }, ref) => {
+ ({ children, as: Component = 'h4', className, customClassNames, ...rest }, ref) => {
+ const mergedClassNames = mergeClassNames<typeof ALERT_HEADING_CLASS_NAMES>(
+ ALERT_HEADING_CLASS_NAMES,
+ customClassNames,
+ )
+
return (
- <Component className={classNames('alert-heading', className)} {...rest} ref={ref}>
+ <Component
+ className={classNames(mergedClassNames.ALERT_HEADING, className)}
+ {...rest}
+ ref={ref}
+ >
{children}
</Component>
)
@@ -30,6 +81,7 @@ CAlertHeading.propTypes = {
as: PropTypes.elementType,
children: PropTypes.node,
className: PropTypes.string,
+ customClassNames: PropTypes.object,
}
CAlertHeading.displayName = 'CAlertHeading'
diff --git a/packages/coreui-react/src/components/alert/CAlertLink.tsx b/packages/coreui-react/src/components/alert/CAlertLink.tsx
index dacfa081..0710e36e 100644
--- a/packages/coreui-react/src/components/alert/CAlertLink.tsx
+++ b/packages/coreui-react/src/components/alert/CAlertLink.tsx
@@ -3,18 +3,51 @@ import PropTypes from 'prop-types'
import classNames from 'classnames'
import { CLink } from '../link/CLink'
+import { mergeClassNames } from '../../utils'
export interface CAlertLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
/**
- * A string of all className you want applied to the base component.
+ * A string of additional CSS class names to apply to the alert link component.
+ *
+ * @example
+ * <CAlertLink className="my-custom-link">Custom Styled Link</CAlertLink>
*/
className?: string
+
+ /**
+ * Custom class names to override or extend the default CSS classes used within the `CAlertLink` component.
+ * Each key corresponds to a specific part of the React Alert Link component, allowing for granular styling control.
+ *
+ * @since v5.0.0
+ *
+ * @example
+ * const customClasses = {
+ * ALERT_LINK: 'my-custom-alert-link',
+ * }
+ *
+ * <CAlertLink customClassNames={customClasses} href="#">
+ * Custom Class Alert Link
+ * </CAlertLink>
+ */
+ customClassNames?: Partial<typeof ALERT_LINK_CLASS_NAMES>
+}
+
+export const ALERT_LINK_CLASS_NAMES = {
+ /**
+ * Base class for the React alert link.
+ */
+ ALERT_LINK: 'alert-link',
}
export const CAlertLink = forwardRef<HTMLAnchorElement, CAlertLinkProps>(
- ({ children, className, ...rest }, ref) => {
+ ({ children, className, customClassNames, ...rest }, ref) => {
+ const mergedClassNames = mergeClassNames<typeof ALERT_LINK_CLASS_NAMES>(
+ ALERT_LINK_CLASS_NAMES,
+ customClassNames,
+ )
+
return (
- <CLink className={classNames('alert-link', className)} {...rest} ref={ref}>
+ <CLink className={classNames(mergedClassNames.ALERT_LINK, className)} {...rest} ref={ref}>
{children}
</CLink>
)
@@ -24,6 +57,7 @@ export const CAlertLink = forwardRef<HTMLAnchorElement, CAlertLinkProps>(
CAlertLink.propTypes = {
children: PropTypes.node,
className: PropTypes.string,
+ customClassNames: PropTypes.object,
}
CAlertLink.displayName = 'CAlertLink'
diff --git a/packages/docs/content/api/CAccordion.api.mdx b/packages/docs/content/api/CAccordion.api.mdx
index dfff727c..97e88506 100644
--- a/packages/docs/content/api/CAccordion.api.mdx
+++ b/packages/docs/content/api/CAccordion.api.mdx
@@ -21,7 +21,11 @@ import CAccordion from '@coreui/react/src/components/accordion/CAccordion'
<td><code>{`string`}</code>, <code>{`number`}</code></td>
</tr>
<tr>
- <td colSpan="3">Determines which accordion item is currently active (expanded) by default.<br/>Accepts a number or string corresponding to the <code>{`itemKey`}</code> of the desired accordion item.<br /><JSXDocs code={`<CAccordion activeItemKey="1">...</CAccordion>`} /></td>
+ <td colSpan="3">
+ <p>Determines which accordion item is currently active (expanded) by default.<br />
+Accepts a number or string corresponding to the <code>{`itemKey`}</code> of the desired accordion item.</p>
+ <JSXDocs code={`<CAccordion activeItemKey="1">...</CAccordion>`} />
+ </td>
</tr>
<tr id="caccordion-alwaysOpen">
<td className="text-primary fw-semibold">alwaysOpen<a href="#caccordion-alwaysOpen" aria-label="CAccordion alwaysOpen permalink" className="anchor-link after">#</a></td>
@@ -29,7 +33,11 @@ import CAccordion from '@coreui/react/src/components/accordion/CAccordion'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">When set to <code>{`true`}</code>, multiple accordion items within the React Accordion can be open simultaneously.<br/>This is ideal for scenarios where users need to view multiple sections at once without collapsing others.<br /><JSXDocs code={`<CAccordion alwaysOpen>...</CAccordion>`} /></td>
+ <td colSpan="3">
+ <p>When set to <code>{`true`}</code>, multiple accordion items within the React Accordion can be open simultaneously.<br />
+This is ideal for scenarios where users need to view multiple sections at once without collapsing others.</p>
+ <JSXDocs code={`<CAccordion alwaysOpen>...</CAccordion>`} />
+ </td>
</tr>
<tr id="caccordion-className">
<td className="text-primary fw-semibold">className<a href="#caccordion-className" aria-label="CAccordion className permalink" className="anchor-link after">#</a></td>
@@ -37,7 +45,10 @@ import CAccordion from '@coreui/react/src/components/accordion/CAccordion'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Allows you to apply custom CSS classes to the React Accordion for enhanced styling and theming.<br /><JSXDocs code={`<CAccordion className="my-custom-accordion">...</CAccordion>`} /></td>
+ <td colSpan="3">
+ <p>Allows you to apply custom CSS classes to the React Accordion for enhanced styling and theming.</p>
+ <JSXDocs code={`<CAccordion className="my-custom-accordion">...</CAccordion>`} />
+ </td>
</tr>
<tr id="caccordion-customClassNames">
<td className="text-primary fw-semibold">customClassNames<a href="#caccordion-customClassNames" aria-label="CAccordion customClassNames permalink" className="anchor-link after">#</a></td>
@@ -45,11 +56,19 @@ import CAccordion from '@coreui/react/src/components/accordion/CAccordion'
<td><code>{`Partial\<{ ACCORDION: string; ACCORDION_FLUSH: string; }>`}</code></td>
</tr>
<tr>
- <td colSpan="3">Allows overriding or extending the default CSS class names used in the component.<br/><br/>- <code>{`ACCORDION`}</code>: Base class for the accordion component.<br/>- <code>{`ACCORDION_FLUSH`}</code>: Class applied when the <code>{`flush`}</code> prop is set to true, ensuring an edge-to-edge layout.<br/><br/>Use this prop to customize the styles of specific parts of the accordion.<br /><JSXDocs code={`const customClasses = {
+ <td colSpan="3">
+ <p>Allows overriding or extending the default CSS class names used in the component.</p>
+<ul>
+<li><code>{`ACCORDION`}</code>: Base class for the accordion component.</li>
+<li><code>{`ACCORDION_FLUSH`}</code>: Class applied when the <code>{`flush`}</code> prop is set to true, ensuring an edge-to-edge layout.</li>
+</ul>
+<p>Use this prop to customize the styles of specific parts of the accordion.</p>
+ <JSXDocs code={`const customClasses = {
ACCORDION: 'custom-accordion',
ACCORDION_FLUSH: 'custom-accordion-flush'
}
-<CAccordion customClassNames={customClasses}>...</CAccordion>`} /></td>
+<CAccordion customClassNames={customClasses}>...</CAccordion>`} />
+ </td>
</tr>
<tr id="caccordion-flush">
<td className="text-primary fw-semibold">flush<a href="#caccordion-flush" aria-label="CAccordion flush permalink" className="anchor-link after">#</a></td>
@@ -57,7 +76,11 @@ import CAccordion from '@coreui/react/src/components/accordion/CAccordion'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">When <code>{`flush`}</code> is set to <code>{`true`}</code>, the React Accordion renders edge-to-edge with its parent container,<br/>creating a seamless and modern look ideal for minimalist designs.<br /><JSXDocs code={`<CAccordion flush>...</CAccordion>`} /></td>
+ <td colSpan="3">
+ <p>When <code>{`flush`}</code> is set to <code>{`true`}</code>, the React Accordion renders edge-to-edge with its parent container,<br />
+creating a seamless and modern look ideal for minimalist designs.</p>
+ <JSXDocs code={`<CAccordion flush>...</CAccordion>`} />
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CAccordionBody.api.mdx b/packages/docs/content/api/CAccordionBody.api.mdx
index c280bef1..b6eb9609 100644
--- a/packages/docs/content/api/CAccordionBody.api.mdx
+++ b/packages/docs/content/api/CAccordionBody.api.mdx
@@ -21,7 +21,10 @@ import CAccordionBody from '@coreui/react/src/components/accordion/CAccordionBod
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Allows you to apply custom CSS classes to the React Accordion Body for enhanced styling and theming.<br /><JSXDocs code={`<CAccordionBody className="custom-accordion-body">...</CAccordionBody>`} /></td>
+ <td colSpan="3">
+ <p>Allows you to apply custom CSS classes to the React Accordion Body for enhanced styling and theming.</p>
+ <JSXDocs code={`<CAccordionBody className="custom-accordion-body">...</CAccordionBody>`} />
+ </td>
</tr>
<tr id="caccordionbody-customClassNames">
<td className="text-primary fw-semibold">customClassNames<a href="#caccordionbody-customClassNames" aria-label="CAccordionBody customClassNames permalink" className="anchor-link after">#</a></td>
@@ -29,11 +32,20 @@ import CAccordionBody from '@coreui/react/src/components/accordion/CAccordionBod
<td><code>{`Partial\<{ ACCORDION_COLLAPSE: string; ACCORDION_BODY: string; }>`}</code></td>
</tr>
<tr>
- <td colSpan="3">Allows overriding or extending the default CSS class names used in the accordion body component.<br/>Accepts a partial object matching the shape of <code>{`ACCORDION_BODY_CLASS_NAMES`}</code>, which includes:<br/><br/>- <code>{`ACCORDION_COLLAPSE`}</code>: Base class for the collapse container in the accordion body.<br/>- <code>{`ACCORDION_BODY`}</code>: Base class for the main content container inside the accordion body.<br/><br/>Use this prop to customize the styles of specific parts of the accordion body.<br /><JSXDocs code={`const customClasses = {
+ <td colSpan="3">
+ <p>Allows overriding or extending the default CSS class names used in the accordion body component.<br />
+Accepts a partial object matching the shape of <code>{`ACCORDION_BODY_CLASS_NAMES`}</code>, which includes:</p>
+<ul>
+<li><code>{`ACCORDION_COLLAPSE`}</code>: Base class for the collapse container in the accordion body.</li>
+<li><code>{`ACCORDION_BODY`}</code>: Base class for the main content container inside the accordion body.</li>
+</ul>
+<p>Use this prop to customize the styles of specific parts of the accordion body.</p>
+ <JSXDocs code={`const customClasses = {
ACCORDION_COLLAPSE: 'custom-collapse-class',
ACCORDION_BODY: 'custom-body-class',
}
-<CAccordionBody customClassNames={customClasses}>...</CAccordionBody>`} /></td>
+<CAccordionBody customClassNames={customClasses}>...</CAccordionBody>`} />
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CAccordionButton.api.mdx b/packages/docs/content/api/CAccordionButton.api.mdx
index c659fd49..b9cc8d5a 100644
--- a/packages/docs/content/api/CAccordionButton.api.mdx
+++ b/packages/docs/content/api/CAccordionButton.api.mdx
@@ -21,7 +21,9 @@ import CAccordionButton from '@coreui/react/src/components/accordion/CAccordionB
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Styles the clickable element in the accordion header.</td>
+ <td colSpan="3">
+ <p>Styles the clickable element in the accordion header.</p>
+ </td>
</tr>
<tr id="caccordionbutton-customClassNames">
<td className="text-primary fw-semibold">customClassNames<a href="#caccordionbutton-customClassNames" aria-label="CAccordionButton customClassNames permalink" className="anchor-link after">#</a></td>
@@ -29,10 +31,18 @@ import CAccordionButton from '@coreui/react/src/components/accordion/CAccordionB
<td><code>{`Partial\<{ ACCORDION_BUTTON: string; }>`}</code></td>
</tr>
<tr>
- <td colSpan="3">Allows overriding or extending the default CSS class names used in the accordion button component.<br/>Accepts a partial object matching the shape of <code>{`CLASS_NAMES`}</code>, which includes:<br/><br/>- <code>{`ACCORDION_BUTTON`}</code>: Base class for the accordion button.<br/><br/>Use this prop to customize the styles of the accordion button.<br /><JSXDocs code={`const customClasses = {
+ <td colSpan="3">
+ <p>Allows overriding or extending the default CSS class names used in the accordion button component.<br />
+Accepts a partial object matching the shape of <code>{`CLASS_NAMES`}</code>, which includes:</p>
+<ul>
+<li><code>{`ACCORDION_BUTTON`}</code>: Base class for the accordion button.</li>
+</ul>
+<p>Use this prop to customize the styles of the accordion button.</p>
+ <JSXDocs code={`const customClasses = {
ACCORDION_BUTTON: 'custom-button-class',
}
-<CAccordionButton customClassNames={customClasses}>...</CAccordionButton>`} /></td>
+<CAccordionButton customClassNames={customClasses}>...</CAccordionButton>`} />
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CAccordionHeader.api.mdx b/packages/docs/content/api/CAccordionHeader.api.mdx
index c158599b..ad7cc0ed 100644
--- a/packages/docs/content/api/CAccordionHeader.api.mdx
+++ b/packages/docs/content/api/CAccordionHeader.api.mdx
@@ -21,7 +21,9 @@ import CAccordionHeader from '@coreui/react/src/components/accordion/CAccordionH
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="caccordionheader-customClassNames">
<td className="text-primary fw-semibold">customClassNames<a href="#caccordionheader-customClassNames" aria-label="CAccordionHeader customClassNames permalink" className="anchor-link after">#</a></td>
@@ -29,11 +31,20 @@ import CAccordionHeader from '@coreui/react/src/components/accordion/CAccordionH
<td><code>{`Partial\<{ ACCORDION_HEADER: string; ACCORDION_BUTTON: string; }>`}</code></td>
</tr>
<tr>
- <td colSpan="3">Allows overriding or extending the default CSS class names used in the accordion header component.<br/>Accepts a partial object matching the shape of <code>{`ACCORDION_HEADER_CLASS_NAMES`}</code>, which includes:<br/><br/>- <code>{`ACCORDION_HEADER`}</code>: Base class for the accordion header container.<br/>- <code>{`ACCORDION_BUTTON`}</code>: Class applied to the button within the accordion header.<br/><br/>Use this prop to customize the styles of specific parts of the accordion header.<br /><JSXDocs code={`const customClasses = {
+ <td colSpan="3">
+ <p>Allows overriding or extending the default CSS class names used in the accordion header component.<br />
+Accepts a partial object matching the shape of <code>{`ACCORDION_HEADER_CLASS_NAMES`}</code>, which includes:</p>
+<ul>
+<li><code>{`ACCORDION_HEADER`}</code>: Base class for the accordion header container.</li>
+<li><code>{`ACCORDION_BUTTON`}</code>: Class applied to the button within the accordion header.</li>
+</ul>
+<p>Use this prop to customize the styles of specific parts of the accordion header.</p>
+ <JSXDocs code={`const customClasses = {
ACCORDION_HEADER: 'custom-header-class',
ACCORDION_BUTTON: 'custom-button-class',
}
-<CAccordionHeader customClassNames={customClasses}>...</CAccordionHeader>`} /></td>
+<CAccordionHeader customClassNames={customClasses}>...</CAccordionHeader>`} />
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CAccordionItem.api.mdx b/packages/docs/content/api/CAccordionItem.api.mdx
index 1eb6b121..49049a00 100644
--- a/packages/docs/content/api/CAccordionItem.api.mdx
+++ b/packages/docs/content/api/CAccordionItem.api.mdx
@@ -21,7 +21,9 @@ import CAccordionItem from '@coreui/react/src/components/accordion/CAccordionIte
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="caccordionitem-customClassNames">
<td className="text-primary fw-semibold">customClassNames<a href="#caccordionitem-customClassNames" aria-label="CAccordionItem customClassNames permalink" className="anchor-link after">#</a></td>
@@ -29,10 +31,18 @@ import CAccordionItem from '@coreui/react/src/components/accordion/CAccordionIte
<td><code>{`Partial\<{ ACCORDION_ITEM: string; }>`}</code></td>
</tr>
<tr>
- <td colSpan="3">Allows overriding or extending the default CSS class names used in the accordion item component.<br/>Accepts a partial object matching the shape of <code>{`ACCORDION_ITEM_CLASS_NAMES`}</code>, which includes:<br/><br/>- <code>{`ACCORDION_ITEM`}</code>: Base class for an individual accordion item.<br/><br/>Use this prop to customize the styles of specific parts of the accordion item.<br /><JSXDocs code={`const customClasses = {
+ <td colSpan="3">
+ <p>Allows overriding or extending the default CSS class names used in the accordion item component.<br />
+Accepts a partial object matching the shape of <code>{`ACCORDION_ITEM_CLASS_NAMES`}</code>, which includes:</p>
+<ul>
+<li><code>{`ACCORDION_ITEM`}</code>: Base class for an individual accordion item.</li>
+</ul>
+<p>Use this prop to customize the styles of specific parts of the accordion item.</p>
+ <JSXDocs code={`const customClasses = {
ACCORDION_ITEM: 'custom-item-class',
}
-<CAccordionItem customClassNames={customClasses}>...</CAccordionItem>`} /></td>
+<CAccordionItem customClassNames={customClasses}>...</CAccordionItem>`} />
+ </td>
</tr>
<tr id="caccordionitem-itemKey">
<td className="text-primary fw-semibold">itemKey<a href="#caccordionitem-itemKey" aria-label="CAccordionItem itemKey permalink" className="anchor-link after">#</a></td>
@@ -40,7 +50,9 @@ import CAccordionItem from '@coreui/react/src/components/accordion/CAccordionIte
<td><code>{`string`}</code>, <code>{`number`}</code></td>
</tr>
<tr>
- <td colSpan="3">Item key.</td>
+ <td colSpan="3">
+ <p>Item key.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CAlert.api.mdx b/packages/docs/content/api/CAlert.api.mdx
index f2f95bfd..9facdba9 100644
--- a/packages/docs/content/api/CAlert.api.mdx
+++ b/packages/docs/content/api/CAlert.api.mdx
@@ -15,13 +15,27 @@ import CAlert from '@coreui/react/src/components/alert/CAlert'
</tr>
</thead>
<tbody>
+ <tr id="calert-animation">
+ <td className="text-primary fw-semibold">animation<a href="#calert-animation" aria-label="CAlert animation permalink" className="anchor-link after">#</a><span className="badge bg-success">5.5.0+</span></td>
+ <td><code>{`true`}</code></td>
+ <td><code>{`boolean`}</code></td>
+ </tr>
+ <tr>
+ <td colSpan="3">
+ <p>Apply a CSS fade transition to the alert.</p>
+ <JSXDocs code={`<CAlert animation={false} color="success">No animation alert</CAlert>`} />
+ </td>
+ </tr>
<tr id="calert-className">
<td className="text-primary fw-semibold">className<a href="#calert-className" aria-label="CAlert className permalink" className="anchor-link after">#</a></td>
<td>undefined</td>
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of additional CSS class names to apply to the alert component.</p>
+ <JSXDocs code={`<CAlert className="my-custom-class" color="danger">Custom Class Alert</CAlert>`} />
+ </td>
</tr>
<tr id="calert-color">
<td className="text-primary fw-semibold">color<a href="#calert-color" aria-label="CAlert color permalink" className="anchor-link after">#</a></td>
@@ -29,7 +43,27 @@ import CAlert from '@coreui/react/src/components/alert/CAlert'
<td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+ <td colSpan="3">
+ <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+ <JSXDocs code={`<CAlert color="warning">Warning Alert</CAlert>`} />
+ </td>
+ </tr>
+ <tr id="calert-customClassNames">
+ <td className="text-primary fw-semibold">customClassNames<a href="#calert-customClassNames" aria-label="CAlert customClassNames permalink" className="anchor-link after">#</a><span className="badge bg-success">v5.5.0+</span></td>
+ <td>undefined</td>
+ <td><code>{`Partial\<{ ALERT: string; ALERT_DISMISSIBLE: string; }>`}</code></td>
+ </tr>
+ <tr>
+ <td colSpan="3">
+ <p>Custom class names to override or extend the default CSS classes used within the <code>{`CAlert`}</code> component.<br />
+Each key corresponds to a specific part of the Alert component, allowing for granular styling control.</p>
+ <JSXDocs code={`const customClasses = {
+ ALERT: 'my-custom-alert',
+ ALERT_DISMISSIBLE: 'my-custom-dismissible',
+}
+
+<CAlert customClassNames={customClasses} />`} />
+ </td>
</tr>
<tr id="calert-dismissible">
<td className="text-primary fw-semibold">dismissible<a href="#calert-dismissible" aria-label="CAlert dismissible permalink" className="anchor-link after">#</a></td>
@@ -37,7 +71,12 @@ import CAlert from '@coreui/react/src/components/alert/CAlert'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Optionally add a close button to alert and allow it to self dismiss.</td>
+ <td colSpan="3">
+ <p>Optionally add a close button to the alert and allow it to self-dismiss.</p>
+ <JSXDocs code={`<CAlert dismissible color="success">
+ Dismissible Alert
+</CAlert>`} />
+ </td>
</tr>
<tr id="calert-onClose">
<td className="text-primary fw-semibold">onClose<a href="#calert-onClose" aria-label="CAlert onClose permalink" className="anchor-link after">#</a></td>
@@ -45,7 +84,16 @@ import CAlert from '@coreui/react/src/components/alert/CAlert'
<td><code>{`() => void`}</code></td>
</tr>
<tr>
- <td colSpan="3">Callback fired when the component requests to be closed.</td>
+ <td colSpan="3">
+ <p>Callback fired when the alert requests to be closed. This occurs when the close button is clicked.</p>
+ <JSXDocs code={`const handleClose = () => {
+ console.log('Alert closed')
+}
+
+<CAlert dismissible color="danger" onClose={handleClose}>
+ Dismissible Alert with Callback
+</CAlert>`} />
+ </td>
</tr>
<tr id="calert-variant">
<td className="text-primary fw-semibold">variant<a href="#calert-variant" aria-label="CAlert variant permalink" className="anchor-link after">#</a></td>
@@ -53,7 +101,12 @@ import CAlert from '@coreui/react/src/components/alert/CAlert'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set the alert variant to a solid.</td>
+ <td colSpan="3">
+ <p>Set the alert variant to a solid background. This changes the alert's appearance to have a solid color.</p>
+ <JSXDocs code={`<CAlert variant="solid" color="primary">
+ Solid Variant Alert
+</CAlert>`} />
+ </td>
</tr>
<tr id="calert-visible">
<td className="text-primary fw-semibold">visible<a href="#calert-visible" aria-label="CAlert visible permalink" className="anchor-link after">#</a></td>
@@ -61,7 +114,14 @@ import CAlert from '@coreui/react/src/components/alert/CAlert'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Toggle the visibility of component.</td>
+ <td colSpan="3">
+ <p>Toggle the visibility of the alert component. When set to <code>{`false`}</code>, the alert will be hidden.</p>
+ <JSXDocs code={`const [visible, setVisible] = useState(true)
+
+<CAlert visible={visible} onClose={() => setVisible(false)} color="info">
+ Toggleable Alert
+</CAlert>`} />
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CAlertHeading.api.mdx b/packages/docs/content/api/CAlertHeading.api.mdx
index 0bb3f9dd..cc5236f4 100644
--- a/packages/docs/content/api/CAlertHeading.api.mdx
+++ b/packages/docs/content/api/CAlertHeading.api.mdx
@@ -17,11 +17,22 @@ import CAlertHeading from '@coreui/react/src/components/alert/CAlertHeading'
<tbody>
<tr id="calertheading-as">
<td className="text-primary fw-semibold">as<a href="#calertheading-as" aria-label="CAlertHeading as permalink" className="anchor-link after">#</a></td>
- <td>undefined</td>
+ <td><code>{`'h4'`}</code></td>
<td><code>{`(ElementType & "symbol")`}</code>, <code>{`(ElementType & "object")`}</code>, <code>{`(ElementType & "h4")`}</code>, <code>{`(ElementType & "slot")`}</code>, <code>{`(ElementType & "style")`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+ <td colSpan="3">
+ <p>The component used for the root node. It can be a string representing a HTML element or a React component.</p>
+ <JSXDocs code={`// Using default 'h4' element
+<CAlertHeading>Alert Heading</CAlertHeading>
+
+// Using a custom component
+const CustomHeading = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>((props, ref) => (
+ <div ref={ref} {...props} />
+))
+
+<CAlertHeading as={CustomHeading}>Custom Alert Heading</CAlertHeading>`} />
+ </td>
</tr>
<tr id="calertheading-className">
<td className="text-primary fw-semibold">className<a href="#calertheading-className" aria-label="CAlertHeading className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +40,28 @@ import CAlertHeading from '@coreui/react/src/components/alert/CAlertHeading'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of additional CSS class names to apply to the React Alert Heading component.</p>
+ <JSXDocs code={`<CAlertHeading className="my-custom-class">Custom Class Alert Heading</CAlertHeading>`} />
+ </td>
+ </tr>
+ <tr id="calertheading-customClassNames">
+ <td className="text-primary fw-semibold">customClassNames<a href="#calertheading-customClassNames" aria-label="CAlertHeading customClassNames permalink" className="anchor-link after">#</a><span className="badge bg-success">v5.5.0+</span></td>
+ <td>undefined</td>
+ <td><code>{`Partial\<{ ALERT_HEADING: string; }>`}</code></td>
+ </tr>
+ <tr>
+ <td colSpan="3">
+ <p>Custom class names to override or extend the default CSS classes used within the <code>{`CAlertHeading`}</code> component.<br />
+Each key corresponds to a specific part of the React Alert Heading component, allowing for granular styling control.</p>
+ <JSXDocs code={`const customClasses = {
+ ALERT_HEADING: 'my-custom-alert-heading',
+}
+
+<CAlertHeading customClassNames={customClasses}>
+ Custom Styled Alert Heading
+</CAlertHeading>`} />
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CAlertLink.api.mdx b/packages/docs/content/api/CAlertLink.api.mdx
index bbff921e..36a0a711 100644
--- a/packages/docs/content/api/CAlertLink.api.mdx
+++ b/packages/docs/content/api/CAlertLink.api.mdx
@@ -21,7 +21,28 @@ import CAlertLink from '@coreui/react/src/components/alert/CAlertLink'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of additional CSS class names to apply to the alert link component.</p>
+ <JSXDocs code={`<CAlertLink className="my-custom-link">Custom Styled Link</CAlertLink>`} />
+ </td>
+ </tr>
+ <tr id="calertlink-customClassNames">
+ <td className="text-primary fw-semibold">customClassNames<a href="#calertlink-customClassNames" aria-label="CAlertLink customClassNames permalink" className="anchor-link after">#</a><span className="badge bg-success">v5.5.0+</span></td>
+ <td>undefined</td>
+ <td><code>{`Partial\<{ ALERT_LINK: string; }>`}</code></td>
+ </tr>
+ <tr>
+ <td colSpan="3">
+ <p>Custom class names to override or extend the default CSS classes used within the <code>{`CAlertLink`}</code> component.<br />
+Each key corresponds to a specific part of the React Alert Link component, allowing for granular styling control.</p>
+ <JSXDocs code={`const customClasses = {
+ ALERT_LINK: 'my-custom-alert-link',
+}
+
+<CAlertLink customClassNames={customClasses} href="#">
+ Custom Class Alert Link
+</CAlertLink>`} />
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CAvatar.api.mdx b/packages/docs/content/api/CAvatar.api.mdx
index e0a72315..92eaeec3 100644
--- a/packages/docs/content/api/CAvatar.api.mdx
+++ b/packages/docs/content/api/CAvatar.api.mdx
@@ -21,7 +21,9 @@ import CAvatar from '@coreui/react/src/components/avatar/CAvatar'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
<tr id="cavatar-color">
<td className="text-primary fw-semibold">color<a href="#cavatar-color" aria-label="CAvatar color permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CAvatar from '@coreui/react/src/components/avatar/CAvatar'
<td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+ <td colSpan="3">
+ <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+ </td>
</tr>
<tr id="cavatar-shape">
<td className="text-primary fw-semibold">shape<a href="#cavatar-shape" aria-label="CAvatar shape permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CAvatar from '@coreui/react/src/components/avatar/CAvatar'
<td><code>{`'rounded'`}</code>, <code>{`'rounded-top'`}</code>, <code>{`'rounded-end'`}</code>, <code>{`'rounded-bottom'`}</code>, <code>{`'rounded-start'`}</code>, <code>{`'rounded-circle'`}</code>, <code>{`'rounded-pill'`}</code>, <code>{`'rounded-0'`}</code>, <code>{`'rounded-1'`}</code>, <code>{`'rounded-2'`}</code>, <code>{`'rounded-3'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Select the shape of the component.</td>
+ <td colSpan="3">
+ <p>Select the shape of the component.</p>
+ </td>
</tr>
<tr id="cavatar-size">
<td className="text-primary fw-semibold">size<a href="#cavatar-size" aria-label="CAvatar size permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CAvatar from '@coreui/react/src/components/avatar/CAvatar'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Size the component small, large, or extra large.</td>
+ <td colSpan="3">
+ <p>Size the component small, large, or extra large.</p>
+ </td>
</tr>
<tr id="cavatar-src">
<td className="text-primary fw-semibold">src<a href="#cavatar-src" aria-label="CAvatar src permalink" className="anchor-link after">#</a></td>
@@ -53,7 +61,9 @@ import CAvatar from '@coreui/react/src/components/avatar/CAvatar'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">The src attribute for the img element.</td>
+ <td colSpan="3">
+ <p>The src attribute for the img element.</p>
+ </td>
</tr>
<tr id="cavatar-status">
<td className="text-primary fw-semibold">status<a href="#cavatar-status" aria-label="CAvatar status permalink" className="anchor-link after">#</a></td>
@@ -61,7 +71,9 @@ import CAvatar from '@coreui/react/src/components/avatar/CAvatar'
<td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets the color context of the status indicator to one of CoreUI’s themed colors.</td>
+ <td colSpan="3">
+ <p>Sets the color context of the status indicator to one of CoreUI’s themed colors.</p>
+ </td>
</tr>
<tr id="cavatar-textColor">
<td className="text-primary fw-semibold">textColor<a href="#cavatar-textColor" aria-label="CAvatar textColor permalink" className="anchor-link after">#</a></td>
@@ -69,7 +81,9 @@ import CAvatar from '@coreui/react/src/components/avatar/CAvatar'
<td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`'primary-emphasis'`}</code>, <code>{`'secondary-emphasis'`}</code>, <code>{`'success-emphasis'`}</code>, <code>{`'danger-emphasis'`}</code>, <code>{`'warning-emphasis'`}</code>, <code>{`'info-emphasis'`}</code>, <code>{`'light-emphasis'`}</code>, <code>{`'body'`}</code>, <code>{`'body-emphasis'`}</code>, <code>{`'body-secondary'`}</code>, <code>{`'body-tertiary'`}</code>, <code>{`'black'`}</code>, <code>{`'black-50'`}</code>, <code>{`'white'`}</code>, <code>{`'white-50'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets the text color of the component to one of CoreUI’s themed colors.</td>
+ <td colSpan="3">
+ <p>Sets the text color of the component to one of CoreUI’s themed colors.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CBackdrop.api.mdx b/packages/docs/content/api/CBackdrop.api.mdx
index a39d1537..468688cc 100644
--- a/packages/docs/content/api/CBackdrop.api.mdx
+++ b/packages/docs/content/api/CBackdrop.api.mdx
@@ -21,7 +21,9 @@ import CBackdrop from '@coreui/react/src/components/backdrop/CBackdrop'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="cbackdrop-visible">
<td className="text-primary fw-semibold">visible<a href="#cbackdrop-visible" aria-label="CBackdrop visible permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CBackdrop from '@coreui/react/src/components/backdrop/CBackdrop'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Toggle the visibility of modal component.</td>
+ <td colSpan="3">
+ <p>Toggle the visibility of modal component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CBadge.api.mdx b/packages/docs/content/api/CBadge.api.mdx
index 67e73873..68c20286 100644
--- a/packages/docs/content/api/CBadge.api.mdx
+++ b/packages/docs/content/api/CBadge.api.mdx
@@ -21,7 +21,9 @@ import CBadge from '@coreui/react/src/components/badge/CBadge'
<td><code>{`(ElementType & "symbol")`}</code>, <code>{`(ElementType & "object")`}</code>, <code>{`(ElementType & "span")`}</code>, <code>{`(ElementType & "slot")`}</code>, <code>{`(ElementType & "style")`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+ <td colSpan="3">
+ <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+ </td>
</tr>
<tr id="cbadge-className">
<td className="text-primary fw-semibold">className<a href="#cbadge-className" aria-label="CBadge className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CBadge from '@coreui/react/src/components/badge/CBadge'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
<tr id="cbadge-color">
<td className="text-primary fw-semibold">color<a href="#cbadge-color" aria-label="CBadge color permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CBadge from '@coreui/react/src/components/badge/CBadge'
<td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+ <td colSpan="3">
+ <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+ </td>
</tr>
<tr id="cbadge-position">
<td className="text-primary fw-semibold">position<a href="#cbadge-position" aria-label="CBadge position permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CBadge from '@coreui/react/src/components/badge/CBadge'
<td><code>{`"top-start"`}</code>, <code>{`"top-end"`}</code>, <code>{`"bottom-end"`}</code>, <code>{`"bottom-start"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Position badge in one of the corners of a link or button.</td>
+ <td colSpan="3">
+ <p>Position badge in one of the corners of a link or button.</p>
+ </td>
</tr>
<tr id="cbadge-shape">
<td className="text-primary fw-semibold">shape<a href="#cbadge-shape" aria-label="CBadge shape permalink" className="anchor-link after">#</a></td>
@@ -53,7 +61,9 @@ import CBadge from '@coreui/react/src/components/badge/CBadge'
<td><code>{`'rounded'`}</code>, <code>{`'rounded-top'`}</code>, <code>{`'rounded-end'`}</code>, <code>{`'rounded-bottom'`}</code>, <code>{`'rounded-start'`}</code>, <code>{`'rounded-circle'`}</code>, <code>{`'rounded-pill'`}</code>, <code>{`'rounded-0'`}</code>, <code>{`'rounded-1'`}</code>, <code>{`'rounded-2'`}</code>, <code>{`'rounded-3'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Select the shape of the component.</td>
+ <td colSpan="3">
+ <p>Select the shape of the component.</p>
+ </td>
</tr>
<tr id="cbadge-size">
<td className="text-primary fw-semibold">size<a href="#cbadge-size" aria-label="CBadge size permalink" className="anchor-link after">#</a></td>
@@ -61,7 +71,9 @@ import CBadge from '@coreui/react/src/components/badge/CBadge'
<td><code>{`"sm"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Size the component small.</td>
+ <td colSpan="3">
+ <p>Size the component small.</p>
+ </td>
</tr>
<tr id="cbadge-textBgColor">
<td className="text-primary fw-semibold">textBgColor<a href="#cbadge-textBgColor" aria-label="CBadge textBgColor permalink" className="anchor-link after">#</a><span className="badge bg-success">5.0.0+</span></td>
@@ -69,7 +81,9 @@ import CBadge from '@coreui/react/src/components/badge/CBadge'
<td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility.</td>
+ <td colSpan="3">
+ <p>Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility.</p>
+ </td>
</tr>
<tr id="cbadge-textColor">
<td className="text-primary fw-semibold">textColor<a href="#cbadge-textColor" aria-label="CBadge textColor permalink" className="anchor-link after">#</a></td>
@@ -77,7 +91,9 @@ import CBadge from '@coreui/react/src/components/badge/CBadge'
<td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`'primary-emphasis'`}</code>, <code>{`'secondary-emphasis'`}</code>, <code>{`'success-emphasis'`}</code>, <code>{`'danger-emphasis'`}</code>, <code>{`'warning-emphasis'`}</code>, <code>{`'info-emphasis'`}</code>, <code>{`'light-emphasis'`}</code>, <code>{`'body'`}</code>, <code>{`'body-emphasis'`}</code>, <code>{`'body-secondary'`}</code>, <code>{`'body-tertiary'`}</code>, <code>{`'black'`}</code>, <code>{`'black-50'`}</code>, <code>{`'white'`}</code>, <code>{`'white-50'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets the text color of the component to one of CoreUI’s themed colors.</td>
+ <td colSpan="3">
+ <p>Sets the text color of the component to one of CoreUI’s themed colors.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CBreadcrumb.api.mdx b/packages/docs/content/api/CBreadcrumb.api.mdx
index c6994e9e..2734c4d1 100644
--- a/packages/docs/content/api/CBreadcrumb.api.mdx
+++ b/packages/docs/content/api/CBreadcrumb.api.mdx
@@ -21,7 +21,9 @@ import CBreadcrumb from '@coreui/react/src/components/breadcrumb/CBreadcrumb'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CBreadcrumbItem.api.mdx b/packages/docs/content/api/CBreadcrumbItem.api.mdx
index e48c7a5e..eb75d64b 100644
--- a/packages/docs/content/api/CBreadcrumbItem.api.mdx
+++ b/packages/docs/content/api/CBreadcrumbItem.api.mdx
@@ -21,7 +21,9 @@ import CBreadcrumbItem from '@coreui/react/src/components/breadcrumb/CBreadcrumb
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Toggle the active state for the component.</td>
+ <td colSpan="3">
+ <p>Toggle the active state for the component.</p>
+ </td>
</tr>
<tr id="cbreadcrumbitem-as">
<td className="text-primary fw-semibold">as<a href="#cbreadcrumbitem-as" aria-label="CBreadcrumbItem as permalink" className="anchor-link after">#</a><span className="badge bg-success">5.4.0+</span></td>
@@ -29,7 +31,9 @@ import CBreadcrumbItem from '@coreui/react/src/components/breadcrumb/CBreadcrumb
<td><code>{`(ElementType & "symbol")`}</code>, <code>{`(ElementType & "object")`}</code>, <code>{`(ElementType & "li")`}</code>, <code>{`(ElementType & "slot")`}</code>, <code>{`(ElementType & "style")`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+ <td colSpan="3">
+ <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+ </td>
</tr>
<tr id="cbreadcrumbitem-className">
<td className="text-primary fw-semibold">className<a href="#cbreadcrumbitem-className" aria-label="CBreadcrumbItem className permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CBreadcrumbItem from '@coreui/react/src/components/breadcrumb/CBreadcrumb
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="cbreadcrumbitem-href">
<td className="text-primary fw-semibold">href<a href="#cbreadcrumbitem-href" aria-label="CBreadcrumbItem href permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CBreadcrumbItem from '@coreui/react/src/components/breadcrumb/CBreadcrumb
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">The <code>{`href`}</code> attribute for the inner <code>{`\<CLink>`}</code> component.</td>
+ <td colSpan="3">
+ <p>The <code>{`href`}</code> attribute for the inner <code>{`<CLink>`}</code> component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CButton.api.mdx b/packages/docs/content/api/CButton.api.mdx
index eabef071..b394aff0 100644
--- a/packages/docs/content/api/CButton.api.mdx
+++ b/packages/docs/content/api/CButton.api.mdx
@@ -21,7 +21,9 @@ import CButton from '@coreui/react/src/components/button/CButton'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Toggle the active state for the component.</td>
+ <td colSpan="3">
+ <p>Toggle the active state for the component.</p>
+ </td>
</tr>
<tr id="cbutton-as">
<td className="text-primary fw-semibold">as<a href="#cbutton-as" aria-label="CButton as permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CButton from '@coreui/react/src/components/button/CButton'
<td><code>{`(ElementType & "symbol")`}</code>, <code>{`(ElementType & "object")`}</code>, <code>{`(ElementType & "button")`}</code>, <code>{`(ElementType & "cite")`}</code>, <code>{`(ElementType & "data")`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+ <td colSpan="3">
+ <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+ </td>
</tr>
<tr id="cbutton-className">
<td className="text-primary fw-semibold">className<a href="#cbutton-className" aria-label="CButton className permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CButton from '@coreui/react/src/components/button/CButton'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="cbutton-color">
<td className="text-primary fw-semibold">color<a href="#cbutton-color" aria-label="CButton color permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CButton from '@coreui/react/src/components/button/CButton'
<td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+ <td colSpan="3">
+ <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+ </td>
</tr>
<tr id="cbutton-disabled">
<td className="text-primary fw-semibold">disabled<a href="#cbutton-disabled" aria-label="CButton disabled permalink" className="anchor-link after">#</a></td>
@@ -53,7 +61,9 @@ import CButton from '@coreui/react/src/components/button/CButton'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Toggle the disabled state for the component.</td>
+ <td colSpan="3">
+ <p>Toggle the disabled state for the component.</p>
+ </td>
</tr>
<tr id="cbutton-href">
<td className="text-primary fw-semibold">href<a href="#cbutton-href" aria-label="CButton href permalink" className="anchor-link after">#</a></td>
@@ -61,7 +71,9 @@ import CButton from '@coreui/react/src/components/button/CButton'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">The href attribute specifies the URL of the page the link goes to.</td>
+ <td colSpan="3">
+ <p>The href attribute specifies the URL of the page the link goes to.</p>
+ </td>
</tr>
<tr id="cbutton-role">
<td className="text-primary fw-semibold">role<a href="#cbutton-role" aria-label="CButton role permalink" className="anchor-link after">#</a></td>
@@ -69,7 +81,9 @@ import CButton from '@coreui/react/src/components/button/CButton'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers.</td>
+ <td colSpan="3">
+ <p>The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers.</p>
+ </td>
</tr>
<tr id="cbutton-shape">
<td className="text-primary fw-semibold">shape<a href="#cbutton-shape" aria-label="CButton shape permalink" className="anchor-link after">#</a></td>
@@ -77,7 +91,9 @@ import CButton from '@coreui/react/src/components/button/CButton'
<td><code>{`'rounded'`}</code>, <code>{`'rounded-top'`}</code>, <code>{`'rounded-end'`}</code>, <code>{`'rounded-bottom'`}</code>, <code>{`'rounded-start'`}</code>, <code>{`'rounded-circle'`}</code>, <code>{`'rounded-pill'`}</code>, <code>{`'rounded-0'`}</code>, <code>{`'rounded-1'`}</code>, <code>{`'rounded-2'`}</code>, <code>{`'rounded-3'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Select the shape of the component.</td>
+ <td colSpan="3">
+ <p>Select the shape of the component.</p>
+ </td>
</tr>
<tr id="cbutton-size">
<td className="text-primary fw-semibold">size<a href="#cbutton-size" aria-label="CButton size permalink" className="anchor-link after">#</a></td>
@@ -85,7 +101,9 @@ import CButton from '@coreui/react/src/components/button/CButton'
<td><code>{`"sm"`}</code>, <code>{`"lg"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Size the component small or large.</td>
+ <td colSpan="3">
+ <p>Size the component small or large.</p>
+ </td>
</tr>
<tr id="cbutton-type">
<td className="text-primary fw-semibold">type<a href="#cbutton-type" aria-label="CButton type permalink" className="anchor-link after">#</a></td>
@@ -93,7 +111,10 @@ import CButton from '@coreui/react/src/components/button/CButton'
<td><code>{`"button"`}</code>, <code>{`"submit"`}</code>, <code>{`"reset"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Specifies the type of button. Always specify the type attribute for the <code>{`\<button>`}</code> element.<br/>Different browsers may use different default types for the <code>{`\<button>`}</code> element.</td>
+ <td colSpan="3">
+ <p>Specifies the type of button. Always specify the type attribute for the <code>{`<button>`}</code> element.<br />
+Different browsers may use different default types for the <code>{`<button>`}</code> element.</p>
+ </td>
</tr>
<tr id="cbutton-variant">
<td className="text-primary fw-semibold">variant<a href="#cbutton-variant" aria-label="CButton variant permalink" className="anchor-link after">#</a></td>
@@ -101,7 +122,9 @@ import CButton from '@coreui/react/src/components/button/CButton'
<td><code>{`"outline"`}</code>, <code>{`"ghost"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set the button variant to an outlined button or a ghost button.</td>
+ <td colSpan="3">
+ <p>Set the button variant to an outlined button or a ghost button.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CButtonGroup.api.mdx b/packages/docs/content/api/CButtonGroup.api.mdx
index 892c8ab2..696910a8 100644
--- a/packages/docs/content/api/CButtonGroup.api.mdx
+++ b/packages/docs/content/api/CButtonGroup.api.mdx
@@ -21,7 +21,9 @@ import CButtonGroup from '@coreui/react/src/components/button-group/CButtonGroup
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="cbuttongroup-size">
<td className="text-primary fw-semibold">size<a href="#cbuttongroup-size" aria-label="CButtonGroup size permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CButtonGroup from '@coreui/react/src/components/button-group/CButtonGroup
<td><code>{`"sm"`}</code>, <code>{`"lg"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Size the component small or large.</td>
+ <td colSpan="3">
+ <p>Size the component small or large.</p>
+ </td>
</tr>
<tr id="cbuttongroup-vertical">
<td className="text-primary fw-semibold">vertical<a href="#cbuttongroup-vertical" aria-label="CButtonGroup vertical permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CButtonGroup from '@coreui/react/src/components/button-group/CButtonGroup
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Create a set of buttons that appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.</td>
+ <td colSpan="3">
+ <p>Create a set of buttons that appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CButtonToolbar.api.mdx b/packages/docs/content/api/CButtonToolbar.api.mdx
index 8c17ddf6..c95ae1f3 100644
--- a/packages/docs/content/api/CButtonToolbar.api.mdx
+++ b/packages/docs/content/api/CButtonToolbar.api.mdx
@@ -21,7 +21,9 @@ import CButtonToolbar from '@coreui/react/src/components/button-group/CButtonToo
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CCallout.api.mdx b/packages/docs/content/api/CCallout.api.mdx
index bded50c8..c364fcdf 100644
--- a/packages/docs/content/api/CCallout.api.mdx
+++ b/packages/docs/content/api/CCallout.api.mdx
@@ -21,7 +21,9 @@ import CCallout from '@coreui/react/src/components/callout/CCallout'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="ccallout-color">
<td className="text-primary fw-semibold">color<a href="#ccallout-color" aria-label="CCallout color permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CCallout from '@coreui/react/src/components/callout/CCallout'
<td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+ <td colSpan="3">
+ <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CCard.api.mdx b/packages/docs/content/api/CCard.api.mdx
index ed842ac3..242fc436 100644
--- a/packages/docs/content/api/CCard.api.mdx
+++ b/packages/docs/content/api/CCard.api.mdx
@@ -21,7 +21,9 @@ import CCard from '@coreui/react/src/components/card/CCard'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="ccard-color">
<td className="text-primary fw-semibold">color<a href="#ccard-color" aria-label="CCard color permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CCard from '@coreui/react/src/components/card/CCard'
<td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+ <td colSpan="3">
+ <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+ </td>
</tr>
<tr id="ccard-textBgColor">
<td className="text-primary fw-semibold">textBgColor<a href="#ccard-textBgColor" aria-label="CCard textBgColor permalink" className="anchor-link after">#</a><span className="badge bg-success">5.0.0+</span></td>
@@ -37,7 +41,9 @@ import CCard from '@coreui/react/src/components/card/CCard'
<td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility.</td>
+ <td colSpan="3">
+ <p>Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility.</p>
+ </td>
</tr>
<tr id="ccard-textColor">
<td className="text-primary fw-semibold">textColor<a href="#ccard-textColor" aria-label="CCard textColor permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CCard from '@coreui/react/src/components/card/CCard'
<td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`'primary-emphasis'`}</code>, <code>{`'secondary-emphasis'`}</code>, <code>{`'success-emphasis'`}</code>, <code>{`'danger-emphasis'`}</code>, <code>{`'warning-emphasis'`}</code>, <code>{`'info-emphasis'`}</code>, <code>{`'light-emphasis'`}</code>, <code>{`'body'`}</code>, <code>{`'body-emphasis'`}</code>, <code>{`'body-secondary'`}</code>, <code>{`'body-tertiary'`}</code>, <code>{`'black'`}</code>, <code>{`'black-50'`}</code>, <code>{`'white'`}</code>, <code>{`'white-50'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets the text color context of the component to one of CoreUI’s themed colors.</td>
+ <td colSpan="3">
+ <p>Sets the text color context of the component to one of CoreUI’s themed colors.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CCardBody.api.mdx b/packages/docs/content/api/CCardBody.api.mdx
index 120166fc..a0ba3a0e 100644
--- a/packages/docs/content/api/CCardBody.api.mdx
+++ b/packages/docs/content/api/CCardBody.api.mdx
@@ -21,7 +21,9 @@ import CCardBody from '@coreui/react/src/components/card/CCardBody'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CCardFooter.api.mdx b/packages/docs/content/api/CCardFooter.api.mdx
index 56002829..e9fe9533 100644
--- a/packages/docs/content/api/CCardFooter.api.mdx
+++ b/packages/docs/content/api/CCardFooter.api.mdx
@@ -21,7 +21,9 @@ import CCardFooter from '@coreui/react/src/components/card/CCardFooter'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CCardGroup.api.mdx b/packages/docs/content/api/CCardGroup.api.mdx
index 17c9234c..1e9e115b 100644
--- a/packages/docs/content/api/CCardGroup.api.mdx
+++ b/packages/docs/content/api/CCardGroup.api.mdx
@@ -21,7 +21,9 @@ import CCardGroup from '@coreui/react/src/components/card/CCardGroup'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CCardHeader.api.mdx b/packages/docs/content/api/CCardHeader.api.mdx
index eee36618..fc1e173b 100644
--- a/packages/docs/content/api/CCardHeader.api.mdx
+++ b/packages/docs/content/api/CCardHeader.api.mdx
@@ -21,7 +21,9 @@ import CCardHeader from '@coreui/react/src/components/card/CCardHeader'
<td><code>{`(ElementType & "symbol")`}</code>, <code>{`(ElementType & "object")`}</code>, <code>{`(ElementType & "div")`}</code>, <code>{`(ElementType & "slot")`}</code>, <code>{`(ElementType & "style")`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+ <td colSpan="3">
+ <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+ </td>
</tr>
<tr id="ccardheader-className">
<td className="text-primary fw-semibold">className<a href="#ccardheader-className" aria-label="CCardHeader className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CCardHeader from '@coreui/react/src/components/card/CCardHeader'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CCardImage.api.mdx b/packages/docs/content/api/CCardImage.api.mdx
index bdf36f87..80470cb5 100644
--- a/packages/docs/content/api/CCardImage.api.mdx
+++ b/packages/docs/content/api/CCardImage.api.mdx
@@ -21,7 +21,9 @@ import CCardImage from '@coreui/react/src/components/card/CCardImage'
<td><code>{`(ElementType & "symbol")`}</code>, <code>{`(ElementType & "object")`}</code>, <code>{`(ElementType & "img")`}</code>, <code>{`(ElementType & "slot")`}</code>, <code>{`(ElementType & "style")`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+ <td colSpan="3">
+ <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+ </td>
</tr>
<tr id="ccardimage-className">
<td className="text-primary fw-semibold">className<a href="#ccardimage-className" aria-label="CCardImage className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CCardImage from '@coreui/react/src/components/card/CCardImage'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="ccardimage-orientation">
<td className="text-primary fw-semibold">orientation<a href="#ccardimage-orientation" aria-label="CCardImage orientation permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CCardImage from '@coreui/react/src/components/card/CCardImage'
<td><code>{`"top"`}</code>, <code>{`"bottom"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Optionally orientate the image to the top, bottom, or make it overlaid across the card.</td>
+ <td colSpan="3">
+ <p>Optionally orientate the image to the top, bottom, or make it overlaid across the card.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CCardImageOverlay.api.mdx b/packages/docs/content/api/CCardImageOverlay.api.mdx
index b22f8289..9b02e5a6 100644
--- a/packages/docs/content/api/CCardImageOverlay.api.mdx
+++ b/packages/docs/content/api/CCardImageOverlay.api.mdx
@@ -21,7 +21,9 @@ import CCardImageOverlay from '@coreui/react/src/components/card/CCardImageOverl
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CCardLink.api.mdx b/packages/docs/content/api/CCardLink.api.mdx
index 5da3c52c..2329b6c8 100644
--- a/packages/docs/content/api/CCardLink.api.mdx
+++ b/packages/docs/content/api/CCardLink.api.mdx
@@ -21,7 +21,9 @@ import CCardLink from '@coreui/react/src/components/card/CCardLink'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="ccardlink-href">
<td className="text-primary fw-semibold">href<a href="#ccardlink-href" aria-label="CCardLink href permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CCardLink from '@coreui/react/src/components/card/CCardLink'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">The href attribute specifies the URL of the page the link goes to.</td>
+ <td colSpan="3">
+ <p>The href attribute specifies the URL of the page the link goes to.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CCardSubtitle.api.mdx b/packages/docs/content/api/CCardSubtitle.api.mdx
index 9a02ae2b..17ef812e 100644
--- a/packages/docs/content/api/CCardSubtitle.api.mdx
+++ b/packages/docs/content/api/CCardSubtitle.api.mdx
@@ -21,7 +21,9 @@ import CCardSubtitle from '@coreui/react/src/components/card/CCardSubtitle'
<td><code>{`(ElementType & "symbol")`}</code>, <code>{`(ElementType & "object")`}</code>, <code>{`(ElementType & "h6")`}</code>, <code>{`(ElementType & "slot")`}</code>, <code>{`(ElementType & "style")`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+ <td colSpan="3">
+ <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+ </td>
</tr>
<tr id="ccardsubtitle-className">
<td className="text-primary fw-semibold">className<a href="#ccardsubtitle-className" aria-label="CCardSubtitle className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CCardSubtitle from '@coreui/react/src/components/card/CCardSubtitle'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CCardText.api.mdx b/packages/docs/content/api/CCardText.api.mdx
index 6efe6ce0..cd7180de 100644
--- a/packages/docs/content/api/CCardText.api.mdx
+++ b/packages/docs/content/api/CCardText.api.mdx
@@ -21,7 +21,9 @@ import CCardText from '@coreui/react/src/components/card/CCardText'
<td><code>{`(ElementType & "symbol")`}</code>, <code>{`(ElementType & "object")`}</code>, <code>{`(ElementType & "p")`}</code>, <code>{`(ElementType & "slot")`}</code>, <code>{`(ElementType & "style")`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+ <td colSpan="3">
+ <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+ </td>
</tr>
<tr id="ccardtext-className">
<td className="text-primary fw-semibold">className<a href="#ccardtext-className" aria-label="CCardText className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CCardText from '@coreui/react/src/components/card/CCardText'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CCardTitle.api.mdx b/packages/docs/content/api/CCardTitle.api.mdx
index 3e25134a..d1bc0805 100644
--- a/packages/docs/content/api/CCardTitle.api.mdx
+++ b/packages/docs/content/api/CCardTitle.api.mdx
@@ -21,7 +21,9 @@ import CCardTitle from '@coreui/react/src/components/card/CCardTitle'
<td><code>{`(ElementType & "symbol")`}</code>, <code>{`(ElementType & "object")`}</code>, <code>{`(ElementType & "h5")`}</code>, <code>{`(ElementType & "slot")`}</code>, <code>{`(ElementType & "style")`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+ <td colSpan="3">
+ <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+ </td>
</tr>
<tr id="ccardtitle-className">
<td className="text-primary fw-semibold">className<a href="#ccardtitle-className" aria-label="CCardTitle className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CCardTitle from '@coreui/react/src/components/card/CCardTitle'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CCarousel.api.mdx b/packages/docs/content/api/CCarousel.api.mdx
index d0f96cc8..9fc5f84d 100644
--- a/packages/docs/content/api/CCarousel.api.mdx
+++ b/packages/docs/content/api/CCarousel.api.mdx
@@ -21,7 +21,9 @@ import CCarousel from '@coreui/react/src/components/carousel/CCarousel'
<td><code>{`number`}</code></td>
</tr>
<tr>
- <td colSpan="3">index of the active item.</td>
+ <td colSpan="3">
+ <p>index of the active item.</p>
+ </td>
</tr>
<tr id="ccarousel-className">
<td className="text-primary fw-semibold">className<a href="#ccarousel-className" aria-label="CCarousel className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CCarousel from '@coreui/react/src/components/carousel/CCarousel'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="ccarousel-controls">
<td className="text-primary fw-semibold">controls<a href="#ccarousel-controls" aria-label="CCarousel controls permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CCarousel from '@coreui/react/src/components/carousel/CCarousel'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Adding in the previous and next controls.</td>
+ <td colSpan="3">
+ <p>Adding in the previous and next controls.</p>
+ </td>
</tr>
<tr id="ccarousel-dark">
<td className="text-primary fw-semibold">dark<a href="#ccarousel-dark" aria-label="CCarousel dark permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CCarousel from '@coreui/react/src/components/carousel/CCarousel'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Add darker controls, indicators, and captions.</td>
+ <td colSpan="3">
+ <p>Add darker controls, indicators, and captions.</p>
+ </td>
</tr>
<tr id="ccarousel-indicators">
<td className="text-primary fw-semibold">indicators<a href="#ccarousel-indicators" aria-label="CCarousel indicators permalink" className="anchor-link after">#</a></td>
@@ -53,7 +61,9 @@ import CCarousel from '@coreui/react/src/components/carousel/CCarousel'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Adding indicators at the bottom of the carousel for each item.</td>
+ <td colSpan="3">
+ <p>Adding indicators at the bottom of the carousel for each item.</p>
+ </td>
</tr>
<tr id="ccarousel-interval">
<td className="text-primary fw-semibold">interval<a href="#ccarousel-interval" aria-label="CCarousel interval permalink" className="anchor-link after">#</a></td>
@@ -61,7 +71,9 @@ import CCarousel from '@coreui/react/src/components/carousel/CCarousel'
<td><code>{`number`}</code>, <code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td>
+ <td colSpan="3">
+ <p>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</p>
+ </td>
</tr>
<tr id="ccarousel-onSlid">
<td className="text-primary fw-semibold">onSlid<a href="#ccarousel-onSlid" aria-label="CCarousel onSlid permalink" className="anchor-link after">#</a></td>
@@ -69,7 +81,9 @@ import CCarousel from '@coreui/react/src/components/carousel/CCarousel'
<td><code>{`(active: number, direction: string) => void`}</code></td>
</tr>
<tr>
- <td colSpan="3">Callback fired when a slide transition end.</td>
+ <td colSpan="3">
+ <p>Callback fired when a slide transition end.</p>
+ </td>
</tr>
<tr id="ccarousel-onSlide">
<td className="text-primary fw-semibold">onSlide<a href="#ccarousel-onSlide" aria-label="CCarousel onSlide permalink" className="anchor-link after">#</a></td>
@@ -77,7 +91,9 @@ import CCarousel from '@coreui/react/src/components/carousel/CCarousel'
<td><code>{`(active: number, direction: string) => void`}</code></td>
</tr>
<tr>
- <td colSpan="3">Callback fired when a slide transition starts.</td>
+ <td colSpan="3">
+ <p>Callback fired when a slide transition starts.</p>
+ </td>
</tr>
<tr id="ccarousel-pause">
<td className="text-primary fw-semibold">pause<a href="#ccarousel-pause" aria-label="CCarousel pause permalink" className="anchor-link after">#</a></td>
@@ -85,7 +101,9 @@ import CCarousel from '@coreui/react/src/components/carousel/CCarousel'
<td><code>{`boolean`}</code>, <code>{`"hover"`}</code></td>
</tr>
<tr>
- <td colSpan="3">If set to 'hover', pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won't pause it.</td>
+ <td colSpan="3">
+ <p>If set to 'hover', pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won't pause it.</p>
+ </td>
</tr>
<tr id="ccarousel-touch">
<td className="text-primary fw-semibold">touch<a href="#ccarousel-touch" aria-label="CCarousel touch permalink" className="anchor-link after">#</a><span className="badge bg-success">4.5.0+</span></td>
@@ -93,7 +111,9 @@ import CCarousel from '@coreui/react/src/components/carousel/CCarousel'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set whether the carousel should support left/right swipe interactions on touchscreen devices.</td>
+ <td colSpan="3">
+ <p>Set whether the carousel should support left/right swipe interactions on touchscreen devices.</p>
+ </td>
</tr>
<tr id="ccarousel-transition">
<td className="text-primary fw-semibold">transition<a href="#ccarousel-transition" aria-label="CCarousel transition permalink" className="anchor-link after">#</a></td>
@@ -101,7 +121,9 @@ import CCarousel from '@coreui/react/src/components/carousel/CCarousel'
<td><code>{`"slide"`}</code>, <code>{`"crossfade"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set type of the transition.</td>
+ <td colSpan="3">
+ <p>Set type of the transition.</p>
+ </td>
</tr>
<tr id="ccarousel-wrap">
<td className="text-primary fw-semibold">wrap<a href="#ccarousel-wrap" aria-label="CCarousel wrap permalink" className="anchor-link after">#</a></td>
@@ -109,7 +131,9 @@ import CCarousel from '@coreui/react/src/components/carousel/CCarousel'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set whether the carousel should cycle continuously or have hard stops.</td>
+ <td colSpan="3">
+ <p>Set whether the carousel should cycle continuously or have hard stops.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CCarouselCaption.api.mdx b/packages/docs/content/api/CCarouselCaption.api.mdx
index 3e0493cd..a1fa0f31 100644
--- a/packages/docs/content/api/CCarouselCaption.api.mdx
+++ b/packages/docs/content/api/CCarouselCaption.api.mdx
@@ -21,7 +21,9 @@ import CCarouselCaption from '@coreui/react/src/components/carousel/CCarouselCap
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CCarouselItem.api.mdx b/packages/docs/content/api/CCarouselItem.api.mdx
index 80cc26ca..75b5046c 100644
--- a/packages/docs/content/api/CCarouselItem.api.mdx
+++ b/packages/docs/content/api/CCarouselItem.api.mdx
@@ -21,7 +21,9 @@ import CCarouselItem from '@coreui/react/src/components/carousel/CCarouselItem'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="ccarouselitem-interval">
<td className="text-primary fw-semibold">interval<a href="#ccarouselitem-interval" aria-label="CCarouselItem interval permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CCarouselItem from '@coreui/react/src/components/carousel/CCarouselItem'
<td><code>{`number`}</code>, <code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">The amount of time to delay between automatically cycling an item.</td>
+ <td colSpan="3">
+ <p>The amount of time to delay between automatically cycling an item.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CChart.api.mdx b/packages/docs/content/api/CChart.api.mdx
index 63605ab9..c875f322 100644
--- a/packages/docs/content/api/CChart.api.mdx
+++ b/packages/docs/content/api/CChart.api.mdx
@@ -21,7 +21,9 @@ import CChart from '@coreui/react-chartjs/src/CChart'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="cchart-customTooltips">
<td className="text-primary fw-semibold">customTooltips<a href="#cchart-customTooltips" aria-label="CChart customTooltips permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CChart from '@coreui/react-chartjs/src/CChart'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Enables custom html based tooltips instead of standard tooltips.</td>
+ <td colSpan="3">
+ <p>Enables custom html based tooltips instead of standard tooltips.</p>
+ </td>
</tr>
<tr id="cchart-data">
<td className="text-primary fw-semibold">data<a href="#cchart-data" aria-label="CChart data permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CChart from '@coreui/react-chartjs/src/CChart'
<td><code>{`ChartData\<keyof ChartTypeRegistry, (number | [number, number] | Point | BubbleDataPoint)[], unknown>`}</code>, <code>{`((canvas: HTMLCanvasElement) => ChartData\<...>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">The data object that is passed into the Chart.js chart (more info).</td>
+ <td colSpan="3">
+ <p>The data object that is passed into the Chart.js chart (more info).</p>
+ </td>
</tr>
<tr id="cchart-fallbackContent">
<td className="text-primary fw-semibold">fallbackContent<a href="#cchart-fallbackContent" aria-label="CChart fallbackContent permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CChart from '@coreui/react-chartjs/src/CChart'
<td><code>{`React.ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions.</td>
+ <td colSpan="3">
+ <p>A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions.</p>
+ </td>
</tr>
<tr id="cchart-getDatasetAtEvent">
<td className="text-primary fw-semibold">getDatasetAtEvent<a href="#cchart-getDatasetAtEvent" aria-label="CChart getDatasetAtEvent permalink" className="anchor-link after">#</a></td>
@@ -53,7 +61,9 @@ import CChart from '@coreui/react-chartjs/src/CChart'
<td><code>{`(dataset: InteractionItem[], event: React.MouseEvent\<HTMLCanvasElement>) => void`}</code></td>
</tr>
<tr>
- <td colSpan="3">Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.</td>
+ <td colSpan="3">
+ <p>Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.</p>
+ </td>
</tr>
<tr id="cchart-getElementAtEvent">
<td className="text-primary fw-semibold">getElementAtEvent<a href="#cchart-getElementAtEvent" aria-label="CChart getElementAtEvent permalink" className="anchor-link after">#</a></td>
@@ -61,7 +71,9 @@ import CChart from '@coreui/react-chartjs/src/CChart'
<td><code>{`(element: InteractionItem[], event: React.MouseEvent\<HTMLCanvasElement>) => void`}</code></td>
</tr>
<tr>
- <td colSpan="3">Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.</td>
+ <td colSpan="3">
+ <p>Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.</p>
+ </td>
</tr>
<tr id="cchart-getElementsAtEvent">
<td className="text-primary fw-semibold">getElementsAtEvent<a href="#cchart-getElementsAtEvent" aria-label="CChart getElementsAtEvent permalink" className="anchor-link after">#</a></td>
@@ -69,7 +81,9 @@ import CChart from '@coreui/react-chartjs/src/CChart'
<td><code>{`(elements: InteractionItem[], event: React.MouseEvent\<HTMLCanvasElement>) => void`}</code></td>
</tr>
<tr>
- <td colSpan="3">Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event.</td>
+ <td colSpan="3">
+ <p>Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event.</p>
+ </td>
</tr>
<tr id="cchart-height">
<td className="text-primary fw-semibold">height<a href="#cchart-height" aria-label="CChart height permalink" className="anchor-link after">#</a></td>
@@ -77,7 +91,9 @@ import CChart from '@coreui/react-chartjs/src/CChart'
<td><code>{`number`}</code></td>
</tr>
<tr>
- <td colSpan="3">Height attribute applied to the rendered canvas.</td>
+ <td colSpan="3">
+ <p>Height attribute applied to the rendered canvas.</p>
+ </td>
</tr>
<tr id="cchart-id">
<td className="text-primary fw-semibold">id<a href="#cchart-id" aria-label="CChart id permalink" className="anchor-link after">#</a></td>
@@ -85,7 +101,9 @@ import CChart from '@coreui/react-chartjs/src/CChart'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">ID attribute applied to the rendered canvas.</td>
+ <td colSpan="3">
+ <p>ID attribute applied to the rendered canvas.</p>
+ </td>
</tr>
<tr id="cchart-options">
<td className="text-primary fw-semibold">options<a href="#cchart-options" aria-label="CChart options permalink" className="anchor-link after">#</a></td>
@@ -93,7 +111,9 @@ import CChart from '@coreui/react-chartjs/src/CChart'
<td><code>{`_DeepPartialObject\<CoreChartOptions\<keyof ChartTypeRegistry> & ElementChartOptions\<keyof ChartTypeRegistry> & PluginChartOptions\<...> & DatasetChartOptions\<...> & ScaleChartOptions\<...>>`}</code></td>
</tr>
<tr>
- <td colSpan="3">The options object that is passed into the Chart.js chart.</td>
+ <td colSpan="3">
+ <p>The options object that is passed into the Chart.js chart.</p>
+ </td>
</tr>
<tr id="cchart-plugins">
<td className="text-primary fw-semibold">plugins<a href="#cchart-plugins" aria-label="CChart plugins permalink" className="anchor-link after">#</a></td>
@@ -101,7 +121,9 @@ import CChart from '@coreui/react-chartjs/src/CChart'
<td><code>{`Plugin\<keyof ChartTypeRegistry, AnyObject>[]`}</code></td>
</tr>
<tr>
- <td colSpan="3">The plugins array that is passed into the Chart.js chart (more info)</td>
+ <td colSpan="3">
+ <p>The plugins array that is passed into the Chart.js chart (more info)</p>
+ </td>
</tr>
<tr id="cchart-redraw">
<td className="text-primary fw-semibold">redraw<a href="#cchart-redraw" aria-label="CChart redraw permalink" className="anchor-link after">#</a></td>
@@ -109,7 +131,9 @@ import CChart from '@coreui/react-chartjs/src/CChart'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">If true, will tear down and redraw chart on all updates.</td>
+ <td colSpan="3">
+ <p>If true, will tear down and redraw chart on all updates.</p>
+ </td>
</tr>
<tr id="cchart-type">
<td className="text-primary fw-semibold">type<a href="#cchart-type" aria-label="CChart type permalink" className="anchor-link after">#</a></td>
@@ -117,7 +141,9 @@ import CChart from '@coreui/react-chartjs/src/CChart'
<td><code>{`{'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'}`}</code></td>
</tr>
<tr>
- <td colSpan="3">Chart.js chart type.</td>
+ <td colSpan="3">
+ <p>Chart.js chart type.</p>
+ </td>
</tr>
<tr id="cchart-width">
<td className="text-primary fw-semibold">width<a href="#cchart-width" aria-label="CChart width permalink" className="anchor-link after">#</a></td>
@@ -125,7 +151,9 @@ import CChart from '@coreui/react-chartjs/src/CChart'
<td><code>{`number`}</code></td>
</tr>
<tr>
- <td colSpan="3">Width attribute applied to the rendered canvas.</td>
+ <td colSpan="3">
+ <p>Width attribute applied to the rendered canvas.</p>
+ </td>
</tr>
<tr id="cchart-wrapper">
<td className="text-primary fw-semibold">wrapper<a href="#cchart-wrapper" aria-label="CChart wrapper permalink" className="anchor-link after">#</a></td>
@@ -133,10 +161,10 @@ import CChart from '@coreui/react-chartjs/src/CChart'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Put the chart into the wrapper div element.</td>
+ <td colSpan="3">
+ <p>Put the chart into the wrapper div element.</p>
+ </td>
</tr>
</tbody>
</table>
</div>
-able>
-</div>
diff --git a/packages/docs/content/api/CCharts.api.mdx b/packages/docs/content/api/CCharts.api.mdx
index df4faa63..3278065f 100644
--- a/packages/docs/content/api/CCharts.api.mdx
+++ b/packages/docs/content/api/CCharts.api.mdx
@@ -21,7 +21,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="cchartbar-customTooltips">
<td className="text-primary fw-semibold">customTooltips<a href="#cchartbar-customTooltips" aria-label="CChartBar customTooltips permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Enables custom html based tooltips instead of standard tooltips.</td>
+ <td colSpan="3">
+ <p>Enables custom html based tooltips instead of standard tooltips.</p>
+ </td>
</tr>
<tr id="cchartbar-data">
<td className="text-primary fw-semibold">data<a href="#cchartbar-data" aria-label="CChartBar data permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
<td><code>{`ChartData\<keyof ChartTypeRegistry, (number | [number, number] | Point | BubbleDataPoint)[], unknown>`}</code>, <code>{`((canvas: HTMLCanvasElement) => ChartData\<...>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">The data object that is passed into the Chart.js chart (more info).</td>
+ <td colSpan="3">
+ <p>The data object that is passed into the Chart.js chart (more info).</p>
+ </td>
</tr>
<tr id="cchartbar-fallbackContent">
<td className="text-primary fw-semibold">fallbackContent<a href="#cchartbar-fallbackContent" aria-label="CChartBar fallbackContent permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
<td><code>{`React.ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions.</td>
+ <td colSpan="3">
+ <p>A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions.</p>
+ </td>
</tr>
<tr id="cchartbar-getDatasetAtEvent">
<td className="text-primary fw-semibold">getDatasetAtEvent<a href="#cchartbar-getDatasetAtEvent" aria-label="CChartBar getDatasetAtEvent permalink" className="anchor-link after">#</a></td>
@@ -53,7 +61,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
<td><code>{`(dataset: InteractionItem[], event: React.MouseEvent\<HTMLCanvasElement>) => void`}</code></td>
</tr>
<tr>
- <td colSpan="3">Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.</td>
+ <td colSpan="3">
+ <p>Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.</p>
+ </td>
</tr>
<tr id="cchartbar-getElementAtEvent">
<td className="text-primary fw-semibold">getElementAtEvent<a href="#cchartbar-getElementAtEvent" aria-label="CChartBar getElementAtEvent permalink" className="anchor-link after">#</a></td>
@@ -61,7 +71,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
<td><code>{`(element: InteractionItem[], event: React.MouseEvent\<HTMLCanvasElement>) => void`}</code></td>
</tr>
<tr>
- <td colSpan="3">Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.</td>
+ <td colSpan="3">
+ <p>Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.</p>
+ </td>
</tr>
<tr id="cchartbar-getElementsAtEvent">
<td className="text-primary fw-semibold">getElementsAtEvent<a href="#cchartbar-getElementsAtEvent" aria-label="CChartBar getElementsAtEvent permalink" className="anchor-link after">#</a></td>
@@ -69,7 +81,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
<td><code>{`(elements: InteractionItem[], event: React.MouseEvent\<HTMLCanvasElement>) => void`}</code></td>
</tr>
<tr>
- <td colSpan="3">Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event.</td>
+ <td colSpan="3">
+ <p>Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event.</p>
+ </td>
</tr>
<tr id="cchartbar-height">
<td className="text-primary fw-semibold">height<a href="#cchartbar-height" aria-label="CChartBar height permalink" className="anchor-link after">#</a></td>
@@ -77,7 +91,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
<td><code>{`number`}</code></td>
</tr>
<tr>
- <td colSpan="3">Height attribute applied to the rendered canvas.</td>
+ <td colSpan="3">
+ <p>Height attribute applied to the rendered canvas.</p>
+ </td>
</tr>
<tr id="cchartbar-id">
<td className="text-primary fw-semibold">id<a href="#cchartbar-id" aria-label="CChartBar id permalink" className="anchor-link after">#</a></td>
@@ -85,7 +101,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">ID attribute applied to the rendered canvas.</td>
+ <td colSpan="3">
+ <p>ID attribute applied to the rendered canvas.</p>
+ </td>
</tr>
<tr id="cchartbar-options">
<td className="text-primary fw-semibold">options<a href="#cchartbar-options" aria-label="CChartBar options permalink" className="anchor-link after">#</a></td>
@@ -93,7 +111,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
<td><code>{`_DeepPartialObject\<CoreChartOptions\<keyof ChartTypeRegistry> & ElementChartOptions\<keyof ChartTypeRegistry> & PluginChartOptions\<...> & DatasetChartOptions\<...> & ScaleChartOptions\<...>>`}</code></td>
</tr>
<tr>
- <td colSpan="3">The options object that is passed into the Chart.js chart.</td>
+ <td colSpan="3">
+ <p>The options object that is passed into the Chart.js chart.</p>
+ </td>
</tr>
<tr id="cchartbar-plugins">
<td className="text-primary fw-semibold">plugins<a href="#cchartbar-plugins" aria-label="CChartBar plugins permalink" className="anchor-link after">#</a></td>
@@ -101,7 +121,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
<td><code>{`Plugin\<keyof ChartTypeRegistry, AnyObject>[]`}</code></td>
</tr>
<tr>
- <td colSpan="3">The plugins array that is passed into the Chart.js chart (more info)</td>
+ <td colSpan="3">
+ <p>The plugins array that is passed into the Chart.js chart (more info)</p>
+ </td>
</tr>
<tr id="cchartbar-redraw">
<td className="text-primary fw-semibold">redraw<a href="#cchartbar-redraw" aria-label="CChartBar redraw permalink" className="anchor-link after">#</a></td>
@@ -109,7 +131,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">If true, will tear down and redraw chart on all updates.</td>
+ <td colSpan="3">
+ <p>If true, will tear down and redraw chart on all updates.</p>
+ </td>
</tr>
<tr id="cchartbar-width">
<td className="text-primary fw-semibold">width<a href="#cchartbar-width" aria-label="CChartBar width permalink" className="anchor-link after">#</a></td>
@@ -117,7 +141,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
<td><code>{`number`}</code></td>
</tr>
<tr>
- <td colSpan="3">Width attribute applied to the rendered canvas.</td>
+ <td colSpan="3">
+ <p>Width attribute applied to the rendered canvas.</p>
+ </td>
</tr>
<tr id="cchartbar-wrapper">
<td className="text-primary fw-semibold">wrapper<a href="#cchartbar-wrapper" aria-label="CChartBar wrapper permalink" className="anchor-link after">#</a></td>
@@ -125,7 +151,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Put the chart into the wrapper div element.</td>
+ <td colSpan="3">
+ <p>Put the chart into the wrapper div element.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CCloseButton.api.mdx b/packages/docs/content/api/CCloseButton.api.mdx
index 46f59259..fba3e552 100644
--- a/packages/docs/content/api/CCloseButton.api.mdx
+++ b/packages/docs/content/api/CCloseButton.api.mdx
@@ -21,7 +21,9 @@ import CCloseButton from '@coreui/react/src/components/close-button/CCloseButton
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="cclosebutton-dark">
<td className="text-primary fw-semibold">dark<a href="#cclosebutton-dark" aria-label="CCloseButton dark permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CCloseButton from '@coreui/react/src/components/close-button/CCloseButton
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Invert the default color.</td>
+ <td colSpan="3">
+ <p>Invert the default color.</p>
+ </td>
</tr>
<tr id="cclosebutton-disabled">
<td className="text-primary fw-semibold">disabled<a href="#cclosebutton-disabled" aria-label="CCloseButton disabled permalink" className="anchor-link after">#</a></td>
@@ -37,15 +41,19 @@ import CCloseButton from '@coreui/react/src/components/close-button/CCloseButton
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Toggle the disabled state for the component.</td>
+ <td colSpan="3">
+ <p>Toggle the disabled state for the component.</p>
+ </td>
</tr>
<tr id="cclosebutton-white">
- <td className="text-primary fw-semibold">white<a href="#cclosebutton-white" aria-label="CCloseButton white permalink" className="anchor-link after">#</a><span className="badge bg-success">Deprecated undefined</span></td>
+ <td className="text-primary fw-semibold">white<a href="#cclosebutton-white" aria-label="CCloseButton white permalink" className="anchor-link after">#</a><span className="badge bg-danger">Deprecated 5.0.0</span></td>
<td>undefined</td>
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Change the default color to white.</td>
+ <td colSpan="3">
+ <p>Change the default color to white.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CCol.api.mdx b/packages/docs/content/api/CCol.api.mdx
index a905bd79..90cba258 100644
--- a/packages/docs/content/api/CCol.api.mdx
+++ b/packages/docs/content/api/CCol.api.mdx
@@ -21,7 +21,9 @@ import CCol from '@coreui/react/src/components/grid/CCol'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="ccol-lg">
<td className="text-primary fw-semibold">lg<a href="#ccol-lg" aria-label="CCol lg permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CCol from '@coreui/react/src/components/grid/CCol'
<td><code>{`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`}</code></td>
</tr>
<tr>
- <td colSpan="3">The number of columns/offset/order on large devices (\<1200px).</td>
+ <td colSpan="3">
+ <p>The number of columns/offset/order on large devices (<1200px).</p>
+ </td>
</tr>
<tr id="ccol-md">
<td className="text-primary fw-semibold">md<a href="#ccol-md" aria-label="CCol md permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CCol from '@coreui/react/src/components/grid/CCol'
<td><code>{`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`}</code></td>
</tr>
<tr>
- <td colSpan="3">The number of columns/offset/order on medium devices (\<992px).</td>
+ <td colSpan="3">
+ <p>The number of columns/offset/order on medium devices (<992px).</p>
+ </td>
</tr>
<tr id="ccol-sm">
<td className="text-primary fw-semibold">sm<a href="#ccol-sm" aria-label="CCol sm permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CCol from '@coreui/react/src/components/grid/CCol'
<td><code>{`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`}</code></td>
</tr>
<tr>
- <td colSpan="3">The number of columns/offset/order on small devices (\<768px).</td>
+ <td colSpan="3">
+ <p>The number of columns/offset/order on small devices (<768px).</p>
+ </td>
</tr>
<tr id="ccol-xl">
<td className="text-primary fw-semibold">xl<a href="#ccol-xl" aria-label="CCol xl permalink" className="anchor-link after">#</a></td>
@@ -53,7 +61,9 @@ import CCol from '@coreui/react/src/components/grid/CCol'
<td><code>{`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`}</code></td>
</tr>
<tr>
- <td colSpan="3">The number of columns/offset/order on X-Large devices (\<1400px).</td>
+ <td colSpan="3">
+ <p>The number of columns/offset/order on X-Large devices (<1400px).</p>
+ </td>
</tr>
<tr id="ccol-xs">
<td className="text-primary fw-semibold">xs<a href="#ccol-xs" aria-label="CCol xs permalink" className="anchor-link after">#</a></td>
@@ -61,7 +71,9 @@ import CCol from '@coreui/react/src/components/grid/CCol'
<td><code>{`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`}</code></td>
</tr>
<tr>
- <td colSpan="3">The number of columns/offset/order on extra small devices (\<576px).</td>
+ <td colSpan="3">
+ <p>The number of columns/offset/order on extra small devices (<576px).</p>
+ </td>
</tr>
<tr id="ccol-xxl">
<td className="text-primary fw-semibold">xxl<a href="#ccol-xxl" aria-label="CCol xxl permalink" className="anchor-link after">#</a></td>
@@ -69,7 +81,9 @@ import CCol from '@coreui/react/src/components/grid/CCol'
<td><code>{`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`}</code></td>
</tr>
<tr>
- <td colSpan="3">The number of columns/offset/order on XX-Large devices (≥1400px).</td>
+ <td colSpan="3">
+ <p>The number of columns/offset/order on XX-Large devices (≥1400px).</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CCollapse.api.mdx b/packages/docs/content/api/CCollapse.api.mdx
index 3fe185f9..997d55fd 100644
--- a/packages/docs/content/api/CCollapse.api.mdx
+++ b/packages/docs/content/api/CCollapse.api.mdx
@@ -21,7 +21,9 @@ import CCollapse from '@coreui/react/src/components/collapse/CCollapse'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="ccollapse-horizontal">
<td className="text-primary fw-semibold">horizontal<a href="#ccollapse-horizontal" aria-label="CCollapse horizontal permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CCollapse from '@coreui/react/src/components/collapse/CCollapse'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set horizontal collapsing to transition the width instead of height.</td>
+ <td colSpan="3">
+ <p>Set horizontal collapsing to transition the width instead of height.</p>
+ </td>
</tr>
<tr id="ccollapse-onHide">
<td className="text-primary fw-semibold">onHide<a href="#ccollapse-onHide" aria-label="CCollapse onHide permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CCollapse from '@coreui/react/src/components/collapse/CCollapse'
<td><code>{`() => void`}</code></td>
</tr>
<tr>
- <td colSpan="3">Callback fired when the component requests to be hidden.</td>
+ <td colSpan="3">
+ <p>Callback fired when the component requests to be hidden.</p>
+ </td>
</tr>
<tr id="ccollapse-onShow">
<td className="text-primary fw-semibold">onShow<a href="#ccollapse-onShow" aria-label="CCollapse onShow permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CCollapse from '@coreui/react/src/components/collapse/CCollapse'
<td><code>{`() => void`}</code></td>
</tr>
<tr>
- <td colSpan="3">Callback fired when the component requests to be shown.</td>
+ <td colSpan="3">
+ <p>Callback fired when the component requests to be shown.</p>
+ </td>
</tr>
<tr id="ccollapse-visible">
<td className="text-primary fw-semibold">visible<a href="#ccollapse-visible" aria-label="CCollapse visible permalink" className="anchor-link after">#</a></td>
@@ -53,7 +61,9 @@ import CCollapse from '@coreui/react/src/components/collapse/CCollapse'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Toggle the visibility of component.</td>
+ <td colSpan="3">
+ <p>Toggle the visibility of component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CConditionalPortal.api.mdx b/packages/docs/content/api/CConditionalPortal.api.mdx
index 1b24cc9d..18508ee1 100644
--- a/packages/docs/content/api/CConditionalPortal.api.mdx
+++ b/packages/docs/content/api/CConditionalPortal.api.mdx
@@ -21,7 +21,9 @@ import CConditionalPortal from '@coreui/react/src/components/conditional-portal/
<td><code>{`DocumentFragment`}</code>, <code>{`Element`}</code>, <code>{`(() => DocumentFragment | Element)`}</code></td>
</tr>
<tr>
- <td colSpan="3">An HTML element or function that returns a single element, with <code>{`document.body`}</code> as the default.</td>
+ <td colSpan="3">
+ <p>An HTML element or function that returns a single element, with <code>{`document.body`}</code> as the default.</p>
+ </td>
</tr>
<tr id="cconditionalportal-portal">
<td className="text-primary fw-semibold">portal<a href="#cconditionalportal-portal" aria-label="CConditionalPortal portal permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CConditionalPortal from '@coreui/react/src/components/conditional-portal/
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Render some children into a different part of the DOM</td>
+ <td colSpan="3">
+ <p>Render some children into a different part of the DOM</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CContainer.api.mdx b/packages/docs/content/api/CContainer.api.mdx
index 23928448..d98c8ead 100644
--- a/packages/docs/content/api/CContainer.api.mdx
+++ b/packages/docs/content/api/CContainer.api.mdx
@@ -21,7 +21,9 @@ import CContainer from '@coreui/react/src/components/grid/CContainer'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="ccontainer-fluid">
<td className="text-primary fw-semibold">fluid<a href="#ccontainer-fluid" aria-label="CContainer fluid permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CContainer from '@coreui/react/src/components/grid/CContainer'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set container 100% wide, spanning the entire width of the viewport.</td>
+ <td colSpan="3">
+ <p>Set container 100% wide, spanning the entire width of the viewport.</p>
+ </td>
</tr>
<tr id="ccontainer-lg">
<td className="text-primary fw-semibold">lg<a href="#ccontainer-lg" aria-label="CContainer lg permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CContainer from '@coreui/react/src/components/grid/CContainer'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set container 100% wide until large breakpoint.</td>
+ <td colSpan="3">
+ <p>Set container 100% wide until large breakpoint.</p>
+ </td>
</tr>
<tr id="ccontainer-md">
<td className="text-primary fw-semibold">md<a href="#ccontainer-md" aria-label="CContainer md permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CContainer from '@coreui/react/src/components/grid/CContainer'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set container 100% wide until medium breakpoint.</td>
+ <td colSpan="3">
+ <p>Set container 100% wide until medium breakpoint.</p>
+ </td>
</tr>
<tr id="ccontainer-sm">
<td className="text-primary fw-semibold">sm<a href="#ccontainer-sm" aria-label="CContainer sm permalink" className="anchor-link after">#</a></td>
@@ -53,7 +61,9 @@ import CContainer from '@coreui/react/src/components/grid/CContainer'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set container 100% wide until small breakpoint.</td>
+ <td colSpan="3">
+ <p>Set container 100% wide until small breakpoint.</p>
+ </td>
</tr>
<tr id="ccontainer-xl">
<td className="text-primary fw-semibold">xl<a href="#ccontainer-xl" aria-label="CContainer xl permalink" className="anchor-link after">#</a></td>
@@ -61,7 +71,9 @@ import CContainer from '@coreui/react/src/components/grid/CContainer'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set container 100% wide until X-large breakpoint.</td>
+ <td colSpan="3">
+ <p>Set container 100% wide until X-large breakpoint.</p>
+ </td>
</tr>
<tr id="ccontainer-xxl">
<td className="text-primary fw-semibold">xxl<a href="#ccontainer-xxl" aria-label="CContainer xxl permalink" className="anchor-link after">#</a></td>
@@ -69,7 +81,9 @@ import CContainer from '@coreui/react/src/components/grid/CContainer'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set container 100% wide until XX-large breakpoint.</td>
+ <td colSpan="3">
+ <p>Set container 100% wide until XX-large breakpoint.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CDropdown.api.mdx b/packages/docs/content/api/CDropdown.api.mdx
index ef5afd8f..5262dcc9 100644
--- a/packages/docs/content/api/CDropdown.api.mdx
+++ b/packages/docs/content/api/CDropdown.api.mdx
@@ -21,7 +21,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
<td><code>{`'start'`}</code>, <code>{`'end'`}</code>, <code>{`{ xs: 'start' | 'end' }`}</code>, <code>{`{ sm: 'start' | 'end' }`}</code>, <code>{`{ md: 'start' | 'end' }`}</code>, <code>{`{ lg: 'start' | 'end' }`}</code>, <code>{`{ xl: 'start' | 'end'}`}</code>, <code>{`{ xxl: 'start' | 'end'}`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set aligment of dropdown menu.</td>
+ <td colSpan="3">
+ <p>Set aligment of dropdown menu.</p>
+ </td>
</tr>
<tr id="cdropdown-as">
<td className="text-primary fw-semibold">as<a href="#cdropdown-as" aria-label="CDropdown as permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
<td><code>{`(ElementType & "symbol")`}</code>, <code>{`(ElementType & "object")`}</code>, <code>{`(ElementType & "div")`}</code>, <code>{`(ElementType & "slot")`}</code>, <code>{`(ElementType & "style")`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+ <td colSpan="3">
+ <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+ </td>
</tr>
<tr id="cdropdown-autoClose">
<td className="text-primary fw-semibold">autoClose<a href="#cdropdown-autoClose" aria-label="CDropdown autoClose permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,15 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
<td><code>{`boolean`}</code>, <code>{`"inside"`}</code>, <code>{`"outside"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Configure the auto close behavior of the dropdown:<br/>- <code>{`true`}</code> - the dropdown will be closed by clicking outside or inside the dropdown menu.<br/>- <code>{`false`}</code> - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)<br/>- <code>{`'inside'`}</code> - the dropdown will be closed (only) by clicking inside the dropdown menu.<br/>- <code>{`'outside'`}</code> - the dropdown will be closed (only) by clicking outside the dropdown menu.</td>
+ <td colSpan="3">
+ <p>Configure the auto close behavior of the dropdown:</p>
+<ul>
+<li><code>{`true`}</code> - the dropdown will be closed by clicking outside or inside the dropdown menu.</li>
+<li><code>{`false`}</code> - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)</li>
+<li><code>{`'inside'`}</code> - the dropdown will be closed (only) by clicking inside the dropdown menu.</li>
+<li><code>{`'outside'`}</code> - the dropdown will be closed (only) by clicking outside the dropdown menu.</li>
+</ul>
+ </td>
</tr>
<tr id="cdropdown-className">
<td className="text-primary fw-semibold">className<a href="#cdropdown-className" aria-label="CDropdown className permalink" className="anchor-link after">#</a></td>
@@ -45,7 +57,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="cdropdown-container">
<td className="text-primary fw-semibold">container<a href="#cdropdown-container" aria-label="CDropdown container permalink" className="anchor-link after">#</a><span className="badge bg-success">4.11.0+</span></td>
@@ -53,7 +67,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
<td><code>{`Element`}</code>, <code>{`DocumentFragment`}</code>, <code>{`(() => Element | DocumentFragment)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Appends the react dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default <code>{`document.body`}</code>.</td>
+ <td colSpan="3">
+ <p>Appends the react dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default <code>{`document.body`}</code>.</p>
+ </td>
</tr>
<tr id="cdropdown-dark">
<td className="text-primary fw-semibold">dark<a href="#cdropdown-dark" aria-label="CDropdown dark permalink" className="anchor-link after">#</a></td>
@@ -61,7 +77,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets a darker color scheme to match a dark navbar.</td>
+ <td colSpan="3">
+ <p>Sets a darker color scheme to match a dark navbar.</p>
+ </td>
</tr>
<tr id="cdropdown-direction">
<td className="text-primary fw-semibold">direction<a href="#cdropdown-direction" aria-label="CDropdown direction permalink" className="anchor-link after">#</a></td>
@@ -69,7 +87,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
<td><code>{`"center"`}</code>, <code>{`"dropup"`}</code>, <code>{`"dropup-center"`}</code>, <code>{`"dropend"`}</code>, <code>{`"dropstart"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets a specified direction and location of the dropdown menu.</td>
+ <td colSpan="3">
+ <p>Sets a specified direction and location of the dropdown menu.</p>
+ </td>
</tr>
<tr id="cdropdown-offset">
<td className="text-primary fw-semibold">offset<a href="#cdropdown-offset" aria-label="CDropdown offset permalink" className="anchor-link after">#</a></td>
@@ -77,7 +97,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
<td><code>{`[number, number]`}</code></td>
</tr>
<tr>
- <td colSpan="3">Offset of the dropdown menu relative to its target.</td>
+ <td colSpan="3">
+ <p>Offset of the dropdown menu relative to its target.</p>
+ </td>
</tr>
<tr id="cdropdown-onHide">
<td className="text-primary fw-semibold">onHide<a href="#cdropdown-onHide" aria-label="CDropdown onHide permalink" className="anchor-link after">#</a><span className="badge bg-success">4.9.0+</span></td>
@@ -85,7 +107,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
<td><code>{`() => void`}</code></td>
</tr>
<tr>
- <td colSpan="3">Callback fired when the component requests to be hidden.</td>
+ <td colSpan="3">
+ <p>Callback fired when the component requests to be hidden.</p>
+ </td>
</tr>
<tr id="cdropdown-onShow">
<td className="text-primary fw-semibold">onShow<a href="#cdropdown-onShow" aria-label="CDropdown onShow permalink" className="anchor-link after">#</a></td>
@@ -93,7 +117,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
<td><code>{`() => void`}</code></td>
</tr>
<tr>
- <td colSpan="3">Callback fired when the component requests to be shown.</td>
+ <td colSpan="3">
+ <p>Callback fired when the component requests to be shown.</p>
+ </td>
</tr>
<tr id="cdropdown-placement">
<td className="text-primary fw-semibold">placement<a href="#cdropdown-placement" aria-label="CDropdown placement permalink" className="anchor-link after">#</a></td>
@@ -101,7 +127,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
<td><code>{`'auto'`}</code>, <code>{`'top-end'`}</code>, <code>{`'top'`}</code>, <code>{`'top-start'`}</code>, <code>{`'bottom-end'`}</code>, <code>{`'bottom'`}</code>, <code>{`'bottom-start'`}</code>, <code>{`'right-start'`}</code>, <code>{`'right'`}</code>, <code>{`'right-end'`}</code>, <code>{`'left-start'`}</code>, <code>{`'left'`}</code>, <code>{`'left-end'`}</code></td>
</tr>
<tr>
- <td colSpan="3">Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.</td>
+ <td colSpan="3">
+ <p>Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.</p>
+ </td>
</tr>
<tr id="cdropdown-popper">
<td className="text-primary fw-semibold">popper<a href="#cdropdown-popper" aria-label="CDropdown popper permalink" className="anchor-link after">#</a></td>
@@ -109,7 +137,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">If you want to disable dynamic positioning set this property to <code>{`true`}</code>.</td>
+ <td colSpan="3">
+ <p>If you want to disable dynamic positioning set this property to <code>{`true`}</code>.</p>
+ </td>
</tr>
<tr id="cdropdown-portal">
<td className="text-primary fw-semibold">portal<a href="#cdropdown-portal" aria-label="CDropdown portal permalink" className="anchor-link after">#</a><span className="badge bg-success">4.8.0+</span></td>
@@ -117,7 +147,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Generates dropdown menu using createPortal.</td>
+ <td colSpan="3">
+ <p>Generates dropdown menu using createPortal.</p>
+ </td>
</tr>
<tr id="cdropdown-variant">
<td className="text-primary fw-semibold">variant<a href="#cdropdown-variant" aria-label="CDropdown variant permalink" className="anchor-link after">#</a></td>
@@ -125,7 +157,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
<td><code>{`"btn-group"`}</code>, <code>{`"dropdown"`}</code>, <code>{`"input-group"`}</code>, <code>{`"nav-item"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item.</td>
+ <td colSpan="3">
+ <p>Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item.</p>
+ </td>
</tr>
<tr id="cdropdown-visible">
<td className="text-primary fw-semibold">visible<a href="#cdropdown-visible" aria-label="CDropdown visible permalink" className="anchor-link after">#</a></td>
@@ -133,7 +167,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Toggle the visibility of dropdown menu component.</td>
+ <td colSpan="3">
+ <p>Toggle the visibility of dropdown menu component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CDropdownDivider.api.mdx b/packages/docs/content/api/CDropdownDivider.api.mdx
index c364ba91..aaab8e37 100644
--- a/packages/docs/content/api/CDropdownDivider.api.mdx
+++ b/packages/docs/content/api/CDropdownDivider.api.mdx
@@ -21,7 +21,9 @@ import CDropdownDivider from '@coreui/react/src/components/dropdown/CDropdownDiv
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CDropdownHeader.api.mdx b/packages/docs/content/api/CDropdownHeader.api.mdx
index 727ce4dc..7652f974 100644
--- a/packages/docs/content/api/CDropdownHeader.api.mdx
+++ b/packages/docs/content/api/CDropdownHeader.api.mdx
@@ -21,7 +21,9 @@ import CDropdownHeader from '@coreui/react/src/components/dropdown/CDropdownHead
<td><code>{`(ElementType & "symbol")`}</code>, <code>{`(ElementType & "object")`}</code>, <code>{`(ElementType & "h6")`}</code>, <code>{`(ElementType & "slot")`}</code>, <code>{`(ElementType & "style")`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+ <td colSpan="3">
+ <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+ </td>
</tr>
<tr id="cdropdownheader-className">
<td className="text-primary fw-semibold">className<a href="#cdropdownheader-className" aria-label="CDropdownHeader className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CDropdownHeader from '@coreui/react/src/components/dropdown/CDropdownHead
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CDropdownItem.api.mdx b/packages/docs/content/api/CDropdownItem.api.mdx
index 210289c3..7bc03b89 100644
--- a/packages/docs/content/api/CDropdownItem.api.mdx
+++ b/packages/docs/content/api/CDropdownItem.api.mdx
@@ -21,7 +21,9 @@ import CDropdownItem from '@coreui/react/src/components/dropdown/CDropdownItem'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Toggle the active state for the component.</td>
+ <td colSpan="3">
+ <p>Toggle the active state for the component.</p>
+ </td>
</tr>
<tr id="cdropdownitem-as">
<td className="text-primary fw-semibold">as<a href="#cdropdownitem-as" aria-label="CDropdownItem as permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CDropdownItem from '@coreui/react/src/components/dropdown/CDropdownItem'
<td><code>{`(ElementType & "symbol")`}</code>, <code>{`(ElementType & "object")`}</code>, <code>{`(ElementType & "a")`}</code>, <code>{`(ElementType & "cite")`}</code>, <code>{`(ElementType & "data")`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+ <td colSpan="3">
+ <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+ </td>
</tr>
<tr id="cdropdownitem-className">
<td className="text-primary fw-semibold">className<a href="#cdropdownitem-className" aria-label="CDropdownItem className permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CDropdownItem from '@coreui/react/src/components/dropdown/CDropdownItem'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
<tr id="cdropdownitem-disabled">
<td className="text-primary fw-semibold">disabled<a href="#cdropdownitem-disabled" aria-label="CDropdownItem disabled permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CDropdownItem from '@coreui/react/src/components/dropdown/CDropdownItem'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Toggle the disabled state for the component.</td>
+ <td colSpan="3">
+ <p>Toggle the disabled state for the component.</p>
+ </td>
</tr>
<tr id="cdropdownitem-href">
<td className="text-primary fw-semibold">href<a href="#cdropdownitem-href" aria-label="CDropdownItem href permalink" className="anchor-link after">#</a></td>
@@ -53,7 +61,9 @@ import CDropdownItem from '@coreui/react/src/components/dropdown/CDropdownItem'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">The href attribute specifies the URL of the page the link goes to.</td>
+ <td colSpan="3">
+ <p>The href attribute specifies the URL of the page the link goes to.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CDropdownItemPlain.api.mdx b/packages/docs/content/api/CDropdownItemPlain.api.mdx
index 77b6a09b..074f67b0 100644
--- a/packages/docs/content/api/CDropdownItemPlain.api.mdx
+++ b/packages/docs/content/api/CDropdownItemPlain.api.mdx
@@ -21,7 +21,9 @@ import CDropdownItemPlain from '@coreui/react/src/components/dropdown/CDropdownI
<td><code>{`(ElementType & "symbol")`}</code>, <code>{`(ElementType & "object")`}</code>, <code>{`(ElementType & "span")`}</code>, <code>{`(ElementType & "slot")`}</code>, <code>{`(ElementType & "style")`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+ <td colSpan="3">
+ <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+ </td>
</tr>
<tr id="cdropdownitemplain-className">
<td className="text-primary fw-semibold">className<a href="#cdropdownitemplain-className" aria-label="CDropdownItemPlain className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CDropdownItemPlain from '@coreui/react/src/components/dropdown/CDropdownI
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CDropdownMenu.api.mdx b/packages/docs/content/api/CDropdownMenu.api.mdx
index 659abcb3..cef37751 100644
--- a/packages/docs/content/api/CDropdownMenu.api.mdx
+++ b/packages/docs/content/api/CDropdownMenu.api.mdx
@@ -21,7 +21,9 @@ import CDropdownMenu from '@coreui/react/src/components/dropdown/CDropdownMenu'
<td><code>{`(ElementType & "symbol")`}</code>, <code>{`(ElementType & "object")`}</code>, <code>{`(ElementType & "ul")`}</code>, <code>{`(ElementType & "slot")`}</code>, <code>{`(ElementType & "style")`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+ <td colSpan="3">
+ <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+ </td>
</tr>
<tr id="cdropdownmenu-className">
<td className="text-primary fw-semibold">className<a href="#cdropdownmenu-className" aria-label="CDropdownMenu className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CDropdownMenu from '@coreui/react/src/components/dropdown/CDropdownMenu'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CDropdownToggle.api.mdx b/packages/docs/content/api/CDropdownToggle.api.mdx
index c8e5832f..cd887421 100644
--- a/packages/docs/content/api/CDropdownToggle.api.mdx
+++ b/packages/docs/content/api/CDropdownToggle.api.mdx
@@ -21,7 +21,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Toggle the active state for the component.</td>
+ <td colSpan="3">
+ <p>Toggle the active state for the component.</p>
+ </td>
</tr>
<tr id="cdropdowntoggle-as">
<td className="text-primary fw-semibold">as<a href="#cdropdowntoggle-as" aria-label="CDropdownToggle as permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
<td><code>{`ElementType`}</code></td>
</tr>
<tr>
- <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+ <td colSpan="3">
+ <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+ </td>
</tr>
<tr id="cdropdowntoggle-caret">
<td className="text-primary fw-semibold">caret<a href="#cdropdowntoggle-caret" aria-label="CDropdownToggle caret permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Enables pseudo element caret on toggler.</td>
+ <td colSpan="3">
+ <p>Enables pseudo element caret on toggler.</p>
+ </td>
</tr>
<tr id="cdropdowntoggle-className">
<td className="text-primary fw-semibold">className<a href="#cdropdowntoggle-className" aria-label="CDropdownToggle className permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="cdropdowntoggle-color">
<td className="text-primary fw-semibold">color<a href="#cdropdowntoggle-color" aria-label="CDropdownToggle color permalink" className="anchor-link after">#</a></td>
@@ -53,7 +61,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
<td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+ <td colSpan="3">
+ <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+ </td>
</tr>
<tr id="cdropdowntoggle-custom">
<td className="text-primary fw-semibold">custom<a href="#cdropdowntoggle-custom" aria-label="CDropdownToggle custom permalink" className="anchor-link after">#</a></td>
@@ -61,7 +71,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Create a custom toggler which accepts any content.</td>
+ <td colSpan="3">
+ <p>Create a custom toggler which accepts any content.</p>
+ </td>
</tr>
<tr id="cdropdowntoggle-disabled">
<td className="text-primary fw-semibold">disabled<a href="#cdropdowntoggle-disabled" aria-label="CDropdownToggle disabled permalink" className="anchor-link after">#</a></td>
@@ -69,7 +81,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Toggle the disabled state for the component.</td>
+ <td colSpan="3">
+ <p>Toggle the disabled state for the component.</p>
+ </td>
</tr>
<tr id="cdropdowntoggle-href">
<td className="text-primary fw-semibold">href<a href="#cdropdowntoggle-href" aria-label="CDropdownToggle href permalink" className="anchor-link after">#</a></td>
@@ -77,7 +91,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">The href attribute specifies the URL of the page the link goes to.</td>
+ <td colSpan="3">
+ <p>The href attribute specifies the URL of the page the link goes to.</p>
+ </td>
</tr>
<tr id="cdropdowntoggle-navLink">
<td className="text-primary fw-semibold">navLink<a href="#cdropdowntoggle-navLink" aria-label="CDropdownToggle navLink permalink" className="anchor-link after">#</a><span className="badge bg-success">5.0.0+</span></td>
@@ -85,7 +101,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">If a dropdown <code>{`variant`}</code> is set to <code>{`nav-item`}</code> then render the toggler as a link instead of a button.</td>
+ <td colSpan="3">
+ <p>If a dropdown <code>{`variant`}</code> is set to <code>{`nav-item`}</code> then render the toggler as a link instead of a button.</p>
+ </td>
</tr>
<tr id="cdropdowntoggle-role">
<td className="text-primary fw-semibold">role<a href="#cdropdowntoggle-role" aria-label="CDropdownToggle role permalink" className="anchor-link after">#</a></td>
@@ -93,7 +111,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers.</td>
+ <td colSpan="3">
+ <p>The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers.</p>
+ </td>
</tr>
<tr id="cdropdowntoggle-shape">
<td className="text-primary fw-semibold">shape<a href="#cdropdowntoggle-shape" aria-label="CDropdownToggle shape permalink" className="anchor-link after">#</a></td>
@@ -101,7 +121,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
<td><code>{`'rounded'`}</code>, <code>{`'rounded-top'`}</code>, <code>{`'rounded-end'`}</code>, <code>{`'rounded-bottom'`}</code>, <code>{`'rounded-start'`}</code>, <code>{`'rounded-circle'`}</code>, <code>{`'rounded-pill'`}</code>, <code>{`'rounded-0'`}</code>, <code>{`'rounded-1'`}</code>, <code>{`'rounded-2'`}</code>, <code>{`'rounded-3'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Select the shape of the component.</td>
+ <td colSpan="3">
+ <p>Select the shape of the component.</p>
+ </td>
</tr>
<tr id="cdropdowntoggle-size">
<td className="text-primary fw-semibold">size<a href="#cdropdowntoggle-size" aria-label="CDropdownToggle size permalink" className="anchor-link after">#</a></td>
@@ -109,7 +131,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
<td><code>{`"sm"`}</code>, <code>{`"lg"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Size the component small or large.</td>
+ <td colSpan="3">
+ <p>Size the component small or large.</p>
+ </td>
</tr>
<tr id="cdropdowntoggle-split">
<td className="text-primary fw-semibold">split<a href="#cdropdowntoggle-split" aria-label="CDropdownToggle split permalink" className="anchor-link after">#</a></td>
@@ -117,7 +141,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of <code>{`.dropdown-toggle-split`}</code> className for proper spacing around the dropdown caret.</td>
+ <td colSpan="3">
+ <p>Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of <code>{`.dropdown-toggle-split`}</code> className for proper spacing around the dropdown caret.</p>
+ </td>
</tr>
<tr id="cdropdowntoggle-trigger">
<td className="text-primary fw-semibold">trigger<a href="#cdropdowntoggle-trigger" aria-label="CDropdownToggle trigger permalink" className="anchor-link after">#</a></td>
@@ -125,7 +151,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
<td><code>{`'hover'`}</code>, <code>{`'focus'`}</code>, <code>{`'click'`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.</td>
+ <td colSpan="3">
+ <p>Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.</p>
+ </td>
</tr>
<tr id="cdropdowntoggle-variant">
<td className="text-primary fw-semibold">variant<a href="#cdropdowntoggle-variant" aria-label="CDropdownToggle variant permalink" className="anchor-link after">#</a></td>
@@ -133,7 +161,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
<td><code>{`"outline"`}</code>, <code>{`"ghost"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set the button variant to an outlined button or a ghost button.</td>
+ <td colSpan="3">
+ <p>Set the button variant to an outlined button or a ghost button.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CFooter.api.mdx b/packages/docs/content/api/CFooter.api.mdx
index 91d28698..d58c8223 100644
--- a/packages/docs/content/api/CFooter.api.mdx
+++ b/packages/docs/content/api/CFooter.api.mdx
@@ -21,7 +21,9 @@ import CFooter from '@coreui/react/src/components/footer/CFooter'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="cfooter-position">
<td className="text-primary fw-semibold">position<a href="#cfooter-position" aria-label="CFooter position permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CFooter from '@coreui/react/src/components/footer/CFooter'
<td><code>{`"fixed"`}</code>, <code>{`"sticky"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Place footer in non-static positions.</td>
+ <td colSpan="3">
+ <p>Place footer in non-static positions.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CForm.api.mdx b/packages/docs/content/api/CForm.api.mdx
index e1fca1e0..7de87b14 100644
--- a/packages/docs/content/api/CForm.api.mdx
+++ b/packages/docs/content/api/CForm.api.mdx
@@ -21,7 +21,36 @@ import CForm from '@coreui/react/src/components/form/CForm'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of additional CSS class names to apply to the form component.</p>
+ <JSXDocs code={`<CForm className="my-custom-form" />`} />
+ </td>
+ </tr>
+ <tr id="cform-customClassNames">
+ <td className="text-primary fw-semibold">customClassNames<a href="#cform-customClassNames" aria-label="CForm customClassNames permalink" className="anchor-link after">#</a><span className="badge bg-success">v5.5.0+</span></td>
+ <td>undefined</td>
+ <td><code>{`Partial\<{ FORM: string; FORM_VALIDATED: string; }>`}</code></td>
+ </tr>
+ <tr>
+ <td colSpan="3">
+ <p>Custom class names to override or extend the default CSS classes used within the <code>{`CForm`}</code> component.<br />
+Each key corresponds to a specific part of the Form component, allowing for granular styling control.</p>
+<p><strong>Important</strong>: If you want to <strong>replace</strong> an existing class name, prefix your custom class name with <code>{`!`}</code>.<br />
+This ensures that the original class is overridden rather than appended.</p>
+ <JSXDocs code={`// Overriding the default form class
+const customClasses = {
+ FORM: '!my-custom-form',
+}
+
+<CForm customClassNames={customClasses} />
+
+// Extending the default form class without replacing it
+const customClasses = {
+ FORM: 'my-additional-form-class',
+}
+
+<CForm customClassNames={customClasses} />`} />
+ </td>
</tr>
<tr id="cform-validated">
<td className="text-primary fw-semibold">validated<a href="#cform-validated" aria-label="CForm validated permalink" className="anchor-link after">#</a></td>
@@ -29,7 +58,12 @@ import CForm from '@coreui/react/src/components/form/CForm'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Mark a form as validated. If you set it <code>{`true`}</code>, all validation styles will be applied to the forms component.</td>
+ <td colSpan="3">
+ <p>Mark a form as validated. If set to <code>{`true`}</code>, all validation styles will be applied to the form component.</p>
+ <JSXDocs code={`<CForm validated>
+ // Form elements
+</CForm>`} />
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CFormCheck.api.mdx b/packages/docs/content/api/CFormCheck.api.mdx
index 59fcbea7..09bd351b 100644
--- a/packages/docs/content/api/CFormCheck.api.mdx
+++ b/packages/docs/content/api/CFormCheck.api.mdx
@@ -21,7 +21,10 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
<td><code>{`ButtonObject`}</code></td>
</tr>
<tr>
- <td colSpan="3">Create button-like checkboxes and radio buttons.</td>
+ <td colSpan="3">
+ <p>Create button-like checkboxes and radio buttons.</p>
+ <JSXDocs code={`<CFormCheck button={{ color: 'primary', size: 'lg', variant: 'outline' }} label="Primary Button Check" />`} />
+ </td>
</tr>
<tr id="cformcheck-className">
<td className="text-primary fw-semibold">className<a href="#cformcheck-className" aria-label="CFormCheck className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +32,36 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of additional CSS class names to apply to the form check component.</p>
+ <JSXDocs code={`<CFormCheck className="my-custom-check" />`} />
+ </td>
+ </tr>
+ <tr id="cformcheck-customClassNames">
+ <td className="text-primary fw-semibold">customClassNames<a href="#cformcheck-customClassNames" aria-label="CFormCheck customClassNames permalink" className="anchor-link after">#</a><span className="badge bg-success">v5.5.0+</span></td>
+ <td>undefined</td>
+ <td><code>{`Partial\<Record\<CombinedCustomClassNamesKeys, string>>`}</code></td>
+ </tr>
+ <tr>
+ <td colSpan="3">
+ <p>Custom class names to override or extend the default CSS classes used within the <code>{`CFormCheck`}</code> component.<br />
+Each key corresponds to a specific part of the Form Check component, allowing for granular styling control.</p>
+<p><strong>Important</strong>: If you want to <strong>replace</strong> an existing class name, prefix your custom class name with <code>{`!`}</code>.<br />
+This ensures that the original class is overridden rather than appended.</p>
+ <JSXDocs code={`// Overriding the default form check input class
+const customClasses = {
+ FORM_CHECK_INPUT: '!my-custom-form-check-input',
+}
+
+<CFormCheck customClassNames={customClasses} />
+
+// Extending the default form check label class without replacing it
+const customClasses = {
+ FORM_CHECK_LABEL: 'my-additional-form-check-label',
+}
+
+<CFormCheck customClassNames={customClasses} />`} />
+ </td>
</tr>
<tr id="cformcheck-feedback">
<td className="text-primary fw-semibold">feedback<a href="#cformcheck-feedback" aria-label="CFormCheck feedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
@@ -37,7 +69,10 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Provide valuable, actionable feedback.</td>
+ <td colSpan="3">
+ <p>Provide valuable, actionable feedback.</p>
+ <JSXDocs code={`<CFormControlValidation feedback="This field is required." />`} />
+ </td>
</tr>
<tr id="cformcheck-feedbackInvalid">
<td className="text-primary fw-semibold">feedbackInvalid<a href="#cformcheck-feedbackInvalid" aria-label="CFormCheck feedbackInvalid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
@@ -45,7 +80,10 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Provide valuable, actionable feedback.</td>
+ <td colSpan="3">
+ <p>Provide valuable, actionable feedback when the form control is in an invalid state.</p>
+ <JSXDocs code={`<CFormControlValidation feedbackInvalid="Invalid input." />`} />
+ </td>
</tr>
<tr id="cformcheck-feedbackValid">
<td className="text-primary fw-semibold">feedbackValid<a href="#cformcheck-feedbackValid" aria-label="CFormCheck feedbackValid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
@@ -53,7 +91,10 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</td>
+ <td colSpan="3">
+ <p>Provide valuable, actionable feedback when the form control is in a valid state.</p>
+ <JSXDocs code={`<CFormControlValidation feedbackValid="Looks good!" />`} />
+ </td>
</tr>
<tr id="cformcheck-floatingLabel">
<td className="text-primary fw-semibold">floatingLabel<a href="#cformcheck-floatingLabel" aria-label="CFormCheck floatingLabel permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
@@ -61,7 +102,10 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</td>
+ <td colSpan="3">
+ <p>Provide a floating label for the form control.</p>
+ <JSXDocs code={`<CFormControlValidation floatingLabel="Email address" />`} />
+ </td>
</tr>
<tr id="cformcheck-hitArea">
<td className="text-primary fw-semibold">hitArea<a href="#cformcheck-hitArea" aria-label="CFormCheck hitArea permalink" className="anchor-link after">#</a></td>
@@ -69,7 +113,10 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
<td><code>{`"full"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets hit area to the full area of the component.</td>
+ <td colSpan="3">
+ <p>Sets hit area to the full area of the component.</p>
+ <JSXDocs code={`<CFormCheck hitArea="full" label="Full Hit Area" />`} />
+ </td>
</tr>
<tr id="cformcheck-id">
<td className="text-primary fw-semibold">id<a href="#cformcheck-id" aria-label="CFormCheck id permalink" className="anchor-link after">#</a></td>
@@ -77,7 +124,10 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">The id global attribute defines an identifier (ID) that must be unique in the whole document.</td>
+ <td colSpan="3">
+ <p>The id global attribute defines an identifier (ID) that must be unique in the whole document.</p>
+ <JSXDocs code={`<CFormCheck id="acceptTerms" label="Accept Terms and Conditions" />`} />
+ </td>
</tr>
<tr id="cformcheck-indeterminate">
<td className="text-primary fw-semibold">indeterminate<a href="#cformcheck-indeterminate" aria-label="CFormCheck indeterminate permalink" className="anchor-link after">#</a></td>
@@ -85,7 +135,10 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Input Checkbox indeterminate Property.</td>
+ <td colSpan="3">
+ <p>Input Checkbox indeterminate Property.</p>
+ <JSXDocs code={`<CFormCheck indeterminate label="Indeterminate Checkbox" />`} />
+ </td>
</tr>
<tr id="cformcheck-inline">
<td className="text-primary fw-semibold">inline<a href="#cformcheck-inline" aria-label="CFormCheck inline permalink" className="anchor-link after">#</a></td>
@@ -93,7 +146,11 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Group checkboxes or radios on the same horizontal row.</td>
+ <td colSpan="3">
+ <p>Group checkboxes or radios on the same horizontal row.</p>
+ <JSXDocs code={`<CFormCheck inline label="Option 1" />
+<CFormCheck inline label="Option 2" />`} />
+ </td>
</tr>
<tr id="cformcheck-invalid">
<td className="text-primary fw-semibold">invalid<a href="#cformcheck-invalid" aria-label="CFormCheck invalid permalink" className="anchor-link after">#</a></td>
@@ -101,7 +158,10 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set component validation state to invalid.</td>
+ <td colSpan="3">
+ <p>Set component validation state to invalid. When <code>{`true`}</code>, applies the invalid feedback styling.</p>
+ <JSXDocs code={`<CFormCheck invalid label="Invalid Option" />`} />
+ </td>
</tr>
<tr id="cformcheck-label">
<td className="text-primary fw-semibold">label<a href="#cformcheck-label" aria-label="CFormCheck label permalink" className="anchor-link after">#</a></td>
@@ -109,15 +169,21 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">The element represents a caption for a component.</td>
+ <td colSpan="3">
+ <p>The element represents a caption for a component.</p>
+ <JSXDocs code={`<CFormCheck label="Subscribe to Newsletter" />`} />
+ </td>
</tr>
<tr id="cformcheck-reverse">
- <td className="text-primary fw-semibold">reverse<a href="#cformcheck-reverse" aria-label="CFormCheck reverse permalink" className="anchor-link after">#</a></td>
+ <td className="text-primary fw-semibold">reverse<a href="#cformcheck-reverse" aria-label="CFormCheck reverse permalink" className="anchor-link after">#</a><span className="badge bg-success">4.7.0+</span></td>
<td>undefined</td>
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Put checkboxes or radios on the opposite side.</td>
+ <td colSpan="3">
+ <p>Put checkboxes or radios on the opposite side. Useful for right-to-left layouts or specific design requirements.</p>
+ <JSXDocs code={`<CFormCheck reverse label="Enable Notifications" />`} />
+ </td>
</tr>
<tr id="cformcheck-tooltipFeedback">
<td className="text-primary fw-semibold">tooltipFeedback<a href="#cformcheck-tooltipFeedback" aria-label="CFormCheck tooltipFeedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
@@ -125,7 +191,10 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Display validation feedback in a styled tooltip.</td>
+ <td colSpan="3">
+ <p>Display validation feedback in a styled tooltip.</p>
+ <JSXDocs code={`<CFormControlValidation invalid tooltipFeedback feedback="Invalid input." />`} />
+ </td>
</tr>
<tr id="cformcheck-type">
<td className="text-primary fw-semibold">type<a href="#cformcheck-type" aria-label="CFormCheck type permalink" className="anchor-link after">#</a></td>
@@ -133,7 +202,12 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
<td><code>{`"checkbox"`}</code>, <code>{`"radio"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Specifies the type of component.</td>
+ <td colSpan="3">
+ <p>Specifies the type of component. Can be either <code>{`checkbox`}</code> or <code>{`radio`}</code>.</p>
+ <JSXDocs code={`<CFormCheck type="radio" label="Option A" />
+
+<CFormCheck type="radio" label="Option B" />`} />
+ </td>
</tr>
<tr id="cformcheck-valid">
<td className="text-primary fw-semibold">valid<a href="#cformcheck-valid" aria-label="CFormCheck valid permalink" className="anchor-link after">#</a></td>
@@ -141,7 +215,10 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set component validation state to valid.</td>
+ <td colSpan="3">
+ <p>Set component validation state to valid. When <code>{`true`}</code>, applies the valid feedback styling.</p>
+ <JSXDocs code={`<CFormCheck valid label="Valid Option" />`} />
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CFormControlValidation.api.mdx b/packages/docs/content/api/CFormControlValidation.api.mdx
index be49958a..aa642627 100644
--- a/packages/docs/content/api/CFormControlValidation.api.mdx
+++ b/packages/docs/content/api/CFormControlValidation.api.mdx
@@ -15,13 +15,42 @@ import CFormControlValidation from '@coreui/react/src/components/form/CFormContr
</tr>
</thead>
<tbody>
+ <tr id="cformcontrolvalidation-customClassNames">
+ <td className="text-primary fw-semibold">customClassNames<a href="#cformcontrolvalidation-customClassNames" aria-label="CFormControlValidation customClassNames permalink" className="anchor-link after">#</a><span className="badge bg-success">v5.5.0+</span></td>
+ <td>undefined</td>
+ <td><code>{`Partial\<{ INVALID_FEEDBACK: string; INVALID_TOOLTIP: string; VALID_FEEDBACK: string; VALID_TOOLTIP: string; }>`}</code></td>
+ </tr>
+ <tr>
+ <td colSpan="3">
+ <p>Custom class names to override or extend the default CSS classes used within the <code>{`CFormControlValidation`}</code> component.<br />
+Each key corresponds to a specific part of the Form Feedback component, allowing for granular styling control.</p>
+<p><strong>Important</strong>: If you want to <strong>replace</strong> an existing class name, prefix your custom class name with <code>{`!`}</code>.<br />
+This ensures that the original class is overridden rather than appended.</p>
+ <JSXDocs code={`// Overriding the default form feedback class
+const customClasses = {
+ FORM_FEEDBACK: '!my-custom-form-feedback',
+}
+
+<CFormControlValidation customClassNames={customClasses} />
+
+// Extending the default form feedback class without replacing it
+const customClasses = {
+ FORM_FEEDBACK: 'my-additional-form-feedback',
+}
+
+<CFormControlValidation customClassNames={customClasses} />`} />
+ </td>
+ </tr>
<tr id="cformcontrolvalidation-feedback">
<td className="text-primary fw-semibold">feedback<a href="#cformcontrolvalidation-feedback" aria-label="CFormControlValidation feedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
<td>undefined</td>
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Provide valuable, actionable feedback.</td>
+ <td colSpan="3">
+ <p>Provide valuable, actionable feedback.</p>
+ <JSXDocs code={`<CFormControlValidation feedback="This field is required." />`} />
+ </td>
</tr>
<tr id="cformcontrolvalidation-feedbackInvalid">
<td className="text-primary fw-semibold">feedbackInvalid<a href="#cformcontrolvalidation-feedbackInvalid" aria-label="CFormControlValidation feedbackInvalid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
@@ -29,7 +58,10 @@ import CFormControlValidation from '@coreui/react/src/components/form/CFormContr
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Provide valuable, actionable feedback.</td>
+ <td colSpan="3">
+ <p>Provide valuable, actionable feedback when the form control is in an invalid state.</p>
+ <JSXDocs code={`<CFormControlValidation feedbackInvalid="Invalid input." />`} />
+ </td>
</tr>
<tr id="cformcontrolvalidation-feedbackValid">
<td className="text-primary fw-semibold">feedbackValid<a href="#cformcontrolvalidation-feedbackValid" aria-label="CFormControlValidation feedbackValid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
@@ -37,7 +69,10 @@ import CFormControlValidation from '@coreui/react/src/components/form/CFormContr
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</td>
+ <td colSpan="3">
+ <p>Provide valuable, actionable feedback when the form control is in a valid state.</p>
+ <JSXDocs code={`<CFormControlValidation feedbackValid="Looks good!" />`} />
+ </td>
</tr>
<tr id="cformcontrolvalidation-floatingLabel">
<td className="text-primary fw-semibold">floatingLabel<a href="#cformcontrolvalidation-floatingLabel" aria-label="CFormControlValidation floatingLabel permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
@@ -45,7 +80,10 @@ import CFormControlValidation from '@coreui/react/src/components/form/CFormContr
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</td>
+ <td colSpan="3">
+ <p>Provide a floating label for the form control.</p>
+ <JSXDocs code={`<CFormControlValidation floatingLabel="Email address" />`} />
+ </td>
</tr>
<tr id="cformcontrolvalidation-invalid">
<td className="text-primary fw-semibold">invalid<a href="#cformcontrolvalidation-invalid" aria-label="CFormControlValidation invalid permalink" className="anchor-link after">#</a></td>
@@ -53,7 +91,10 @@ import CFormControlValidation from '@coreui/react/src/components/form/CFormContr
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set component validation state to invalid.</td>
+ <td colSpan="3">
+ <p>Set the form control validation state to invalid. When <code>{`true`}</code>, applies the invalid feedback styling.</p>
+ <JSXDocs code={`<CFormControlValidation invalid feedback="Invalid input." />`} />
+ </td>
</tr>
<tr id="cformcontrolvalidation-tooltipFeedback">
<td className="text-primary fw-semibold">tooltipFeedback<a href="#cformcontrolvalidation-tooltipFeedback" aria-label="CFormControlValidation tooltipFeedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
@@ -61,7 +102,10 @@ import CFormControlValidation from '@coreui/react/src/components/form/CFormContr
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Display validation feedback in a styled tooltip.</td>
+ <td colSpan="3">
+ <p>Display validation feedback in a styled tooltip.</p>
+ <JSXDocs code={`<CFormControlValidation invalid tooltipFeedback feedback="Invalid input." />`} />
+ </td>
</tr>
<tr id="cformcontrolvalidation-valid">
<td className="text-primary fw-semibold">valid<a href="#cformcontrolvalidation-valid" aria-label="CFormControlValidation valid permalink" className="anchor-link after">#</a></td>
@@ -69,7 +113,10 @@ import CFormControlValidation from '@coreui/react/src/components/form/CFormContr
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set component validation state to valid.</td>
+ <td colSpan="3">
+ <p>Set the form control validation state to valid. When <code>{`true`}</code>, applies the valid feedback styling.</p>
+ <JSXDocs code={`<CFormControlValidation valid feedbackValid="Looks good!" />`} />
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CFormControlWrapper.api.mdx b/packages/docs/content/api/CFormControlWrapper.api.mdx
index 49ab36b1..b737d7df 100644
--- a/packages/docs/content/api/CFormControlWrapper.api.mdx
+++ b/packages/docs/content/api/CFormControlWrapper.api.mdx
@@ -15,13 +15,29 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW
</tr>
</thead>
<tbody>
+ <tr id="cformcontrolwrapper-customClassNames">
+ <td className="text-primary fw-semibold">customClassNames<a href="#cformcontrolwrapper-customClassNames" aria-label="CFormControlWrapper customClassNames permalink" className="anchor-link after">#</a><span className="badge bg-success">v5.5.0+</span></td>
+ <td>undefined</td>
+ <td><code>{`Partial\<Record\<CombinedCustomClassNamesKeys, string>>`}</code></td>
+ </tr>
+ <tr>
+ <td colSpan="3">
+ <p>Custom class names to override or extend the default CSS classes used within the <code>{`CFormControlWrapper`}</code> component.<br />
+Each key corresponds to a specific part of the Form Feedback component, allowing for granular styling control.</p>
+<p><strong>Important</strong>: If you want to <strong>replace</strong> an existing class name, prefix your custom class name with <code>{`!`}</code>.<br />
+This ensures that the original class is overridden rather than appended.</p>
+ </td>
+ </tr>
<tr id="cformcontrolwrapper-feedback">
<td className="text-primary fw-semibold">feedback<a href="#cformcontrolwrapper-feedback" aria-label="CFormControlWrapper feedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
<td>undefined</td>
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Provide valuable, actionable feedback.</td>
+ <td colSpan="3">
+ <p>Provide valuable, actionable feedback.</p>
+ <JSXDocs code={`<CFormControlValidation feedback="This field is required." />`} />
+ </td>
</tr>
<tr id="cformcontrolwrapper-feedbackInvalid">
<td className="text-primary fw-semibold">feedbackInvalid<a href="#cformcontrolwrapper-feedbackInvalid" aria-label="CFormControlWrapper feedbackInvalid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
@@ -29,7 +45,10 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Provide valuable, actionable feedback.</td>
+ <td colSpan="3">
+ <p>Provide valuable, actionable feedback when the form control is in an invalid state.</p>
+ <JSXDocs code={`<CFormControlValidation feedbackInvalid="Invalid input." />`} />
+ </td>
</tr>
<tr id="cformcontrolwrapper-feedbackValid">
<td className="text-primary fw-semibold">feedbackValid<a href="#cformcontrolwrapper-feedbackValid" aria-label="CFormControlWrapper feedbackValid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
@@ -37,7 +56,10 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</td>
+ <td colSpan="3">
+ <p>Provide valuable, actionable feedback when the form control is in a valid state.</p>
+ <JSXDocs code={`<CFormControlValidation feedbackValid="Looks good!" />`} />
+ </td>
</tr>
<tr id="cformcontrolwrapper-floatingClassName">
<td className="text-primary fw-semibold">floatingClassName<a href="#cformcontrolwrapper-floatingClassName" aria-label="CFormControlWrapper floatingClassName permalink" className="anchor-link after">#</a><span className="badge bg-success">4.5.0+</span></td>
@@ -45,7 +67,9 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the floating label wrapper.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the floating label wrapper.</p>
+ </td>
</tr>
<tr id="cformcontrolwrapper-floatingLabel">
<td className="text-primary fw-semibold">floatingLabel<a href="#cformcontrolwrapper-floatingLabel" aria-label="CFormControlWrapper floatingLabel permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
@@ -53,7 +77,10 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</td>
+ <td colSpan="3">
+ <p>Provide a floating label for the form control. This label will float above the input when focused or when the input has a value.</p>
+ <JSXDocs code={`<CFormControlWrapper floatingLabel="Email Address" />`} />
+ </td>
</tr>
<tr id="cformcontrolwrapper-invalid">
<td className="text-primary fw-semibold">invalid<a href="#cformcontrolwrapper-invalid" aria-label="CFormControlWrapper invalid permalink" className="anchor-link after">#</a></td>
@@ -61,7 +88,10 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set component validation state to invalid.</td>
+ <td colSpan="3">
+ <p>Set the form control validation state to invalid. When <code>{`true`}</code>, applies the invalid feedback styling.</p>
+ <JSXDocs code={`<CFormControlValidation invalid feedback="Invalid input." />`} />
+ </td>
</tr>
<tr id="cformcontrolwrapper-label">
<td className="text-primary fw-semibold">label<a href="#cformcontrolwrapper-label" aria-label="CFormControlWrapper label permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
@@ -69,7 +99,10 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Add a caption for a component.</td>
+ <td colSpan="3">
+ <p>Add a caption for the form control. Typically used as a label.</p>
+ <JSXDocs code={`<CFormControlWrapper label="Username" />`} />
+ </td>
</tr>
<tr id="cformcontrolwrapper-text">
<td className="text-primary fw-semibold">text<a href="#cformcontrolwrapper-text" aria-label="CFormControlWrapper text permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
@@ -77,7 +110,10 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Add helper text to the component.</td>
+ <td colSpan="3">
+ <p>Add helper text to the form control. Provides additional guidance to the user.</p>
+ <JSXDocs code={`<CFormControlWrapper text="Your username must be unique." />`} />
+ </td>
</tr>
<tr id="cformcontrolwrapper-tooltipFeedback">
<td className="text-primary fw-semibold">tooltipFeedback<a href="#cformcontrolwrapper-tooltipFeedback" aria-label="CFormControlWrapper tooltipFeedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
@@ -85,7 +121,10 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Display validation feedback in a styled tooltip.</td>
+ <td colSpan="3">
+ <p>Display validation feedback in a styled tooltip.</p>
+ <JSXDocs code={`<CFormControlValidation invalid tooltipFeedback feedback="Invalid input." />`} />
+ </td>
</tr>
<tr id="cformcontrolwrapper-valid">
<td className="text-primary fw-semibold">valid<a href="#cformcontrolwrapper-valid" aria-label="CFormControlWrapper valid permalink" className="anchor-link after">#</a></td>
@@ -93,7 +132,10 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set component validation state to valid.</td>
+ <td colSpan="3">
+ <p>Set the form control validation state to valid. When <code>{`true`}</code>, applies the valid feedback styling.</p>
+ <JSXDocs code={`<CFormControlValidation valid feedbackValid="Looks good!" />`} />
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CFormFeedback.api.mdx b/packages/docs/content/api/CFormFeedback.api.mdx
index 0ee22dde..d34c0b50 100644
--- a/packages/docs/content/api/CFormFeedback.api.mdx
+++ b/packages/docs/content/api/CFormFeedback.api.mdx
@@ -21,7 +21,18 @@ import CFormFeedback from '@coreui/react/src/components/form/CFormFeedback'
<td><code>{`(ElementType & "symbol")`}</code>, <code>{`(ElementType & "object")`}</code>, <code>{`(ElementType & "div")`}</code>, <code>{`(ElementType & "slot")`}</code>, <code>{`(ElementType & "style")`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+ <td colSpan="3">
+ <p>The component used for the root node. It can be a string representing a HTML element or a React component.</p>
+ <JSXDocs code={`// Using default 'div' element
+<CFormFeedback>Invalid input.</CFormFeedback>
+
+// Using a custom component
+const CustomFeedback = forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(
+ (props, ref) => <span ref={ref} {...props} />,
+)
+
+<CFormFeedback as={CustomFeedback}>Custom Feedback Element.</CFormFeedback>`} />
+ </td>
</tr>
<tr id="cformfeedback-className">
<td className="text-primary fw-semibold">className<a href="#cformfeedback-className" aria-label="CFormFeedback className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +40,40 @@ import CFormFeedback from '@coreui/react/src/components/form/CFormFeedback'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of additional CSS class names to apply to the form feedback component.</p>
+ <JSXDocs code={`<CFormFeedback className="my-custom-feedback">Invalid input.</CFormFeedback>`} />
+ </td>
+ </tr>
+ <tr id="cformfeedback-customClassNames">
+ <td className="text-primary fw-semibold">customClassNames<a href="#cformfeedback-customClassNames" aria-label="CFormFeedback customClassNames permalink" className="anchor-link after">#</a><span className="badge bg-success">v5.5.0+</span></td>
+ <td>undefined</td>
+ <td><code>{`Partial\<{ INVALID_FEEDBACK: string; INVALID_TOOLTIP: string; VALID_FEEDBACK: string; VALID_TOOLTIP: string; }>`}</code></td>
+ </tr>
+ <tr>
+ <td colSpan="3">
+ <p>Custom class names to override or extend the default CSS classes used within the <code>{`CFormFeedback`}</code> component.<br />
+Each key corresponds to a specific part of the Form Feedback component, allowing for granular styling control.</p>
+<p><strong>Important</strong>: If you want to <strong>replace</strong> an existing class name, prefix your custom class name with <code>{`!`}</code>.<br />
+This ensures that the original class is overridden rather than appended.</p>
+ <JSXDocs code={`// Overriding the default invalid feedback class
+const customClasses = {
+ INVALID_FEEDBACK: '!my-custom-invalid-feedback',
+}
+
+<CFormFeedback customClassNames={customClasses} invalid>
+ Custom Invalid Feedback.
+</CFormFeedback>
+
+// Extending the default valid feedback class without replacing it
+const customClasses = {
+ VALID_FEEDBACK: 'my-additional-valid-feedback',
+}
+
+<CFormFeedback customClassNames={customClasses} valid>
+ Extended Valid Feedback.
+</CFormFeedback>`} />
+ </td>
</tr>
<tr id="cformfeedback-invalid">
<td className="text-primary fw-semibold">invalid<a href="#cformfeedback-invalid" aria-label="CFormFeedback invalid permalink" className="anchor-link after">#</a></td>
@@ -37,7 +81,12 @@ import CFormFeedback from '@coreui/react/src/components/form/CFormFeedback'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Method called immediately after the <code>{`value`}</code> prop changes.</td>
+ <td colSpan="3">
+ <p>Sets the form feedback state to invalid. When <code>{`true`}</code>, applies the invalid feedback styling.</p>
+ <JSXDocs code={`<CFormFeedback invalid>
+ Please provide a valid email address.
+</CFormFeedback>`} />
+ </td>
</tr>
<tr id="cformfeedback-tooltip">
<td className="text-primary fw-semibold">tooltip<a href="#cformfeedback-tooltip" aria-label="CFormFeedback tooltip permalink" className="anchor-link after">#</a></td>
@@ -45,7 +94,12 @@ import CFormFeedback from '@coreui/react/src/components/form/CFormFeedback'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">If your form layout allows it, you can display validation feedback in a styled tooltip.</td>
+ <td colSpan="3">
+ <p>If enabled, displays validation feedback in a styled tooltip instead of the default block.</p>
+ <JSXDocs code={`<CFormFeedback invalid tooltip>
+ Please provide a valid email address.
+</CFormFeedback>`} />
+ </td>
</tr>
<tr id="cformfeedback-valid">
<td className="text-primary fw-semibold">valid<a href="#cformfeedback-valid" aria-label="CFormFeedback valid permalink" className="anchor-link after">#</a></td>
@@ -53,7 +107,12 @@ import CFormFeedback from '@coreui/react/src/components/form/CFormFeedback'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set component validation state to valid.</td>
+ <td colSpan="3">
+ <p>Sets the form feedback state to valid. When <code>{`true`}</code>, applies the valid feedback styling.</p>
+ <JSXDocs code={`<CFormFeedback valid>
+ Looks good!
+</CFormFeedback>`} />
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CFormFloating.api.mdx b/packages/docs/content/api/CFormFloating.api.mdx
index 0ba29670..00548a2e 100644
--- a/packages/docs/content/api/CFormFloating.api.mdx
+++ b/packages/docs/content/api/CFormFloating.api.mdx
@@ -21,7 +21,45 @@ import CFormFloating from '@coreui/react/src/components/form/CFormFloating'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of additional CSS class names to apply to the form floating component.</p>
+ <JSXDocs code={`<CFormFloating className="my-custom-floating">
+ <input type="text" className="form-control" id="username" placeholder=" " />
+ <label htmlFor="username">Username</label>
+</CFormFloating>`} />
+ </td>
+ </tr>
+ <tr id="cformfloating-customClassNames">
+ <td className="text-primary fw-semibold">customClassNames<a href="#cformfloating-customClassNames" aria-label="CFormFloating customClassNames permalink" className="anchor-link after">#</a><span className="badge bg-success">v5.5.0+</span></td>
+ <td>undefined</td>
+ <td><code>{`Partial\<{ FORM_FLOATING: string; }>`}</code></td>
+ </tr>
+ <tr>
+ <td colSpan="3">
+ <p>Custom class names to override or extend the default CSS classes used within the <code>{`CFormFloating`}</code> component.<br />
+Each key corresponds to a specific part of the Form Floating component, allowing for granular styling control.</p>
+<p><strong>Important</strong>: If you want to <strong>replace</strong> an existing class name, prefix your custom class name with <code>{`!`}</code>.<br />
+This ensures that the original class is overridden rather than appended.</p>
+ <JSXDocs code={`// Overriding the default form floating label class
+const customClasses = {
+ FORM_FLOATING_LABEL: '!my-custom-form-floating-label',
+}
+
+<CFormFloating customClassNames={customClasses}>
+ <input type="text" className="form-control" id="username" placeholder=" " />
+ <label htmlFor="username">Username</label>
+</CFormFloating>
+
+// Extending the default form floating label class without replacing it
+const customClasses = {
+ FORM_FLOATING_LABEL: 'my-additional-form-floating-label',
+}
+
+<CFormFloating customClassNames={customClasses}>
+ <input type="password" className="form-control" id="password" placeholder=" " />
+ <label htmlFor="password">Password</label>
+</CFormFloating>`} />
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CFormInput.api.mdx b/packages/docs/content/api/CFormInput.api.mdx
index b69c5cfb..d178a6a6 100644
--- a/packages/docs/content/api/CFormInput.api.mdx
+++ b/packages/docs/content/api/CFormInput.api.mdx
@@ -21,7 +21,36 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of additional CSS class names to apply to the form input component.</p>
+ <JSXDocs code={`<CFormInput className="my-custom-input" />`} />
+ </td>
+ </tr>
+ <tr id="cforminput-customClassNames">
+ <td className="text-primary fw-semibold">customClassNames<a href="#cforminput-customClassNames" aria-label="CFormInput customClassNames permalink" className="anchor-link after">#</a><span className="badge bg-success">v5.5.0+</span></td>
+ <td>undefined</td>
+ <td><code>{`Partial\<Record\<CombinedCustomClassNamesKeys`}</code>, <code>{`"FORM_CONTROL"`}</code>, <code>{`"FORM_CONTROL_COLOR"`}</code>, <code>{`"FORM_CONTROL_PLAINTEXT"`}</code>, <code>{`"FORM_CONTROL_SM"`}</code>, <code>{`"FORM_CONTROL_LG"`}</code>, <code>{`"IS_INVALID"`}</code>, <code>{`"IS_VALID", string>>`}</code></td>
+ </tr>
+ <tr>
+ <td colSpan="3">
+ <p>Custom class names to override or extend the default CSS classes used within the <code>{`CFormControlWrapper`}</code> component.<br />
+Each key corresponds to a specific part of the Form Input component, allowing for granular styling control.</p>
+<p><strong>Important</strong>: If you want to <strong>replace</strong> an existing class name, prefix your custom class name with <code>{`!`}</code>.<br />
+This ensures that the original class is overridden rather than appended.</p>
+ <JSXDocs code={`// Overriding the default form control class
+const customClasses = {
+ FORM_CONTROL: '!my-custom-form-control',
+}
+
+<CFormInput customClassNames={customClasses} />
+
+// Extending the default form control class without replacing it
+const customClasses = {
+ FORM_CONTROL: 'my-additional-form-control',
+}
+
+<CFormInput customClassNames={customClasses} />`} />
+ </td>
</tr>
<tr id="cforminput-delay">
<td className="text-primary fw-semibold">delay<a href="#cforminput-delay" aria-label="CFormInput delay permalink" className="anchor-link after">#</a></td>
@@ -29,7 +58,15 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
<td><code>{`number`}</code>, <code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Delay onChange event while typing. If set to true onChange event will be delayed 500ms, you can also provide the number of milliseconds you want to delay the onChange event.</td>
+ <td colSpan="3">
+ <p>Delay the <code>{`onChange`}</code> event while typing. If set to <code>{`true`}</code>, the <code>{`onChange`}</code> event will be delayed by 500ms.<br />
+You can also provide a specific number of milliseconds to customize the delay duration.</p>
+ <JSXDocs code={`// Delaying the onChange event by 500ms
+<CFormInput delay onChange={(e) => console.log(e.target.value)} />
+
+// Custom delay duration of 1000ms
+<CFormInput delay={1000} onChange={(e) => console.log(e.target.value)} />`} />
+ </td>
</tr>
<tr id="cforminput-disabled">
<td className="text-primary fw-semibold">disabled<a href="#cforminput-disabled" aria-label="CFormInput disabled permalink" className="anchor-link after">#</a></td>
@@ -37,7 +74,10 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Toggle the disabled state for the component.</td>
+ <td colSpan="3">
+ <p>Toggle the disabled state for the form input component. When <code>{`true`}</code>, the input is disabled and non-interactive.</p>
+ <JSXDocs code={`<CFormInput disabled />`} />
+ </td>
</tr>
<tr id="cforminput-feedback">
<td className="text-primary fw-semibold">feedback<a href="#cforminput-feedback" aria-label="CFormInput feedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
@@ -45,7 +85,10 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Provide valuable, actionable feedback.</td>
+ <td colSpan="3">
+ <p>Provide valuable, actionable feedback.</p>
+ <JSXDocs code={`<CFormInput feedback="This field is required." />`} />
+ </td>
</tr>
<tr id="cforminput-feedbackInvalid">
<td className="text-primary fw-semibold">feedbackInvalid<a href="#cforminput-feedbackInvalid" aria-label="CFormInput feedbackInvalid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
@@ -53,7 +96,10 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Provide valuable, actionable feedback.</td>
+ <td colSpan="3">
+ <p>Provide valuable, actionable feedback when the form control is in an invalid state.</p>
+ <JSXDocs code={`<CFormInput feedbackInvalid="Invalid input." />`} />
+ </td>
</tr>
<tr id="cforminput-feedbackValid">
<td className="text-primary fw-semibold">feedbackValid<a href="#cforminput-feedbackValid" aria-label="CFormInput feedbackValid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
@@ -61,7 +107,10 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</td>
+ <td colSpan="3">
+ <p>Provide valuable, actionable feedback when the form control is in a valid state.</p>
+ <JSXDocs code={`<CFormInput feedbackValid="Looks good!" />`} />
+ </td>
</tr>
<tr id="cforminput-floatingClassName">
<td className="text-primary fw-semibold">floatingClassName<a href="#cforminput-floatingClassName" aria-label="CFormInput floatingClassName permalink" className="anchor-link after">#</a><span className="badge bg-success">4.5.0+</span></td>
@@ -69,7 +118,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the floating label wrapper.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the floating label wrapper.</p>
+ </td>
</tr>
<tr id="cforminput-floatingLabel">
<td className="text-primary fw-semibold">floatingLabel<a href="#cforminput-floatingLabel" aria-label="CFormInput floatingLabel permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
@@ -77,7 +128,10 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</td>
+ <td colSpan="3">
+ <p>Provide a floating label for the form control. This label will float above the input when focused or when the input has a value.</p>
+ <JSXDocs code={`<CFormControlWrapper floatingLabel="Email Address" />`} />
+ </td>
</tr>
<tr id="cforminput-invalid">
<td className="text-primary fw-semibold">invalid<a href="#cforminput-invalid" aria-label="CFormInput invalid permalink" className="anchor-link after">#</a></td>
@@ -85,7 +139,10 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set component validation state to invalid.</td>
+ <td colSpan="3">
+ <p>Set the form control validation state to invalid. When <code>{`true`}</code>, applies the invalid feedback styling.</p>
+ <JSXDocs code={`<CFormInput invalid feedback="Invalid input." />`} />
+ </td>
</tr>
<tr id="cforminput-label">
<td className="text-primary fw-semibold">label<a href="#cforminput-label" aria-label="CFormInput label permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
@@ -93,7 +150,10 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Add a caption for a component.</td>
+ <td colSpan="3">
+ <p>Add a caption for the form control. Typically used as a label.</p>
+ <JSXDocs code={`<CFormControlWrapper label="Username" />`} />
+ </td>
</tr>
<tr id="cforminput-onChange">
<td className="text-primary fw-semibold">onChange<a href="#cforminput-onChange" aria-label="CFormInput onChange permalink" className="anchor-link after">#</a></td>
@@ -101,7 +161,14 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
<td><code>{`ChangeEventHandler\<HTMLInputElement>`}</code></td>
</tr>
<tr>
- <td colSpan="3">Method called immediately after the <code>{`value`}</code> prop changes.</td>
+ <td colSpan="3">
+ <p>Method called immediately after the <code>{`value`}</code> prop changes. Useful for handling input changes with optional delay.</p>
+ <JSXDocs code={`const handleChange = (event) => {
+ console.log(event.target.value)
+}
+
+<CFormInput onChange={handleChange} />`} />
+ </td>
</tr>
<tr id="cforminput-plainText">
<td className="text-primary fw-semibold">plainText<a href="#cforminput-plainText" aria-label="CFormInput plainText permalink" className="anchor-link after">#</a></td>
@@ -109,7 +176,11 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side <code>{`readonly`}</code>.</td>
+ <td colSpan="3">
+ <p>Render the form input component styled as plain text. Removes the default form field styling and preserves the correct margin and padding.<br />
+Recommended to use only alongside <code>{`readOnly`}</code>.</p>
+ <JSXDocs code={`<CFormInput plainText readOnly value="Plain Text Value" />`} />
+ </td>
</tr>
<tr id="cforminput-readOnly">
<td className="text-primary fw-semibold">readOnly<a href="#cforminput-readOnly" aria-label="CFormInput readOnly permalink" className="anchor-link after">#</a></td>
@@ -117,7 +188,10 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Toggle the readonly state for the component.</td>
+ <td colSpan="3">
+ <p>Toggle the readonly state for the form input component. When <code>{`true`}</code>, the input is read-only and cannot be modified.</p>
+ <JSXDocs code={`<CFormInput readOnly value="Read-Only Value" />`} />
+ </td>
</tr>
<tr id="cforminput-size">
<td className="text-primary fw-semibold">size<a href="#cforminput-size" aria-label="CFormInput size permalink" className="anchor-link after">#</a></td>
@@ -125,7 +199,11 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
<td><code>{`"sm"`}</code>, <code>{`"lg"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Size the component small or large.</td>
+ <td colSpan="3">
+ <p>Size the form input component as small (<code>{`sm`}</code>) or large (<code>{`lg`}</code>).</p>
+ <JSXDocs code={`<CFormInput size="sm" />
+<CFormInput size="lg" />`} />
+ </td>
</tr>
<tr id="cforminput-text">
<td className="text-primary fw-semibold">text<a href="#cforminput-text" aria-label="CFormInput text permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
@@ -133,7 +211,10 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Add helper text to the component.</td>
+ <td colSpan="3">
+ <p>Add helper text to the form control. Provides additional guidance to the user.</p>
+ <JSXDocs code={`<CFormControlWrapper text="Your username must be unique." />`} />
+ </td>
</tr>
<tr id="cforminput-tooltipFeedback">
<td className="text-primary fw-semibold">tooltipFeedback<a href="#cforminput-tooltipFeedback" aria-label="CFormInput tooltipFeedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
@@ -141,7 +222,10 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Display validation feedback in a styled tooltip.</td>
+ <td colSpan="3">
+ <p>Display validation feedback in a styled tooltip.</p>
+ <JSXDocs code={`<CFormInput invalid tooltipFeedback feedback="Invalid input." />`} />
+ </td>
</tr>
<tr id="cforminput-type">
<td className="text-primary fw-semibold">type<a href="#cforminput-type" aria-label="CFormInput type permalink" className="anchor-link after">#</a></td>
@@ -149,7 +233,12 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Specifies the type of component.</td>
+ <td colSpan="3">
+ <p>Specifies the type of the form input component. It can be any valid HTML input type.</p>
+ <JSXDocs code={`<CFormInput type="email" />
+<CFormInput type="password" />
+<CFormInput type="file" />`} />
+ </td>
</tr>
<tr id="cforminput-valid">
<td className="text-primary fw-semibold">valid<a href="#cforminput-valid" aria-label="CFormInput valid permalink" className="anchor-link after">#</a></td>
@@ -157,7 +246,10 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set component validation state to valid.</td>
+ <td colSpan="3">
+ <p>Set the form control validation state to valid. When <code>{`true`}</code>, applies the valid feedback styling.</p>
+ <JSXDocs code={`<CFormInput valid feedbackValid="Looks good!" />`} />
+ </td>
</tr>
<tr id="cforminput-value">
<td className="text-primary fw-semibold">value<a href="#cforminput-value" aria-label="CFormInput value permalink" className="anchor-link after">#</a></td>
@@ -165,7 +257,12 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
<td><code>{`string`}</code>, <code>{`number`}</code>, <code>{`string[]`}</code></td>
</tr>
<tr>
- <td colSpan="3">The <code>{`value`}</code> attribute of component.</td>
+ <td colSpan="3">
+ <p>The <code>{`value`}</code> attribute of the form input component. Represents the current value of the input.</p>
+ <JSXDocs code={`const [inputValue, setInputValue] = useState('')
+
+<CFormInput value={inputValue} onChange={(e) => setInputValue(e.target.value)} />`} />
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CFormLabel.api.mdx b/packages/docs/content/api/CFormLabel.api.mdx
index d6d7ab74..fc8808bb 100644
--- a/packages/docs/content/api/CFormLabel.api.mdx
+++ b/packages/docs/content/api/CFormLabel.api.mdx
@@ -21,15 +21,47 @@ import CFormLabel from '@coreui/react/src/components/form/CFormLabel'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of additional CSS class names to apply to the form label component.</p>
+ <JSXDocs code={`<CFormLabel className="my-custom-label">Email Address</CFormLabel>`} />
+ </td>
</tr>
<tr id="cformlabel-customClassName">
- <td className="text-primary fw-semibold">customClassName<a href="#cformlabel-customClassName" aria-label="CFormLabel customClassName permalink" className="anchor-link after">#</a></td>
+ <td className="text-primary fw-semibold">customClassName<a href="#cformlabel-customClassName" aria-label="CFormLabel customClassName permalink" className="anchor-link after">#</a><span className="badge bg-danger">Deprecated v5.5.0 - Use `customClassNames` instead for better flexibility and maintainability.</span></td>
<td>undefined</td>
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want to be applied to the component, and override standard className value.</td>
+ <td colSpan="3">
+ <p>A string of CSS class names to be applied to the form label component, overriding the standard <code>{`className`}</code> value.</p>
+ <JSXDocs code={`<CFormLabel customClassName="my-deprecated-class">Email Address</CFormLabel>`} />
+ </td>
+ </tr>
+ <tr id="cformlabel-customClassNames">
+ <td className="text-primary fw-semibold">customClassNames<a href="#cformlabel-customClassNames" aria-label="CFormLabel customClassNames permalink" className="anchor-link after">#</a><span className="badge bg-success">v5.5.0+</span></td>
+ <td>undefined</td>
+ <td><code>{`Partial\<{ FORM_LABEL: string; }>`}</code></td>
+ </tr>
+ <tr>
+ <td colSpan="3">
+ <p>Custom class names to override or extend the default CSS classes used within the <code>{`CFormLabel`}</code> component.<br />
+Each key corresponds to a specific part of the Form Label component, allowing for granular styling control.</p>
+<p><strong>Important</strong>: If you want to <strong>replace</strong> an existing class name, prefix your custom class name with <code>{`!`}</code>.<br />
+This ensures that the original class is overridden rather than appended.</p>
+ <JSXDocs code={`// Overriding the default form label class
+const customClasses = {
+ FORM_LABEL: '!my-custom-form-label',
+}
+
+<CFormLabel customClassNames={customClasses}>Email Address</CFormLabel>
+
+// Extending the default form label class without replacing it
+const customClasses = {
+ FORM_LABEL: 'my-additional-form-label',
+}
+
+<CFormLabel customClassNames={customClasses}>Email Address</CFormLabel>`} />
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CFormRange.api.mdx b/packages/docs/content/api/CFormRange.api.mdx
index 65ea10c7..9e91f3ca 100644
--- a/packages/docs/content/api/CFormRange.api.mdx
+++ b/packages/docs/content/api/CFormRange.api.mdx
@@ -21,15 +21,47 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of additional CSS class names to apply to the form range component.</p>
+ <JSXDocs code={`<CFormRange className="my-custom-range" />`} />
+ </td>
+ </tr>
+ <tr id="cformrange-customClassNames">
+ <td className="text-primary fw-semibold">customClassNames<a href="#cformrange-customClassNames" aria-label="CFormRange customClassNames permalink" className="anchor-link after">#</a><span className="badge bg-success">v5.5.0+</span></td>
+ <td>undefined</td>
+ <td><code>{`Partial\<Record\<CombinedCustomClassNamesKeys, string>>`}</code></td>
+ </tr>
+ <tr>
+ <td colSpan="3">
+ <p>Custom class names to override or extend the default CSS classes used within the <code>{`CFormRange`}</code> component.<br />
+Each key corresponds to a specific part of the Form Range component, allowing for granular styling control.</p>
+<p><strong>Important</strong>: If you want to <strong>replace</strong> an existing class name, prefix your custom class name with <code>{`!`}</code>.<br />
+This ensures that the original class is overridden rather than appended.</p>
+ <JSXDocs code={`// Overriding the default form range class
+const customClasses = {
+ FORM_RANGE: '!my-custom-form-range',
+}
+
+<CFormRange customClassNames={customClasses} />
+
+// Extending the default form range class without replacing it
+const customClasses = {
+ FORM_RANGE: 'my-additional-form-range',
+}
+
+<CFormRange customClassNames={customClasses} />`} />
+ </td>
</tr>
<tr id="cformrange-disabled">
<td className="text-primary fw-semibold">disabled<a href="#cformrange-disabled" aria-label="CFormRange disabled permalink" className="anchor-link after">#</a></td>
- <td>undefined</td>
+ <td><code>{`false`}</code></td>
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Toggle the disabled state for the component.</td>
+ <td colSpan="3">
+ <p>Toggle the disabled state for the form range component. When <code>{`true`}</code>, the range input is disabled and non-interactive.</p>
+ <JSXDocs code={`<CFormRange disabled />`} />
+ </td>
</tr>
<tr id="cformrange-label">
<td className="text-primary fw-semibold">label<a href="#cformrange-label" aria-label="CFormRange label permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
@@ -37,7 +69,10 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Add a caption for a component.</td>
+ <td colSpan="3">
+ <p>Add a caption for the form range component. Typically used as a label.</p>
+ <JSXDocs code={`<CFormRange label="Volume" />`} />
+ </td>
</tr>
<tr id="cformrange-max">
<td className="text-primary fw-semibold">max<a href="#cformrange-max" aria-label="CFormRange max permalink" className="anchor-link after">#</a></td>
@@ -45,7 +80,10 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange'
<td><code>{`number`}</code></td>
</tr>
<tr>
- <td colSpan="3">Specifies the maximum value for the component.</td>
+ <td colSpan="3">
+ <p>Specifies the maximum value for the form range component.</p>
+ <JSXDocs code={`<CFormRange max={100} />`} />
+ </td>
</tr>
<tr id="cformrange-min">
<td className="text-primary fw-semibold">min<a href="#cformrange-min" aria-label="CFormRange min permalink" className="anchor-link after">#</a></td>
@@ -53,7 +91,10 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange'
<td><code>{`number`}</code></td>
</tr>
<tr>
- <td colSpan="3">Specifies the minimum value for the component.</td>
+ <td colSpan="3">
+ <p>Specifies the minimum value for the form range component.</p>
+ <JSXDocs code={`<CFormRange min={0} />`} />
+ </td>
</tr>
<tr id="cformrange-onChange">
<td className="text-primary fw-semibold">onChange<a href="#cformrange-onChange" aria-label="CFormRange onChange permalink" className="anchor-link after">#</a></td>
@@ -61,15 +102,25 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange'
<td><code>{`ChangeEventHandler\<HTMLInputElement>`}</code></td>
</tr>
<tr>
- <td colSpan="3">Method called immediately after the <code>{`value`}</code> prop changes.</td>
+ <td colSpan="3">
+ <p>Method called immediately after the <code>{`value`}</code> prop changes. Useful for handling range input changes.</p>
+ <JSXDocs code={`const handleRangeChange = (e) => {
+ console.log(e.target.value)
+}
+
+<CFormRange onChange={handleRangeChange} />`} />
+ </td>
</tr>
<tr id="cformrange-readOnly">
<td className="text-primary fw-semibold">readOnly<a href="#cformrange-readOnly" aria-label="CFormRange readOnly permalink" className="anchor-link after">#</a></td>
- <td>undefined</td>
+ <td><code>{`false`}</code></td>
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Toggle the readonly state for the component.</td>
+ <td colSpan="3">
+ <p>Toggle the readonly state for the form range component. When <code>{`true`}</code>, the range input is read-only and cannot be modified.</p>
+ <JSXDocs code={`<CFormRange readOnly value={50} />`} />
+ </td>
</tr>
<tr id="cformrange-step">
<td className="text-primary fw-semibold">step<a href="#cformrange-step" aria-label="CFormRange step permalink" className="anchor-link after">#</a></td>
@@ -77,7 +128,10 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange'
<td><code>{`number`}</code></td>
</tr>
<tr>
- <td colSpan="3">Specifies the interval between legal numbers in the component.</td>
+ <td colSpan="3">
+ <p>Specifies the interval between legal numbers in the form range component.</p>
+ <JSXDocs code={`<CFormRange step={10} />`} />
+ </td>
</tr>
<tr id="cformrange-value">
<td className="text-primary fw-semibold">value<a href="#cformrange-value" aria-label="CFormRange value permalink" className="anchor-link after">#</a></td>
@@ -85,7 +139,12 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange'
<td><code>{`string`}</code>, <code>{`number`}</code>, <code>{`string[]`}</code></td>
</tr>
<tr>
- <td colSpan="3">The <code>{`value`}</code> attribute of component.</td>
+ <td colSpan="3">
+ <p>The <code>{`value`}</code> attribute of the form range component. Represents the current value of the range input.</p>
+ <JSXDocs code={`const [volume, setVolume] = useState(50)
+
+<CFormRange value={volume} onChange={(e) => setVolume(e.target.value)} />`} />
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CFormSelect.api.mdx b/packages/docs/content/api/CFormSelect.api.mdx
index 105db26a..01dc8624 100644
--- a/packages/docs/content/api/CFormSelect.api.mdx
+++ b/packages/docs/content/api/CFormSelect.api.mdx
@@ -21,7 +21,36 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of additional CSS class names to apply to the form select component.</p>
+ <JSXDocs code={`<CFormSelect className="my-custom-select" />`} />
+ </td>
+ </tr>
+ <tr id="cformselect-customClassNames">
+ <td className="text-primary fw-semibold">customClassNames<a href="#cformselect-customClassNames" aria-label="CFormSelect customClassNames permalink" className="anchor-link after">#</a><span className="badge bg-success">v5.5.0+</span></td>
+ <td>undefined</td>
+ <td><code>{`Partial\<Record\<CombinedCustomClassNamesKeys`}</code>, <code>{`"FORM_SELECT"`}</code>, <code>{`"FORM_SELECT_SM"`}</code>, <code>{`"FORM_SELECT_LG"`}</code>, <code>{`"IS_INVALID"`}</code>, <code>{`"IS_VALID", string>>`}</code></td>
+ </tr>
+ <tr>
+ <td colSpan="3">
+ <p>Custom class names to override or extend the default CSS classes used within the <code>{`CFormSelect`}</code> component.<br />
+Each key corresponds to a specific part of the Form Select component, allowing for granular styling control.</p>
+<p><strong>Important</strong>: If you want to <strong>replace</strong> an existing class name, prefix your custom class name with <code>{`!`}</code>.<br />
+This ensures that the original class is overridden rather than appended.</p>
+ <JSXDocs code={`// Overriding the default form select class
+const customClasses = {
+ FORM_SELECT: '!my-custom-form-select',
+}
+
+<CFormSelect customClassNames={customClasses} />
+
+// Extending the default form select class without replacing it
+const customClasses = {
+ FORM_SELECT: 'my-additional-form-select',
+}
+
+<CFormSelect customClassNames={customClasses} />`} />
+ </td>
</tr>
<tr id="cformselect-feedback">
<td className="text-primary fw-semibold">feedback<a href="#cformselect-feedback" aria-label="CFormSelect feedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
@@ -29,7 +58,10 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Provide valuable, actionable feedback.</td>
+ <td colSpan="3">
+ <p>Provide valuable, actionable feedback.</p>
+ <JSXDocs code={`<CFormControlValidation feedback="This field is required." />`} />
+ </td>
</tr>
<tr id="cformselect-feedbackInvalid">
<td className="text-primary fw-semibold">feedbackInvalid<a href="#cformselect-feedbackInvalid" aria-label="CFormSelect feedbackInvalid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
@@ -37,7 +69,10 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Provide valuable, actionable feedback.</td>
+ <td colSpan="3">
+ <p>Provide valuable, actionable feedback when the form control is in an invalid state.</p>
+ <JSXDocs code={`<CFormControlValidation feedbackInvalid="Invalid input." />`} />
+ </td>
</tr>
<tr id="cformselect-feedbackValid">
<td className="text-primary fw-semibold">feedbackValid<a href="#cformselect-feedbackValid" aria-label="CFormSelect feedbackValid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
@@ -45,7 +80,10 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</td>
+ <td colSpan="3">
+ <p>Provide valuable, actionable feedback when the form control is in a valid state.</p>
+ <JSXDocs code={`<CFormControlValidation feedbackValid="Looks good!" />`} />
+ </td>
</tr>
<tr id="cformselect-floatingClassName">
<td className="text-primary fw-semibold">floatingClassName<a href="#cformselect-floatingClassName" aria-label="CFormSelect floatingClassName permalink" className="anchor-link after">#</a><span className="badge bg-success">4.5.0+</span></td>
@@ -53,7 +91,9 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the floating label wrapper.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the floating label wrapper.</p>
+ </td>
</tr>
<tr id="cformselect-floatingLabel">
<td className="text-primary fw-semibold">floatingLabel<a href="#cformselect-floatingLabel" aria-label="CFormSelect floatingLabel permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
@@ -61,7 +101,10 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</td>
+ <td colSpan="3">
+ <p>Provide a floating label for the form control. This label will float above the input when focused or when the input has a value.</p>
+ <JSXDocs code={`<CFormControlWrapper floatingLabel="Email Address" />`} />
+ </td>
</tr>
<tr id="cformselect-htmlSize">
<td className="text-primary fw-semibold">htmlSize<a href="#cformselect-htmlSize" aria-label="CFormSelect htmlSize permalink" className="anchor-link after">#</a></td>
@@ -69,7 +112,10 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
<td><code>{`number`}</code></td>
</tr>
<tr>
- <td colSpan="3">Specifies the number of visible options in a drop-down list.</td>
+ <td colSpan="3">
+ <p>Specifies the number of visible options in a drop-down list.</p>
+ <JSXDocs code={`<CFormSelect htmlSize={5} />`} />
+ </td>
</tr>
<tr id="cformselect-invalid">
<td className="text-primary fw-semibold">invalid<a href="#cformselect-invalid" aria-label="CFormSelect invalid permalink" className="anchor-link after">#</a></td>
@@ -77,7 +123,10 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set component validation state to invalid.</td>
+ <td colSpan="3">
+ <p>Set the form control validation state to invalid. When <code>{`true`}</code>, applies the invalid feedback styling.</p>
+ <JSXDocs code={`<CFormControlValidation invalid feedback="Invalid input." />`} />
+ </td>
</tr>
<tr id="cformselect-label">
<td className="text-primary fw-semibold">label<a href="#cformselect-label" aria-label="CFormSelect label permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
@@ -85,7 +134,10 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Add a caption for a component.</td>
+ <td colSpan="3">
+ <p>Add a caption for the form control. Typically used as a label.</p>
+ <JSXDocs code={`<CFormControlWrapper label="Username" />`} />
+ </td>
</tr>
<tr id="cformselect-onChange">
<td className="text-primary fw-semibold">onChange<a href="#cformselect-onChange" aria-label="CFormSelect onChange permalink" className="anchor-link after">#</a></td>
@@ -93,7 +145,14 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
<td><code>{`ChangeEventHandler\<HTMLSelectElement>`}</code></td>
</tr>
<tr>
- <td colSpan="3">Method called immediately after the <code>{`value`}</code> prop changes.</td>
+ <td colSpan="3">
+ <p>Method called immediately after the <code>{`value`}</code> prop changes. Useful for handling select input changes.</p>
+ <JSXDocs code={`const handleSelectChange = (e) => {
+ console.log(e.target.value)
+}
+
+<CFormSelect onChange={handleSelectChange} />`} />
+ </td>
</tr>
<tr id="cformselect-options">
<td className="text-primary fw-semibold">options<a href="#cformselect-options" aria-label="CFormSelect options permalink" className="anchor-link after">#</a></td>
@@ -101,7 +160,19 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
<td><code>{`Option[]`}</code>, <code>{`string[]`}</code></td>
</tr>
<tr>
- <td colSpan="3">Options list of the select component. Available keys: <code>{`label`}</code>, <code>{`value`}</code>, <code>{`disabled`}</code>.<br/>Examples:<br/>- <code>{`options={[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]}`}</code><br/>- <code>{`options={['js', 'html']}`}</code></td>
+ <td colSpan="3">
+ <p>Options list of the select component. Available keys: <code>{`label`}</code>, <code>{`value`}</code>, <code>{`disabled`}</code>.</p>
+ <JSXDocs code={`const options = [
+ { value: 'js', label: 'JavaScript' },
+ { value: 'html', label: 'HTML', disabled: true },
+]
+
+<CFormSelect options={options} />
+
+const options = ['js', 'html']
+
+<CFormSelect options={options} />`} />
+ </td>
</tr>
<tr id="cformselect-size">
<td className="text-primary fw-semibold">size<a href="#cformselect-size" aria-label="CFormSelect size permalink" className="anchor-link after">#</a></td>
@@ -109,7 +180,11 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
<td><code>{`"sm"`}</code>, <code>{`"lg"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Size the component small or large.</td>
+ <td colSpan="3">
+ <p>Size the form select component as small (<code>{`sm`}</code>) or large (<code>{`lg`}</code>).</p>
+ <JSXDocs code={`<CFormSelect size="sm" label="Small Select" />
+<CFormSelect size="lg" label="Large Select" />`} />
+ </td>
</tr>
<tr id="cformselect-text">
<td className="text-primary fw-semibold">text<a href="#cformselect-text" aria-label="CFormSelect text permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
@@ -117,7 +192,10 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Add helper text to the component.</td>
+ <td colSpan="3">
+ <p>Add helper text to the form control. Provides additional guidance to the user.</p>
+ <JSXDocs code={`<CFormControlWrapper text="Your username must be unique." />`} />
+ </td>
</tr>
<tr id="cformselect-tooltipFeedback">
<td className="text-primary fw-semibold">tooltipFeedback<a href="#cformselect-tooltipFeedback" aria-label="CFormSelect tooltipFeedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
@@ -125,7 +203,10 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Display validation feedback in a styled tooltip.</td>
+ <td colSpan="3">
+ <p>Display validation feedback in a styled tooltip.</p>
+ <JSXDocs code={`<CFormControlValidation invalid tooltipFeedback feedback="Invalid input." />`} />
+ </td>
</tr>
<tr id="cformselect-valid">
<td className="text-primary fw-semibold">valid<a href="#cformselect-valid" aria-label="CFormSelect valid permalink" className="anchor-link after">#</a></td>
@@ -133,7 +214,10 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set component validation state to valid.</td>
+ <td colSpan="3">
+ <p>Set the form control validation state to valid. When <code>{`true`}</code>, applies the valid feedback styling.</p>
+ <JSXDocs code={`<CFormControlValidation valid feedbackValid="Looks good!" />`} />
+ </td>
</tr>
<tr id="cformselect-value">
<td className="text-primary fw-semibold">value<a href="#cformselect-value" aria-label="CFormSelect value permalink" className="anchor-link after">#</a></td>
@@ -141,7 +225,19 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
<td><code>{`string`}</code>, <code>{`number`}</code>, <code>{`string[]`}</code></td>
</tr>
<tr>
- <td colSpan="3">The <code>{`value`}</code> attribute of component.</td>
+ <td colSpan="3">
+ <p>The <code>{`value`}</code> attribute of the form select component. Represents the current value of the select input.</p>
+ <JSXDocs code={`const [language, setLanguage] = useState('js')
+
+<CFormSelect
+ value={language}
+ onChange={(e) => setLanguage(e.target.value)}
+ options={[
+ { value: 'js', label: 'JavaScript' },
+ { value: 'html', label: 'HTML' },
+ ]}
+/>`} />
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CFormSwitch.api.mdx b/packages/docs/content/api/CFormSwitch.api.mdx
index 5c420a83..45e98b3a 100644
--- a/packages/docs/content/api/CFormSwitch.api.mdx
+++ b/packages/docs/content/api/CFormSwitch.api.mdx
@@ -21,7 +21,36 @@ import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of additional CSS class names to apply to the form switch component.</p>
+ <JSXDocs code={`<CFormSwitch className="my-custom-switch" />`} />
+ </td>
+ </tr>
+ <tr id="cformswitch-customClassNames">
+ <td className="text-primary fw-semibold">customClassNames<a href="#cformswitch-customClassNames" aria-label="CFormSwitch customClassNames permalink" className="anchor-link after">#</a><span className="badge bg-success">v5.5.0+</span></td>
+ <td>undefined</td>
+ <td><code>{`Partial\<{ FORM_SWITCH: string; FORM_CHECK_INPUT: string; FORM_CHECK_LABEL: string; FORM_CHECK_REVERSE: string; FORM_SWITCH_LG: string; FORM_SWITCH_XL: string; IS_INVALID: string; IS_VALID: string; }>`}</code></td>
+ </tr>
+ <tr>
+ <td colSpan="3">
+ <p>Custom class names to override or extend the default CSS classes used within the <code>{`CFormSwitch`}</code> component.<br />
+Each key corresponds to a specific part of the Form Switch component, allowing for granular styling control.</p>
+<p><strong>Important</strong>: If you want to <strong>replace</strong> an existing class name, prefix your custom class name with <code>{`!`}</code>.<br />
+This ensures that the original class is overridden rather than appended.</p>
+ <JSXDocs code={`// Overriding the default form switch class
+const customClasses = {
+ FORM_SWITCH: '!my-custom-form-switch',
+}
+
+<CFormSwitch customClassNames={customClasses} />
+
+// Extending the default form switch class without replacing it
+const customClasses = {
+ FORM_SWITCH: 'my-additional-form-switch',
+}
+
+<CFormSwitch customClassNames={customClasses} />`} />
+ </td>
</tr>
<tr id="cformswitch-id">
<td className="text-primary fw-semibold">id<a href="#cformswitch-id" aria-label="CFormSwitch id permalink" className="anchor-link after">#</a></td>
@@ -29,7 +58,10 @@ import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">The id global attribute defines an identifier (ID) that must be unique in the whole document.</td>
+ <td colSpan="3">
+ <p>The ID of the form switch. Associates the label with the switch for accessibility.</p>
+ <JSXDocs code={`<CFormSwitch id="darkMode" label="Enable Dark Mode" />`} />
+ </td>
</tr>
<tr id="cformswitch-invalid">
<td className="text-primary fw-semibold">invalid<a href="#cformswitch-invalid" aria-label="CFormSwitch invalid permalink" className="anchor-link after">#</a></td>
@@ -37,7 +69,10 @@ import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set component validation state to invalid.</td>
+ <td colSpan="3">
+ <p>Set the form switch validation state to invalid. When <code>{`true`}</code>, applies the invalid feedback styling.</p>
+ <JSXDocs code={`<CFormSwitch invalid label="Accept Terms" />`} />
+ </td>
</tr>
<tr id="cformswitch-label">
<td className="text-primary fw-semibold">label<a href="#cformswitch-label" aria-label="CFormSwitch label permalink" className="anchor-link after">#</a></td>
@@ -45,15 +80,36 @@ import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">The element represents a caption for a component.</td>
+ <td colSpan="3">
+ <p>The label for the form switch component. Provides a caption or description.</p>
+ <JSXDocs code={`<CFormSwitch label="Subscribe to Newsletter" />`} />
+ </td>
+ </tr>
+ <tr id="cformswitch-onChange">
+ <td className="text-primary fw-semibold">onChange<a href="#cformswitch-onChange" aria-label="CFormSwitch onChange permalink" className="anchor-link after">#</a></td>
+ <td>undefined</td>
+ <td><code>{`ChangeEventHandler\<HTMLInputElement>`}</code></td>
+ </tr>
+ <tr>
+ <td colSpan="3">
+ <p>Method called immediately after the <code>{`value`}</code> prop changes. Useful for handling switch state changes.</p>
+ <JSXDocs code={`const handleSwitchChange = (e) => {
+ console.log(e.target.checked)
+}
+
+<CFormSwitch onChange={handleSwitchChange} label="Enable Feature" />`} />
+ </td>
</tr>
<tr id="cformswitch-reverse">
- <td className="text-primary fw-semibold">reverse<a href="#cformswitch-reverse" aria-label="CFormSwitch reverse permalink" className="anchor-link after">#</a></td>
+ <td className="text-primary fw-semibold">reverse<a href="#cformswitch-reverse" aria-label="CFormSwitch reverse permalink" className="anchor-link after">#</a><span className="badge bg-success">4.7.0+</span></td>
<td>undefined</td>
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Put switch on the opposite side.</td>
+ <td colSpan="3">
+ <p>Put switch on the opposite side. Useful for right-to-left layouts or specific design requirements.</p>
+ <JSXDocs code={`<CFormSwitch reverse label="Enable Notifications" />`} />
+ </td>
</tr>
<tr id="cformswitch-size">
<td className="text-primary fw-semibold">size<a href="#cformswitch-size" aria-label="CFormSwitch size permalink" className="anchor-link after">#</a></td>
@@ -61,7 +117,12 @@ import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch'
<td><code>{`"lg"`}</code>, <code>{`"xl"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Size the component large or extra large. Works only with <code>{`switch`}</code>.</td>
+ <td colSpan="3">
+ <p>Size the form switch component as large (<code>{`lg`}</code>) or extra large (<code>{`xl`}</code>). Works only with <code>{`switch`}</code>.</p>
+ <JSXDocs code={`<CFormSwitch size="lg" label="Large Switch" />
+
+<CFormSwitch size="xl" label="Extra Large Switch" />`} />
+ </td>
</tr>
<tr id="cformswitch-type">
<td className="text-primary fw-semibold">type<a href="#cformswitch-type" aria-label="CFormSwitch type permalink" className="anchor-link after">#</a></td>
@@ -69,7 +130,10 @@ import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch'
<td><code>{`"checkbox"`}</code>, <code>{`"radio"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Specifies the type of component.</td>
+ <td colSpan="3">
+ <p>Specifies the type of form switch component. Can be either <code>{`checkbox`}</code> or <code>{`radio`}</code>.</p>
+ <JSXDocs code={`<CFormSwitch type="radio" label="Option A" />`} />
+ </td>
</tr>
<tr id="cformswitch-valid">
<td className="text-primary fw-semibold">valid<a href="#cformswitch-valid" aria-label="CFormSwitch valid permalink" className="anchor-link after">#</a></td>
@@ -77,7 +141,10 @@ import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set component validation state to valid.</td>
+ <td colSpan="3">
+ <p>Set the form switch validation state to valid. When <code>{`true`}</code>, applies the valid feedback styling.</p>
+ <JSXDocs code={`<CFormSwitch valid label="Accept Terms" />`} />
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CFormText.api.mdx b/packages/docs/content/api/CFormText.api.mdx
index 2f666b98..36073b4e 100644
--- a/packages/docs/content/api/CFormText.api.mdx
+++ b/packages/docs/content/api/CFormText.api.mdx
@@ -21,7 +21,18 @@ import CFormText from '@coreui/react/src/components/form/CFormText'
<td><code>{`(ElementType & "symbol")`}</code>, <code>{`(ElementType & "object")`}</code>, <code>{`(ElementType & "div")`}</code>, <code>{`(ElementType & "slot")`}</code>, <code>{`(ElementType & "style")`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+ <td colSpan="3">
+ <p>The component used for the root node. It can be a string representing a HTML element or a React component.</p>
+ <JSXDocs code={`// Using default 'div' element
+<CFormText>This is some helpful form text.</CFormText>
+
+// Using a custom component
+const CustomText = forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(
+ (props, ref) => <span ref={ref} {...props} />,
+);
+
+<CFormText as={CustomText}>Custom Form Text Element.</CFormText>`} />
+ </td>
</tr>
<tr id="cformtext-className">
<td className="text-primary fw-semibold">className<a href="#cformtext-className" aria-label="CFormText className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +40,40 @@ import CFormText from '@coreui/react/src/components/form/CFormText'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of additional CSS class names to apply to the form text component.</p>
+ <JSXDocs code={`<CFormText className="my-custom-text">Custom Styled Form Text</CFormText>`} />
+ </td>
+ </tr>
+ <tr id="cformtext-customClassNames">
+ <td className="text-primary fw-semibold">customClassNames<a href="#cformtext-customClassNames" aria-label="CFormText customClassNames permalink" className="anchor-link after">#</a><span className="badge bg-success">v5.5.0+</span></td>
+ <td>undefined</td>
+ <td><code>{`Partial\<{ FORM_TEXT: string; }>`}</code></td>
+ </tr>
+ <tr>
+ <td colSpan="3">
+ <p>Custom class names to override or extend the default CSS classes used within the <code>{`CFormText`}</code> component.<br />
+Each key corresponds to a specific part of the Form Text component, allowing for granular styling control.</p>
+<p><strong>Important</strong>: If you want to <strong>replace</strong> an existing class name, prefix your custom class name with <code>{`!`}</code>.<br />
+This ensures that the original class is overridden rather than appended.</p>
+ <JSXDocs code={`// Overriding the default form text class
+const customClasses = {
+ FORM_TEXT: '!my-custom-form-text',
+};
+
+<CFormText customClassNames={customClasses}>
+ Custom Form Text.
+</CFormText>
+
+// Extending the default form text class without replacing it
+const customClasses = {
+ FORM_TEXT: 'my-additional-form-text',
+};
+
+<CFormText customClassNames={customClasses}>
+ Extended Form Text.
+</CFormText>`} />
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CFormTextarea.api.mdx b/packages/docs/content/api/CFormTextarea.api.mdx
index 6f831f59..c5af470f 100644
--- a/packages/docs/content/api/CFormTextarea.api.mdx
+++ b/packages/docs/content/api/CFormTextarea.api.mdx
@@ -21,7 +21,36 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of additional CSS class names to apply to the form textarea component.</p>
+ <JSXDocs code={`<CFormTextarea className="my-custom-textarea" />`} />
+ </td>
+ </tr>
+ <tr id="cformtextarea-customClassNames">
+ <td className="text-primary fw-semibold">customClassNames<a href="#cformtextarea-customClassNames" aria-label="CFormTextarea customClassNames permalink" className="anchor-link after">#</a><span className="badge bg-success">v5.5.0+</span></td>
+ <td>undefined</td>
+ <td><code>{`Partial\<Record\<CombinedCustomClassNamesKeys`}</code>, <code>{`"FORM_CONTROL"`}</code>, <code>{`"FORM_CONTROL_PLAINTEXT"`}</code>, <code>{`"IS_INVALID"`}</code>, <code>{`"IS_VALID", string>>`}</code></td>
+ </tr>
+ <tr>
+ <td colSpan="3">
+ <p>Custom class names to override or extend the default CSS classes used within the <code>{`CFormTextarea`}</code> component.<br />
+Each key corresponds to a specific part of the Form Textarea component, allowing for granular styling control.</p>
+<p><strong>Important</strong>: If you want to <strong>replace</strong> an existing class name, prefix your custom class name with <code>{`!`}</code>.<br />
+This ensures that the original class is overridden rather than appended.</p>
+ <JSXDocs code={`// Overriding the default form control class
+const customClasses = {
+ FORM_CONTROL: '!my-custom-form-control',
+}
+
+<CFormTextarea customClassNames={customClasses} />
+
+// Extending the default form control class without replacing it
+const customClasses = {
+ FORM_CONTROL: 'my-additional-form-control',
+}
+
+<CFormTextarea customClassNames={customClasses} />`} />
+ </td>
</tr>
<tr id="cformtextarea-disabled">
<td className="text-primary fw-semibold">disabled<a href="#cformtextarea-disabled" aria-label="CFormTextarea disabled permalink" className="anchor-link after">#</a></td>
@@ -29,7 +58,10 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Toggle the disabled state for the component.</td>
+ <td colSpan="3">
+ <p>Toggle the disabled state for the form textarea component. When <code>{`true`}</code>, the textarea is disabled and non-interactive.</p>
+ <JSXDocs code={`<CFormTextarea disabled />`} />
+ </td>
</tr>
<tr id="cformtextarea-feedback">
<td className="text-primary fw-semibold">feedback<a href="#cformtextarea-feedback" aria-label="CFormTextarea feedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
@@ -37,7 +69,10 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Provide valuable, actionable feedback.</td>
+ <td colSpan="3">
+ <p>Provide valuable, actionable feedback.</p>
+ <JSXDocs code={`<CFormTextarea feedback="This field is required." />`} />
+ </td>
</tr>
<tr id="cformtextarea-feedbackInvalid">
<td className="text-primary fw-semibold">feedbackInvalid<a href="#cformtextarea-feedbackInvalid" aria-label="CFormTextarea feedbackInvalid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
@@ -45,7 +80,10 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Provide valuable, actionable feedback.</td>
+ <td colSpan="3">
+ <p>Provide valuable, actionable feedback when the form control is in an invalid state.</p>
+ <JSXDocs code={`<CFormTextarea feedbackInvalid="Invalid input." />`} />
+ </td>
</tr>
<tr id="cformtextarea-feedbackValid">
<td className="text-primary fw-semibold">feedbackValid<a href="#cformtextarea-feedbackValid" aria-label="CFormTextarea feedbackValid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
@@ -53,7 +91,10 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</td>
+ <td colSpan="3">
+ <p>Provide valuable, actionable feedback when the form control is in a valid state.</p>
+ <JSXDocs code={`<CFormTextarea feedbackValid="Looks good!" />`} />
+ </td>
</tr>
<tr id="cformtextarea-floatingClassName">
<td className="text-primary fw-semibold">floatingClassName<a href="#cformtextarea-floatingClassName" aria-label="CFormTextarea floatingClassName permalink" className="anchor-link after">#</a><span className="badge bg-success">4.5.0+</span></td>
@@ -61,7 +102,9 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the floating label wrapper.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the floating label wrapper.</p>
+ </td>
</tr>
<tr id="cformtextarea-floatingLabel">
<td className="text-primary fw-semibold">floatingLabel<a href="#cformtextarea-floatingLabel" aria-label="CFormTextarea floatingLabel permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
@@ -69,7 +112,10 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</td>
+ <td colSpan="3">
+ <p>Provide a floating label for the form control. This label will float above the input when focused or when the input has a value.</p>
+ <JSXDocs code={`<CFormControlWrapper floatingLabel="Email Address" />`} />
+ </td>
</tr>
<tr id="cformtextarea-invalid">
<td className="text-primary fw-semibold">invalid<a href="#cformtextarea-invalid" aria-label="CFormTextarea invalid permalink" className="anchor-link after">#</a></td>
@@ -77,7 +123,10 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set component validation state to invalid.</td>
+ <td colSpan="3">
+ <p>Set the form control validation state to invalid. When <code>{`true`}</code>, applies the invalid feedback styling.</p>
+ <JSXDocs code={`<CFormTextarea invalid feedback="Invalid input." />`} />
+ </td>
</tr>
<tr id="cformtextarea-label">
<td className="text-primary fw-semibold">label<a href="#cformtextarea-label" aria-label="CFormTextarea label permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
@@ -85,7 +134,10 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Add a caption for a component.</td>
+ <td colSpan="3">
+ <p>Add a caption for the form control. Typically used as a label.</p>
+ <JSXDocs code={`<CFormControlWrapper label="Username" />`} />
+ </td>
</tr>
<tr id="cformtextarea-onChange">
<td className="text-primary fw-semibold">onChange<a href="#cformtextarea-onChange" aria-label="CFormTextarea onChange permalink" className="anchor-link after">#</a></td>
@@ -93,7 +145,14 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
<td><code>{`ChangeEventHandler\<HTMLTextAreaElement>`}</code></td>
</tr>
<tr>
- <td colSpan="3">Method called immediately after the <code>{`value`}</code> prop changes.</td>
+ <td colSpan="3">
+ <p>Method called immediately after the <code>{`value`}</code> prop changes. Useful for handling textarea changes.</p>
+ <JSXDocs code={`const handleChange = (e) => {
+ console.log(e.target.value)
+}
+
+<CFormTextarea onChange={handleChange} />`} />
+ </td>
</tr>
<tr id="cformtextarea-plainText">
<td className="text-primary fw-semibold">plainText<a href="#cformtextarea-plainText" aria-label="CFormTextarea plainText permalink" className="anchor-link after">#</a></td>
@@ -101,7 +160,11 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side <code>{`readonly`}</code>.</td>
+ <td colSpan="3">
+ <p>Render the textarea component styled as plain text. Removes the default form field styling and preserves the correct margin and padding.<br />
+Recommended to use only alongside <code>{`readOnly`}</code>.</p>
+ <JSXDocs code={`<CFormTextarea plainText readOnly value="This is plain text." />`} />
+ </td>
</tr>
<tr id="cformtextarea-readOnly">
<td className="text-primary fw-semibold">readOnly<a href="#cformtextarea-readOnly" aria-label="CFormTextarea readOnly permalink" className="anchor-link after">#</a></td>
@@ -109,7 +172,10 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Toggle the readonly state for the component.</td>
+ <td colSpan="3">
+ <p>Toggle the readonly state for the form textarea component. When <code>{`true`}</code>, the textarea is read-only and cannot be modified.</p>
+ <JSXDocs code={`<CFormTextarea readOnly value="Read-Only Textarea" />`} />
+ </td>
</tr>
<tr id="cformtextarea-text">
<td className="text-primary fw-semibold">text<a href="#cformtextarea-text" aria-label="CFormTextarea text permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
@@ -117,7 +183,10 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Add helper text to the component.</td>
+ <td colSpan="3">
+ <p>Add helper text to the form control. Provides additional guidance to the user.</p>
+ <JSXDocs code={`<CFormControlWrapper text="Your username must be unique." />`} />
+ </td>
</tr>
<tr id="cformtextarea-tooltipFeedback">
<td className="text-primary fw-semibold">tooltipFeedback<a href="#cformtextarea-tooltipFeedback" aria-label="CFormTextarea tooltipFeedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
@@ -125,7 +194,10 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Display validation feedback in a styled tooltip.</td>
+ <td colSpan="3">
+ <p>Display validation feedback in a styled tooltip.</p>
+ <JSXDocs code={`<CFormTextarea invalid tooltipFeedback feedback="Invalid input." />`} />
+ </td>
</tr>
<tr id="cformtextarea-valid">
<td className="text-primary fw-semibold">valid<a href="#cformtextarea-valid" aria-label="CFormTextarea valid permalink" className="anchor-link after">#</a></td>
@@ -133,7 +205,10 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set component validation state to valid.</td>
+ <td colSpan="3">
+ <p>Set the form control validation state to valid. When <code>{`true`}</code>, applies the valid feedback styling.</p>
+ <JSXDocs code={`<CFormTextarea valid feedbackValid="Looks good!" />`} />
+ </td>
</tr>
<tr id="cformtextarea-value">
<td className="text-primary fw-semibold">value<a href="#cformtextarea-value" aria-label="CFormTextarea value permalink" className="anchor-link after">#</a></td>
@@ -141,7 +216,12 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
<td><code>{`string`}</code>, <code>{`number`}</code>, <code>{`string[]`}</code></td>
</tr>
<tr>
- <td colSpan="3">The <code>{`value`}</code> attribute of component.</td>
+ <td colSpan="3">
+ <p>The <code>{`value`}</code> attribute of the form textarea component. Represents the current value of the textarea.</p>
+ <JSXDocs code={`const [text, setText] = useState('')
+
+<CFormTextarea value={text} onChange={(e) => setText(e.target.value)} />`} />
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CHeader.api.mdx b/packages/docs/content/api/CHeader.api.mdx
index 692cee33..7670d5b2 100644
--- a/packages/docs/content/api/CHeader.api.mdx
+++ b/packages/docs/content/api/CHeader.api.mdx
@@ -21,7 +21,9 @@ import CHeader from '@coreui/react/src/components/header/CHeader'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
<tr id="cheader-container">
<td className="text-primary fw-semibold">container<a href="#cheader-container" aria-label="CHeader container permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CHeader from '@coreui/react/src/components/header/CHeader'
<td><code>{`boolean`}</code>, <code>{`"sm"`}</code>, <code>{`"md"`}</code>, <code>{`"lg"`}</code>, <code>{`"xl"`}</code>, <code>{`"xxl"`}</code>, <code>{`"fluid"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Defines optional container wrapping children elements.</td>
+ <td colSpan="3">
+ <p>Defines optional container wrapping children elements.</p>
+ </td>
</tr>
<tr id="cheader-position">
<td className="text-primary fw-semibold">position<a href="#cheader-position" aria-label="CHeader position permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CHeader from '@coreui/react/src/components/header/CHeader'
<td><code>{`"fixed"`}</code>, <code>{`"sticky"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Place header in non-static positions.</td>
+ <td colSpan="3">
+ <p>Place header in non-static positions.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CHeaderBrand.api.mdx b/packages/docs/content/api/CHeaderBrand.api.mdx
index 10369861..bd517329 100644
--- a/packages/docs/content/api/CHeaderBrand.api.mdx
+++ b/packages/docs/content/api/CHeaderBrand.api.mdx
@@ -21,7 +21,9 @@ import CHeaderBrand from '@coreui/react/src/components/header/CHeaderBrand'
<td><code>{`(ElementType & "symbol")`}</code>, <code>{`(ElementType & "object")`}</code>, <code>{`(ElementType & "a")`}</code>, <code>{`(ElementType & "slot")`}</code>, <code>{`(ElementType & "style")`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+ <td colSpan="3">
+ <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+ </td>
</tr>
<tr id="cheaderbrand-className">
<td className="text-primary fw-semibold">className<a href="#cheaderbrand-className" aria-label="CHeaderBrand className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CHeaderBrand from '@coreui/react/src/components/header/CHeaderBrand'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CHeaderDivider.api.mdx b/packages/docs/content/api/CHeaderDivider.api.mdx
index ba8343d3..6916f36a 100644
--- a/packages/docs/content/api/CHeaderDivider.api.mdx
+++ b/packages/docs/content/api/CHeaderDivider.api.mdx
@@ -21,7 +21,9 @@ import CHeaderDivider from '@coreui/react/src/components/header/CHeaderDivider'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CHeaderNav.api.mdx b/packages/docs/content/api/CHeaderNav.api.mdx
index c9538fbe..e7592905 100644
--- a/packages/docs/content/api/CHeaderNav.api.mdx
+++ b/packages/docs/content/api/CHeaderNav.api.mdx
@@ -21,7 +21,9 @@ import CHeaderNav from '@coreui/react/src/components/header/CHeaderNav'
<td><code>{`(ElementType & "symbol")`}</code>, <code>{`(ElementType & "object")`}</code>, <code>{`(ElementType & "ul")`}</code>, <code>{`(ElementType & "slot")`}</code>, <code>{`(ElementType & "style")`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+ <td colSpan="3">
+ <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+ </td>
</tr>
<tr id="cheadernav-className">
<td className="text-primary fw-semibold">className<a href="#cheadernav-className" aria-label="CHeaderNav className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CHeaderNav from '@coreui/react/src/components/header/CHeaderNav'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CHeaderText.api.mdx b/packages/docs/content/api/CHeaderText.api.mdx
index 7b2b049d..51fa4f6d 100644
--- a/packages/docs/content/api/CHeaderText.api.mdx
+++ b/packages/docs/content/api/CHeaderText.api.mdx
@@ -21,7 +21,9 @@ import CHeaderText from '@coreui/react/src/components/header/CHeaderText'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CHeaderToggler.api.mdx b/packages/docs/content/api/CHeaderToggler.api.mdx
index 9ed97ec8..b6318096 100644
--- a/packages/docs/content/api/CHeaderToggler.api.mdx
+++ b/packages/docs/content/api/CHeaderToggler.api.mdx
@@ -21,7 +21,9 @@ import CHeaderToggler from '@coreui/react/src/components/header/CHeaderToggler'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CIcon.api.mdx b/packages/docs/content/api/CIcon.api.mdx
index 922cde27..3b6f21b5 100644
--- a/packages/docs/content/api/CIcon.api.mdx
+++ b/packages/docs/content/api/CIcon.api.mdx
@@ -21,15 +21,19 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
<tr id="cicon-content">
- <td className="text-primary fw-semibold">content<a href="#cicon-content" aria-label="CIcon content permalink" className="anchor-link after">#</a><span className="badge bg-success">Deprecated undefined</span></td>
+ <td className="text-primary fw-semibold">content<a href="#cicon-content" aria-label="CIcon content permalink" className="anchor-link after">#</a><span className="badge bg-danger">Deprecated 3.0</span></td>
<td>undefined</td>
<td><code>{`string`}</code>, <code>{`string[]`}</code></td>
</tr>
<tr>
- <td colSpan="3">Use <code>{`icon={...}`}</code> instead of</td>
+ <td colSpan="3">
+ <p>Use <code>{`icon={...}`}</code> instead of</p>
+ </td>
</tr>
<tr id="cicon-customClassName">
<td className="text-primary fw-semibold">customClassName<a href="#cicon-customClassName" aria-label="CIcon customClassName permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon'
<td><code>{`string`}</code>, <code>{`string[]`}</code></td>
</tr>
<tr>
- <td colSpan="3">Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.</td>
+ <td colSpan="3">
+ <p>Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.</p>
+ </td>
</tr>
<tr id="cicon-height">
<td className="text-primary fw-semibold">height<a href="#cicon-height" aria-label="CIcon height permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon'
<td><code>{`number`}</code></td>
</tr>
<tr>
- <td colSpan="3">The height attribute defines the vertical length of an icon.</td>
+ <td colSpan="3">
+ <p>The height attribute defines the vertical length of an icon.</p>
+ </td>
</tr>
<tr id="cicon-icon">
<td className="text-primary fw-semibold">icon<a href="#cicon-icon" aria-label="CIcon icon permalink" className="anchor-link after">#</a></td>
@@ -53,15 +61,19 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon'
<td><code>{`string`}</code>, <code>{`string[]`}</code></td>
</tr>
<tr>
- <td colSpan="3">Name of the icon placed in React object or SVG content.</td>
+ <td colSpan="3">
+ <p>Name of the icon placed in React object or SVG content.</p>
+ </td>
</tr>
<tr id="cicon-name">
- <td className="text-primary fw-semibold">name<a href="#cicon-name" aria-label="CIcon name permalink" className="anchor-link after">#</a><span className="badge bg-success">Deprecated undefined</span></td>
+ <td className="text-primary fw-semibold">name<a href="#cicon-name" aria-label="CIcon name permalink" className="anchor-link after">#</a><span className="badge bg-danger">Deprecated 3.0</span></td>
<td>undefined</td>
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Use <code>{`icon="..."`}</code> instead of</td>
+ <td colSpan="3">
+ <p>Use <code>{`icon="..."`}</code> instead of</p>
+ </td>
</tr>
<tr id="cicon-size">
<td className="text-primary fw-semibold">size<a href="#cicon-size" aria-label="CIcon size permalink" className="anchor-link after">#</a></td>
@@ -69,7 +81,9 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon'
<td><code>{`"custom"`}</code>, <code>{`"custom-size"`}</code>, <code>{`"sm"`}</code>, <code>{`"lg"`}</code>, <code>{`"xl"`}</code>, <code>{`"xxl"`}</code>, <code>{`"3xl"`}</code>, <code>{`"4xl"`}</code>, <code>{`"5xl"`}</code>, <code>{`"6xl"`}</code>, <code>{`"7xl"`}</code>, <code>{`"8xl"`}</code>, <code>{`"9xl"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'.</td>
+ <td colSpan="3">
+ <p>Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl…9xl', 'custom', 'custom-size'.</p>
+ </td>
</tr>
<tr id="cicon-title">
<td className="text-primary fw-semibold">title<a href="#cicon-title" aria-label="CIcon title permalink" className="anchor-link after">#</a></td>
@@ -77,7 +91,9 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Title tag content.</td>
+ <td colSpan="3">
+ <p>Title tag content.</p>
+ </td>
</tr>
<tr id="cicon-use">
<td className="text-primary fw-semibold">use<a href="#cicon-use" aria-label="CIcon use permalink" className="anchor-link after">#</a></td>
@@ -85,7 +101,9 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">If defined component will be rendered using 'use' tag.</td>
+ <td colSpan="3">
+ <p>If defined component will be rendered using 'use' tag.</p>
+ </td>
</tr>
<tr id="cicon-viewBox">
<td className="text-primary fw-semibold">viewBox<a href="#cicon-viewBox" aria-label="CIcon viewBox permalink" className="anchor-link after">#</a></td>
@@ -93,7 +111,9 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">The viewBox attribute defines the position and dimension of an SVG viewport.</td>
+ <td colSpan="3">
+ <p>The viewBox attribute defines the position and dimension of an SVG viewport.</p>
+ </td>
</tr>
<tr id="cicon-width">
<td className="text-primary fw-semibold">width<a href="#cicon-width" aria-label="CIcon width permalink" className="anchor-link after">#</a></td>
@@ -101,7 +121,9 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon'
<td><code>{`number`}</code></td>
</tr>
<tr>
- <td colSpan="3">The width attribute defines the horizontal length of an icon.</td>
+ <td colSpan="3">
+ <p>The width attribute defines the horizontal length of an icon.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CIconSvg.api.mdx b/packages/docs/content/api/CIconSvg.api.mdx
index 66f86fd5..6b19c7ea 100644
--- a/packages/docs/content/api/CIconSvg.api.mdx
+++ b/packages/docs/content/api/CIconSvg.api.mdx
@@ -21,7 +21,9 @@ import CIconSvg from '@coreui/icons-react/src/CIconSvg'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
<tr id="ciconsvg-customClassName">
<td className="text-primary fw-semibold">customClassName<a href="#ciconsvg-customClassName" aria-label="CIconSvg customClassName permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CIconSvg from '@coreui/icons-react/src/CIconSvg'
<td><code>{`string`}</code>, <code>{`string[]`}</code></td>
</tr>
<tr>
- <td colSpan="3">Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.</td>
+ <td colSpan="3">
+ <p>Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.</p>
+ </td>
</tr>
<tr id="ciconsvg-height">
<td className="text-primary fw-semibold">height<a href="#ciconsvg-height" aria-label="CIconSvg height permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CIconSvg from '@coreui/icons-react/src/CIconSvg'
<td><code>{`number`}</code></td>
</tr>
<tr>
- <td colSpan="3">The height attribute defines the vertical length of an icon.</td>
+ <td colSpan="3">
+ <p>The height attribute defines the vertical length of an icon.</p>
+ </td>
</tr>
<tr id="ciconsvg-size">
<td className="text-primary fw-semibold">size<a href="#ciconsvg-size" aria-label="CIconSvg size permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CIconSvg from '@coreui/icons-react/src/CIconSvg'
<td><code>{`"custom"`}</code>, <code>{`"custom-size"`}</code>, <code>{`"sm"`}</code>, <code>{`"lg"`}</code>, <code>{`"xl"`}</code>, <code>{`"xxl"`}</code>, <code>{`"3xl"`}</code>, <code>{`"4xl"`}</code>, <code>{`"5xl"`}</code>, <code>{`"6xl"`}</code>, <code>{`"7xl"`}</code>, <code>{`"8xl"`}</code>, <code>{`"9xl"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'.</td>
+ <td colSpan="3">
+ <p>Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl…9xl', 'custom', 'custom-size'.</p>
+ </td>
</tr>
<tr id="ciconsvg-title">
<td className="text-primary fw-semibold">title<a href="#ciconsvg-title" aria-label="CIconSvg title permalink" className="anchor-link after">#</a></td>
@@ -53,7 +61,9 @@ import CIconSvg from '@coreui/icons-react/src/CIconSvg'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Title tag content.</td>
+ <td colSpan="3">
+ <p>Title tag content.</p>
+ </td>
</tr>
<tr id="ciconsvg-width">
<td className="text-primary fw-semibold">width<a href="#ciconsvg-width" aria-label="CIconSvg width permalink" className="anchor-link after">#</a></td>
@@ -61,7 +71,9 @@ import CIconSvg from '@coreui/icons-react/src/CIconSvg'
<td><code>{`number`}</code></td>
</tr>
<tr>
- <td colSpan="3">The width attribute defines the horizontal length of an icon.</td>
+ <td colSpan="3">
+ <p>The width attribute defines the horizontal length of an icon.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CImage.api.mdx b/packages/docs/content/api/CImage.api.mdx
index 2b619e44..ea5c6c03 100644
--- a/packages/docs/content/api/CImage.api.mdx
+++ b/packages/docs/content/api/CImage.api.mdx
@@ -21,7 +21,9 @@ import CImage from '@coreui/react/src/components/image/CImage'
<td><code>{`"start"`}</code>, <code>{`"center"`}</code>, <code>{`"end"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set the horizontal aligment.</td>
+ <td colSpan="3">
+ <p>Set the horizontal aligment.</p>
+ </td>
</tr>
<tr id="cimage-className">
<td className="text-primary fw-semibold">className<a href="#cimage-className" aria-label="CImage className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CImage from '@coreui/react/src/components/image/CImage'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
<tr id="cimage-fluid">
<td className="text-primary fw-semibold">fluid<a href="#cimage-fluid" aria-label="CImage fluid permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CImage from '@coreui/react/src/components/image/CImage'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Make image responsive.</td>
+ <td colSpan="3">
+ <p>Make image responsive.</p>
+ </td>
</tr>
<tr id="cimage-rounded">
<td className="text-primary fw-semibold">rounded<a href="#cimage-rounded" aria-label="CImage rounded permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CImage from '@coreui/react/src/components/image/CImage'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Make image rounded.</td>
+ <td colSpan="3">
+ <p>Make image rounded.</p>
+ </td>
</tr>
<tr id="cimage-thumbnail">
<td className="text-primary fw-semibold">thumbnail<a href="#cimage-thumbnail" aria-label="CImage thumbnail permalink" className="anchor-link after">#</a></td>
@@ -53,7 +61,9 @@ import CImage from '@coreui/react/src/components/image/CImage'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Give an image a rounded 1px border appearance.</td>
+ <td colSpan="3">
+ <p>Give an image a rounded 1px border appearance.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CInputGroup.api.mdx b/packages/docs/content/api/CInputGroup.api.mdx
index 8e11a1cb..50e0b885 100644
--- a/packages/docs/content/api/CInputGroup.api.mdx
+++ b/packages/docs/content/api/CInputGroup.api.mdx
@@ -21,7 +21,36 @@ import CInputGroup from '@coreui/react/src/components/form/CInputGroup'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of additional CSS class names to apply to the input group component.</p>
+ <JSXDocs code={`<CInputGroup className="my-custom-input-group" />`} />
+ </td>
+ </tr>
+ <tr id="cinputgroup-customClassNames">
+ <td className="text-primary fw-semibold">customClassNames<a href="#cinputgroup-customClassNames" aria-label="CInputGroup customClassNames permalink" className="anchor-link after">#</a><span className="badge bg-success">v5.5.0+</span></td>
+ <td>undefined</td>
+ <td><code>{`Partial\<{ INPUT_GROUP: string; INPUT_GROUP_SM: string; INPUT_GROUP_LG: string; }>`}</code></td>
+ </tr>
+ <tr>
+ <td colSpan="3">
+ <p>Custom class names to override or extend the default CSS classes used within the <code>{`CInputGroup`}</code> component.<br />
+Each key corresponds to a specific part of the Input Group component, allowing for granular styling control.</p>
+<p><strong>Important</strong>: If you want to <strong>replace</strong> an existing class name, prefix your custom class name with <code>{`!`}</code>.<br />
+This ensures that the original class is overridden rather than appended.</p>
+ <JSXDocs code={`// Overriding the default input group class
+const customClasses = {
+ INPUT_GROUP: '!my-custom-input-group',
+}
+
+<CInputGroup customClassNames={customClasses} />
+
+// Extending the default input group class without replacing it
+const customClasses = {
+ INPUT_GROUP: 'my-additional-input-group',
+}
+
+<CInputGroup customClassNames={customClasses} />`} />
+ </td>
</tr>
<tr id="cinputgroup-size">
<td className="text-primary fw-semibold">size<a href="#cinputgroup-size" aria-label="CInputGroup size permalink" className="anchor-link after">#</a></td>
@@ -29,7 +58,16 @@ import CInputGroup from '@coreui/react/src/components/form/CInputGroup'
<td><code>{`"sm"`}</code>, <code>{`"lg"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Size the component small or large.</td>
+ <td colSpan="3">
+ <p>Size the input group component as small (<code>{`sm`}</code>) or large (<code>{`lg`}</code>).</p>
+ <JSXDocs code={`<CInputGroup size="sm">
+ <CFormInput placeholder="Small input" />
+</CInputGroup>
+
+<CInputGroup size="lg">
+ <CFormInput placeholder="Large input" />
+</CInputGroup>`} />
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CInputGroupText.api.mdx b/packages/docs/content/api/CInputGroupText.api.mdx
index 7333ae46..0bd8c6d4 100644
--- a/packages/docs/content/api/CInputGroupText.api.mdx
+++ b/packages/docs/content/api/CInputGroupText.api.mdx
@@ -21,7 +21,12 @@ import CInputGroupText from '@coreui/react/src/components/form/CInputGroupText'
<td><code>{`(ElementType & "symbol")`}</code>, <code>{`(ElementType & "object")`}</code>, <code>{`(ElementType & "span")`}</code>, <code>{`(ElementType & "form")`}</code>, <code>{`(ElementType & "slot")`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+ <td colSpan="3">
+ <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+ <JSXDocs code={`<CInputGroupText as="label">Label Text</CInputGroupText>
+
+<CInputGroupText as={CustomComponent}>Custom Component Text</CInputGroupText>`} />
+ </td>
</tr>
<tr id="cinputgrouptext-className">
<td className="text-primary fw-semibold">className<a href="#cinputgrouptext-className" aria-label="CInputGroupText className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +34,36 @@ import CInputGroupText from '@coreui/react/src/components/form/CInputGroupText'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of additional CSS class names to apply to the input group text component.</p>
+ <JSXDocs code={`<CInputGroupText className="my-custom-input-group-text" />`} />
+ </td>
+ </tr>
+ <tr id="cinputgrouptext-customClassNames">
+ <td className="text-primary fw-semibold">customClassNames<a href="#cinputgrouptext-customClassNames" aria-label="CInputGroupText customClassNames permalink" className="anchor-link after">#</a><span className="badge bg-success">v5.5.0+</span></td>
+ <td>undefined</td>
+ <td><code>{`Partial\<{ INPUT_GROUP_TEXT: string; }>`}</code></td>
+ </tr>
+ <tr>
+ <td colSpan="3">
+ <p>Custom class names to override or extend the default CSS classes used within the <code>{`CInputGroupText`}</code> component.<br />
+Each key corresponds to a specific part of the Input Group Text component, allowing for granular styling control.</p>
+<p><strong>Important</strong>: If you want to <strong>replace</strong> an existing class name, prefix your custom class name with <code>{`!`}</code>.<br />
+This ensures that the original class is overridden rather than appended.</p>
+ <JSXDocs code={`// Overriding the default input group text class
+const customClasses = {
+ INPUT_GROUP_TEXT: '!my-custom-input-group-text',
+}
+
+<CInputGroupText customClassNames={customClasses}>Custom Text</CInputGroupText>
+
+// Extending the default input group text class without replacing it
+const customClasses = {
+ INPUT_GROUP_TEXT: 'my-additional-input-group-text',
+}
+
+<CInputGroupText customClassNames={customClasses}>Extended Text</CInputGroupText>`} />
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CLink.api.mdx b/packages/docs/content/api/CLink.api.mdx
index 297687c3..621c917b 100644
--- a/packages/docs/content/api/CLink.api.mdx
+++ b/packages/docs/content/api/CLink.api.mdx
@@ -21,7 +21,9 @@ import CLink from '@coreui/react/src/components/link/CLink'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Toggle the active state for the component.</td>
+ <td colSpan="3">
+ <p>Toggle the active state for the component.</p>
+ </td>
</tr>
<tr id="clink-as">
<td className="text-primary fw-semibold">as<a href="#clink-as" aria-label="CLink as permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CLink from '@coreui/react/src/components/link/CLink'
<td><code>{`(ElementType & "symbol")`}</code>, <code>{`(ElementType & "object")`}</code>, <code>{`(ElementType & "a")`}</code>, <code>{`(ElementType & "cite")`}</code>, <code>{`(ElementType & "data")`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+ <td colSpan="3">
+ <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+ </td>
</tr>
<tr id="clink-className">
<td className="text-primary fw-semibold">className<a href="#clink-className" aria-label="CLink className permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CLink from '@coreui/react/src/components/link/CLink'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
<tr id="clink-disabled">
<td className="text-primary fw-semibold">disabled<a href="#clink-disabled" aria-label="CLink disabled permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CLink from '@coreui/react/src/components/link/CLink'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Toggle the disabled state for the component.</td>
+ <td colSpan="3">
+ <p>Toggle the disabled state for the component.</p>
+ </td>
</tr>
<tr id="clink-href">
<td className="text-primary fw-semibold">href<a href="#clink-href" aria-label="CLink href permalink" className="anchor-link after">#</a></td>
@@ -53,7 +61,9 @@ import CLink from '@coreui/react/src/components/link/CLink'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">The href attribute specifies the URL of the page the link goes to.</td>
+ <td colSpan="3">
+ <p>The href attribute specifies the URL of the page the link goes to.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CListGroup.api.mdx b/packages/docs/content/api/CListGroup.api.mdx
index 5ff0ad27..30dec855 100644
--- a/packages/docs/content/api/CListGroup.api.mdx
+++ b/packages/docs/content/api/CListGroup.api.mdx
@@ -21,7 +21,9 @@ import CListGroup from '@coreui/react/src/components/list-group/CListGroup'
<td><code>{`(ElementType & "symbol")`}</code>, <code>{`(ElementType & "object")`}</code>, <code>{`(ElementType & "ul")`}</code>, <code>{`(ElementType & "slot")`}</code>, <code>{`(ElementType & "style")`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+ <td colSpan="3">
+ <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+ </td>
</tr>
<tr id="clistgroup-className">
<td className="text-primary fw-semibold">className<a href="#clistgroup-className" aria-label="CListGroup className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CListGroup from '@coreui/react/src/components/list-group/CListGroup'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
<tr id="clistgroup-flush">
<td className="text-primary fw-semibold">flush<a href="#clistgroup-flush" aria-label="CListGroup flush permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CListGroup from '@coreui/react/src/components/list-group/CListGroup'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Remove some borders and rounded corners to render list group items edge-to-edge in a parent component (e.g., <code>{`\<CCard>`}</code>).</td>
+ <td colSpan="3">
+ <p>Remove some borders and rounded corners to render list group items edge-to-edge in a parent component (e.g., <code>{`<CCard>`}</code>).</p>
+ </td>
</tr>
<tr id="clistgroup-layout">
<td className="text-primary fw-semibold">layout<a href="#clistgroup-layout" aria-label="CListGroup layout permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CListGroup from '@coreui/react/src/components/list-group/CListGroup'
<td><code>{`"horizontal"`}</code>, <code>{`"horizontal-sm"`}</code>, <code>{`"horizontal-md"`}</code>, <code>{`"horizontal-lg"`}</code>, <code>{`"horizontal-xl"`}</code>, <code>{`"horizontal-xxl"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Specify a layout type.</td>
+ <td colSpan="3">
+ <p>Specify a layout type.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CListGroupItem.api.mdx b/packages/docs/content/api/CListGroupItem.api.mdx
index ae42cde7..84b91e1d 100644
--- a/packages/docs/content/api/CListGroupItem.api.mdx
+++ b/packages/docs/content/api/CListGroupItem.api.mdx
@@ -21,7 +21,9 @@ import CListGroupItem from '@coreui/react/src/components/list-group/CListGroupIt
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Toggle the active state for the component.</td>
+ <td colSpan="3">
+ <p>Toggle the active state for the component.</p>
+ </td>
</tr>
<tr id="clistgroupitem-as">
<td className="text-primary fw-semibold">as<a href="#clistgroupitem-as" aria-label="CListGroupItem as permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CListGroupItem from '@coreui/react/src/components/list-group/CListGroupIt
<td><code>{`(ElementType & "symbol")`}</code>, <code>{`(ElementType & "object")`}</code>, <code>{`(ElementType & "li")`}</code>, <code>{`(ElementType & "slot")`}</code>, <code>{`(ElementType & "style")`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+ <td colSpan="3">
+ <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+ </td>
</tr>
<tr id="clistgroupitem-className">
<td className="text-primary fw-semibold">className<a href="#clistgroupitem-className" aria-label="CListGroupItem className permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CListGroupItem from '@coreui/react/src/components/list-group/CListGroupIt
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
<tr id="clistgroupitem-color">
<td className="text-primary fw-semibold">color<a href="#clistgroupitem-color" aria-label="CListGroupItem color permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CListGroupItem from '@coreui/react/src/components/list-group/CListGroupIt
<td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+ <td colSpan="3">
+ <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+ </td>
</tr>
<tr id="clistgroupitem-disabled">
<td className="text-primary fw-semibold">disabled<a href="#clistgroupitem-disabled" aria-label="CListGroupItem disabled permalink" className="anchor-link after">#</a></td>
@@ -53,7 +61,9 @@ import CListGroupItem from '@coreui/react/src/components/list-group/CListGroupIt
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Toggle the disabled state for the component.</td>
+ <td colSpan="3">
+ <p>Toggle the disabled state for the component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CModal.api.mdx b/packages/docs/content/api/CModal.api.mdx
index 5d55be8e..0e9608a9 100644
--- a/packages/docs/content/api/CModal.api.mdx
+++ b/packages/docs/content/api/CModal.api.mdx
@@ -21,7 +21,9 @@ import CModal from '@coreui/react/src/components/modal/CModal'
<td><code>{`"top"`}</code>, <code>{`"center"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Align the modal in the center or top of the screen.</td>
+ <td colSpan="3">
+ <p>Align the modal in the center or top of the screen.</p>
+ </td>
</tr>
<tr id="cmodal-backdrop">
<td className="text-primary fw-semibold">backdrop<a href="#cmodal-backdrop" aria-label="CModal backdrop permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CModal from '@coreui/react/src/components/modal/CModal'
<td><code>{`boolean`}</code>, <code>{`"static"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Apply a backdrop on body while modal is open.</td>
+ <td colSpan="3">
+ <p>Apply a backdrop on body while modal is open.</p>
+ </td>
</tr>
<tr id="cmodal-className">
<td className="text-primary fw-semibold">className<a href="#cmodal-className" aria-label="CModal className permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CModal from '@coreui/react/src/components/modal/CModal'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="cmodal-container">
<td className="text-primary fw-semibold">container<a href="#cmodal-container" aria-label="CModal container permalink" className="anchor-link after">#</a><span className="badge bg-success">5.3.0+</span></td>
@@ -45,7 +51,9 @@ import CModal from '@coreui/react/src/components/modal/CModal'
<td><code>{`Element`}</code>, <code>{`DocumentFragment`}</code>, <code>{`(() => Element | DocumentFragment)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Appends the react modal to a specific element. You can pass an HTML element or function that returns a single element. By default <code>{`document.body`}</code>.</td>
+ <td colSpan="3">
+ <p>Appends the react modal to a specific element. You can pass an HTML element or function that returns a single element. By default <code>{`document.body`}</code>.</p>
+ </td>
</tr>
<tr id="cmodal-focus">
<td className="text-primary fw-semibold">focus<a href="#cmodal-focus" aria-label="CModal focus permalink" className="anchor-link after">#</a><span className="badge bg-success">4.10.0+</span></td>
@@ -53,7 +61,9 @@ import CModal from '@coreui/react/src/components/modal/CModal'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Puts the focus on the modal when shown.</td>
+ <td colSpan="3">
+ <p>Puts the focus on the modal when shown.</p>
+ </td>
</tr>
<tr id="cmodal-fullscreen">
<td className="text-primary fw-semibold">fullscreen<a href="#cmodal-fullscreen" aria-label="CModal fullscreen permalink" className="anchor-link after">#</a></td>
@@ -61,7 +71,9 @@ import CModal from '@coreui/react/src/components/modal/CModal'
<td><code>{`boolean`}</code>, <code>{`"sm"`}</code>, <code>{`"md"`}</code>, <code>{`"lg"`}</code>, <code>{`"xl"`}</code>, <code>{`"xxl"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set modal to covers the entire user viewport.</td>
+ <td colSpan="3">
+ <p>Set modal to covers the entire user viewport.</p>
+ </td>
</tr>
<tr id="cmodal-keyboard">
<td className="text-primary fw-semibold">keyboard<a href="#cmodal-keyboard" aria-label="CModal keyboard permalink" className="anchor-link after">#</a></td>
@@ -69,7 +81,9 @@ import CModal from '@coreui/react/src/components/modal/CModal'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Closes the modal when escape key is pressed.</td>
+ <td colSpan="3">
+ <p>Closes the modal when escape key is pressed.</p>
+ </td>
</tr>
<tr id="cmodal-onClose">
<td className="text-primary fw-semibold">onClose<a href="#cmodal-onClose" aria-label="CModal onClose permalink" className="anchor-link after">#</a></td>
@@ -77,7 +91,9 @@ import CModal from '@coreui/react/src/components/modal/CModal'
<td><code>{`() => void`}</code></td>
</tr>
<tr>
- <td colSpan="3">Callback fired when the component requests to be closed.</td>
+ <td colSpan="3">
+ <p>Callback fired when the component requests to be closed.</p>
+ </td>
</tr>
<tr id="cmodal-onClosePrevented">
<td className="text-primary fw-semibold">onClosePrevented<a href="#cmodal-onClosePrevented" aria-label="CModal onClosePrevented permalink" className="anchor-link after">#</a></td>
@@ -85,7 +101,9 @@ import CModal from '@coreui/react/src/components/modal/CModal'
<td><code>{`() => void`}</code></td>
</tr>
<tr>
- <td colSpan="3">Callback fired when the component requests to be closed.</td>
+ <td colSpan="3">
+ <p>Callback fired when the component requests to be closed.</p>
+ </td>
</tr>
<tr id="cmodal-onShow">
<td className="text-primary fw-semibold">onShow<a href="#cmodal-onShow" aria-label="CModal onShow permalink" className="anchor-link after">#</a></td>
@@ -93,7 +111,9 @@ import CModal from '@coreui/react/src/components/modal/CModal'
<td><code>{`() => void`}</code></td>
</tr>
<tr>
- <td colSpan="3">Callback fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed with the keyboard option set to false.</td>
+ <td colSpan="3">
+ <p>Callback fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed with the keyboard option set to false.</p>
+ </td>
</tr>
<tr id="cmodal-portal">
<td className="text-primary fw-semibold">portal<a href="#cmodal-portal" aria-label="CModal portal permalink" className="anchor-link after">#</a></td>
@@ -101,7 +121,9 @@ import CModal from '@coreui/react/src/components/modal/CModal'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Generates modal using createPortal.</td>
+ <td colSpan="3">
+ <p>Generates modal using createPortal.</p>
+ </td>
</tr>
<tr id="cmodal-scrollable">
<td className="text-primary fw-semibold">scrollable<a href="#cmodal-scrollable" aria-label="CModal scrollable permalink" className="anchor-link after">#</a></td>
@@ -109,7 +131,9 @@ import CModal from '@coreui/react/src/components/modal/CModal'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Create a scrollable modal that allows scrolling the modal body.</td>
+ <td colSpan="3">
+ <p>Create a scrollable modal that allows scrolling the modal body.</p>
+ </td>
</tr>
<tr id="cmodal-size">
<td className="text-primary fw-semibold">size<a href="#cmodal-size" aria-label="CModal size permalink" className="anchor-link after">#</a></td>
@@ -117,7 +141,9 @@ import CModal from '@coreui/react/src/components/modal/CModal'
<td><code>{`"sm"`}</code>, <code>{`"lg"`}</code>, <code>{`"xl"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Size the component small, large, or extra large.</td>
+ <td colSpan="3">
+ <p>Size the component small, large, or extra large.</p>
+ </td>
</tr>
<tr id="cmodal-transition">
<td className="text-primary fw-semibold">transition<a href="#cmodal-transition" aria-label="CModal transition permalink" className="anchor-link after">#</a></td>
@@ -125,7 +151,9 @@ import CModal from '@coreui/react/src/components/modal/CModal'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Remove animation to create modal that simply appear rather than fade in to view.</td>
+ <td colSpan="3">
+ <p>Remove animation to create modal that simply appear rather than fade in to view.</p>
+ </td>
</tr>
<tr id="cmodal-unmountOnClose">
<td className="text-primary fw-semibold">unmountOnClose<a href="#cmodal-unmountOnClose" aria-label="CModal unmountOnClose permalink" className="anchor-link after">#</a></td>
@@ -133,7 +161,9 @@ import CModal from '@coreui/react/src/components/modal/CModal'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false.</td>
+ <td colSpan="3">
+ <p>By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false.</p>
+ </td>
</tr>
<tr id="cmodal-visible">
<td className="text-primary fw-semibold">visible<a href="#cmodal-visible" aria-label="CModal visible permalink" className="anchor-link after">#</a></td>
@@ -141,7 +171,9 @@ import CModal from '@coreui/react/src/components/modal/CModal'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Toggle the visibility of modal component.</td>
+ <td colSpan="3">
+ <p>Toggle the visibility of modal component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CModalBody.api.mdx b/packages/docs/content/api/CModalBody.api.mdx
index db2858ae..42c701f2 100644
--- a/packages/docs/content/api/CModalBody.api.mdx
+++ b/packages/docs/content/api/CModalBody.api.mdx
@@ -21,7 +21,9 @@ import CModalBody from '@coreui/react/src/components/modal/CModalBody'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CModalContent.api.mdx b/packages/docs/content/api/CModalContent.api.mdx
index 65bcb134..9b19d13b 100644
--- a/packages/docs/content/api/CModalContent.api.mdx
+++ b/packages/docs/content/api/CModalContent.api.mdx
@@ -21,7 +21,9 @@ import CModalContent from '@coreui/react/src/components/modal/CModalContent'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CModalDialog.api.mdx b/packages/docs/content/api/CModalDialog.api.mdx
index aa9ee1e4..768c38ca 100644
--- a/packages/docs/content/api/CModalDialog.api.mdx
+++ b/packages/docs/content/api/CModalDialog.api.mdx
@@ -21,7 +21,9 @@ import CModalDialog from '@coreui/react/src/components/modal/CModalDialog'
<td><code>{`"top"`}</code>, <code>{`"center"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Align the modal in the center or top of the screen.</td>
+ <td colSpan="3">
+ <p>Align the modal in the center or top of the screen.</p>
+ </td>
</tr>
<tr id="cmodaldialog-className">
<td className="text-primary fw-semibold">className<a href="#cmodaldialog-className" aria-label="CModalDialog className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CModalDialog from '@coreui/react/src/components/modal/CModalDialog'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="cmodaldialog-fullscreen">
<td className="text-primary fw-semibold">fullscreen<a href="#cmodaldialog-fullscreen" aria-label="CModalDialog fullscreen permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CModalDialog from '@coreui/react/src/components/modal/CModalDialog'
<td><code>{`boolean`}</code>, <code>{`"sm"`}</code>, <code>{`"md"`}</code>, <code>{`"lg"`}</code>, <code>{`"xl"`}</code>, <code>{`"xxl"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set modal to covers the entire user viewport.</td>
+ <td colSpan="3">
+ <p>Set modal to covers the entire user viewport.</p>
+ </td>
</tr>
<tr id="cmodaldialog-scrollable">
<td className="text-primary fw-semibold">scrollable<a href="#cmodaldialog-scrollable" aria-label="CModalDialog scrollable permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CModalDialog from '@coreui/react/src/components/modal/CModalDialog'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Does the modal dialog itself scroll, or does the whole dialog scroll within the window.</td>
+ <td colSpan="3">
+ <p>Does the modal dialog itself scroll, or does the whole dialog scroll within the window.</p>
+ </td>
</tr>
<tr id="cmodaldialog-size">
<td className="text-primary fw-semibold">size<a href="#cmodaldialog-size" aria-label="CModalDialog size permalink" className="anchor-link after">#</a></td>
@@ -53,7 +61,9 @@ import CModalDialog from '@coreui/react/src/components/modal/CModalDialog'
<td><code>{`"sm"`}</code>, <code>{`"lg"`}</code>, <code>{`"xl"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Size the component small, large, or extra large.</td>
+ <td colSpan="3">
+ <p>Size the component small, large, or extra large.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CModalFooter.api.mdx b/packages/docs/content/api/CModalFooter.api.mdx
index 25a3d54e..f413e986 100644
--- a/packages/docs/content/api/CModalFooter.api.mdx
+++ b/packages/docs/content/api/CModalFooter.api.mdx
@@ -21,7 +21,9 @@ import CModalFooter from '@coreui/react/src/components/modal/CModalFooter'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CModalHeader.api.mdx b/packages/docs/content/api/CModalHeader.api.mdx
index 3bb8fdb8..ca5db296 100644
--- a/packages/docs/content/api/CModalHeader.api.mdx
+++ b/packages/docs/content/api/CModalHeader.api.mdx
@@ -21,7 +21,9 @@ import CModalHeader from '@coreui/react/src/components/modal/CModalHeader'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="cmodalheader-closeButton">
<td className="text-primary fw-semibold">closeButton<a href="#cmodalheader-closeButton" aria-label="CModalHeader closeButton permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CModalHeader from '@coreui/react/src/components/modal/CModalHeader'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Add a close button component to the header.</td>
+ <td colSpan="3">
+ <p>Add a close button component to the header.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CModalTitle.api.mdx b/packages/docs/content/api/CModalTitle.api.mdx
index 78393a10..7876d479 100644
--- a/packages/docs/content/api/CModalTitle.api.mdx
+++ b/packages/docs/content/api/CModalTitle.api.mdx
@@ -21,7 +21,9 @@ import CModalTitle from '@coreui/react/src/components/modal/CModalTitle'
<td><code>{`(ElementType & "symbol")`}</code>, <code>{`(ElementType & "object")`}</code>, <code>{`(ElementType & "h5")`}</code>, <code>{`(ElementType & "slot")`}</code>, <code>{`(ElementType & "style")`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+ <td colSpan="3">
+ <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+ </td>
</tr>
<tr id="cmodaltitle-className">
<td className="text-primary fw-semibold">className<a href="#cmodaltitle-className" aria-label="CModalTitle className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CModalTitle from '@coreui/react/src/components/modal/CModalTitle'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CNav.api.mdx b/packages/docs/content/api/CNav.api.mdx
index 7a216738..2d6cafd2 100644
--- a/packages/docs/content/api/CNav.api.mdx
+++ b/packages/docs/content/api/CNav.api.mdx
@@ -21,7 +21,9 @@ import CNav from '@coreui/react/src/components/nav/CNav'
<td><code>{`(ElementType & "symbol")`}</code>, <code>{`(ElementType & "object")`}</code>, <code>{`(ElementType & "ul")`}</code>, <code>{`(ElementType & "slot")`}</code>, <code>{`(ElementType & "style")`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+ <td colSpan="3">
+ <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+ </td>
</tr>
<tr id="cnav-className">
<td className="text-primary fw-semibold">className<a href="#cnav-className" aria-label="CNav className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CNav from '@coreui/react/src/components/nav/CNav'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="cnav-layout">
<td className="text-primary fw-semibold">layout<a href="#cnav-layout" aria-label="CNav layout permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CNav from '@coreui/react/src/components/nav/CNav'
<td><code>{`"fill"`}</code>, <code>{`"justified"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Specify a layout type for component.</td>
+ <td colSpan="3">
+ <p>Specify a layout type for component.</p>
+ </td>
</tr>
<tr id="cnav-variant">
<td className="text-primary fw-semibold">variant<a href="#cnav-variant" aria-label="CNav variant permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CNav from '@coreui/react/src/components/nav/CNav'
<td><code>{`"pills"`}</code>, <code>{`"tabs"`}</code>, <code>{`"underline"`}</code>, <code>{`"underline-border"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set the nav variant to tabs or pills.</td>
+ <td colSpan="3">
+ <p>Set the nav variant to tabs or pills.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CNavGroup.api.mdx b/packages/docs/content/api/CNavGroup.api.mdx
index 83b3d884..0e0714d6 100644
--- a/packages/docs/content/api/CNavGroup.api.mdx
+++ b/packages/docs/content/api/CNavGroup.api.mdx
@@ -21,7 +21,9 @@ import CNavGroup from '@coreui/react/src/components/nav/CNavGroup'
<td><code>{`(ElementType & "symbol")`}</code>, <code>{`(ElementType & "object")`}</code>, <code>{`(ElementType & "li")`}</code>, <code>{`(ElementType & "slot")`}</code>, <code>{`(ElementType & "style")`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+ <td colSpan="3">
+ <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+ </td>
</tr>
<tr id="cnavgroup-className">
<td className="text-primary fw-semibold">className<a href="#cnavgroup-className" aria-label="CNavGroup className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CNavGroup from '@coreui/react/src/components/nav/CNavGroup'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
<tr id="cnavgroup-compact">
<td className="text-primary fw-semibold">compact<a href="#cnavgroup-compact" aria-label="CNavGroup compact permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CNavGroup from '@coreui/react/src/components/nav/CNavGroup'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Make nav group more compact by cutting all <code>{`padding`}</code> in half.</td>
+ <td colSpan="3">
+ <p>Make nav group more compact by cutting all <code>{`padding`}</code> in half.</p>
+ </td>
</tr>
<tr id="cnavgroup-toggler">
<td className="text-primary fw-semibold">toggler<a href="#cnavgroup-toggler" aria-label="CNavGroup toggler permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CNavGroup from '@coreui/react/src/components/nav/CNavGroup'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set group toggler label.</td>
+ <td colSpan="3">
+ <p>Set group toggler label.</p>
+ </td>
</tr>
<tr id="cnavgroup-visible">
<td className="text-primary fw-semibold">visible<a href="#cnavgroup-visible" aria-label="CNavGroup visible permalink" className="anchor-link after">#</a></td>
@@ -53,7 +61,9 @@ import CNavGroup from '@coreui/react/src/components/nav/CNavGroup'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Show nav group items.</td>
+ <td colSpan="3">
+ <p>Show nav group items.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CNavGroupItems.api.mdx b/packages/docs/content/api/CNavGroupItems.api.mdx
index 3b911547..3b0df119 100644
--- a/packages/docs/content/api/CNavGroupItems.api.mdx
+++ b/packages/docs/content/api/CNavGroupItems.api.mdx
@@ -21,7 +21,9 @@ import CNavGroupItems from '@coreui/react/src/components/nav/CNavGroupItems'
<td><code>{`(ElementType & "symbol")`}</code>, <code>{`(ElementType & "object")`}</code>, <code>{`(ElementType & "ul")`}</code>, <code>{`(ElementType & "slot")`}</code>, <code>{`(ElementType & "style")`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+ <td colSpan="3">
+ <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+ </td>
</tr>
<tr id="cnavgroupitems-className">
<td className="text-primary fw-semibold">className<a href="#cnavgroupitems-className" aria-label="CNavGroupItems className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CNavGroupItems from '@coreui/react/src/components/nav/CNavGroupItems'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CNavItem.api.mdx b/packages/docs/content/api/CNavItem.api.mdx
index 5d629503..4e260edb 100644
--- a/packages/docs/content/api/CNavItem.api.mdx
+++ b/packages/docs/content/api/CNavItem.api.mdx
@@ -21,7 +21,9 @@ import CNavItem from '@coreui/react/src/components/nav/CNavItem'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Toggle the active state for the component.</td>
+ <td colSpan="3">
+ <p>Toggle the active state for the component.</p>
+ </td>
</tr>
<tr id="cnavitem-as">
<td className="text-primary fw-semibold">as<a href="#cnavitem-as" aria-label="CNavItem as permalink" className="anchor-link after">#</a><span className="badge bg-success">5.0.0+</span></td>
@@ -29,7 +31,9 @@ import CNavItem from '@coreui/react/src/components/nav/CNavItem'
<td><code>{`(ElementType & "symbol")`}</code>, <code>{`(ElementType & "object")`}</code>, <code>{`(ElementType & "li")`}</code>, <code>{`(ElementType & "cite")`}</code>, <code>{`(ElementType & "data")`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+ <td colSpan="3">
+ <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+ </td>
</tr>
<tr id="cnavitem-className">
<td className="text-primary fw-semibold">className<a href="#cnavitem-className" aria-label="CNavItem className permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CNavItem from '@coreui/react/src/components/nav/CNavItem'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
<tr id="cnavitem-disabled">
<td className="text-primary fw-semibold">disabled<a href="#cnavitem-disabled" aria-label="CNavItem disabled permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CNavItem from '@coreui/react/src/components/nav/CNavItem'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Toggle the disabled state for the component.</td>
+ <td colSpan="3">
+ <p>Toggle the disabled state for the component.</p>
+ </td>
</tr>
<tr id="cnavitem-href">
<td className="text-primary fw-semibold">href<a href="#cnavitem-href" aria-label="CNavItem href permalink" className="anchor-link after">#</a></td>
@@ -53,7 +61,9 @@ import CNavItem from '@coreui/react/src/components/nav/CNavItem'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">The href attribute specifies the URL of the page the link goes to.</td>
+ <td colSpan="3">
+ <p>The href attribute specifies the URL of the page the link goes to.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CNavLink.api.mdx b/packages/docs/content/api/CNavLink.api.mdx
index f3154093..7e3c45c9 100644
--- a/packages/docs/content/api/CNavLink.api.mdx
+++ b/packages/docs/content/api/CNavLink.api.mdx
@@ -21,7 +21,9 @@ import CNavLink from '@coreui/react/src/components/nav/CNavLink'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Toggle the active state for the component.</td>
+ <td colSpan="3">
+ <p>Toggle the active state for the component.</p>
+ </td>
</tr>
<tr id="cnavlink-as">
<td className="text-primary fw-semibold">as<a href="#cnavlink-as" aria-label="CNavLink as permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CNavLink from '@coreui/react/src/components/nav/CNavLink'
<td><code>{`(ElementType & "symbol")`}</code>, <code>{`(ElementType & "object")`}</code>, <code>{`(ElementType & "a")`}</code>, <code>{`(ElementType & "cite")`}</code>, <code>{`(ElementType & "data")`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+ <td colSpan="3">
+ <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+ </td>
</tr>
<tr id="cnavlink-className">
<td className="text-primary fw-semibold">className<a href="#cnavlink-className" aria-label="CNavLink className permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CNavLink from '@coreui/react/src/components/nav/CNavLink'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
<tr id="cnavlink-disabled">
<td className="text-primary fw-semibold">disabled<a href="#cnavlink-disabled" aria-label="CNavLink disabled permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CNavLink from '@coreui/react/src/components/nav/CNavLink'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Toggle the disabled state for the component.</td>
+ <td colSpan="3">
+ <p>Toggle the disabled state for the component.</p>
+ </td>
</tr>
<tr id="cnavlink-href">
<td className="text-primary fw-semibold">href<a href="#cnavlink-href" aria-label="CNavLink href permalink" className="anchor-link after">#</a></td>
@@ -53,7 +61,9 @@ import CNavLink from '@coreui/react/src/components/nav/CNavLink'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">The href attribute specifies the URL of the page the link goes to.</td>
+ <td colSpan="3">
+ <p>The href attribute specifies the URL of the page the link goes to.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CNavTitle.api.mdx b/packages/docs/content/api/CNavTitle.api.mdx
index 83abb795..bab5f5f9 100644
--- a/packages/docs/content/api/CNavTitle.api.mdx
+++ b/packages/docs/content/api/CNavTitle.api.mdx
@@ -21,7 +21,9 @@ import CNavTitle from '@coreui/react/src/components/nav/CNavTitle'
<td><code>{`(ElementType & "symbol")`}</code>, <code>{`(ElementType & "object")`}</code>, <code>{`(ElementType & "li")`}</code>, <code>{`(ElementType & "slot")`}</code>, <code>{`(ElementType & "style")`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+ <td colSpan="3">
+ <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+ </td>
</tr>
<tr id="cnavtitle-className">
<td className="text-primary fw-semibold">className<a href="#cnavtitle-className" aria-label="CNavTitle className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CNavTitle from '@coreui/react/src/components/nav/CNavTitle'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CNavbar.api.mdx b/packages/docs/content/api/CNavbar.api.mdx
index 730f1c1e..1aaa1c87 100644
--- a/packages/docs/content/api/CNavbar.api.mdx
+++ b/packages/docs/content/api/CNavbar.api.mdx
@@ -21,7 +21,9 @@ import CNavbar from '@coreui/react/src/components/navbar/CNavbar'
<td><code>{`(ElementType & "symbol")`}</code>, <code>{`(ElementType & "object")`}</code>, <code>{`(ElementType & "nav")`}</code>, <code>{`(ElementType & "slot")`}</code>, <code>{`(ElementType & "style")`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+ <td colSpan="3">
+ <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+ </td>
</tr>
<tr id="cnavbar-className">
<td className="text-primary fw-semibold">className<a href="#cnavbar-className" aria-label="CNavbar className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CNavbar from '@coreui/react/src/components/navbar/CNavbar'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
<tr id="cnavbar-color">
<td className="text-primary fw-semibold">color<a href="#cnavbar-color" aria-label="CNavbar color permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CNavbar from '@coreui/react/src/components/navbar/CNavbar'
<td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+ <td colSpan="3">
+ <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+ </td>
</tr>
<tr id="cnavbar-colorScheme">
<td className="text-primary fw-semibold">colorScheme<a href="#cnavbar-colorScheme" aria-label="CNavbar colorScheme permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CNavbar from '@coreui/react/src/components/navbar/CNavbar'
<td><code>{`"dark"`}</code>, <code>{`"light"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets if the color of text should be colored for a light or dark background.</td>
+ <td colSpan="3">
+ <p>Sets if the color of text should be colored for a light or dark background.</p>
+ </td>
</tr>
<tr id="cnavbar-container">
<td className="text-primary fw-semibold">container<a href="#cnavbar-container" aria-label="CNavbar container permalink" className="anchor-link after">#</a></td>
@@ -53,7 +61,9 @@ import CNavbar from '@coreui/react/src/components/navbar/CNavbar'
<td><code>{`boolean`}</code>, <code>{`"sm"`}</code>, <code>{`"md"`}</code>, <code>{`"lg"`}</code>, <code>{`"xl"`}</code>, <code>{`"xxl"`}</code>, <code>{`"fluid"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Defines optional container wrapping children elements.</td>
+ <td colSpan="3">
+ <p>Defines optional container wrapping children elements.</p>
+ </td>
</tr>
<tr id="cnavbar-expand">
<td className="text-primary fw-semibold">expand<a href="#cnavbar-expand" aria-label="CNavbar expand permalink" className="anchor-link after">#</a></td>
@@ -61,7 +71,9 @@ import CNavbar from '@coreui/react/src/components/navbar/CNavbar'
<td><code>{`boolean`}</code>, <code>{`"sm"`}</code>, <code>{`"md"`}</code>, <code>{`"lg"`}</code>, <code>{`"xl"`}</code>, <code>{`"xxl"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Defines the responsive breakpoint to determine when content collapses.</td>
+ <td colSpan="3">
+ <p>Defines the responsive breakpoint to determine when content collapses.</p>
+ </td>
</tr>
<tr id="cnavbar-placement">
<td className="text-primary fw-semibold">placement<a href="#cnavbar-placement" aria-label="CNavbar placement permalink" className="anchor-link after">#</a></td>
@@ -69,7 +81,9 @@ import CNavbar from '@coreui/react/src/components/navbar/CNavbar'
<td><code>{`"fixed-top"`}</code>, <code>{`"fixed-bottom"`}</code>, <code>{`"sticky-top"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Place component in non-static positions.</td>
+ <td colSpan="3">
+ <p>Place component in non-static positions.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CNavbarBrand.api.mdx b/packages/docs/content/api/CNavbarBrand.api.mdx
index 03d98309..cbb61ccf 100644
--- a/packages/docs/content/api/CNavbarBrand.api.mdx
+++ b/packages/docs/content/api/CNavbarBrand.api.mdx
@@ -21,7 +21,9 @@ import CNavbarBrand from '@coreui/react/src/components/navbar/CNavbarBrand'
<td><code>{`(ElementType & "symbol")`}</code>, <code>{`(ElementType & "object")`}</code>, <code>{`(ElementType & "a")`}</code>, <code>{`(ElementType & "slot")`}</code>, <code>{`(ElementType & "style")`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+ <td colSpan="3">
+ <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+ </td>
</tr>
<tr id="cnavbarbrand-className">
<td className="text-primary fw-semibold">className<a href="#cnavbarbrand-className" aria-label="CNavbarBrand className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CNavbarBrand from '@coreui/react/src/components/navbar/CNavbarBrand'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
<tr id="cnavbarbrand-href">
<td className="text-primary fw-semibold">href<a href="#cnavbarbrand-href" aria-label="CNavbarBrand href permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CNavbarBrand from '@coreui/react/src/components/navbar/CNavbarBrand'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">The href attribute specifies the URL of the page the link goes to.</td>
+ <td colSpan="3">
+ <p>The href attribute specifies the URL of the page the link goes to.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CNavbarNav.api.mdx b/packages/docs/content/api/CNavbarNav.api.mdx
index 2c46edf3..577e403a 100644
--- a/packages/docs/content/api/CNavbarNav.api.mdx
+++ b/packages/docs/content/api/CNavbarNav.api.mdx
@@ -21,7 +21,9 @@ import CNavbarNav from '@coreui/react/src/components/navbar/CNavbarNav'
<td><code>{`(ElementType & "symbol")`}</code>, <code>{`(ElementType & "object")`}</code>, <code>{`(ElementType & "ul")`}</code>, <code>{`(ElementType & "slot")`}</code>, <code>{`(ElementType & "style")`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+ <td colSpan="3">
+ <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+ </td>
</tr>
<tr id="cnavbarnav-className">
<td className="text-primary fw-semibold">className<a href="#cnavbarnav-className" aria-label="CNavbarNav className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CNavbarNav from '@coreui/react/src/components/navbar/CNavbarNav'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CNavbarText.api.mdx b/packages/docs/content/api/CNavbarText.api.mdx
index a7c58443..158f710f 100644
--- a/packages/docs/content/api/CNavbarText.api.mdx
+++ b/packages/docs/content/api/CNavbarText.api.mdx
@@ -21,7 +21,9 @@ import CNavbarText from '@coreui/react/src/components/navbar/CNavbarText'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CNavbarToggler.api.mdx b/packages/docs/content/api/CNavbarToggler.api.mdx
index ce474a31..38e4b19a 100644
--- a/packages/docs/content/api/CNavbarToggler.api.mdx
+++ b/packages/docs/content/api/CNavbarToggler.api.mdx
@@ -21,7 +21,9 @@ import CNavbarToggler from '@coreui/react/src/components/navbar/CNavbarToggler'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/COffcanvas.api.mdx b/packages/docs/content/api/COffcanvas.api.mdx
index 744d2595..2b50ddc3 100644
--- a/packages/docs/content/api/COffcanvas.api.mdx
+++ b/packages/docs/content/api/COffcanvas.api.mdx
@@ -21,7 +21,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'
<td><code>{`boolean`}</code>, <code>{`"static"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Apply a backdrop on body while offcanvas is open.</td>
+ <td colSpan="3">
+ <p>Apply a backdrop on body while offcanvas is open.</p>
+ </td>
</tr>
<tr id="coffcanvas-className">
<td className="text-primary fw-semibold">className<a href="#coffcanvas-className" aria-label="COffcanvas className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="coffcanvas-dark">
<td className="text-primary fw-semibold">dark<a href="#coffcanvas-dark" aria-label="COffcanvas dark permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets a darker color scheme.</td>
+ <td colSpan="3">
+ <p>Sets a darker color scheme.</p>
+ </td>
</tr>
<tr id="coffcanvas-keyboard">
<td className="text-primary fw-semibold">keyboard<a href="#coffcanvas-keyboard" aria-label="COffcanvas keyboard permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Closes the offcanvas when escape key is pressed.</td>
+ <td colSpan="3">
+ <p>Closes the offcanvas when escape key is pressed.</p>
+ </td>
</tr>
<tr id="coffcanvas-onHide">
<td className="text-primary fw-semibold">onHide<a href="#coffcanvas-onHide" aria-label="COffcanvas onHide permalink" className="anchor-link after">#</a></td>
@@ -53,7 +61,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'
<td><code>{`() => void`}</code></td>
</tr>
<tr>
- <td colSpan="3">Callback fired when the component requests to be hidden.</td>
+ <td colSpan="3">
+ <p>Callback fired when the component requests to be hidden.</p>
+ </td>
</tr>
<tr id="coffcanvas-onShow">
<td className="text-primary fw-semibold">onShow<a href="#coffcanvas-onShow" aria-label="COffcanvas onShow permalink" className="anchor-link after">#</a></td>
@@ -61,7 +71,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'
<td><code>{`() => void`}</code></td>
</tr>
<tr>
- <td colSpan="3">Callback fired when the component requests to be shown.</td>
+ <td colSpan="3">
+ <p>Callback fired when the component requests to be shown.</p>
+ </td>
</tr>
<tr id="coffcanvas-placement">
<td className="text-primary fw-semibold">placement<a href="#coffcanvas-placement" aria-label="COffcanvas placement permalink" className="anchor-link after">#</a></td>
@@ -69,7 +81,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'
<td><code>{`"start"`}</code>, <code>{`"end"`}</code>, <code>{`"top"`}</code>, <code>{`"bottom"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Components placement, there’s no default placement.</td>
+ <td colSpan="3">
+ <p>Components placement, there’s no default placement.</p>
+ </td>
</tr>
<tr id="coffcanvas-portal">
<td className="text-primary fw-semibold">portal<a href="#coffcanvas-portal" aria-label="COffcanvas portal permalink" className="anchor-link after">#</a></td>
@@ -77,7 +91,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Generates modal using createPortal.</td>
+ <td colSpan="3">
+ <p>Generates modal using createPortal.</p>
+ </td>
</tr>
<tr id="coffcanvas-responsive">
<td className="text-primary fw-semibold">responsive<a href="#coffcanvas-responsive" aria-label="COffcanvas responsive permalink" className="anchor-link after">#</a><span className="badge bg-success">4.6.0+</span></td>
@@ -85,7 +101,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'
<td><code>{`boolean`}</code>, <code>{`"sm"`}</code>, <code>{`"md"`}</code>, <code>{`"lg"`}</code>, <code>{`"xl"`}</code>, <code>{`"xxl"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Responsive offcanvas property hide content outside the viewport from a specified breakpoint and down.</td>
+ <td colSpan="3">
+ <p>Responsive offcanvas property hide content outside the viewport from a specified breakpoint and down.</p>
+ </td>
</tr>
<tr id="coffcanvas-scroll">
<td className="text-primary fw-semibold">scroll<a href="#coffcanvas-scroll" aria-label="COffcanvas scroll permalink" className="anchor-link after">#</a></td>
@@ -93,7 +111,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Allow body scrolling while offcanvas is open</td>
+ <td colSpan="3">
+ <p>Allow body scrolling while offcanvas is open</p>
+ </td>
</tr>
<tr id="coffcanvas-visible">
<td className="text-primary fw-semibold">visible<a href="#coffcanvas-visible" aria-label="COffcanvas visible permalink" className="anchor-link after">#</a></td>
@@ -101,7 +121,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Toggle the visibility of offcanvas component.</td>
+ <td colSpan="3">
+ <p>Toggle the visibility of offcanvas component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/COffcanvasBody.api.mdx b/packages/docs/content/api/COffcanvasBody.api.mdx
index 63a205df..a68dc896 100644
--- a/packages/docs/content/api/COffcanvasBody.api.mdx
+++ b/packages/docs/content/api/COffcanvasBody.api.mdx
@@ -21,7 +21,9 @@ import COffcanvasBody from '@coreui/react/src/components/offcanvas/COffcanvasBod
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/COffcanvasHeader.api.mdx b/packages/docs/content/api/COffcanvasHeader.api.mdx
index 5ca4bdd5..a505a208 100644
--- a/packages/docs/content/api/COffcanvasHeader.api.mdx
+++ b/packages/docs/content/api/COffcanvasHeader.api.mdx
@@ -21,7 +21,9 @@ import COffcanvasHeader from '@coreui/react/src/components/offcanvas/COffcanvasH
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/COffcanvasTitle.api.mdx b/packages/docs/content/api/COffcanvasTitle.api.mdx
index 5ff8759d..06c1ac6a 100644
--- a/packages/docs/content/api/COffcanvasTitle.api.mdx
+++ b/packages/docs/content/api/COffcanvasTitle.api.mdx
@@ -21,7 +21,9 @@ import COffcanvasTitle from '@coreui/react/src/components/offcanvas/COffcanvasTi
<td><code>{`(ElementType & "symbol")`}</code>, <code>{`(ElementType & "object")`}</code>, <code>{`(ElementType & "h5")`}</code>, <code>{`(ElementType & "slot")`}</code>, <code>{`(ElementType & "style")`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+ <td colSpan="3">
+ <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+ </td>
</tr>
<tr id="coffcanvastitle-className">
<td className="text-primary fw-semibold">className<a href="#coffcanvastitle-className" aria-label="COffcanvasTitle className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import COffcanvasTitle from '@coreui/react/src/components/offcanvas/COffcanvasTi
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CPagination.api.mdx b/packages/docs/content/api/CPagination.api.mdx
index d1870dac..a0dfe5af 100644
--- a/packages/docs/content/api/CPagination.api.mdx
+++ b/packages/docs/content/api/CPagination.api.mdx
@@ -21,7 +21,9 @@ import CPagination from '@coreui/react/src/components/pagination/CPagination'
<td><code>{`"start"`}</code>, <code>{`"center"`}</code>, <code>{`"end"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set the alignment of pagination components.</td>
+ <td colSpan="3">
+ <p>Set the alignment of pagination components.</p>
+ </td>
</tr>
<tr id="cpagination-className">
<td className="text-primary fw-semibold">className<a href="#cpagination-className" aria-label="CPagination className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CPagination from '@coreui/react/src/components/pagination/CPagination'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="cpagination-size">
<td className="text-primary fw-semibold">size<a href="#cpagination-size" aria-label="CPagination size permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CPagination from '@coreui/react/src/components/pagination/CPagination'
<td><code>{`"sm"`}</code>, <code>{`"lg"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Size the component small or large.</td>
+ <td colSpan="3">
+ <p>Size the component small or large.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CPaginationItem.api.mdx b/packages/docs/content/api/CPaginationItem.api.mdx
index b8573635..71479d0a 100644
--- a/packages/docs/content/api/CPaginationItem.api.mdx
+++ b/packages/docs/content/api/CPaginationItem.api.mdx
@@ -21,7 +21,9 @@ import CPaginationItem from '@coreui/react/src/components/pagination/CPagination
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Toggle the active state for the component.</td>
+ <td colSpan="3">
+ <p>Toggle the active state for the component.</p>
+ </td>
</tr>
<tr id="cpaginationitem-as">
<td className="text-primary fw-semibold">as<a href="#cpaginationitem-as" aria-label="CPaginationItem as permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CPaginationItem from '@coreui/react/src/components/pagination/CPagination
<td><code>{`(ElementType & string)`}</code>, <code>{`(ElementType & ComponentClass\<any, any>)`}</code>, <code>{`(ElementType & FunctionComponent\<any>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+ <td colSpan="3">
+ <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+ </td>
</tr>
<tr id="cpaginationitem-disabled">
<td className="text-primary fw-semibold">disabled<a href="#cpaginationitem-disabled" aria-label="CPaginationItem disabled permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CPaginationItem from '@coreui/react/src/components/pagination/CPagination
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Toggle the disabled state for the component.</td>
+ <td colSpan="3">
+ <p>Toggle the disabled state for the component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CPlaceholder.api.mdx b/packages/docs/content/api/CPlaceholder.api.mdx
index 7247c5cc..7ad82151 100644
--- a/packages/docs/content/api/CPlaceholder.api.mdx
+++ b/packages/docs/content/api/CPlaceholder.api.mdx
@@ -21,7 +21,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder'
<td><code>{`"glow"`}</code>, <code>{`"wave"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set animation type to better convey the perception of something being actively loaded.</td>
+ <td colSpan="3">
+ <p>Set animation type to better convey the perception of something being actively loaded.</p>
+ </td>
</tr>
<tr id="cplaceholder-as">
<td className="text-primary fw-semibold">as<a href="#cplaceholder-as" aria-label="CPlaceholder as permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder'
<td><code>{`(ElementType & "symbol")`}</code>, <code>{`(ElementType & "object")`}</code>, <code>{`(ElementType & "span")`}</code>, <code>{`(ElementType & "slot")`}</code>, <code>{`(ElementType & "style")`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+ <td colSpan="3">
+ <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+ </td>
</tr>
<tr id="cplaceholder-className">
<td className="text-primary fw-semibold">className<a href="#cplaceholder-className" aria-label="CPlaceholder className permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
<tr id="cplaceholder-color">
<td className="text-primary fw-semibold">color<a href="#cplaceholder-color" aria-label="CPlaceholder color permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder'
<td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+ <td colSpan="3">
+ <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+ </td>
</tr>
<tr id="cplaceholder-lg">
<td className="text-primary fw-semibold">lg<a href="#cplaceholder-lg" aria-label="CPlaceholder lg permalink" className="anchor-link after">#</a></td>
@@ -53,7 +61,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder'
<td><code>{`number`}</code></td>
</tr>
<tr>
- <td colSpan="3">The number of columns on large devices (\<1200px).</td>
+ <td colSpan="3">
+ <p>The number of columns on large devices (<1200px).</p>
+ </td>
</tr>
<tr id="cplaceholder-md">
<td className="text-primary fw-semibold">md<a href="#cplaceholder-md" aria-label="CPlaceholder md permalink" className="anchor-link after">#</a></td>
@@ -61,7 +71,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder'
<td><code>{`number`}</code></td>
</tr>
<tr>
- <td colSpan="3">The number of columns on medium devices (\<992px).</td>
+ <td colSpan="3">
+ <p>The number of columns on medium devices (<992px).</p>
+ </td>
</tr>
<tr id="cplaceholder-size">
<td className="text-primary fw-semibold">size<a href="#cplaceholder-size" aria-label="CPlaceholder size permalink" className="anchor-link after">#</a></td>
@@ -69,7 +81,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder'
<td><code>{`"xs"`}</code>, <code>{`"sm"`}</code>, <code>{`"lg"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Size the component extra small, small, or large.</td>
+ <td colSpan="3">
+ <p>Size the component extra small, small, or large.</p>
+ </td>
</tr>
<tr id="cplaceholder-sm">
<td className="text-primary fw-semibold">sm<a href="#cplaceholder-sm" aria-label="CPlaceholder sm permalink" className="anchor-link after">#</a></td>
@@ -77,7 +91,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder'
<td><code>{`number`}</code></td>
</tr>
<tr>
- <td colSpan="3">The number of columns on small devices (\<768px).</td>
+ <td colSpan="3">
+ <p>The number of columns on small devices (<768px).</p>
+ </td>
</tr>
<tr id="cplaceholder-xl">
<td className="text-primary fw-semibold">xl<a href="#cplaceholder-xl" aria-label="CPlaceholder xl permalink" className="anchor-link after">#</a></td>
@@ -85,7 +101,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder'
<td><code>{`number`}</code></td>
</tr>
<tr>
- <td colSpan="3">The number of columns on X-Large devices (\<1400px).</td>
+ <td colSpan="3">
+ <p>The number of columns on X-Large devices (<1400px).</p>
+ </td>
</tr>
<tr id="cplaceholder-xs">
<td className="text-primary fw-semibold">xs<a href="#cplaceholder-xs" aria-label="CPlaceholder xs permalink" className="anchor-link after">#</a></td>
@@ -93,7 +111,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder'
<td><code>{`number`}</code></td>
</tr>
<tr>
- <td colSpan="3">The number of columns on extra small devices (\<576px).</td>
+ <td colSpan="3">
+ <p>The number of columns on extra small devices (<576px).</p>
+ </td>
</tr>
<tr id="cplaceholder-xxl">
<td className="text-primary fw-semibold">xxl<a href="#cplaceholder-xxl" aria-label="CPlaceholder xxl permalink" className="anchor-link after">#</a></td>
@@ -101,7 +121,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder'
<td><code>{`number`}</code></td>
</tr>
<tr>
- <td colSpan="3">The number of columns on XX-Large devices (≥1400px).</td>
+ <td colSpan="3">
+ <p>The number of columns on XX-Large devices (≥1400px).</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CPopover.api.mdx b/packages/docs/content/api/CPopover.api.mdx
index 784e2a0d..bfc98bd5 100644
--- a/packages/docs/content/api/CPopover.api.mdx
+++ b/packages/docs/content/api/CPopover.api.mdx
@@ -21,7 +21,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Apply a CSS fade transition to the popover.</td>
+ <td colSpan="3">
+ <p>Apply a CSS fade transition to the popover.</p>
+ </td>
</tr>
<tr id="cpopover-className">
<td className="text-primary fw-semibold">className<a href="#cpopover-className" aria-label="CPopover className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
<tr id="cpopover-container">
<td className="text-primary fw-semibold">container<a href="#cpopover-container" aria-label="CPopover container permalink" className="anchor-link after">#</a><span className="badge bg-success">4.11.0+</span></td>
@@ -37,7 +41,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
<td><code>{`Element`}</code>, <code>{`DocumentFragment`}</code>, <code>{`(() => Element | DocumentFragment)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Appends the react popover to a specific element. You can pass an HTML element or function that returns a single element. By default <code>{`document.body`}</code>.</td>
+ <td colSpan="3">
+ <p>Appends the react popover to a specific element. You can pass an HTML element or function that returns a single element. By default <code>{`document.body`}</code>.</p>
+ </td>
</tr>
<tr id="cpopover-content">
<td className="text-primary fw-semibold">content<a href="#cpopover-content" aria-label="CPopover content permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Content node for your component.</td>
+ <td colSpan="3">
+ <p>Content node for your component.</p>
+ </td>
</tr>
<tr id="cpopover-delay">
<td className="text-primary fw-semibold">delay<a href="#cpopover-delay" aria-label="CPopover delay permalink" className="anchor-link after">#</a><span className="badge bg-success">4.9.0+</span></td>
@@ -53,7 +61,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
<td><code>{`number`}</code>, <code>{`{ show: number; hide: number; }`}</code></td>
</tr>
<tr>
- <td colSpan="3">The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: <code>{`{ 'show': 500, 'hide': 100 }`}</code>.</td>
+ <td colSpan="3">
+ <p>The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: <code>{`{ 'show': 500, 'hide': 100 }`}</code>.</p>
+ </td>
</tr>
<tr id="cpopover-fallbackPlacements">
<td className="text-primary fw-semibold">fallbackPlacements<a href="#cpopover-fallbackPlacements" aria-label="CPopover fallbackPlacements permalink" className="anchor-link after">#</a><span className="badge bg-success">4.9.0+</span></td>
@@ -61,7 +71,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
<td><code>{`Placements`}</code>, <code>{`Placements[]`}</code></td>
</tr>
<tr>
- <td colSpan="3">Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.</td>
+ <td colSpan="3">
+ <p>Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.</p>
+ </td>
</tr>
<tr id="cpopover-offset">
<td className="text-primary fw-semibold">offset<a href="#cpopover-offset" aria-label="CPopover offset permalink" className="anchor-link after">#</a></td>
@@ -69,7 +81,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
<td><code>{`[number, number]`}</code></td>
</tr>
<tr>
- <td colSpan="3">Offset of the popover relative to its target.</td>
+ <td colSpan="3">
+ <p>Offset of the popover relative to its target.</p>
+ </td>
</tr>
<tr id="cpopover-onHide">
<td className="text-primary fw-semibold">onHide<a href="#cpopover-onHide" aria-label="CPopover onHide permalink" className="anchor-link after">#</a></td>
@@ -77,7 +91,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
<td><code>{`() => void`}</code></td>
</tr>
<tr>
- <td colSpan="3">Callback fired when the component requests to be hidden.</td>
+ <td colSpan="3">
+ <p>Callback fired when the component requests to be hidden.</p>
+ </td>
</tr>
<tr id="cpopover-onShow">
<td className="text-primary fw-semibold">onShow<a href="#cpopover-onShow" aria-label="CPopover onShow permalink" className="anchor-link after">#</a></td>
@@ -85,7 +101,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
<td><code>{`() => void`}</code></td>
</tr>
<tr>
- <td colSpan="3">Callback fired when the component requests to be shown.</td>
+ <td colSpan="3">
+ <p>Callback fired when the component requests to be shown.</p>
+ </td>
</tr>
<tr id="cpopover-placement">
<td className="text-primary fw-semibold">placement<a href="#cpopover-placement" aria-label="CPopover placement permalink" className="anchor-link after">#</a></td>
@@ -93,7 +111,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
<td><code>{`"auto"`}</code>, <code>{`"top"`}</code>, <code>{`"bottom"`}</code>, <code>{`"right"`}</code>, <code>{`"left"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.</td>
+ <td colSpan="3">
+ <p>Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.</p>
+ </td>
</tr>
<tr id="cpopover-title">
<td className="text-primary fw-semibold">title<a href="#cpopover-title" aria-label="CPopover title permalink" className="anchor-link after">#</a></td>
@@ -101,7 +121,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Title node for your component.</td>
+ <td colSpan="3">
+ <p>Title node for your component.</p>
+ </td>
</tr>
<tr id="cpopover-trigger">
<td className="text-primary fw-semibold">trigger<a href="#cpopover-trigger" aria-label="CPopover trigger permalink" className="anchor-link after">#</a></td>
@@ -109,7 +131,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
<td><code>{`'hover'`}</code>, <code>{`'focus'`}</code>, <code>{`'click'`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.</td>
+ <td colSpan="3">
+ <p>Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.</p>
+ </td>
</tr>
<tr id="cpopover-visible">
<td className="text-primary fw-semibold">visible<a href="#cpopover-visible" aria-label="CPopover visible permalink" className="anchor-link after">#</a></td>
@@ -117,7 +141,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Toggle the visibility of popover component.</td>
+ <td colSpan="3">
+ <p>Toggle the visibility of popover component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CProgress.api.mdx b/packages/docs/content/api/CProgress.api.mdx
index efd6a125..1332aad0 100644
--- a/packages/docs/content/api/CProgress.api.mdx
+++ b/packages/docs/content/api/CProgress.api.mdx
@@ -21,7 +21,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Use to animate the stripes right to left via CSS3 animations.</td>
+ <td colSpan="3">
+ <p>Use to animate the stripes right to left via CSS3 animations.</p>
+ </td>
</tr>
<tr id="cprogress-className">
<td className="text-primary fw-semibold">className<a href="#cprogress-className" aria-label="CProgress className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
<tr id="cprogress-color">
<td className="text-primary fw-semibold">color<a href="#cprogress-color" aria-label="CProgress color permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress'
<td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+ <td colSpan="3">
+ <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+ </td>
</tr>
<tr id="cprogress-height">
<td className="text-primary fw-semibold">height<a href="#cprogress-height" aria-label="CProgress height permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress'
<td><code>{`number`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets the height of the component. If you set that value the inner <code>{`\<CProgressBar>`}</code> will automatically resize accordingly.</td>
+ <td colSpan="3">
+ <p>Sets the height of the component. If you set that value the inner <code>{`<CProgressBar>`}</code> will automatically resize accordingly.</p>
+ </td>
</tr>
<tr id="cprogress-progressBarClassName">
<td className="text-primary fw-semibold">progressBarClassName<a href="#cprogress-progressBarClassName" aria-label="CProgress progressBarClassName permalink" className="anchor-link after">#</a><span className="badge bg-success">4.9.0+</span></td>
@@ -53,7 +61,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the \<CProgressBar/> component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the <code>{`<CProgressBar>`}</code> component.</p>
+ </td>
</tr>
<tr id="cprogress-thin">
<td className="text-primary fw-semibold">thin<a href="#cprogress-thin" aria-label="CProgress thin permalink" className="anchor-link after">#</a></td>
@@ -61,7 +71,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Makes progress bar thinner.</td>
+ <td colSpan="3">
+ <p>Makes progress bar thinner.</p>
+ </td>
</tr>
<tr id="cprogress-value">
<td className="text-primary fw-semibold">value<a href="#cprogress-value" aria-label="CProgress value permalink" className="anchor-link after">#</a></td>
@@ -69,7 +81,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress'
<td><code>{`number`}</code></td>
</tr>
<tr>
- <td colSpan="3">The percent to progress the ProgressBar (out of 100).</td>
+ <td colSpan="3">
+ <p>The percent to progress the ProgressBar (out of 100).</p>
+ </td>
</tr>
<tr id="cprogress-variant">
<td className="text-primary fw-semibold">variant<a href="#cprogress-variant" aria-label="CProgress variant permalink" className="anchor-link after">#</a></td>
@@ -77,7 +91,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress'
<td><code>{`"striped"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set the progress bar variant to optional striped.</td>
+ <td colSpan="3">
+ <p>Set the progress bar variant to optional striped.</p>
+ </td>
</tr>
<tr id="cprogress-white">
<td className="text-primary fw-semibold">white<a href="#cprogress-white" aria-label="CProgress white permalink" className="anchor-link after">#</a></td>
@@ -85,7 +101,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Change the default color to white.</td>
+ <td colSpan="3">
+ <p>Change the default color to white.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CProgressBar.api.mdx b/packages/docs/content/api/CProgressBar.api.mdx
index 1e21b9c7..56197cb6 100644
--- a/packages/docs/content/api/CProgressBar.api.mdx
+++ b/packages/docs/content/api/CProgressBar.api.mdx
@@ -21,7 +21,9 @@ import CProgressBar from '@coreui/react/src/components/progress/CProgressBar'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Use to animate the stripes right to left via CSS3 animations.</td>
+ <td colSpan="3">
+ <p>Use to animate the stripes right to left via CSS3 animations.</p>
+ </td>
</tr>
<tr id="cprogressbar-className">
<td className="text-primary fw-semibold">className<a href="#cprogressbar-className" aria-label="CProgressBar className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CProgressBar from '@coreui/react/src/components/progress/CProgressBar'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
<tr id="cprogressbar-color">
<td className="text-primary fw-semibold">color<a href="#cprogressbar-color" aria-label="CProgressBar color permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CProgressBar from '@coreui/react/src/components/progress/CProgressBar'
<td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+ <td colSpan="3">
+ <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+ </td>
</tr>
<tr id="cprogressbar-value">
<td className="text-primary fw-semibold">value<a href="#cprogressbar-value" aria-label="CProgressBar value permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CProgressBar from '@coreui/react/src/components/progress/CProgressBar'
<td><code>{`number`}</code></td>
</tr>
<tr>
- <td colSpan="3">The percent to progress the ProgressBar.</td>
+ <td colSpan="3">
+ <p>The percent to progress the ProgressBar.</p>
+ </td>
</tr>
<tr id="cprogressbar-variant">
<td className="text-primary fw-semibold">variant<a href="#cprogressbar-variant" aria-label="CProgressBar variant permalink" className="anchor-link after">#</a></td>
@@ -53,7 +61,9 @@ import CProgressBar from '@coreui/react/src/components/progress/CProgressBar'
<td><code>{`"striped"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set the progress bar variant to optional striped.</td>
+ <td colSpan="3">
+ <p>Set the progress bar variant to optional striped.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CProgressStacked.api.mdx b/packages/docs/content/api/CProgressStacked.api.mdx
index 19f2beef..ce482129 100644
--- a/packages/docs/content/api/CProgressStacked.api.mdx
+++ b/packages/docs/content/api/CProgressStacked.api.mdx
@@ -21,7 +21,9 @@ import CProgressStacked from '@coreui/react/src/components/progress/CProgressSta
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CRow.api.mdx b/packages/docs/content/api/CRow.api.mdx
index f2e0f907..f8f3b137 100644
--- a/packages/docs/content/api/CRow.api.mdx
+++ b/packages/docs/content/api/CRow.api.mdx
@@ -21,7 +21,9 @@ import CRow from '@coreui/react/src/components/grid/CRow'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="crow-lg">
<td className="text-primary fw-semibold">lg<a href="#crow-lg" aria-label="CRow lg permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CRow from '@coreui/react/src/components/grid/CRow'
<td><code>{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}</code></td>
</tr>
<tr>
- <td colSpan="3">The number of columns/offset/order on large devices (\<1200px).</td>
+ <td colSpan="3">
+ <p>The number of columns/offset/order on large devices (<1200px).</p>
+ </td>
</tr>
<tr id="crow-md">
<td className="text-primary fw-semibold">md<a href="#crow-md" aria-label="CRow md permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CRow from '@coreui/react/src/components/grid/CRow'
<td><code>{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}</code></td>
</tr>
<tr>
- <td colSpan="3">The number of columns/offset/order on medium devices (\<992px).</td>
+ <td colSpan="3">
+ <p>The number of columns/offset/order on medium devices (<992px).</p>
+ </td>
</tr>
<tr id="crow-sm">
<td className="text-primary fw-semibold">sm<a href="#crow-sm" aria-label="CRow sm permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CRow from '@coreui/react/src/components/grid/CRow'
<td><code>{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}</code></td>
</tr>
<tr>
- <td colSpan="3">The number of columns/offset/order on small devices (\<768px).</td>
+ <td colSpan="3">
+ <p>The number of columns/offset/order on small devices (<768px).</p>
+ </td>
</tr>
<tr id="crow-xl">
<td className="text-primary fw-semibold">xl<a href="#crow-xl" aria-label="CRow xl permalink" className="anchor-link after">#</a></td>
@@ -53,7 +61,9 @@ import CRow from '@coreui/react/src/components/grid/CRow'
<td><code>{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}</code></td>
</tr>
<tr>
- <td colSpan="3">The number of columns/offset/order on X-Large devices (\<1400px).</td>
+ <td colSpan="3">
+ <p>The number of columns/offset/order on X-Large devices (<1400px).</p>
+ </td>
</tr>
<tr id="crow-xs">
<td className="text-primary fw-semibold">xs<a href="#crow-xs" aria-label="CRow xs permalink" className="anchor-link after">#</a></td>
@@ -61,7 +71,9 @@ import CRow from '@coreui/react/src/components/grid/CRow'
<td><code>{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}</code></td>
</tr>
<tr>
- <td colSpan="3">The number of columns/offset/order on extra small devices (\<576px).</td>
+ <td colSpan="3">
+ <p>The number of columns/offset/order on extra small devices (<576px).</p>
+ </td>
</tr>
<tr id="crow-xxl">
<td className="text-primary fw-semibold">xxl<a href="#crow-xxl" aria-label="CRow xxl permalink" className="anchor-link after">#</a></td>
@@ -69,7 +81,9 @@ import CRow from '@coreui/react/src/components/grid/CRow'
<td><code>{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}</code></td>
</tr>
<tr>
- <td colSpan="3">The number of columns/offset/order on XX-Large devices (≥1400px).</td>
+ <td colSpan="3">
+ <p>The number of columns/offset/order on XX-Large devices (≥1400px).</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CSidebar.api.mdx b/packages/docs/content/api/CSidebar.api.mdx
index e251864c..7d7dd7d4 100644
--- a/packages/docs/content/api/CSidebar.api.mdx
+++ b/packages/docs/content/api/CSidebar.api.mdx
@@ -21,7 +21,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
<tr id="csidebar-colorScheme">
<td className="text-primary fw-semibold">colorScheme<a href="#csidebar-colorScheme" aria-label="CSidebar colorScheme permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'
<td><code>{`'dark'`}</code>, <code>{`'light'`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets if the color of text should be colored for a light or dark dark background.</td>
+ <td colSpan="3">
+ <p>Sets if the color of text should be colored for a light or dark dark background.</p>
+ </td>
</tr>
<tr id="csidebar-narrow">
<td className="text-primary fw-semibold">narrow<a href="#csidebar-narrow" aria-label="CSidebar narrow permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Make sidebar narrow.</td>
+ <td colSpan="3">
+ <p>Make sidebar narrow.</p>
+ </td>
</tr>
<tr id="csidebar-onHide">
<td className="text-primary fw-semibold">onHide<a href="#csidebar-onHide" aria-label="CSidebar onHide permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'
<td><code>{`() => void`}</code></td>
</tr>
<tr>
- <td colSpan="3">Callback fired when the component requests to be hidden.</td>
+ <td colSpan="3">
+ <p>Callback fired when the component requests to be hidden.</p>
+ </td>
</tr>
<tr id="csidebar-onShow">
<td className="text-primary fw-semibold">onShow<a href="#csidebar-onShow" aria-label="CSidebar onShow permalink" className="anchor-link after">#</a></td>
@@ -53,7 +61,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'
<td><code>{`() => void`}</code></td>
</tr>
<tr>
- <td colSpan="3">Callback fired when the component requests to be shown.</td>
+ <td colSpan="3">
+ <p>Callback fired when the component requests to be shown.</p>
+ </td>
</tr>
<tr id="csidebar-onVisibleChange">
<td className="text-primary fw-semibold">onVisibleChange<a href="#csidebar-onVisibleChange" aria-label="CSidebar onVisibleChange permalink" className="anchor-link after">#</a></td>
@@ -61,7 +71,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'
<td><code>{`(visible: boolean) => void`}</code></td>
</tr>
<tr>
- <td colSpan="3">Event emitted after visibility of component changed.</td>
+ <td colSpan="3">
+ <p>Event emitted after visibility of component changed.</p>
+ </td>
</tr>
<tr id="csidebar-overlaid">
<td className="text-primary fw-semibold">overlaid<a href="#csidebar-overlaid" aria-label="CSidebar overlaid permalink" className="anchor-link after">#</a></td>
@@ -69,7 +81,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set sidebar to overlaid variant.</td>
+ <td colSpan="3">
+ <p>Set sidebar to overlaid variant.</p>
+ </td>
</tr>
<tr id="csidebar-placement">
<td className="text-primary fw-semibold">placement<a href="#csidebar-placement" aria-label="CSidebar placement permalink" className="anchor-link after">#</a></td>
@@ -77,7 +91,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'
<td><code>{`'start'`}</code>, <code>{`'end'`}</code></td>
</tr>
<tr>
- <td colSpan="3">Components placement, there’s no default placement.</td>
+ <td colSpan="3">
+ <p>Components placement, there’s no default placement.</p>
+ </td>
</tr>
<tr id="csidebar-position">
<td className="text-primary fw-semibold">position<a href="#csidebar-position" aria-label="CSidebar position permalink" className="anchor-link after">#</a></td>
@@ -85,7 +101,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'
<td><code>{`"fixed"`}</code>, <code>{`"sticky"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Place sidebar in non-static positions.</td>
+ <td colSpan="3">
+ <p>Place sidebar in non-static positions.</p>
+ </td>
</tr>
<tr id="csidebar-size">
<td className="text-primary fw-semibold">size<a href="#csidebar-size" aria-label="CSidebar size permalink" className="anchor-link after">#</a></td>
@@ -93,7 +111,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'
<td><code>{`"sm"`}</code>, <code>{`"lg"`}</code>, <code>{`"xl"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Size the component small, large, or extra large.</td>
+ <td colSpan="3">
+ <p>Size the component small, large, or extra large.</p>
+ </td>
</tr>
<tr id="csidebar-unfoldable">
<td className="text-primary fw-semibold">unfoldable<a href="#csidebar-unfoldable" aria-label="CSidebar unfoldable permalink" className="anchor-link after">#</a></td>
@@ -101,7 +121,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Expand narrowed sidebar on hover.</td>
+ <td colSpan="3">
+ <p>Expand narrowed sidebar on hover.</p>
+ </td>
</tr>
<tr id="csidebar-visible">
<td className="text-primary fw-semibold">visible<a href="#csidebar-visible" aria-label="CSidebar visible permalink" className="anchor-link after">#</a></td>
@@ -109,7 +131,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Toggle the visibility of sidebar component.</td>
+ <td colSpan="3">
+ <p>Toggle the visibility of sidebar component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CSidebarBrand.api.mdx b/packages/docs/content/api/CSidebarBrand.api.mdx
index fc56e0d0..55a39332 100644
--- a/packages/docs/content/api/CSidebarBrand.api.mdx
+++ b/packages/docs/content/api/CSidebarBrand.api.mdx
@@ -21,7 +21,9 @@ import CSidebarBrand from '@coreui/react/src/components/sidebar/CSidebarBrand'
<td><code>{`(ElementType & "symbol")`}</code>, <code>{`(ElementType & "object")`}</code>, <code>{`(ElementType & "a")`}</code>, <code>{`(ElementType & "slot")`}</code>, <code>{`(ElementType & "style")`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+ <td colSpan="3">
+ <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+ </td>
</tr>
<tr id="csidebarbrand-className">
<td className="text-primary fw-semibold">className<a href="#csidebarbrand-className" aria-label="CSidebarBrand className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CSidebarBrand from '@coreui/react/src/components/sidebar/CSidebarBrand'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CSidebarFooter.api.mdx b/packages/docs/content/api/CSidebarFooter.api.mdx
index ac4cc6b1..d3f357b2 100644
--- a/packages/docs/content/api/CSidebarFooter.api.mdx
+++ b/packages/docs/content/api/CSidebarFooter.api.mdx
@@ -21,7 +21,9 @@ import CSidebarFooter from '@coreui/react/src/components/sidebar/CSidebarFooter'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CSidebarHeader.api.mdx b/packages/docs/content/api/CSidebarHeader.api.mdx
index fae56074..ea6eaf7f 100644
--- a/packages/docs/content/api/CSidebarHeader.api.mdx
+++ b/packages/docs/content/api/CSidebarHeader.api.mdx
@@ -21,7 +21,9 @@ import CSidebarHeader from '@coreui/react/src/components/sidebar/CSidebarHeader'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CSidebarNav.api.mdx b/packages/docs/content/api/CSidebarNav.api.mdx
index 099b5949..dbc289a6 100644
--- a/packages/docs/content/api/CSidebarNav.api.mdx
+++ b/packages/docs/content/api/CSidebarNav.api.mdx
@@ -21,7 +21,9 @@ import CSidebarNav from '@coreui/react/src/components/sidebar/CSidebarNav'
<td><code>{`(ElementType & "symbol")`}</code>, <code>{`(ElementType & "object")`}</code>, <code>{`(ElementType & "ul")`}</code>, <code>{`(ElementType & "slot")`}</code>, <code>{`(ElementType & "style")`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+ <td colSpan="3">
+ <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+ </td>
</tr>
<tr id="csidebarnav-className">
<td className="text-primary fw-semibold">className<a href="#csidebarnav-className" aria-label="CSidebarNav className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CSidebarNav from '@coreui/react/src/components/sidebar/CSidebarNav'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CSidebarToggler.api.mdx b/packages/docs/content/api/CSidebarToggler.api.mdx
index f35f392e..4c39a565 100644
--- a/packages/docs/content/api/CSidebarToggler.api.mdx
+++ b/packages/docs/content/api/CSidebarToggler.api.mdx
@@ -21,7 +21,9 @@ import CSidebarToggler from '@coreui/react/src/components/sidebar/CSidebarToggle
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CSpinner.api.mdx b/packages/docs/content/api/CSpinner.api.mdx
index 48fc06f8..c072502a 100644
--- a/packages/docs/content/api/CSpinner.api.mdx
+++ b/packages/docs/content/api/CSpinner.api.mdx
@@ -21,7 +21,9 @@ import CSpinner from '@coreui/react/src/components/spinner/CSpinner'
<td><code>{`(ElementType & "symbol")`}</code>, <code>{`(ElementType & "object")`}</code>, <code>{`(ElementType & "div")`}</code>, <code>{`(ElementType & "slot")`}</code>, <code>{`(ElementType & "style")`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+ <td colSpan="3">
+ <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+ </td>
</tr>
<tr id="cspinner-className">
<td className="text-primary fw-semibold">className<a href="#cspinner-className" aria-label="CSpinner className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CSpinner from '@coreui/react/src/components/spinner/CSpinner'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
<tr id="cspinner-color">
<td className="text-primary fw-semibold">color<a href="#cspinner-color" aria-label="CSpinner color permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CSpinner from '@coreui/react/src/components/spinner/CSpinner'
<td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+ <td colSpan="3">
+ <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+ </td>
</tr>
<tr id="cspinner-size">
<td className="text-primary fw-semibold">size<a href="#cspinner-size" aria-label="CSpinner size permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CSpinner from '@coreui/react/src/components/spinner/CSpinner'
<td><code>{`"sm"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Size the component small.</td>
+ <td colSpan="3">
+ <p>Size the component small.</p>
+ </td>
</tr>
<tr id="cspinner-variant">
<td className="text-primary fw-semibold">variant<a href="#cspinner-variant" aria-label="CSpinner variant permalink" className="anchor-link after">#</a></td>
@@ -53,7 +61,9 @@ import CSpinner from '@coreui/react/src/components/spinner/CSpinner'
<td><code>{`"border"`}</code>, <code>{`"grow"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set the button variant to an outlined button or a ghost button.</td>
+ <td colSpan="3">
+ <p>Set the button variant to an outlined button or a ghost button.</p>
+ </td>
</tr>
<tr id="cspinner-visuallyHiddenLabel">
<td className="text-primary fw-semibold">visuallyHiddenLabel<a href="#cspinner-visuallyHiddenLabel" aria-label="CSpinner visuallyHiddenLabel permalink" className="anchor-link after">#</a></td>
@@ -61,7 +71,9 @@ import CSpinner from '@coreui/react/src/components/spinner/CSpinner'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set visually hidden label for accessibility purposes.</td>
+ <td colSpan="3">
+ <p>Set visually hidden label for accessibility purposes.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CTab.api.mdx b/packages/docs/content/api/CTab.api.mdx
index 6ead7a6c..1d298ded 100644
--- a/packages/docs/content/api/CTab.api.mdx
+++ b/packages/docs/content/api/CTab.api.mdx
@@ -21,7 +21,9 @@ import CTab from '@coreui/react/src/components/tabs/CTab'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="ctab-disabled">
<td className="text-primary fw-semibold">disabled<a href="#ctab-disabled" aria-label="CTab disabled permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CTab from '@coreui/react/src/components/tabs/CTab'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Toggle the disabled state for the component.</td>
+ <td colSpan="3">
+ <p>Toggle the disabled state for the component.</p>
+ </td>
</tr>
<tr id="ctab-itemKey">
<td className="text-primary fw-semibold">itemKey<a href="#ctab-itemKey" aria-label="CTab itemKey permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CTab from '@coreui/react/src/components/tabs/CTab'
<td><code>{`string`}</code>, <code>{`number`}</code></td>
</tr>
<tr>
- <td colSpan="3">Item key.</td>
+ <td colSpan="3">
+ <p>Item key.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CTabContent.api.mdx b/packages/docs/content/api/CTabContent.api.mdx
index 76755621..c57cbae0 100644
--- a/packages/docs/content/api/CTabContent.api.mdx
+++ b/packages/docs/content/api/CTabContent.api.mdx
@@ -21,7 +21,9 @@ import CTabContent from '@coreui/react/src/components/tabs/CTabContent'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CTabList.api.mdx b/packages/docs/content/api/CTabList.api.mdx
index 59fe0074..176e4fb7 100644
--- a/packages/docs/content/api/CTabList.api.mdx
+++ b/packages/docs/content/api/CTabList.api.mdx
@@ -21,7 +21,9 @@ import CTabList from '@coreui/react/src/components/tabs/CTabList'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="ctablist-layout">
<td className="text-primary fw-semibold">layout<a href="#ctablist-layout" aria-label="CTabList layout permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CTabList from '@coreui/react/src/components/tabs/CTabList'
<td><code>{`"fill"`}</code>, <code>{`"justified"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Specify a layout type for component.</td>
+ <td colSpan="3">
+ <p>Specify a layout type for component.</p>
+ </td>
</tr>
<tr id="ctablist-variant">
<td className="text-primary fw-semibold">variant<a href="#ctablist-variant" aria-label="CTabList variant permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CTabList from '@coreui/react/src/components/tabs/CTabList'
<td><code>{`"pills"`}</code>, <code>{`"tabs"`}</code>, <code>{`"underline"`}</code>, <code>{`"underline-border"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set the nav variant to tabs or pills.</td>
+ <td colSpan="3">
+ <p>Set the nav variant to tabs or pills.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CTabPane.api.mdx b/packages/docs/content/api/CTabPane.api.mdx
index 96326f15..4d401d33 100644
--- a/packages/docs/content/api/CTabPane.api.mdx
+++ b/packages/docs/content/api/CTabPane.api.mdx
@@ -21,7 +21,9 @@ import CTabPane from '@coreui/react/src/components/tabs/CTabPane'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="ctabpane-onHide">
<td className="text-primary fw-semibold">onHide<a href="#ctabpane-onHide" aria-label="CTabPane onHide permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CTabPane from '@coreui/react/src/components/tabs/CTabPane'
<td><code>{`() => void`}</code></td>
</tr>
<tr>
- <td colSpan="3">Callback fired when the component requests to be hidden.</td>
+ <td colSpan="3">
+ <p>Callback fired when the component requests to be hidden.</p>
+ </td>
</tr>
<tr id="ctabpane-onShow">
<td className="text-primary fw-semibold">onShow<a href="#ctabpane-onShow" aria-label="CTabPane onShow permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CTabPane from '@coreui/react/src/components/tabs/CTabPane'
<td><code>{`() => void`}</code></td>
</tr>
<tr>
- <td colSpan="3">Callback fired when the component requests to be shown.</td>
+ <td colSpan="3">
+ <p>Callback fired when the component requests to be shown.</p>
+ </td>
</tr>
<tr id="ctabpane-transition">
<td className="text-primary fw-semibold">transition<a href="#ctabpane-transition" aria-label="CTabPane transition permalink" className="anchor-link after">#</a><span className="badge bg-success">5.1.0+</span></td>
@@ -45,7 +51,9 @@ import CTabPane from '@coreui/react/src/components/tabs/CTabPane'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Enable fade in and fade out transition.</td>
+ <td colSpan="3">
+ <p>Enable fade in and fade out transition.</p>
+ </td>
</tr>
<tr id="ctabpane-visible">
<td className="text-primary fw-semibold">visible<a href="#ctabpane-visible" aria-label="CTabPane visible permalink" className="anchor-link after">#</a></td>
@@ -53,7 +61,9 @@ import CTabPane from '@coreui/react/src/components/tabs/CTabPane'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Toggle the visibility of component.</td>
+ <td colSpan="3">
+ <p>Toggle the visibility of component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CTabPanel.api.mdx b/packages/docs/content/api/CTabPanel.api.mdx
index db4df643..f8f092dd 100644
--- a/packages/docs/content/api/CTabPanel.api.mdx
+++ b/packages/docs/content/api/CTabPanel.api.mdx
@@ -21,7 +21,9 @@ import CTabPanel from '@coreui/react/src/components/tabs/CTabPanel'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="ctabpanel-itemKey">
<td className="text-primary fw-semibold">itemKey<a href="#ctabpanel-itemKey" aria-label="CTabPanel itemKey permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CTabPanel from '@coreui/react/src/components/tabs/CTabPanel'
<td><code>{`string`}</code>, <code>{`number`}</code></td>
</tr>
<tr>
- <td colSpan="3">Item key.</td>
+ <td colSpan="3">
+ <p>Item key.</p>
+ </td>
</tr>
<tr id="ctabpanel-onHide">
<td className="text-primary fw-semibold">onHide<a href="#ctabpanel-onHide" aria-label="CTabPanel onHide permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CTabPanel from '@coreui/react/src/components/tabs/CTabPanel'
<td><code>{`() => void`}</code></td>
</tr>
<tr>
- <td colSpan="3">Callback fired when the component requests to be hidden.</td>
+ <td colSpan="3">
+ <p>Callback fired when the component requests to be hidden.</p>
+ </td>
</tr>
<tr id="ctabpanel-onShow">
<td className="text-primary fw-semibold">onShow<a href="#ctabpanel-onShow" aria-label="CTabPanel onShow permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CTabPanel from '@coreui/react/src/components/tabs/CTabPanel'
<td><code>{`() => void`}</code></td>
</tr>
<tr>
- <td colSpan="3">Callback fired when the component requests to be shown.</td>
+ <td colSpan="3">
+ <p>Callback fired when the component requests to be shown.</p>
+ </td>
</tr>
<tr id="ctabpanel-transition">
<td className="text-primary fw-semibold">transition<a href="#ctabpanel-transition" aria-label="CTabPanel transition permalink" className="anchor-link after">#</a></td>
@@ -53,7 +61,9 @@ import CTabPanel from '@coreui/react/src/components/tabs/CTabPanel'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Enable fade in and fade out transition.</td>
+ <td colSpan="3">
+ <p>Enable fade in and fade out transition.</p>
+ </td>
</tr>
<tr id="ctabpanel-visible">
<td className="text-primary fw-semibold">visible<a href="#ctabpanel-visible" aria-label="CTabPanel visible permalink" className="anchor-link after">#</a></td>
@@ -61,7 +71,9 @@ import CTabPanel from '@coreui/react/src/components/tabs/CTabPanel'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Toggle the visibility of component.</td>
+ <td colSpan="3">
+ <p>Toggle the visibility of component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CTable.api.mdx b/packages/docs/content/api/CTable.api.mdx
index b1f101b4..556807db 100644
--- a/packages/docs/content/api/CTable.api.mdx
+++ b/packages/docs/content/api/CTable.api.mdx
@@ -21,7 +21,9 @@ import CTable from '@coreui/react/src/components/table/CTable'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set the vertical aligment.</td>
+ <td colSpan="3">
+ <p>Set the vertical aligment.</p>
+ </td>
</tr>
<tr id="ctable-borderColor">
<td className="text-primary fw-semibold">borderColor<a href="#ctable-borderColor" aria-label="CTable borderColor permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CTable from '@coreui/react/src/components/table/CTable'
<td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets the border color of the component to one of CoreUI’s themed colors.</td>
+ <td colSpan="3">
+ <p>Sets the border color of the component to one of CoreUI’s themed colors.</p>
+ </td>
</tr>
<tr id="ctable-bordered">
<td className="text-primary fw-semibold">bordered<a href="#ctable-bordered" aria-label="CTable bordered permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CTable from '@coreui/react/src/components/table/CTable'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Add borders on all sides of the table and cells.</td>
+ <td colSpan="3">
+ <p>Add borders on all sides of the table and cells.</p>
+ </td>
</tr>
<tr id="ctable-borderless">
<td className="text-primary fw-semibold">borderless<a href="#ctable-borderless" aria-label="CTable borderless permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CTable from '@coreui/react/src/components/table/CTable'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Remove borders on all sides of the table and cells.</td>
+ <td colSpan="3">
+ <p>Remove borders on all sides of the table and cells.</p>
+ </td>
</tr>
<tr id="ctable-caption">
<td className="text-primary fw-semibold">caption<a href="#ctable-caption" aria-label="CTable caption permalink" className="anchor-link after">#</a></td>
@@ -53,7 +61,9 @@ import CTable from '@coreui/react/src/components/table/CTable'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Put the caption on the top if you set <code>{`caption="top"`}</code> of the table or set the text of the table caption.</td>
+ <td colSpan="3">
+ <p>Put the caption on the top if you set <code>{`caption="top"`}</code> of the table or set the text of the table caption.</p>
+ </td>
</tr>
<tr id="ctable-captionTop">
<td className="text-primary fw-semibold">captionTop<a href="#ctable-captionTop" aria-label="CTable captionTop permalink" className="anchor-link after">#</a><span className="badge bg-success">4.3.0+</span></td>
@@ -61,7 +71,9 @@ import CTable from '@coreui/react/src/components/table/CTable'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set the text of the table caption and the caption on the top of the table.</td>
+ <td colSpan="3">
+ <p>Set the text of the table caption and the caption on the top of the table.</p>
+ </td>
</tr>
<tr id="ctable-className">
<td className="text-primary fw-semibold">className<a href="#ctable-className" aria-label="CTable className permalink" className="anchor-link after">#</a></td>
@@ -69,7 +81,9 @@ import CTable from '@coreui/react/src/components/table/CTable'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
<tr id="ctable-color">
<td className="text-primary fw-semibold">color<a href="#ctable-color" aria-label="CTable color permalink" className="anchor-link after">#</a></td>
@@ -77,7 +91,9 @@ import CTable from '@coreui/react/src/components/table/CTable'
<td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+ <td colSpan="3">
+ <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+ </td>
</tr>
<tr id="ctable-columns">
<td className="text-primary fw-semibold">columns<a href="#ctable-columns" aria-label="CTable columns permalink" className="anchor-link after">#</a><span className="badge bg-success">4.3.0+</span></td>
@@ -85,7 +101,18 @@ import CTable from '@coreui/react/src/components/table/CTable'
<td><code>{`(string | Column)[]`}</code></td>
</tr>
<tr>
- <td colSpan="3">Prop for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. '_props')<br/><br/>In columns prop each array item represents one column. Item might be specified in two ways:<br/>String: each item define column name equal to item value.<br/>Object: item is object with following keys available as column configuration:<br/>- key (required)(String) - define column name equal to item key.<br/>- label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting kebab-case and snake_case to individual words and capitalization of each word.<br/>- _props (Object) - adds classes to all cels in column, ex. <code>{`_props: { scope: 'col', className: 'custom-class' }`}</code>,<br/>- _style (Object) - adds styles to the column header (useful for defining widths)</td>
+ <td colSpan="3">
+ <p>Prop for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. '_props')</p>
+<p>In columns prop each array item represents one column. Item might be specified in two ways:<br />
+String: each item define column name equal to item value.<br />
+Object: item is object with following keys available as column configuration:</p>
+<ul>
+<li>key (required)(String) - define column name equal to item key.</li>
+<li>label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting kebab-case and snake_case to individual words and capitalization of each word.</li>
+<li>_props (Object) - adds classes to all cels in column, ex. <code>{`_props: { scope: 'col', className: 'custom-class' }`}</code>,</li>
+<li>_style (Object) - adds styles to the column header (useful for defining widths)</li>
+</ul>
+ </td>
</tr>
<tr id="ctable-footer">
<td className="text-primary fw-semibold">footer<a href="#ctable-footer" aria-label="CTable footer permalink" className="anchor-link after">#</a><span className="badge bg-success">4.3.0+</span></td>
@@ -93,7 +120,13 @@ import CTable from '@coreui/react/src/components/table/CTable'
<td><code>{`(string | FooterItem)[]`}</code></td>
</tr>
<tr>
- <td colSpan="3">Array of objects or strings, where each element represents one cell in the table footer.<br/><br/>Example items:<br/><code>{`['FooterCell', 'FooterCell', 'FooterCell']`}</code><br/>or<br/><code>{`[{ label: 'FooterCell', _props: { color: 'success' }, ...]`}</code></td>
+ <td colSpan="3">
+ <p>Array of objects or strings, where each element represents one cell in the table footer.</p>
+<p>Example items:<br />
+<code>{`['FooterCell', 'FooterCell', 'FooterCell']`}</code><br />
+or<br />
+<code>{`[{ label: 'FooterCell', _props: { color: 'success' }, ...]`}</code></p>
+ </td>
</tr>
<tr id="ctable-hover">
<td className="text-primary fw-semibold">hover<a href="#ctable-hover" aria-label="CTable hover permalink" className="anchor-link after">#</a></td>
@@ -101,7 +134,9 @@ import CTable from '@coreui/react/src/components/table/CTable'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Enable a hover state on table rows within a <code>{`\<CTableBody>`}</code>.</td>
+ <td colSpan="3">
+ <p>Enable a hover state on table rows within a <code>{`<CTableBody>`}</code>.</p>
+ </td>
</tr>
<tr id="ctable-items">
<td className="text-primary fw-semibold">items<a href="#ctable-items" aria-label="CTable items permalink" className="anchor-link after">#</a><span className="badge bg-success">4.3.0+</span></td>
@@ -109,7 +144,11 @@ import CTable from '@coreui/react/src/components/table/CTable'
<td><code>{`Item[]`}</code></td>
</tr>
<tr>
- <td colSpan="3">Array of objects, where each object represents one item - row in table. Additionally, you can add style classes to each row by passing them by '_props' key and to single cell by '_cellProps'.<br/><br/>Example item:<br/><code>{`{ name: 'John' , age: 12, _props: { color: 'success' }, _cellProps: { age: { className: 'fw-bold'}}}`}</code></td>
+ <td colSpan="3">
+ <p>Array of objects, where each object represents one item - row in table. Additionally, you can add style classes to each row by passing them by '<em>props' key and to single cell by '</em>cellProps'.</p>
+<p>Example item:<br />
+<code>{`{ name: 'John' , age: 12, _props: { color: 'success' }, _cellProps: { age: { className: 'fw-bold'}}}`}</code></p>
+ </td>
</tr>
<tr id="ctable-responsive">
<td className="text-primary fw-semibold">responsive<a href="#ctable-responsive" aria-label="CTable responsive permalink" className="anchor-link after">#</a></td>
@@ -117,7 +156,9 @@ import CTable from '@coreui/react/src/components/table/CTable'
<td><code>{`boolean`}</code>, <code>{`"sm"`}</code>, <code>{`"md"`}</code>, <code>{`"lg"`}</code>, <code>{`"xl"`}</code>, <code>{`"xxl"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to.</td>
+ <td colSpan="3">
+ <p>Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to.</p>
+ </td>
</tr>
<tr id="ctable-small">
<td className="text-primary fw-semibold">small<a href="#ctable-small" aria-label="CTable small permalink" className="anchor-link after">#</a></td>
@@ -125,7 +166,9 @@ import CTable from '@coreui/react/src/components/table/CTable'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Make table more compact by cutting all cell <code>{`padding`}</code> in half.</td>
+ <td colSpan="3">
+ <p>Make table more compact by cutting all cell <code>{`padding`}</code> in half.</p>
+ </td>
</tr>
<tr id="ctable-striped">
<td className="text-primary fw-semibold">striped<a href="#ctable-striped" aria-label="CTable striped permalink" className="anchor-link after">#</a></td>
@@ -133,7 +176,9 @@ import CTable from '@coreui/react/src/components/table/CTable'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Add zebra-striping to any table row within the <code>{`\<CTableBody>`}</code>.</td>
+ <td colSpan="3">
+ <p>Add zebra-striping to any table row within the <code>{`<CTableBody>`}</code>.</p>
+ </td>
</tr>
<tr id="ctable-stripedColumns">
<td className="text-primary fw-semibold">stripedColumns<a href="#ctable-stripedColumns" aria-label="CTable stripedColumns permalink" className="anchor-link after">#</a><span className="badge bg-success">4.3.0+</span></td>
@@ -141,7 +186,9 @@ import CTable from '@coreui/react/src/components/table/CTable'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Add zebra-striping to any table column.</td>
+ <td colSpan="3">
+ <p>Add zebra-striping to any table column.</p>
+ </td>
</tr>
<tr id="ctable-tableFootProps">
<td className="text-primary fw-semibold">tableFootProps<a href="#ctable-tableFootProps" aria-label="CTable tableFootProps permalink" className="anchor-link after">#</a><span className="badge bg-success">4.3.0+</span></td>
@@ -149,7 +196,9 @@ import CTable from '@coreui/react/src/components/table/CTable'
<td><code>{`CTableFootProps`}</code></td>
</tr>
<tr>
- <td colSpan="3">Properties that will be passed to the table footer component.</td>
+ <td colSpan="3">
+ <p>Properties that will be passed to the table footer component.</p>
+ </td>
</tr>
<tr id="ctable-tableHeadProps">
<td className="text-primary fw-semibold">tableHeadProps<a href="#ctable-tableHeadProps" aria-label="CTable tableHeadProps permalink" className="anchor-link after">#</a><span className="badge bg-success">4.3.0+</span></td>
@@ -157,7 +206,9 @@ import CTable from '@coreui/react/src/components/table/CTable'
<td><code>{`CTableHeadProps`}</code></td>
</tr>
<tr>
- <td colSpan="3">Properties that will be passed to the table head component.</td>
+ <td colSpan="3">
+ <p>Properties that will be passed to the table head component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CTableBody.api.mdx b/packages/docs/content/api/CTableBody.api.mdx
index 8bfc35ea..fa015ba9 100644
--- a/packages/docs/content/api/CTableBody.api.mdx
+++ b/packages/docs/content/api/CTableBody.api.mdx
@@ -21,7 +21,9 @@ import CTableBody from '@coreui/react/src/components/table/CTableBody'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
<tr id="ctablebody-color">
<td className="text-primary fw-semibold">color<a href="#ctablebody-color" aria-label="CTableBody color permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CTableBody from '@coreui/react/src/components/table/CTableBody'
<td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+ <td colSpan="3">
+ <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CTableCaption.api.mdx b/packages/docs/content/api/CTableCaption.api.mdx
index b98bd598..73372f90 100644
--- a/packages/docs/content/api/CTableCaption.api.mdx
+++ b/packages/docs/content/api/CTableCaption.api.mdx
@@ -5,16 +5,6 @@ import { CTableCaption } from '@coreui/react'
import CTableCaption from '@coreui/react/src/components/table/CTableCaption'
```
-<div className="table-responsive table-api border rounded mb-3">
- <table className="table">
- <thead>
- <tr>
- <th>Property</th>
- <th>Default</th>
- <th>Type</th>
- </tr>
- </thead>
- <tbody>
</tbody>
</table>
</div>
diff --git a/packages/docs/content/api/CTableDataCell.api.mdx b/packages/docs/content/api/CTableDataCell.api.mdx
index 1c8c79ac..5c133fbd 100644
--- a/packages/docs/content/api/CTableDataCell.api.mdx
+++ b/packages/docs/content/api/CTableDataCell.api.mdx
@@ -21,7 +21,9 @@ import CTableDataCell from '@coreui/react/src/components/table/CTableDataCell'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Highlight a table row or cell.</td>
+ <td colSpan="3">
+ <p>Highlight a table row or cell.</p>
+ </td>
</tr>
<tr id="ctabledatacell-align">
<td className="text-primary fw-semibold">align<a href="#ctabledatacell-align" aria-label="CTableDataCell align permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CTableDataCell from '@coreui/react/src/components/table/CTableDataCell'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set the vertical aligment.</td>
+ <td colSpan="3">
+ <p>Set the vertical aligment.</p>
+ </td>
</tr>
<tr id="ctabledatacell-className">
<td className="text-primary fw-semibold">className<a href="#ctabledatacell-className" aria-label="CTableDataCell className permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CTableDataCell from '@coreui/react/src/components/table/CTableDataCell'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
<tr id="ctabledatacell-color">
<td className="text-primary fw-semibold">color<a href="#ctabledatacell-color" aria-label="CTableDataCell color permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CTableDataCell from '@coreui/react/src/components/table/CTableDataCell'
<td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+ <td colSpan="3">
+ <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CTableFoot.api.mdx b/packages/docs/content/api/CTableFoot.api.mdx
index 87e1e2c8..005b256f 100644
--- a/packages/docs/content/api/CTableFoot.api.mdx
+++ b/packages/docs/content/api/CTableFoot.api.mdx
@@ -21,7 +21,9 @@ import CTableFoot from '@coreui/react/src/components/table/CTableFoot'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
<tr id="ctablefoot-color">
<td className="text-primary fw-semibold">color<a href="#ctablefoot-color" aria-label="CTableFoot color permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CTableFoot from '@coreui/react/src/components/table/CTableFoot'
<td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+ <td colSpan="3">
+ <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CTableHead.api.mdx b/packages/docs/content/api/CTableHead.api.mdx
index 00b9bca3..2d4fdffb 100644
--- a/packages/docs/content/api/CTableHead.api.mdx
+++ b/packages/docs/content/api/CTableHead.api.mdx
@@ -21,7 +21,9 @@ import CTableHead from '@coreui/react/src/components/table/CTableHead'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
<tr id="ctablehead-color">
<td className="text-primary fw-semibold">color<a href="#ctablehead-color" aria-label="CTableHead color permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CTableHead from '@coreui/react/src/components/table/CTableHead'
<td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+ <td colSpan="3">
+ <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CTableHeaderCell.api.mdx b/packages/docs/content/api/CTableHeaderCell.api.mdx
index 1e1c963e..8e4a1175 100644
--- a/packages/docs/content/api/CTableHeaderCell.api.mdx
+++ b/packages/docs/content/api/CTableHeaderCell.api.mdx
@@ -21,7 +21,9 @@ import CTableHeaderCell from '@coreui/react/src/components/table/CTableHeaderCel
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
<tr id="ctableheadercell-color">
<td className="text-primary fw-semibold">color<a href="#ctableheadercell-color" aria-label="CTableHeaderCell color permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CTableHeaderCell from '@coreui/react/src/components/table/CTableHeaderCel
<td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+ <td colSpan="3">
+ <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CTableResponsiveWrapper.api.mdx b/packages/docs/content/api/CTableResponsiveWrapper.api.mdx
index ff57b8c7..34bfbfeb 100644
--- a/packages/docs/content/api/CTableResponsiveWrapper.api.mdx
+++ b/packages/docs/content/api/CTableResponsiveWrapper.api.mdx
@@ -21,7 +21,9 @@ import CTableResponsiveWrapper from '@coreui/react/src/components/table/CTableRe
<td><code>{`boolean`}</code>, <code>{`"sm"`}</code>, <code>{`"md"`}</code>, <code>{`"lg"`}</code>, <code>{`"xl"`}</code>, <code>{`"xxl"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to.</td>
+ <td colSpan="3">
+ <p>Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CTableRow.api.mdx b/packages/docs/content/api/CTableRow.api.mdx
index c45094b8..7bd30762 100644
--- a/packages/docs/content/api/CTableRow.api.mdx
+++ b/packages/docs/content/api/CTableRow.api.mdx
@@ -21,7 +21,9 @@ import CTableRow from '@coreui/react/src/components/table/CTableRow'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Highlight a table row or cell..</td>
+ <td colSpan="3">
+ <p>Highlight a table row or cell..</p>
+ </td>
</tr>
<tr id="ctablerow-align">
<td className="text-primary fw-semibold">align<a href="#ctablerow-align" aria-label="CTableRow align permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CTableRow from '@coreui/react/src/components/table/CTableRow'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set the vertical aligment.</td>
+ <td colSpan="3">
+ <p>Set the vertical aligment.</p>
+ </td>
</tr>
<tr id="ctablerow-className">
<td className="text-primary fw-semibold">className<a href="#ctablerow-className" aria-label="CTableRow className permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CTableRow from '@coreui/react/src/components/table/CTableRow'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
<tr id="ctablerow-color">
<td className="text-primary fw-semibold">color<a href="#ctablerow-color" aria-label="CTableRow color permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CTableRow from '@coreui/react/src/components/table/CTableRow'
<td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+ <td colSpan="3">
+ <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CTabs.api.mdx b/packages/docs/content/api/CTabs.api.mdx
index 50d56cae..edade324 100644
--- a/packages/docs/content/api/CTabs.api.mdx
+++ b/packages/docs/content/api/CTabs.api.mdx
@@ -21,7 +21,9 @@ import CTabs from '@coreui/react/src/components/tabs/CTabs'
<td><code>{`string`}</code>, <code>{`number`}</code></td>
</tr>
<tr>
- <td colSpan="3">The active item key.</td>
+ <td colSpan="3">
+ <p>The active item key.</p>
+ </td>
</tr>
<tr id="ctabs-className">
<td className="text-primary fw-semibold">className<a href="#ctabs-className" aria-label="CTabs className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CTabs from '@coreui/react/src/components/tabs/CTabs'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="ctabs-onChange">
<td className="text-primary fw-semibold">onChange<a href="#ctabs-onChange" aria-label="CTabs onChange permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CTabs from '@coreui/react/src/components/tabs/CTabs'
<td><code>{`(value: string | number) => void`}</code></td>
</tr>
<tr>
- <td colSpan="3">The callback is fired when the active tab changes.</td>
+ <td colSpan="3">
+ <p>The callback is fired when the active tab changes.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CToast.api.mdx b/packages/docs/content/api/CToast.api.mdx
index 4c623448..ab94a25f 100644
--- a/packages/docs/content/api/CToast.api.mdx
+++ b/packages/docs/content/api/CToast.api.mdx
@@ -21,7 +21,9 @@ import CToast from '@coreui/react/src/components/toast/CToast'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Apply a CSS fade transition to the toast.</td>
+ <td colSpan="3">
+ <p>Apply a CSS fade transition to the toast.</p>
+ </td>
</tr>
<tr id="ctoast-autohide">
<td className="text-primary fw-semibold">autohide<a href="#ctoast-autohide" aria-label="CToast autohide permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CToast from '@coreui/react/src/components/toast/CToast'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Auto hide the toast.</td>
+ <td colSpan="3">
+ <p>Auto hide the toast.</p>
+ </td>
</tr>
<tr id="ctoast-className">
<td className="text-primary fw-semibold">className<a href="#ctoast-className" aria-label="CToast className permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CToast from '@coreui/react/src/components/toast/CToast'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="ctoast-color">
<td className="text-primary fw-semibold">color<a href="#ctoast-color" aria-label="CToast color permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CToast from '@coreui/react/src/components/toast/CToast'
<td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+ <td colSpan="3">
+ <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+ </td>
</tr>
<tr id="ctoast-delay">
<td className="text-primary fw-semibold">delay<a href="#ctoast-delay" aria-label="CToast delay permalink" className="anchor-link after">#</a></td>
@@ -53,7 +61,9 @@ import CToast from '@coreui/react/src/components/toast/CToast'
<td><code>{`number`}</code></td>
</tr>
<tr>
- <td colSpan="3">Delay hiding the toast (ms).</td>
+ <td colSpan="3">
+ <p>Delay hiding the toast (ms).</p>
+ </td>
</tr>
<tr id="ctoast-onClose">
<td className="text-primary fw-semibold">onClose<a href="#ctoast-onClose" aria-label="CToast onClose permalink" className="anchor-link after">#</a></td>
@@ -61,7 +71,9 @@ import CToast from '@coreui/react/src/components/toast/CToast'
<td><code>{`(index: number) => void`}</code></td>
</tr>
<tr>
- <td colSpan="3">Callback fired when the component requests to be closed.</td>
+ <td colSpan="3">
+ <p>Callback fired when the component requests to be closed.</p>
+ </td>
</tr>
<tr id="ctoast-onShow">
<td className="text-primary fw-semibold">onShow<a href="#ctoast-onShow" aria-label="CToast onShow permalink" className="anchor-link after">#</a></td>
@@ -69,7 +81,9 @@ import CToast from '@coreui/react/src/components/toast/CToast'
<td><code>{`(index: number) => void`}</code></td>
</tr>
<tr>
- <td colSpan="3">Callback fired when the component requests to be shown.</td>
+ <td colSpan="3">
+ <p>Callback fired when the component requests to be shown.</p>
+ </td>
</tr>
<tr id="ctoast-visible">
<td className="text-primary fw-semibold">visible<a href="#ctoast-visible" aria-label="CToast visible permalink" className="anchor-link after">#</a></td>
@@ -77,7 +91,9 @@ import CToast from '@coreui/react/src/components/toast/CToast'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Toggle the visibility of component.</td>
+ <td colSpan="3">
+ <p>Toggle the visibility of component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CToastBody.api.mdx b/packages/docs/content/api/CToastBody.api.mdx
index b5c2004f..22ec20e3 100644
--- a/packages/docs/content/api/CToastBody.api.mdx
+++ b/packages/docs/content/api/CToastBody.api.mdx
@@ -21,7 +21,9 @@ import CToastBody from '@coreui/react/src/components/toast/CToastBody'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CToastClose.api.mdx b/packages/docs/content/api/CToastClose.api.mdx
index f08ce983..7e16287a 100644
--- a/packages/docs/content/api/CToastClose.api.mdx
+++ b/packages/docs/content/api/CToastClose.api.mdx
@@ -21,7 +21,9 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Toggle the active state for the component.</td>
+ <td colSpan="3">
+ <p>Toggle the active state for the component.</p>
+ </td>
</tr>
<tr id="ctoastclose-as">
<td className="text-primary fw-semibold">as<a href="#ctoastclose-as" aria-label="CToastClose as permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose'
<td><code>{`(ElementType & string)`}</code>, <code>{`(ElementType & ComponentClass\<any, any>)`}</code>, <code>{`(ElementType & FunctionComponent\<any>)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+ <td colSpan="3">
+ <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+ </td>
</tr>
<tr id="ctoastclose-className">
<td className="text-primary fw-semibold">className<a href="#ctoastclose-className" aria-label="CToastClose className permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="ctoastclose-dark">
<td className="text-primary fw-semibold">dark<a href="#ctoastclose-dark" aria-label="CToastClose dark permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Invert the default color.</td>
+ <td colSpan="3">
+ <p>Invert the default color.</p>
+ </td>
</tr>
<tr id="ctoastclose-disabled">
<td className="text-primary fw-semibold">disabled<a href="#ctoastclose-disabled" aria-label="CToastClose disabled permalink" className="anchor-link after">#</a></td>
@@ -53,7 +61,9 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Toggle the disabled state for the component.</td>
+ <td colSpan="3">
+ <p>Toggle the disabled state for the component.</p>
+ </td>
</tr>
<tr id="ctoastclose-href">
<td className="text-primary fw-semibold">href<a href="#ctoastclose-href" aria-label="CToastClose href permalink" className="anchor-link after">#</a></td>
@@ -61,7 +71,9 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">The href attribute specifies the URL of the page the link goes to.</td>
+ <td colSpan="3">
+ <p>The href attribute specifies the URL of the page the link goes to.</p>
+ </td>
</tr>
<tr id="ctoastclose-shape">
<td className="text-primary fw-semibold">shape<a href="#ctoastclose-shape" aria-label="CToastClose shape permalink" className="anchor-link after">#</a></td>
@@ -69,7 +81,9 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose'
<td><code>{`'rounded'`}</code>, <code>{`'rounded-top'`}</code>, <code>{`'rounded-end'`}</code>, <code>{`'rounded-bottom'`}</code>, <code>{`'rounded-start'`}</code>, <code>{`'rounded-circle'`}</code>, <code>{`'rounded-pill'`}</code>, <code>{`'rounded-0'`}</code>, <code>{`'rounded-1'`}</code>, <code>{`'rounded-2'`}</code>, <code>{`'rounded-3'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Select the shape of the component.</td>
+ <td colSpan="3">
+ <p>Select the shape of the component.</p>
+ </td>
</tr>
<tr id="ctoastclose-size">
<td className="text-primary fw-semibold">size<a href="#ctoastclose-size" aria-label="CToastClose size permalink" className="anchor-link after">#</a></td>
@@ -77,7 +91,9 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose'
<td><code>{`"sm"`}</code>, <code>{`"lg"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Size the component small or large.</td>
+ <td colSpan="3">
+ <p>Size the component small or large.</p>
+ </td>
</tr>
<tr id="ctoastclose-type">
<td className="text-primary fw-semibold">type<a href="#ctoastclose-type" aria-label="CToastClose type permalink" className="anchor-link after">#</a></td>
@@ -85,7 +101,10 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose'
<td><code>{`"button"`}</code>, <code>{`"submit"`}</code>, <code>{`"reset"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Specifies the type of button. Always specify the type attribute for the <code>{`\<button>`}</code> element.<br/>Different browsers may use different default types for the <code>{`\<button>`}</code> element.</td>
+ <td colSpan="3">
+ <p>Specifies the type of button. Always specify the type attribute for the <code>{`<button>`}</code> element.<br />
+Different browsers may use different default types for the <code>{`<button>`}</code> element.</p>
+ </td>
</tr>
<tr id="ctoastclose-variant">
<td className="text-primary fw-semibold">variant<a href="#ctoastclose-variant" aria-label="CToastClose variant permalink" className="anchor-link after">#</a></td>
@@ -93,15 +112,19 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose'
<td><code>{`"outline"`}</code>, <code>{`"ghost"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set the button variant to an outlined button or a ghost button.</td>
+ <td colSpan="3">
+ <p>Set the button variant to an outlined button or a ghost button.</p>
+ </td>
</tr>
<tr id="ctoastclose-white">
- <td className="text-primary fw-semibold">white<a href="#ctoastclose-white" aria-label="CToastClose white permalink" className="anchor-link after">#</a><span className="badge bg-success">Deprecated undefined</span></td>
+ <td className="text-primary fw-semibold">white<a href="#ctoastclose-white" aria-label="CToastClose white permalink" className="anchor-link after">#</a><span className="badge bg-danger">Deprecated 5.0.0</span></td>
<td>undefined</td>
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Change the default color to white.</td>
+ <td colSpan="3">
+ <p>Change the default color to white.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CToastHeader.api.mdx b/packages/docs/content/api/CToastHeader.api.mdx
index 2d5725c5..370dabac 100644
--- a/packages/docs/content/api/CToastHeader.api.mdx
+++ b/packages/docs/content/api/CToastHeader.api.mdx
@@ -21,7 +21,9 @@ import CToastHeader from '@coreui/react/src/components/toast/CToastHeader'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="ctoastheader-closeButton">
<td className="text-primary fw-semibold">closeButton<a href="#ctoastheader-closeButton" aria-label="CToastHeader closeButton permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CToastHeader from '@coreui/react/src/components/toast/CToastHeader'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Automatically add a close button to the header.</td>
+ <td colSpan="3">
+ <p>Automatically add a close button to the header.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CToaster.api.mdx b/packages/docs/content/api/CToaster.api.mdx
index a0dde001..4550a356 100644
--- a/packages/docs/content/api/CToaster.api.mdx
+++ b/packages/docs/content/api/CToaster.api.mdx
@@ -21,7 +21,9 @@ import CToaster from '@coreui/react/src/components/toast/CToaster'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="ctoaster-placement">
<td className="text-primary fw-semibold">placement<a href="#ctoaster-placement" aria-label="CToaster placement permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CToaster from '@coreui/react/src/components/toast/CToaster'
<td><code>{`'top-start'`}</code>, <code>{`'top'`}</code>, <code>{`'top-end'`}</code>, <code>{`'middle-start'`}</code>, <code>{`'middle'`}</code>, <code>{`'middle-end'`}</code>, <code>{`'bottom-start'`}</code>, <code>{`'bottom'`}</code>, <code>{`'bottom-end'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Describes the placement of your component.</td>
+ <td colSpan="3">
+ <p>Describes the placement of your component.</p>
+ </td>
</tr>
<tr id="ctoaster-push">
<td className="text-primary fw-semibold">push<a href="#ctoaster-push" aria-label="CToaster push permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CToaster from '@coreui/react/src/components/toast/CToaster'
<td><code>{`ReactElement`}</code></td>
</tr>
<tr>
- <td colSpan="3">Adds new <code>{`CToast`}</code> to <code>{`CToaster`}</code>.</td>
+ <td colSpan="3">
+ <p>Adds new <code>{`CToast`}</code> to <code>{`CToaster`}</code>.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CTooltip.api.mdx b/packages/docs/content/api/CTooltip.api.mdx
index 3c644692..b6815ffa 100644
--- a/packages/docs/content/api/CTooltip.api.mdx
+++ b/packages/docs/content/api/CTooltip.api.mdx
@@ -21,7 +21,9 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Apply a CSS fade transition to the tooltip.</td>
+ <td colSpan="3">
+ <p>Apply a CSS fade transition to the tooltip.</p>
+ </td>
</tr>
<tr id="ctooltip-className">
<td className="text-primary fw-semibold">className<a href="#ctooltip-className" aria-label="CTooltip className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the component.</p>
+ </td>
</tr>
<tr id="ctooltip-container">
<td className="text-primary fw-semibold">container<a href="#ctooltip-container" aria-label="CTooltip container permalink" className="anchor-link after">#</a><span className="badge bg-success">4.11.0+</span></td>
@@ -37,7 +41,9 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip'
<td><code>{`Element`}</code>, <code>{`DocumentFragment`}</code>, <code>{`(() => Element | DocumentFragment)`}</code></td>
</tr>
<tr>
- <td colSpan="3">Appends the react tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default <code>{`document.body`}</code>.</td>
+ <td colSpan="3">
+ <p>Appends the react tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default <code>{`document.body`}</code>.</p>
+ </td>
</tr>
<tr id="ctooltip-content">
<td className="text-primary fw-semibold">content<a href="#ctooltip-content" aria-label="CTooltip content permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Content node for your component.</td>
+ <td colSpan="3">
+ <p>Content node for your component.</p>
+ </td>
</tr>
<tr id="ctooltip-delay">
<td className="text-primary fw-semibold">delay<a href="#ctooltip-delay" aria-label="CTooltip delay permalink" className="anchor-link after">#</a><span className="badge bg-success">4.9.0+</span></td>
@@ -53,7 +61,9 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip'
<td><code>{`number`}</code>, <code>{`{ show: number; hide: number; }`}</code></td>
</tr>
<tr>
- <td colSpan="3">The delay for displaying and hiding the tooltip (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: <code>{`{ 'show': 500, 'hide': 100 }`}</code>.</td>
+ <td colSpan="3">
+ <p>The delay for displaying and hiding the tooltip (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: <code>{`{ 'show': 500, 'hide': 100 }`}</code>.</p>
+ </td>
</tr>
<tr id="ctooltip-fallbackPlacements">
<td className="text-primary fw-semibold">fallbackPlacements<a href="#ctooltip-fallbackPlacements" aria-label="CTooltip fallbackPlacements permalink" className="anchor-link after">#</a><span className="badge bg-success">4.9.0+</span></td>
@@ -61,7 +71,9 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip'
<td><code>{`Placements`}</code>, <code>{`Placements[]`}</code></td>
</tr>
<tr>
- <td colSpan="3">Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.</td>
+ <td colSpan="3">
+ <p>Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.</p>
+ </td>
</tr>
<tr id="ctooltip-offset">
<td className="text-primary fw-semibold">offset<a href="#ctooltip-offset" aria-label="CTooltip offset permalink" className="anchor-link after">#</a></td>
@@ -69,7 +81,9 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip'
<td><code>{`[number, number]`}</code></td>
</tr>
<tr>
- <td colSpan="3">Offset of the tooltip relative to its target.</td>
+ <td colSpan="3">
+ <p>Offset of the tooltip relative to its target.</p>
+ </td>
</tr>
<tr id="ctooltip-onHide">
<td className="text-primary fw-semibold">onHide<a href="#ctooltip-onHide" aria-label="CTooltip onHide permalink" className="anchor-link after">#</a></td>
@@ -77,7 +91,9 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip'
<td><code>{`() => void`}</code></td>
</tr>
<tr>
- <td colSpan="3">Callback fired when the component requests to be hidden.</td>
+ <td colSpan="3">
+ <p>Callback fired when the component requests to be hidden.</p>
+ </td>
</tr>
<tr id="ctooltip-onShow">
<td className="text-primary fw-semibold">onShow<a href="#ctooltip-onShow" aria-label="CTooltip onShow permalink" className="anchor-link after">#</a></td>
@@ -85,7 +101,9 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip'
<td><code>{`() => void`}</code></td>
</tr>
<tr>
- <td colSpan="3">Callback fired when the component requests to be shown.</td>
+ <td colSpan="3">
+ <p>Callback fired when the component requests to be shown.</p>
+ </td>
</tr>
<tr id="ctooltip-placement">
<td className="text-primary fw-semibold">placement<a href="#ctooltip-placement" aria-label="CTooltip placement permalink" className="anchor-link after">#</a></td>
@@ -93,7 +111,9 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip'
<td><code>{`"auto"`}</code>, <code>{`"top"`}</code>, <code>{`"bottom"`}</code>, <code>{`"right"`}</code>, <code>{`"left"`}</code></td>
</tr>
<tr>
- <td colSpan="3">Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.</td>
+ <td colSpan="3">
+ <p>Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.</p>
+ </td>
</tr>
<tr id="ctooltip-trigger">
<td className="text-primary fw-semibold">trigger<a href="#ctooltip-trigger" aria-label="CTooltip trigger permalink" className="anchor-link after">#</a></td>
@@ -101,7 +121,9 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip'
<td><code>{`'hover'`}</code>, <code>{`'focus'`}</code>, <code>{`'click'`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.</td>
+ <td colSpan="3">
+ <p>Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.</p>
+ </td>
</tr>
<tr id="ctooltip-visible">
<td className="text-primary fw-semibold">visible<a href="#ctooltip-visible" aria-label="CTooltip visible permalink" className="anchor-link after">#</a></td>
@@ -109,7 +131,9 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Toggle the visibility of tooltip component.</td>
+ <td colSpan="3">
+ <p>Toggle the visibility of tooltip component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CWidgetStatsA.api.mdx b/packages/docs/content/api/CWidgetStatsA.api.mdx
index 089edbea..5f070ae2 100644
--- a/packages/docs/content/api/CWidgetStatsA.api.mdx
+++ b/packages/docs/content/api/CWidgetStatsA.api.mdx
@@ -21,7 +21,9 @@ import CWidgetStatsA from '@coreui/react/src/components/widgets/CWidgetStatsA'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Action node for your component.</td>
+ <td colSpan="3">
+ <p>Action node for your component.</p>
+ </td>
</tr>
<tr id="cwidgetstatsa-chart">
<td className="text-primary fw-semibold">chart<a href="#cwidgetstatsa-chart" aria-label="CWidgetStatsA chart permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CWidgetStatsA from '@coreui/react/src/components/widgets/CWidgetStatsA'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Chart node for your component.</td>
+ <td colSpan="3">
+ <p>Chart node for your component.</p>
+ </td>
</tr>
<tr id="cwidgetstatsa-className">
<td className="text-primary fw-semibold">className<a href="#cwidgetstatsa-className" aria-label="CWidgetStatsA className permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CWidgetStatsA from '@coreui/react/src/components/widgets/CWidgetStatsA'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="cwidgetstatsa-color">
<td className="text-primary fw-semibold">color<a href="#cwidgetstatsa-color" aria-label="CWidgetStatsA color permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CWidgetStatsA from '@coreui/react/src/components/widgets/CWidgetStatsA'
<td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+ <td colSpan="3">
+ <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+ </td>
</tr>
<tr id="cwidgetstatsa-title">
<td className="text-primary fw-semibold">title<a href="#cwidgetstatsa-title" aria-label="CWidgetStatsA title permalink" className="anchor-link after">#</a></td>
@@ -53,7 +61,9 @@ import CWidgetStatsA from '@coreui/react/src/components/widgets/CWidgetStatsA'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Title node for your component.</td>
+ <td colSpan="3">
+ <p>Title node for your component.</p>
+ </td>
</tr>
<tr id="cwidgetstatsa-value">
<td className="text-primary fw-semibold">value<a href="#cwidgetstatsa-value" aria-label="CWidgetStatsA value permalink" className="anchor-link after">#</a></td>
@@ -61,7 +71,9 @@ import CWidgetStatsA from '@coreui/react/src/components/widgets/CWidgetStatsA'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Value node for your component.</td>
+ <td colSpan="3">
+ <p>Value node for your component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CWidgetStatsB.api.mdx b/packages/docs/content/api/CWidgetStatsB.api.mdx
index 89134329..95930531 100644
--- a/packages/docs/content/api/CWidgetStatsB.api.mdx
+++ b/packages/docs/content/api/CWidgetStatsB.api.mdx
@@ -21,7 +21,9 @@ import CWidgetCWidgetStatsB from '@coreui/react/src/components/widgets/CWidgetSt
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="cwidgetcwidgetstatsb-color">
<td className="text-primary fw-semibold">color<a href="#cwidgetcwidgetstatsb-color" aria-label="CWidgetCWidgetStatsB color permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CWidgetCWidgetStatsB from '@coreui/react/src/components/widgets/CWidgetSt
<td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+ <td colSpan="3">
+ <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+ </td>
</tr>
<tr id="cwidgetcwidgetstatsb-inverse">
<td className="text-primary fw-semibold">inverse<a href="#cwidgetcwidgetstatsb-inverse" aria-label="CWidgetCWidgetStatsB inverse permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CWidgetCWidgetStatsB from '@coreui/react/src/components/widgets/CWidgetSt
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Colors have been inverted from their default dark shade.</td>
+ <td colSpan="3">
+ <p>Colors have been inverted from their default dark shade.</p>
+ </td>
</tr>
<tr id="cwidgetcwidgetstatsb-progress">
<td className="text-primary fw-semibold">progress<a href="#cwidgetcwidgetstatsb-progress" aria-label="CWidgetCWidgetStatsB progress permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CWidgetCWidgetStatsB from '@coreui/react/src/components/widgets/CWidgetSt
<td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets the color context of the progress bar to one of CoreUI’s themed colors.</td>
+ <td colSpan="3">
+ <p>Sets the color context of the progress bar to one of CoreUI’s themed colors.</p>
+ </td>
</tr>
<tr id="cwidgetcwidgetstatsb-text">
<td className="text-primary fw-semibold">text<a href="#cwidgetcwidgetstatsb-text" aria-label="CWidgetCWidgetStatsB text permalink" className="anchor-link after">#</a></td>
@@ -53,7 +61,9 @@ import CWidgetCWidgetStatsB from '@coreui/react/src/components/widgets/CWidgetSt
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Helper text for your component.</td>
+ <td colSpan="3">
+ <p>Helper text for your component.</p>
+ </td>
</tr>
<tr id="cwidgetcwidgetstatsb-title">
<td className="text-primary fw-semibold">title<a href="#cwidgetcwidgetstatsb-title" aria-label="CWidgetCWidgetStatsB title permalink" className="anchor-link after">#</a></td>
@@ -61,7 +71,9 @@ import CWidgetCWidgetStatsB from '@coreui/react/src/components/widgets/CWidgetSt
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Title node for your component.</td>
+ <td colSpan="3">
+ <p>Title node for your component.</p>
+ </td>
</tr>
<tr id="cwidgetcwidgetstatsb-value">
<td className="text-primary fw-semibold">value<a href="#cwidgetcwidgetstatsb-value" aria-label="CWidgetCWidgetStatsB value permalink" className="anchor-link after">#</a></td>
@@ -69,7 +81,9 @@ import CWidgetCWidgetStatsB from '@coreui/react/src/components/widgets/CWidgetSt
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Value node for your component.</td>
+ <td colSpan="3">
+ <p>Value node for your component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CWidgetStatsC.api.mdx b/packages/docs/content/api/CWidgetStatsC.api.mdx
index a3e44a23..47c6e1ad 100644
--- a/packages/docs/content/api/CWidgetStatsC.api.mdx
+++ b/packages/docs/content/api/CWidgetStatsC.api.mdx
@@ -21,7 +21,9 @@ import CWidgetStatsCWidgetStatsC from '@coreui/react/src/components/widgets/CWid
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="cwidgetstatscwidgetstatsc-color">
<td className="text-primary fw-semibold">color<a href="#cwidgetstatscwidgetstatsc-color" aria-label="CWidgetStatsCWidgetStatsC color permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CWidgetStatsCWidgetStatsC from '@coreui/react/src/components/widgets/CWid
<td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+ <td colSpan="3">
+ <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+ </td>
</tr>
<tr id="cwidgetstatscwidgetstatsc-icon">
<td className="text-primary fw-semibold">icon<a href="#cwidgetstatscwidgetstatsc-icon" aria-label="CWidgetStatsCWidgetStatsC icon permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CWidgetStatsCWidgetStatsC from '@coreui/react/src/components/widgets/CWid
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Icon node for your component.</td>
+ <td colSpan="3">
+ <p>Icon node for your component.</p>
+ </td>
</tr>
<tr id="cwidgetstatscwidgetstatsc-inverse">
<td className="text-primary fw-semibold">inverse<a href="#cwidgetstatscwidgetstatsc-inverse" aria-label="CWidgetStatsCWidgetStatsC inverse permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CWidgetStatsCWidgetStatsC from '@coreui/react/src/components/widgets/CWid
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Colors have been inverted from their default dark shade.</td>
+ <td colSpan="3">
+ <p>Colors have been inverted from their default dark shade.</p>
+ </td>
</tr>
<tr id="cwidgetstatscwidgetstatsc-progress">
<td className="text-primary fw-semibold">progress<a href="#cwidgetstatscwidgetstatsc-progress" aria-label="CWidgetStatsCWidgetStatsC progress permalink" className="anchor-link after">#</a></td>
@@ -53,7 +61,9 @@ import CWidgetStatsCWidgetStatsC from '@coreui/react/src/components/widgets/CWid
<td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets the color context of the progress bar to one of CoreUI’s themed colors.</td>
+ <td colSpan="3">
+ <p>Sets the color context of the progress bar to one of CoreUI’s themed colors.</p>
+ </td>
</tr>
<tr id="cwidgetstatscwidgetstatsc-title">
<td className="text-primary fw-semibold">title<a href="#cwidgetstatscwidgetstatsc-title" aria-label="CWidgetStatsCWidgetStatsC title permalink" className="anchor-link after">#</a></td>
@@ -61,7 +71,9 @@ import CWidgetStatsCWidgetStatsC from '@coreui/react/src/components/widgets/CWid
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Title node for your component.</td>
+ <td colSpan="3">
+ <p>Title node for your component.</p>
+ </td>
</tr>
<tr id="cwidgetstatscwidgetstatsc-value">
<td className="text-primary fw-semibold">value<a href="#cwidgetstatscwidgetstatsc-value" aria-label="CWidgetStatsCWidgetStatsC value permalink" className="anchor-link after">#</a></td>
@@ -69,7 +81,9 @@ import CWidgetStatsCWidgetStatsC from '@coreui/react/src/components/widgets/CWid
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Value node for your component.</td>
+ <td colSpan="3">
+ <p>Value node for your component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CWidgetStatsD.api.mdx b/packages/docs/content/api/CWidgetStatsD.api.mdx
index 93fd72d6..5680f8eb 100644
--- a/packages/docs/content/api/CWidgetStatsD.api.mdx
+++ b/packages/docs/content/api/CWidgetStatsD.api.mdx
@@ -21,7 +21,9 @@ import CWidgetStatsD from '@coreui/react/src/components/widgets/CWidgetStatsD'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Chart node for your component.</td>
+ <td colSpan="3">
+ <p>Chart node for your component.</p>
+ </td>
</tr>
<tr id="cwidgetstatsd-className">
<td className="text-primary fw-semibold">className<a href="#cwidgetstatsd-className" aria-label="CWidgetStatsD className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CWidgetStatsD from '@coreui/react/src/components/widgets/CWidgetStatsD'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="cwidgetstatsd-color">
<td className="text-primary fw-semibold">color<a href="#cwidgetstatsd-color" aria-label="CWidgetStatsD color permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CWidgetStatsD from '@coreui/react/src/components/widgets/CWidgetStatsD'
<td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+ <td colSpan="3">
+ <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+ </td>
</tr>
<tr id="cwidgetstatsd-icon">
<td className="text-primary fw-semibold">icon<a href="#cwidgetstatsd-icon" aria-label="CWidgetStatsD icon permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CWidgetStatsD from '@coreui/react/src/components/widgets/CWidgetStatsD'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Icon node for your component.</td>
+ <td colSpan="3">
+ <p>Icon node for your component.</p>
+ </td>
</tr>
<tr id="cwidgetstatsd-values">
<td className="text-primary fw-semibold">values<a href="#cwidgetstatsd-values" aria-label="CWidgetStatsD values permalink" className="anchor-link after">#</a></td>
@@ -53,7 +61,9 @@ import CWidgetStatsD from '@coreui/react/src/components/widgets/CWidgetStatsD'
<td><code>{`Value[]`}</code></td>
</tr>
<tr>
- <td colSpan="3">Values and titles for your component.</td>
+ <td colSpan="3">
+ <p>Values and titles for your component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CWidgetStatsE.api.mdx b/packages/docs/content/api/CWidgetStatsE.api.mdx
index e1831870..bd22c4ce 100644
--- a/packages/docs/content/api/CWidgetStatsE.api.mdx
+++ b/packages/docs/content/api/CWidgetStatsE.api.mdx
@@ -21,7 +21,9 @@ import CWidgetStatsE from '@coreui/react/src/components/widgets/CWidgetStatsE'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Chart node for your component.</td>
+ <td colSpan="3">
+ <p>Chart node for your component.</p>
+ </td>
</tr>
<tr id="cwidgetstatse-className">
<td className="text-primary fw-semibold">className<a href="#cwidgetstatse-className" aria-label="CWidgetStatsE className permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CWidgetStatsE from '@coreui/react/src/components/widgets/CWidgetStatsE'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="cwidgetstatse-title">
<td className="text-primary fw-semibold">title<a href="#cwidgetstatse-title" aria-label="CWidgetStatsE title permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CWidgetStatsE from '@coreui/react/src/components/widgets/CWidgetStatsE'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Title node for your component.</td>
+ <td colSpan="3">
+ <p>Title node for your component.</p>
+ </td>
</tr>
<tr id="cwidgetstatse-value">
<td className="text-primary fw-semibold">value<a href="#cwidgetstatse-value" aria-label="CWidgetStatsE value permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CWidgetStatsE from '@coreui/react/src/components/widgets/CWidgetStatsE'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Value node for your component.</td>
+ <td colSpan="3">
+ <p>Value node for your component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/api/CWidgetStatsF.api.mdx b/packages/docs/content/api/CWidgetStatsF.api.mdx
index cc63e104..146bd5d7 100644
--- a/packages/docs/content/api/CWidgetStatsF.api.mdx
+++ b/packages/docs/content/api/CWidgetStatsF.api.mdx
@@ -21,7 +21,9 @@ import CWidgetStatsF from '@coreui/react/src/components/widgets/CWidgetStatsF'
<td><code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">A string of all className you want applied to the base component.</td>
+ <td colSpan="3">
+ <p>A string of all className you want applied to the base component.</p>
+ </td>
</tr>
<tr id="cwidgetstatsf-color">
<td className="text-primary fw-semibold">color<a href="#cwidgetstatsf-color" aria-label="CWidgetStatsF color permalink" className="anchor-link after">#</a></td>
@@ -29,7 +31,9 @@ import CWidgetStatsF from '@coreui/react/src/components/widgets/CWidgetStatsF'
<td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
</tr>
<tr>
- <td colSpan="3">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+ <td colSpan="3">
+ <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+ </td>
</tr>
<tr id="cwidgetstatsf-footer">
<td className="text-primary fw-semibold">footer<a href="#cwidgetstatsf-footer" aria-label="CWidgetStatsF footer permalink" className="anchor-link after">#</a></td>
@@ -37,7 +41,9 @@ import CWidgetStatsF from '@coreui/react/src/components/widgets/CWidgetStatsF'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Footer node for your component.</td>
+ <td colSpan="3">
+ <p>Footer node for your component.</p>
+ </td>
</tr>
<tr id="cwidgetstatsf-icon">
<td className="text-primary fw-semibold">icon<a href="#cwidgetstatsf-icon" aria-label="CWidgetStatsF icon permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CWidgetStatsF from '@coreui/react/src/components/widgets/CWidgetStatsF'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Icon node for your component.</td>
+ <td colSpan="3">
+ <p>Icon node for your component.</p>
+ </td>
</tr>
<tr id="cwidgetstatsf-padding">
<td className="text-primary fw-semibold">padding<a href="#cwidgetstatsf-padding" aria-label="CWidgetStatsF padding permalink" className="anchor-link after">#</a></td>
@@ -53,7 +61,9 @@ import CWidgetStatsF from '@coreui/react/src/components/widgets/CWidgetStatsF'
<td><code>{`boolean`}</code></td>
</tr>
<tr>
- <td colSpan="3">Set padding of your component.</td>
+ <td colSpan="3">
+ <p>Set padding of your component.</p>
+ </td>
</tr>
<tr id="cwidgetstatsf-title">
<td className="text-primary fw-semibold">title<a href="#cwidgetstatsf-title" aria-label="CWidgetStatsF title permalink" className="anchor-link after">#</a></td>
@@ -61,7 +71,9 @@ import CWidgetStatsF from '@coreui/react/src/components/widgets/CWidgetStatsF'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Title node for your component.</td>
+ <td colSpan="3">
+ <p>Title node for your component.</p>
+ </td>
</tr>
<tr id="cwidgetstatsf-value">
<td className="text-primary fw-semibold">value<a href="#cwidgetstatsf-value" aria-label="CWidgetStatsF value permalink" className="anchor-link after">#</a></td>
@@ -69,7 +81,9 @@ import CWidgetStatsF from '@coreui/react/src/components/widgets/CWidgetStatsF'
<td><code>{`ReactNode`}</code></td>
</tr>
<tr>
- <td colSpan="3">Value node for your component.</td>
+ <td colSpan="3">
+ <p>Value node for your component.</p>
+ </td>
</tr>
</tbody>
</table>
diff --git a/packages/docs/content/components/accordion/accessibility.mdx b/packages/docs/content/components/accordion/accessibility.mdx
index 03615822..8dd1f95b 100644
--- a/packages/docs/content/components/accordion/accessibility.mdx
+++ b/packages/docs/content/components/accordion/accessibility.mdx
@@ -9,13 +9,13 @@ route: /components/accordion/
Accordions are a common UI pattern used to toggle the visibility of content. Ensuring that accordions are accessible is crucial for users who rely on assistive technologies. This guide demonstrates how to create an accessible accordion using CoreUI React components, adhering to the [WAI-ARIA Accordion Design Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/).
-## Semantic Structure
+### Semantic Structure
- **Button Headers**: Each accordion header is rendered as a native `<button>` element. This ensures that headers are inherently focusable and operable via keyboard without additional scripting.
- **Proper HTML Elements**: Utilizes appropriate HTML elements (`<button>`, `<div>`, etc.) to convey the correct semantic meaning, enhancing compatibility with screen readers and other assistive technologies.
-## ARIA Attributes
+### ARIA Attributes
CoreUI React Accordion incorporates essential ARIA attributes to communicate the state and relationships of accordion items to assistive technologies:
@@ -25,18 +25,18 @@ CoreUI React Accordion incorporates essential ARIA attributes to communicate the
- **`id`**: Unique identifiers for both headers and panels establish clear relationships, ensuring that screen readers can accurately describe the accordion structure.
-## Focus Management
+### Focus Management
- **Automatic Focus Handling**: When an accordion panel is expanded or collapsed, focus is managed to ensure a seamless user experience. This prevents focus from being lost or trapped within the accordion, maintaining accessibility standards.
-## Visual Indicators
+### Visual Indicators
- **Focus Styles**: Clear visual indicators are provided for focused elements, aiding users who navigate via keyboard.
- **Active States**: Distinct styling for active (expanded) accordion items helps users identify the current state of each section.
-## Keyboard Support
+### Keyboard Support
The Accordion component supports comprehensive keyboard navigation out of the box:
diff --git a/packages/docs/content/components/accordion/index.mdx b/packages/docs/content/components/accordion/index.mdx
index 491ea4bf..e07d5a17 100644
--- a/packages/docs/content/components/accordion/index.mdx
+++ b/packages/docs/content/components/accordion/index.mdx
@@ -40,3 +40,13 @@ import AccordionAlwaysOpenExampleTS from '!!raw-loader!./examples/AccordionAlway
<ExampleSnippet code={AccordionAlwaysOpenExampleTS} componentName="React Accordion">
<AccordionAlwaysOpenExample />
</ExampleSnippet>
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [<CAccordion />](./api/#caccordion)
+- [<CAccordionBody />](./api/#caccordionbody)
+- [<CAccordionHeader />](./api/#caccordionheader)
+- [<CAccordionItem />](./api/#caccordionitem)
+
diff --git a/packages/docs/content/components/accordion/styling.mdx b/packages/docs/content/components/accordion/styling.mdx
index 5f48c98a..a8aff1a2 100644
--- a/packages/docs/content/components/accordion/styling.mdx
+++ b/packages/docs/content/components/accordion/styling.mdx
@@ -5,8 +5,6 @@ description: Learn how to customize the React Accordion component with CSS class
route: /components/accordion/
---
-import CAccordion from '@coreui/react'
-
### CSS class names
React Accordion comes with built-in class names that make styling super simple. Here’s a quick rundown of what you can use:
diff --git a/packages/docs/content/components/alert.mdx b/packages/docs/content/components/alert.mdx
deleted file mode 100644
index bb802c4b..00000000
--- a/packages/docs/content/components/alert.mdx
+++ /dev/null
@@ -1,262 +0,0 @@
----
-title: React Alert Component
-name: Alert
-description: React alert component gives contextual feedback information for common user operations. The alert component is delivered with a bunch of usable and adjustable alert messages.
-menu: Components
-route: /components/alert
-other_frameworks: alert
----
-
-import { useState } from 'react'
-import { CAlert, CAlertHeading, CAlertLink, CButton } from '@coreui/react/src/index'
-
-import CIcon from '@coreui/icons-react'
-
-import { cilBurn, cilCheckCircle, cilInfo, cilWarning } from '@coreui/icons'
-
-## How to use React Alert Component.
-
-React Alert is prepared for any length of text, as well as an optional close button. For a styling, use one of the **required** contextual `color` props (e.g., `primary`). For inline dismissal, use the [dismissing prop](#dismissing).
-
-```jsx preview
-<CAlert color="primary">
- A simple primary alert—check it out!
-</CAlert>
-<CAlert color="secondary">
- A simple secondary alert—check it out!
-</CAlert>
-<CAlert color="success">
- A simple success alert—check it out!
-</CAlert>
-<CAlert color="danger">
- A simple danger alert—check it out!
-</CAlert>
-<CAlert color="warning">
- A simple warning alert—check it out!
-</CAlert>
-<CAlert color="info">
- A simple info alert—check it out!
-</CAlert>
-<CAlert color="light">
- A simple light alert—check it out!
-</CAlert>
-<CAlert color="dark">
- A simple dark alert—check it out!
-</CAlert>
-```
-
-<Callout color="info" title="Conveying meaning to assistive technologies">
- Using color to add meaning only provides a visual indication, which will not be conveyed to
- users of assistive technologies – such as screen readers. Ensure that information denoted by the
- color is either obvious from the content itself (e.g. the visible text), or is included through
- alternative means, such as additional text hidden with the `.visually-hidden` class.
-</Callout>
-
-### Live example
-
-Click the button below to show an alert (hidden with inline styles to start), then dismiss (and destroy) it with the built-in close button.
-
-export const LiveExample = () => {
- const [visible, setVisible] = useState(false)
- return (
- <>
- <CAlert color="primary" dismissible visible={visible} onClose={() => setVisible(false)}>A simple primary alert—check it out!
- </CAlert>
- <CButton color="primary" onClick={() => setVisible(true)}>Show live alert</CButton>
- </>
- )
-}
-
-<Example>
- <LiveExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
- <>
- <CAlert color="primary" dismissible visible={visible} onClose={() => setVisible(false)}>
- A simple primary alert—check it out!
- </CAlert>
- <CButton color="primary" onClick={() => setVisible(true)}>
- Show live alert
- </CButton>
- </>
-)
-```
-
-### Link color
-
-Use the `<CAlertLink>` component to immediately give matching colored links inside any react alert component.
-
-```jsx preview
-<CAlert color="primary">
- A simple primary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
-</CAlert>
-<CAlert color="secondary">
- A simple secondary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
-</CAlert>
-<CAlert color="success">
- A simple success alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
-</CAlert>
-<CAlert color="danger">
- A simple danger alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
-</CAlert>
-<CAlert color="warning">
- A simple warning alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
-</CAlert>
-<CAlert color="info">
- A simple info alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
-</CAlert>
-<CAlert color="light">
- A simple light alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
-</CAlert>
-<CAlert color="dark">
- A simple dark alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
-</CAlert>
-```
-
-### Additional content
-
-React Alert can also incorporate supplementary components & elements like heading, paragraph, and divider.
-
-```jsx preview
-<CAlert color="success">
- <CAlertHeading as="h4">Well done!</CAlertHeading>
- <p>
- Aww yeah, you successfully read this important alert message. This example text is going to run
- a bit longer so that you can see how spacing within an alert works with this kind of content.
- </p>
- <hr />
- <p className="mb-0">
- Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
- </p>
-</CAlert>
-```
-
-### Icons
-
-Similarly, you can use [flexbox utilities](https//coreui.io/docs/4.0/utilities/flex") and [CoreUI Icons](https://icons.coreui.io) to create react alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles.
-
-```jsx preview
-<CAlert color="primary" className="d-flex align-items-center">
- <svg className="flex-shrink-0 me-2" width="24" height="24" viewBox="0 0 512 512">
- <rect
- width="32"
- height="176"
- x="240"
- y="176"
- fill="var(--ci-primary-color, currentColor)"
- className="ci-primary"
- ></rect>
- <rect
- width="32"
- height="32"
- x="240"
- y="384"
- fill="var(--ci-primary-color, currentColor)"
- className="ci-primary"
- ></rect>
- <path
- fill="var(--ci-primary-color, currentColor)"
- d="M274.014,16H237.986L16,445.174V496H496V445.174ZM464,464H48V452.959L256,50.826,464,452.959Z"
- className="ci-primary"
- ></path>
- </svg>
- <div>An example alert with an icon</div>
-</CAlert>
-```
-
-Need more than one icon for your react alerts? Consider using [CoreUI Icons](https://icons.coreui.io).
-
-```jsx preview
-<CAlert color="primary" className="d-flex align-items-center">
- <CIcon icon={cilInfo} className="flex-shrink-0 me-2" width={24} height={24} />
- <div>An example alert with an icon</div>
-</CAlert>
-<CAlert color="success" className="d-flex align-items-center">
- <CIcon icon={cilCheckCircle} className="flex-shrink-0 me-2" width={24} height={24} />
- <div>An example success alert with an icon</div>
-</CAlert>
-<CAlert color="warning" className="d-flex align-items-center">
- <CIcon icon={cilWarning} className="flex-shrink-0 me-2" width={24} height={24} />
- <div>An example warning alert with an icon</div>
-</CAlert>
-<CAlert color="danger" className="d-flex align-items-center">
- <CIcon icon={cilBurn} className="flex-shrink-0 me-2" width={24} height={24} />
- <div>An example danger alert with an icon</div>
-</CAlert>
-```
-
-### Solid
-
-Use `variant="solid"` to change contextual colors to solid.
-
-```jsx preview
-<CAlert color="primary" variant="solid">A simple solid primary alert—check it out!</CAlert>
-<CAlert color="secondary" variant="solid">A simple solid secondary alert—check it out!</CAlert>
-<CAlert color="success" variant="solid">A simple solid success alert—check it out!</CAlert>
-<CAlert color="danger" variant="solid">A simple solid danger alert—check it out!</CAlert>
-<CAlert color="warning" variant="solid">A simple solid warning alert—check it out!</CAlert>
-<CAlert color="info" variant="solid">A simple solid info alert—check it out!</CAlert>
-<CAlert color="light" variant="solid" className="text-high-emphasis">A simple solid light alert—check it out!</CAlert>
-<CAlert color="dark" variant="solid">A simple solid dark alert—check it out!</CAlert>
-```
-
-### Dismissing
-
-React Alert component can also be easily dismissed. Just add the `dismissible` prop.
-
-```jsx preview
-<CAlert
- color="warning"
- dismissible
- onClose={() => {
- alert('👋 Well, hi there! Thanks for dismissing me.')
- }}
->
- <strong>Go right ahead</strong> and click that dimiss over there on the right.
-</CAlert>
-```
-
-<Callout color="warning">
- When an alert is dismissed, the element is completely removed from the page structure. If a
- keyboard user dismisses the alert using the close button, their focus will suddenly be lost and,
- depending on the browser, reset to the start of the page/document.
-</Callout>
-
-## Customizing
-
-### CSS variables
-
-React alerts use local CSS variables on `.alert` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
-
-<ScssDocs file="_alert.scss" capture="alert-css-vars"/>
-
-#### How to use CSS variables
-
-```jsx
-const vars = {
- '--my-css-var': 10,
- '--my-another-css-var': 'red',
-}
-return <CAlert style={vars}>...</CAlert>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="alert-variables"/>
-
-## API
-
-### CAlert
-
-`markdown:CAlert.api.mdx`
-
-### CAlertHeading
-
-`markdown:CAlertHeading.api.mdx`
-
-### CAlertLink
-
-`markdown:CAlertLink.api.mdx`
diff --git a/packages/docs/content/components/alert/api.mdx b/packages/docs/content/components/alert/api.mdx
new file mode 100644
index 00000000..287df6f8
--- /dev/null
+++ b/packages/docs/content/components/alert/api.mdx
@@ -0,0 +1,22 @@
+---
+title: React Alert Component API
+name: Alert API
+description: Explore the API reference for the React Alert component and discover how to effectively utilize its props for customization.
+route: /components/alert/
+---
+
+import CAlertAPI from '../../api/CAlert.api.mdx'
+import CAlertHeadingAPI from '../../api/CAlertHeading.api.mdx'
+import CAlertLinkAPI from '../../api/CAlertLink.api.mdx'
+
+## CAlert
+
+<CAlertAPI />
+
+## CAlertHeading
+
+<CAlertHeadingAPI />
+
+## CAlertLink
+
+<CAlertLinkAPI />
diff --git a/packages/docs/content/components/alert/examples/AlertAdditionalContentExample.tsx b/packages/docs/content/components/alert/examples/AlertAdditionalContentExample.tsx
new file mode 100644
index 00000000..d51a8ea1
--- /dev/null
+++ b/packages/docs/content/components/alert/examples/AlertAdditionalContentExample.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import { CAlert, CAlertHeading } from '@coreui/react'
+
+export const AlertAdditionalContentExample = () => {
+ return (
+ <CAlert color="success">
+ <CAlertHeading as="h4">Well done!</CAlertHeading>
+ <p>
+ Aww yeah, you successfully read this important alert message. This example text is going to
+ run a bit longer so that you can see how spacing within an alert works with this kind of
+ content.
+ </p>
+ <hr />
+ <p className="mb-0">
+ Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
+ </p>
+ </CAlert>
+ )
+}
diff --git a/packages/docs/content/components/alert/examples/AlertDismissingExample.tsx b/packages/docs/content/components/alert/examples/AlertDismissingExample.tsx
new file mode 100644
index 00000000..0e3825ab
--- /dev/null
+++ b/packages/docs/content/components/alert/examples/AlertDismissingExample.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { CAlert } from '@coreui/react'
+
+export const AlertDismissingExample = () => {
+ return (
+ <CAlert
+ color="warning"
+ dismissible
+ onClose={() => {
+ alert('👋 Well, hi there! Thanks for dismissing me.')
+ }}
+ >
+ <strong>Go right ahead</strong> and click that dimiss over there on the right.
+ </CAlert>
+ )
+}
diff --git a/packages/docs/content/components/alert/examples/AlertExample.tsx b/packages/docs/content/components/alert/examples/AlertExample.tsx
new file mode 100644
index 00000000..b9454ba7
--- /dev/null
+++ b/packages/docs/content/components/alert/examples/AlertExample.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { CAlert } from '@coreui/react'
+
+export const AlertExample = () => {
+ return (
+ <>
+ <CAlert color="primary">A simple primary alert—check it out!</CAlert>
+ <CAlert color="secondary">A simple secondary alert—check it out!</CAlert>
+ <CAlert color="success">A simple success alert—check it out!</CAlert>
+ <CAlert color="danger">A simple danger alert—check it out!</CAlert>
+ <CAlert color="warning">A simple warning alert—check it out!</CAlert>
+ <CAlert color="info">A simple info alert—check it out!</CAlert>
+ <CAlert color="light">A simple light alert—check it out!</CAlert>
+ <CAlert color="dark">A simple dark alert—check it out!</CAlert>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/alert/examples/AlertIcons1Example.tsx b/packages/docs/content/components/alert/examples/AlertIcons1Example.tsx
new file mode 100644
index 00000000..7c47cc48
--- /dev/null
+++ b/packages/docs/content/components/alert/examples/AlertIcons1Example.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import { CAlert } from '@coreui/react'
+
+export const AlertIcons1Example = () => {
+ return (
+ <CAlert color="primary" className="d-flex align-items-center">
+ <svg className="flex-shrink-0 me-2" width="24" height="24" viewBox="0 0 512 512">
+ <rect
+ width="32"
+ height="176"
+ x="240"
+ y="176"
+ fill="var(--ci-primary-color, currentColor)"
+ className="ci-primary"
+ ></rect>
+ <rect
+ width="32"
+ height="32"
+ x="240"
+ y="384"
+ fill="var(--ci-primary-color, currentColor)"
+ className="ci-primary"
+ ></rect>
+ <path
+ fill="var(--ci-primary-color, currentColor)"
+ d="M274.014,16H237.986L16,445.174V496H496V445.174ZM464,464H48V452.959L256,50.826,464,452.959Z"
+ className="ci-primary"
+ ></path>
+ </svg>
+ <div>An example alert with an icon</div>
+ </CAlert>
+ )
+}
diff --git a/packages/docs/content/components/alert/examples/AlertIcons2Example.tsx b/packages/docs/content/components/alert/examples/AlertIcons2Example.tsx
new file mode 100644
index 00000000..64be2cc8
--- /dev/null
+++ b/packages/docs/content/components/alert/examples/AlertIcons2Example.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import { CAlert } from '@coreui/react'
+import CIcon from '@coreui/icons-react'
+import { cilBurn, cilCheckCircle, cilInfo, cilWarning } from '@coreui/icons'
+
+export const AlertIcons2Example = () => {
+ return (
+ <>
+ <CAlert color="primary" className="d-flex align-items-center">
+ <CIcon icon={cilInfo} className="flex-shrink-0 me-2" width={24} height={24} />
+ <div>An example alert with an icon</div>
+ </CAlert>
+ <CAlert color="success" className="d-flex align-items-center">
+ <CIcon icon={cilCheckCircle} className="flex-shrink-0 me-2" width={24} height={24} />
+ <div>An example success alert with an icon</div>
+ </CAlert>
+ <CAlert color="warning" className="d-flex align-items-center">
+ <CIcon icon={cilWarning} className="flex-shrink-0 me-2" width={24} height={24} />
+ <div>An example warning alert with an icon</div>
+ </CAlert>
+ <CAlert color="danger" className="d-flex align-items-center">
+ <CIcon icon={cilBurn} className="flex-shrink-0 me-2" width={24} height={24} />
+ <div>An example danger alert with an icon</div>
+ </CAlert>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/alert/examples/AlertLinkColorExample.tsx b/packages/docs/content/components/alert/examples/AlertLinkColorExample.tsx
new file mode 100644
index 00000000..aa5e47ce
--- /dev/null
+++ b/packages/docs/content/components/alert/examples/AlertLinkColorExample.tsx
@@ -0,0 +1,41 @@
+import React from 'react'
+import { CAlert, CAlertLink } from '@coreui/react'
+
+export const AlertLinkColorExample = () => {
+ return (
+ <>
+ <CAlert color="primary">
+ A simple primary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a
+ click if you like.
+ </CAlert>
+ <CAlert color="secondary">
+ A simple secondary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a
+ click if you like.
+ </CAlert>
+ <CAlert color="success">
+ A simple success alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a
+ click if you like.
+ </CAlert>
+ <CAlert color="danger">
+ A simple danger alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a
+ click if you like.
+ </CAlert>
+ <CAlert color="warning">
+ A simple warning alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a
+ click if you like.
+ </CAlert>
+ <CAlert color="info">
+ A simple info alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click
+ if you like.
+ </CAlert>
+ <CAlert color="light">
+ A simple light alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click
+ if you like.
+ </CAlert>
+ <CAlert color="dark">
+ A simple dark alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click
+ if you like.
+ </CAlert>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/alert/examples/AlertLiveExample.tsx b/packages/docs/content/components/alert/examples/AlertLiveExample.tsx
new file mode 100644
index 00000000..68584534
--- /dev/null
+++ b/packages/docs/content/components/alert/examples/AlertLiveExample.tsx
@@ -0,0 +1,16 @@
+import React, { useState } from 'react'
+import { CAlert, CButton } from '@coreui/react'
+
+export const AlertLiveExample = () => {
+ const [visible, setVisible] = useState(false)
+ return (
+ <>
+ <CAlert color="primary" dismissible visible={visible} onClose={() => setVisible(false)}>
+ A simple primary alert—check it out!
+ </CAlert>
+ <CButton color="primary" onClick={() => setVisible(true)}>
+ Show live alert
+ </CButton>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/alert/examples/AlertSolidExample.tsx b/packages/docs/content/components/alert/examples/AlertSolidExample.tsx
new file mode 100644
index 00000000..98917b57
--- /dev/null
+++ b/packages/docs/content/components/alert/examples/AlertSolidExample.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import { CAlert } from '@coreui/react'
+
+export const AlertSolidExample = () => {
+ return (
+ <>
+ <CAlert color="primary" variant="solid">
+ A simple solid primary alert—check it out!
+ </CAlert>
+ <CAlert color="secondary" variant="solid">
+ A simple solid secondary alert—check it out!
+ </CAlert>
+ <CAlert color="success" variant="solid">
+ A simple solid success alert—check it out!
+ </CAlert>
+ <CAlert color="danger" variant="solid">
+ A simple solid danger alert—check it out!
+ </CAlert>
+ <CAlert color="warning" variant="solid">
+ A simple solid warning alert—check it out!
+ </CAlert>
+ <CAlert color="info" variant="solid">
+ A simple solid info alert—check it out!
+ </CAlert>
+ <CAlert color="light" variant="solid" className="text-high-emphasis">
+ A simple solid light alert—check it out!
+ </CAlert>
+ <CAlert color="dark" variant="solid">
+ A simple solid dark alert—check it out!
+ </CAlert>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/alert/index.mdx b/packages/docs/content/components/alert/index.mdx
new file mode 100644
index 00000000..b354de88
--- /dev/null
+++ b/packages/docs/content/components/alert/index.mdx
@@ -0,0 +1,118 @@
+---
+title: React Alert Component
+name: Alert
+description: React alert component gives contextual feedback information for common user operations. The alert component is delivered with a bunch of usable and adjustable alert messages.
+menu: Components
+route: /components/alert/
+other_frameworks: alert
+---
+
+## How to use React Alert Component.
+
+React Alert is prepared for any length of text, as well as an optional close button. For a styling, use one of the **required** contextual `color` props (e.g., `primary`). For inline dismissal, use the [dismissing prop](#dismissing).
+
+import { AlertExample } from './examples/AlertExample.tsx'
+import AlertExampleTS from '!!raw-loader!./examples/AlertExample.tsx'
+
+<ExampleSnippet code={AlertExampleTS} componentName="React Alert">
+ <AlertExample />
+</ExampleSnippet>
+
+<Callout color="info" title="Conveying meaning to assistive technologies">
+ Using color to add meaning only provides a visual indication, which will not be conveyed to
+ users of assistive technologies – such as screen readers. Ensure that information denoted by the
+ color is either obvious from the content itself (e.g. the visible text), or is included through
+ alternative means, such as additional text hidden with the `.visually-hidden` class.
+</Callout>
+
+### Live example
+
+Click the button below to show an alert (hidden with inline styles to start), then dismiss (and destroy) it with the built-in close button.
+
+import { AlertLiveExample } from './examples/AlertLiveExample.tsx'
+import AlertLiveExampleTS from '!!raw-loader!./examples/AlertLiveExample.tsx'
+
+<ExampleSnippet code={AlertLiveExampleTS} componentName="React Alert">
+ <AlertLiveExample />
+</ExampleSnippet>
+
+### Link color
+
+Use the `<CAlertLink>` component to immediately give matching colored links inside any react alert component.
+
+import { AlertLinkColorExample } from './examples/AlertLinkColorExample.tsx'
+import AlertLinkColorExampleTS from '!!raw-loader!./examples/AlertLinkColorExample.tsx'
+
+<ExampleSnippet code={AlertLinkColorExampleTS} componentName="React Alert">
+ <AlertLinkColorExample />
+</ExampleSnippet>
+
+### Additional content
+
+React Alert can also incorporate supplementary components & elements like heading, paragraph, and divider.
+
+import { AlertAdditionalContentExample } from './examples/AlertAdditionalContentExample.tsx'
+import AlertAdditionalContentExampleTS from '!!raw-loader!./examples/AlertAdditionalContentExample.tsx'
+
+<ExampleSnippet code={AlertAdditionalContentExampleTS} componentName="React Alert">
+ <AlertAdditionalContentExample />
+</ExampleSnippet>
+
+### Icons
+
+Similarly, you can use [flexbox utilities](https//coreui.io/docs/4.0/utilities/flex") and [CoreUI Icons](https://icons.coreui.io) to create react alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles.
+
+import { AlertIcons1Example } from './examples/AlertIcons1Example.tsx'
+import AlertIcons1ExampleTS from '!!raw-loader!./examples/AlertIcons1Example.tsx'
+
+<ExampleSnippet code={AlertIcons1ExampleTS} componentName="React Alert">
+ <AlertIcons1Example />
+</ExampleSnippet>
+
+
+Need more than one icon for your react alerts? Consider using [CoreUI Icons](https://icons.coreui.io).
+
+import { AlertIcons2Example } from './examples/AlertIcons2Example.tsx'
+import AlertIcons2ExampleTS from '!!raw-loader!./examples/AlertIcons2Example.tsx'
+
+<ExampleSnippet code={AlertIcons2ExampleTS} componentName="React Alert">
+ <AlertIcons2Example />
+</ExampleSnippet>
+
+
+### Solid
+
+Use `variant="solid"` to change contextual colors to solid.
+
+import { AlertSolidExample } from './examples/AlertSolidExample.tsx'
+import AlertSolidExampleTS from '!!raw-loader!./examples/AlertSolidExample.tsx'
+
+<ExampleSnippet code={AlertSolidExampleTS} componentName="React Alert">
+ <AlertSolidExample />
+</ExampleSnippet>
+
+### Dismissing
+
+React Alert component can also be easily dismissed. Just add the `dismissible` prop.
+
+import { AlertDismissingExample } from './examples/AlertDismissingExample.tsx'
+import AlertDismissingExampleTS from '!!raw-loader!./examples/AlertDismissingExample.tsx'
+
+<ExampleSnippet code={AlertDismissingExampleTS} componentName="React Alert">
+ <AlertDismissingExample />
+</ExampleSnippet>
+
+
+<Callout color="warning">
+ When an alert is dismissed, the element is completely removed from the page structure. If a
+ keyboard user dismisses the alert using the close button, their focus will suddenly be lost and,
+ depending on the browser, reset to the start of the page/document.
+</Callout>
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [<CAlert />](./api/#calert)
+- [<CAlertHeading />](./api/#calertheading)
+- [<CAlertLink />](./api/#calertlink)
diff --git a/packages/docs/content/components/alert/styling.mdx b/packages/docs/content/components/alert/styling.mdx
new file mode 100644
index 00000000..5e29ce8d
--- /dev/null
+++ b/packages/docs/content/components/alert/styling.mdx
@@ -0,0 +1,39 @@
+---
+title: React Alert Component Styling
+name: Alert Styling
+description: Learn how to customize the React Alert component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/alert/
+---
+
+### CSS class names
+
+React Alert comes with built-in class names that make styling super simple. Here’s a quick rundown of what you can use:
+
+<ClassNamesDocs
+ files={[
+ 'components/alert/CAlert.tsx',
+ 'components/alert/CAlertHeading.tsx',
+ 'components/alert/CAlertLink.tsx',
+ ]}
+/>
+
+### CSS variables
+
+React Alert supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.
+
+<ScssDocs file="_alert.scss" capture="alert-css-vars" />
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+ '--cui-alert-color': '#333',
+ '--cui-alert-bg': '#f8f9fa',
+}
+
+return <CAlert style={customVars}>{/* Alert content */}</CAlert>
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="alert-variables" />
diff --git a/packages/docs/content/components/avatar.mdx b/packages/docs/content/components/avatar.mdx
deleted file mode 100644
index ebc7bae1..00000000
--- a/packages/docs/content/components/avatar.mdx
+++ /dev/null
@@ -1,125 +0,0 @@
----
-title: React Avatar Component
-name: Avatar
-description: The React Avatar component is used to display circular user profile pictures. React avatars can portray people or objects and support images, icons, or letters.
-menu: Components
-route: /components/avatar
-other_frameworks: avatar
----
-
-import { CAvatar } from '@coreui/react/src/index'
-
-import Avatar1 from './../assets/images/avatars/1.jpg'
-import Avatar2 from './../assets/images/avatars/2.jpg'
-import Avatar3 from './../assets/images/avatars/3.jpg'
-
-## Image avatars
-
-Showcase React avatars using images. These avatars are typically circular and can display user profile pictures.
-
-```jsx preview
-<CAvatar src={Avatar1} />
-<CAvatar src={Avatar2} />
-<CAvatar src={Avatar3} />
-```
-
-## Letter avatars
-
-Use letters inside avatars to represent users or objects when images are not available. This can be useful for displaying initials.
-
-```jsx preview
-<CAvatar color="primary" textColor="white">CUI</CAvatar>
-<CAvatar color="secondary">CUI</CAvatar>
-<CAvatar color="warning" textColor="white">CUI</CAvatar>
-```
-
-## Icons avatars
-
-Incorporate icons within React avatars, allowing for a visual representation using scalable vector graphics (SVG).
-
-```jsx preview
-<CAvatar color="info" textColor="white">
- <svg id="cib-coreui-c" className="icon" viewBox="0 0 32 32">
- <path d="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"></path><path d="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"></path>
- </svg>
-</CAvatar>
-<CAvatar color="success" textColor="white">
- <svg id="cib-coreui-c" className="icon" viewBox="0 0 32 32">
- <path d="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"></path><path d="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"></path>
- </svg>
-</CAvatar>
-<CAvatar color="danger" textColor="white">
- <svg id="cib-coreui-c" className="icon" viewBox="0 0 32 32">
- <path d="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"></path><path d="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"></path>
- </svg>
-</CAvatar>
-```
-
-## Rounded avatars
-
-Use the `shape="rounded"` prop to make react avatars squared with rounded corners.
-
-```jsx preview
-<CAvatar color="primary" textColor="white" shape="rounded">CUI</CAvatar>
-<CAvatar color="secondary" shape="rounded">CUI</CAvatar>
-<CAvatar color="warning" textColor="white" shape="rounded">CUI</CAvatar>
-```
-
-## Square avatars
-
-Use the `shape="rounded-0"` prop to make react avatars squared.
-
-```jsx preview
-<CAvatar color="primary" textColor="white" shape="rounded-0">CUI</CAvatar>
-<CAvatar color="secondary" shape="rounded-0">CUI</CAvatar>
-<CAvatar color="warning" textColor="white" shape="rounded-0">CUI</CAvatar>
-```
-
-## Sizes
-
-Fancy larger or smaller react avatar component? Add `size="xl"`, `size="lg"`, `size="md"` or `size="sm"` for additional sizes.
-
-```jsx preview
-<CAvatar color="secondary" size="xl">CUI</CAvatar>
-<CAvatar color="secondary" size="lg">CUI</CAvatar>
-<CAvatar color="secondary" size="md">CUI</CAvatar>
-<CAvatar color="secondary">CUI</CAvatar>
-<CAvatar color="secondary" size="sm">CUI</CAvatar>
-```
-
-## Avatars with status
-
-Add a status indicator to avatars using the `status` property to show online or offline status.
-
-```jsx preview
-<CAvatar src={Avatar1} status="success" />
-<CAvatar color="secondary" status="danger">CUI</CAvatar>
-```
-
-## Customizing
-
-### CSS variables
-
-React avatars use local CSS variables on `.avatar` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
-
-<ScssDocs file="_avatar.scss" capture="avatar-css-vars"/>
-
-#### How to use CSS variables
-
-```jsx
-const vars = {
- '--my-css-var': 10,
- '--my-another-css-var': 'red',
-}
-return <CAvatar style={vars}>...</CAvatar>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="avatar-variables"/>
-
-## API
-
-### CAvatar
-
-`markdown:CAvatar.api.mdx`
diff --git a/packages/docs/content/components/avatar/api.mdx b/packages/docs/content/components/avatar/api.mdx
new file mode 100644
index 00000000..43f01720
--- /dev/null
+++ b/packages/docs/content/components/avatar/api.mdx
@@ -0,0 +1,12 @@
+---
+title: React Avatar Component API
+name: Avatar API
+description: Explore the API reference for the React Avatar component and discover how to effectively utilize its props for customization.
+route: /components/avatar/
+---
+
+import CAvatarAPI from '../../api/CAvatar.api.mdx'
+
+## CAvatar
+
+<CAvatarAPI />
diff --git a/packages/docs/content/components/avatar/examples/AvatarIcon.tsx b/packages/docs/content/components/avatar/examples/AvatarIcon.tsx
new file mode 100644
index 00000000..80a56932
--- /dev/null
+++ b/packages/docs/content/components/avatar/examples/AvatarIcon.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import { CAvatar } from '@coreui/react'
+
+export const AvatarIcon = () => {
+ return (
+ <>
+ <CAvatar color="info" textColor="white">
+ <svg id="cib-coreui-c" className="icon" viewBox="0 0 32 32">
+ <path d="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"></path>
+ <path d="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"></path>
+ </svg>
+ </CAvatar>
+ <CAvatar color="success" textColor="white">
+ <svg id="cib-coreui-c" className="icon" viewBox="0 0 32 32">
+ <path d="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"></path>
+ <path d="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"></path>
+ </svg>
+ </CAvatar>
+ <CAvatar color="danger" textColor="white">
+ <svg id="cib-coreui-c" className="icon" viewBox="0 0 32 32">
+ <path d="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"></path>
+ <path d="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"></path>
+ </svg>
+ </CAvatar>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/avatar/examples/AvatarImage.tsx b/packages/docs/content/components/avatar/examples/AvatarImage.tsx
new file mode 100644
index 00000000..2271f997
--- /dev/null
+++ b/packages/docs/content/components/avatar/examples/AvatarImage.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { CAvatar } from '@coreui/react'
+
+import Avatar1 from './../../../assets/images/avatars/1.jpg'
+import Avatar2 from './../../../assets/images/avatars/2.jpg'
+import Avatar3 from './../../../assets/images/avatars/3.jpg'
+
+export const AvatarImage = () => {
+ return (
+ <>
+ <CAvatar src={Avatar1} />
+ <CAvatar src={Avatar2} />
+ <CAvatar src={Avatar3} />
+ </>
+ )
+}
diff --git a/packages/docs/content/components/avatar/examples/AvatarLetter.tsx b/packages/docs/content/components/avatar/examples/AvatarLetter.tsx
new file mode 100644
index 00000000..a67c7406
--- /dev/null
+++ b/packages/docs/content/components/avatar/examples/AvatarLetter.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { CAvatar } from '@coreui/react'
+
+export const AvatarLetter = () => {
+ return (
+ <>
+ <CAvatar color="primary" textColor="white">
+ CUI
+ </CAvatar>
+ <CAvatar color="secondary">CUI</CAvatar>
+ <CAvatar color="warning" textColor="white">
+ CUI
+ </CAvatar>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/avatar/examples/AvatarRounded.tsx b/packages/docs/content/components/avatar/examples/AvatarRounded.tsx
new file mode 100644
index 00000000..b2d69418
--- /dev/null
+++ b/packages/docs/content/components/avatar/examples/AvatarRounded.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { CAvatar } from '@coreui/react'
+
+export const AvatarRounded = () => {
+ return (
+ <>
+ <CAvatar color="primary" textColor="white" shape="rounded">
+ CUI
+ </CAvatar>
+ <CAvatar color="secondary" shape="rounded">
+ CUI
+ </CAvatar>
+ <CAvatar color="warning" textColor="white" shape="rounded">
+ CUI
+ </CAvatar>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/avatar/examples/AvatarSizes.tsx b/packages/docs/content/components/avatar/examples/AvatarSizes.tsx
new file mode 100644
index 00000000..7cf52140
--- /dev/null
+++ b/packages/docs/content/components/avatar/examples/AvatarSizes.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { CAvatar } from '@coreui/react'
+
+export const AvatarSizes = () => {
+ return (
+ <>
+ <CAvatar color="secondary" size="xl">
+ CUI
+ </CAvatar>
+ <CAvatar color="secondary" size="lg">
+ CUI
+ </CAvatar>
+ <CAvatar color="secondary" size="md">
+ CUI
+ </CAvatar>
+ <CAvatar color="secondary">CUI</CAvatar>
+ <CAvatar color="secondary" size="sm">
+ CUI
+ </CAvatar>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/avatar/examples/AvatarSquare.tsx b/packages/docs/content/components/avatar/examples/AvatarSquare.tsx
new file mode 100644
index 00000000..1a35ac8f
--- /dev/null
+++ b/packages/docs/content/components/avatar/examples/AvatarSquare.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { CAvatar } from '@coreui/react'
+
+export const AvatarSquare = () => {
+ return (
+ <>
+ <CAvatar color="primary" textColor="white" shape="rounded-0">
+ CUI
+ </CAvatar>
+ <CAvatar color="secondary" shape="rounded-0">
+ CUI
+ </CAvatar>
+ <CAvatar color="warning" textColor="white" shape="rounded-0">
+ CUI
+ </CAvatar>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/avatar/examples/AvatarWithStatus.tsx b/packages/docs/content/components/avatar/examples/AvatarWithStatus.tsx
new file mode 100644
index 00000000..cca01081
--- /dev/null
+++ b/packages/docs/content/components/avatar/examples/AvatarWithStatus.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { CAvatar } from '@coreui/react'
+
+import Avatar1 from './../../../assets/images/avatars/1.jpg'
+
+export const AvatarWithStatus = () => {
+ return (
+ <>
+ <CAvatar src={Avatar1} status="success" />
+ <CAvatar color="secondary" status="danger">
+ CUI
+ </CAvatar>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/avatar/index.mdx b/packages/docs/content/components/avatar/index.mdx
new file mode 100644
index 00000000..dc0cb927
--- /dev/null
+++ b/packages/docs/content/components/avatar/index.mdx
@@ -0,0 +1,91 @@
+---
+title: React Avatar Component
+name: Avatar
+description: The React Avatar component is used to display circular user profile pictures. React avatars can portray people or objects and support images, icons, or letters.
+route: /components/avatar/
+other_frameworks: avatar
+---
+
+## Image avatars
+
+Showcase React avatars using images. These avatars are typically circular and can display user profile pictures.
+
+import { AvatarImage } from './examples/AvatarImage.tsx'
+import AvatarImageTS from '!!raw-loader!./examples/AvatarImage.tsx'
+
+<ExampleSnippet code={AvatarImageTS} componentName="React Avatar">
+ <AvatarImage />
+</ExampleSnippet>
+
+## Letter avatars
+
+Use letters inside avatars to represent users or objects when images are not available. This can be useful for displaying initials.
+
+import { AvatarLetter } from './examples/AvatarLetter.tsx'
+import AvatarLetterTS from '!!raw-loader!./examples/AvatarLetter.tsx'
+
+<ExampleSnippet code={AvatarLetterTS} componentName="React Avatar">
+ <AvatarLetter />
+</ExampleSnippet>
+
+## Icons avatars
+
+Incorporate icons within React avatars, allowing for a visual representation using scalable vector graphics (SVG).
+
+import { AvatarIcon } from './examples/AvatarIcon.tsx'
+import AvatarIconTS from '!!raw-loader!./examples/AvatarIcon.tsx'
+
+<ExampleSnippet code={AvatarIconTS} componentName="React Avatar">
+ <AvatarIcon />
+</ExampleSnippet>
+
+## Rounded avatars
+
+Use the `shape="rounded"` prop to make react avatars squared with rounded corners.
+
+import { AvatarRounded } from './examples/AvatarRounded.tsx'
+import AvatarRoundedTS from '!!raw-loader!./examples/AvatarRounded.tsx'
+
+<ExampleSnippet code={AvatarRoundedTS} componentName="React Avatar">
+ <AvatarRounded />
+</ExampleSnippet>
+
+## Square avatars
+
+Use the `shape="rounded-0"` prop to make react avatars squared.
+
+import { AvatarSquare } from './examples/AvatarSquare.tsx'
+import AvatarSquareTS from '!!raw-loader!./examples/AvatarSquare.tsx'
+
+<ExampleSnippet code={AvatarSquareTS} componentName="React Avatar">
+ <AvatarSquare />
+</ExampleSnippet>
+
+## Sizes
+
+Fancy larger or smaller react avatar component? Add `size="xl"`, `size="lg"`, `size="md"` or `size="sm"` for additional sizes.
+
+import { AvatarSizes } from './examples/AvatarSizes.tsx'
+import AvatarSizesTS from '!!raw-loader!./examples/AvatarSizes.tsx'
+
+<ExampleSnippet code={AvatarSizesTS} componentName="React Avatar">
+ <AvatarSizes />
+</ExampleSnippet>
+
+## Avatars with status
+
+Add a status indicator to avatars using the `status` property to show online or offline status.
+
+import { AvatarWithStatus } from './examples/AvatarWithStatus.tsx'
+import AvatarWithStatusTS from '!!raw-loader!./examples/AvatarWithStatus.tsx'
+
+<ExampleSnippet code={AvatarWithStatusTS} componentName="React Avatar">
+ <AvatarWithStatus />
+</ExampleSnippet>
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [<CAvatar />](./api/#cavatar)
+
diff --git a/packages/docs/content/components/avatar/styling.mdx b/packages/docs/content/components/avatar/styling.mdx
new file mode 100644
index 00000000..d89adbba
--- /dev/null
+++ b/packages/docs/content/components/avatar/styling.mdx
@@ -0,0 +1,39 @@
+---
+title: React Avatar Component Styling
+name: Avatar Styling
+description: Learn how to customize the React Avatar component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/avatar/
+---
+
+{/* ### CSS class names
+
+React Avatar comes with built-in class names that make styling super simple. Here’s a quick rundown of what you can use:
+
+<ClassNamesDocs
+ files={[
+ 'components/alert/CAvatar.tsx',
+ 'components/alert/CAvatarHeading.tsx',
+ 'components/alert/CAvatarLink.tsx',
+ ]}
+/> */}
+
+### CSS variables
+
+React Avatar supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.
+
+<ScssDocs file="_avatar.scss" capture="avatar-css-vars" />
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+ '--cui-avatar-font-size': '1rem',
+ '--cui-avatar-status-width': '0.125rem',
+}
+
+return <CAvatar style={customVars} />
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="avatar-variables" />
diff --git a/packages/docs/content/components/badge.mdx b/packages/docs/content/components/badge.mdx
deleted file mode 100644
index 10501457..00000000
--- a/packages/docs/content/components/badge.mdx
+++ /dev/null
@@ -1,158 +0,0 @@
----
-title: React Badge Component
-name: Badge
-description: React badge component is small count and labeling component.
-menu: Components
-route: /components/badge
-other_frameworks: badge
----
-
-import { CBadge, CButton } from '@coreui/react/src/index'
-
-## How to use React Badge Component.
-
-React badge component scales to suit the size of the parent element by using relative font sizing and `em` units.
-
-```jsx preview
-<h1>Example heading <CBadge color="secondary">New</CBadge></h1>
-<h2>Example heading <CBadge color="secondary">New</CBadge></h2>
-<h3>Example heading <CBadge color="secondary">New</CBadge></h3>
-<h4>Example heading <CBadge color="secondary">New</CBadge></h4>
-<h5>Example heading <CBadge color="secondary">New</CBadge></h5>
-<h6>Example heading <CBadge color="secondary">New</CBadge></h6>
-```
-
-React badges can be used as part of links or buttons to provide a counter.
-
-```jsx preview
-<CButton color="primary">
- Notifications <CBadge color="secondary">4</CBadge>
-</CButton>
-```
-
-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.
-
-```jsx preview
-<CButton color="primary">
- Profile <CBadge color="secondary">9</CBadge>
- <span className="visually-hidden">unread messages</span>
-</CButton>
-```
-
-### Positioned
-
-Use `position` prop to modify a component and position it in the corner of a link or button.
-
-```jsx preview
-<CButton color="primary" className="position-relative">
- Profile
- <CBadge color="danger" position="top-start" shape="rounded-pill">
- 99+ <span className="visually-hidden">unread messages</span>
- </CBadge>
-</CButton>
-<CButton color="primary" className="position-relative">
- Profile
- <CBadge color="danger" position="top-end" shape="rounded-pill">
- 99+ <span className="visually-hidden">unread messages</span>
- </CBadge>
-</CButton>
-<br/>
-<CButton color="primary" className="position-relative">
- Profile
- <CBadge color="danger" position="bottom-start" shape="rounded-pill">
- 99+ <span className="visually-hidden">unread messages</span>
- </CBadge>
-</CButton>
-<CButton color="primary" className="position-relative">
- Profile
- <CBadge color="danger" position="bottom-end" shape="rounded-pill">
- 99+ <span className="visually-hidden">unread messages</span>
- </CBadge>
-</CButton>
-```
-
-You can also create more generic indicators without a counter using a few more utilities.
-
-```jsx preview
-<CButton color="primary" className="position-relative">
- Profile
- <CBadge
- className="border border-light p-2"
- color="danger"
- position="top-end"
- shape="rounded-circle"
- >
- <span className="visually-hidden">New alerts</span>
- </CBadge>
-</CButton>
-```
-
-## Contextual variations
-
-Add any of the below-mentioned `color` props to modify the presentation of a react badge.
-
-```jsx preview
-<CBadge color="primary">primary</CBadge>
-<CBadge color="success">success</CBadge>
-<CBadge color="danger">danger</CBadge>
-<CBadge color="warning">warning</CBadge>
-<CBadge color="info">info</CBadge>
-<CBadge textBgColor="light">light</CBadge>
-<CBadge color="dark">dark</CBadge>
-```
-
-You can also apply contextual variations with the `textBgColor` property, which automatically sets the text color to ensure compliance with the WCAG 4.5:1 contrast ratio standard for enhanced accessibility.
-
-```jsx preview
-<CBadge textBgColor="primary">primary</CBadge>
-<CBadge textBgColor="success">success</CBadge>
-<CBadge textBgColor="danger">danger</CBadge>
-<CBadge textBgColor="warning">warning</CBadge>
-<CBadge textBgColor="info">info</CBadge>
-<CBadge textBgColor="light">light</CBadge>
-<CBadge textBgColor="dark">dark</CBadge>
-```
-
-## Pill badges
-
-Apply the `shape="rounded-pill"` prop to make badges rounded.
-
-```jsx preview
-<CBadge color="primary" shape="rounded-pill">primary</CBadge>
-<CBadge color="success" shape="rounded-pill">success</CBadge>
-<CBadge color="danger" shape="rounded-pill">danger</CBadge>
-<CBadge color="warning" shape="rounded-pill">warning</CBadge>
-<CBadge color="info" shape="rounded-pill">info</CBadge>
-<CBadge textBgColor="light" shape="rounded-pill">light</CBadge>
-<CBadge color="dark" shape="rounded-pill">dark</CBadge>
-```
-
-## Customizing
-
-### CSS variables
-
-React badges use local CSS variables on `.badges` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
-
-<ScssDocs file="_badge.scss" capture="badge-css-vars"/>
-
-#### How to use CSS variables
-
-```jsx
-const vars = {
- '--my-css-var': 10,
- '--my-another-css-var': 'red',
-}
-return <CBadge style={vars}>...</CBadge>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="badge-variables"/>
-
-## API
-
-### CBadge
-
-`markdown:CBadge.api.mdx`
diff --git a/packages/docs/content/components/badge/api.mdx b/packages/docs/content/components/badge/api.mdx
new file mode 100644
index 00000000..0cf7ef43
--- /dev/null
+++ b/packages/docs/content/components/badge/api.mdx
@@ -0,0 +1,12 @@
+---
+title: React Badge Component API
+name: Badge API
+description: Explore the API reference for the React Badge component and discover how to effectively utilize its props for customization.
+route: /components/badge/
+---
+
+import CBadgeAPI from '../../api/CBadge.api.mdx'
+
+## CBadge
+
+<CBadgeAPI />
diff --git a/packages/docs/content/components/badge/examples/Badge2Example.tsx b/packages/docs/content/components/badge/examples/Badge2Example.tsx
new file mode 100644
index 00000000..c5af3862
--- /dev/null
+++ b/packages/docs/content/components/badge/examples/Badge2Example.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import { CBadge, CButton } from '@coreui/react'
+
+export const Badge2Example = () => {
+ return (
+ <CButton color="primary">
+ Notifications <CBadge color="secondary">4</CBadge>
+ </CButton>
+ )
+}
diff --git a/packages/docs/content/components/badge/examples/Badge3Example.tsx b/packages/docs/content/components/badge/examples/Badge3Example.tsx
new file mode 100644
index 00000000..ee8f2ef9
--- /dev/null
+++ b/packages/docs/content/components/badge/examples/Badge3Example.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { CBadge, CButton } from '@coreui/react'
+
+export const Badge3Example = () => {
+ return (
+ <CButton color="primary">
+ Profile <CBadge color="secondary">9</CBadge>
+ <span className="visually-hidden">unread messages</span>
+ </CButton>
+ )
+}
diff --git a/packages/docs/content/components/badge/examples/BadgeContextual2Variations.tsx b/packages/docs/content/components/badge/examples/BadgeContextual2Variations.tsx
new file mode 100644
index 00000000..363ec2aa
--- /dev/null
+++ b/packages/docs/content/components/badge/examples/BadgeContextual2Variations.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { CBadge } from '@coreui/react'
+
+export const BadgeContextual2Variations = () => {
+ return (
+ <>
+ <CBadge textBgColor="primary">primary</CBadge>
+ <CBadge textBgColor="success">success</CBadge>
+ <CBadge textBgColor="danger">danger</CBadge>
+ <CBadge textBgColor="warning">warning</CBadge>
+ <CBadge textBgColor="info">info</CBadge>
+ <CBadge textBgColor="light">light</CBadge>
+ <CBadge textBgColor="dark">dark</CBadge>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/badge/examples/BadgeContextualVariations.tsx b/packages/docs/content/components/badge/examples/BadgeContextualVariations.tsx
new file mode 100644
index 00000000..7f601c5f
--- /dev/null
+++ b/packages/docs/content/components/badge/examples/BadgeContextualVariations.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { CBadge } from '@coreui/react'
+
+export const BadgeContextualVariations = () => {
+ return (
+ <>
+ <CBadge color="primary">primary</CBadge>
+ <CBadge color="success">success</CBadge>
+ <CBadge color="danger">danger</CBadge>
+ <CBadge color="warning">warning</CBadge>
+ <CBadge color="info">info</CBadge>
+ <CBadge textBgColor="light">light</CBadge>
+ <CBadge color="dark">dark</CBadge>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/badge/examples/BadgeExample.tsx b/packages/docs/content/components/badge/examples/BadgeExample.tsx
new file mode 100644
index 00000000..83812e06
--- /dev/null
+++ b/packages/docs/content/components/badge/examples/BadgeExample.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { CBadge } from '@coreui/react'
+
+export const BadgeExample = () => {
+ return (
+ <>
+ <h1>Example heading <CBadge color="secondary">New</CBadge></h1>
+ <h2>Example heading <CBadge color="secondary">New</CBadge></h2>
+ <h3>Example heading <CBadge color="secondary">New</CBadge></h3>
+ <h4>Example heading <CBadge color="secondary">New</CBadge></h4>
+ <h5>Example heading <CBadge color="secondary">New</CBadge></h5>
+ <h6>Example heading <CBadge color="secondary">New</CBadge></h6>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/badge/examples/BadgePillExample.tsx b/packages/docs/content/components/badge/examples/BadgePillExample.tsx
new file mode 100644
index 00000000..fad582a6
--- /dev/null
+++ b/packages/docs/content/components/badge/examples/BadgePillExample.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { CBadge } from '@coreui/react'
+
+export const BadgePillExample = () => {
+ return (
+ <>
+ <CBadge color="primary" shape="rounded-pill">primary</CBadge>
+ <CBadge color="success" shape="rounded-pill">success</CBadge>
+ <CBadge color="danger" shape="rounded-pill">danger</CBadge>
+ <CBadge color="warning" shape="rounded-pill">warning</CBadge>
+ <CBadge color="info" shape="rounded-pill">info</CBadge>
+ <CBadge textBgColor="light" shape="rounded-pill">light</CBadge>
+ <CBadge color="dark" shape="rounded-pill">dark</CBadge>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/badge/examples/BadgePositioned2Example.tsx b/packages/docs/content/components/badge/examples/BadgePositioned2Example.tsx
new file mode 100644
index 00000000..53a01aef
--- /dev/null
+++ b/packages/docs/content/components/badge/examples/BadgePositioned2Example.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { CBadge, CButton } from '@coreui/react'
+
+export const BadgePositioned2Example = () => {
+ return (
+ <CButton color="primary" className="position-relative">
+ Profile
+ <CBadge
+ className="border border-light p-2"
+ color="danger"
+ position="top-end"
+ shape="rounded-circle"
+ >
+ <span className="visually-hidden">New alerts</span>
+ </CBadge>
+ </CButton>
+ )
+}
diff --git a/packages/docs/content/components/badge/examples/BadgePositionedExample.tsx b/packages/docs/content/components/badge/examples/BadgePositionedExample.tsx
new file mode 100644
index 00000000..b12cf61a
--- /dev/null
+++ b/packages/docs/content/components/badge/examples/BadgePositionedExample.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import { CBadge, CButton } from '@coreui/react'
+
+export const BadgePositionedExample = () => {
+ return (
+ <>
+ <CButton color="primary" className="position-relative">
+ Profile
+ <CBadge color="danger" position="top-start" shape="rounded-pill">
+ 99+ <span className="visually-hidden">unread messages</span>
+ </CBadge>
+ </CButton>
+ <CButton color="primary" className="position-relative">
+ Profile
+ <CBadge color="danger" position="top-end" shape="rounded-pill">
+ 99+ <span className="visually-hidden">unread messages</span>
+ </CBadge>
+ </CButton>
+ <br />
+ <CButton color="primary" className="position-relative">
+ Profile
+ <CBadge color="danger" position="bottom-start" shape="rounded-pill">
+ 99+ <span className="visually-hidden">unread messages</span>
+ </CBadge>
+ </CButton>
+ <CButton color="primary" className="position-relative">
+ Profile
+ <CBadge color="danger" position="bottom-end" shape="rounded-pill">
+ 99+ <span className="visually-hidden">unread messages</span>
+ </CBadge>
+ </CButton>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/badge/index.mdx b/packages/docs/content/components/badge/index.mdx
new file mode 100644
index 00000000..884efcf7
--- /dev/null
+++ b/packages/docs/content/components/badge/index.mdx
@@ -0,0 +1,97 @@
+---
+title: React Badge Component
+name: Badge
+description: React badge component is small count and labeling component.
+route: /components/badge/
+other_frameworks: badge
+---
+
+import { CBadge, CButton } from '@coreui/react/src/index'
+
+## How to use React Badge Component.
+
+React badge component scales to suit the size of the parent element by using relative font sizing and `em` units.
+
+import { BadgeExample } from './examples/BadgeExample.tsx'
+import BadgeExampleTS from '!!raw-loader!./examples/BadgeExample.tsx'
+
+<ExampleSnippet code={BadgeExampleTS} componentName="React Badge">
+ <BadgeExample />
+</ExampleSnippet>
+
+React badges can be used as part of links or buttons to provide a counter.
+
+import { Badge2Example } from './examples/Badge2Example.tsx'
+import Badge2ExampleTS from '!!raw-loader!./examples/Badge2Example.tsx'
+
+<ExampleSnippet code={Badge2ExampleTS} componentName="React Badge">
+ <Badge2Example />
+</ExampleSnippet>
+
+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.
+
+import { Badge3Example } from './examples/Badge3Example.tsx'
+import Badge3ExampleTS from '!!raw-loader!./examples/Badge3Example.tsx'
+
+<ExampleSnippet code={Badge3ExampleTS} componentName="React Badge">
+ <Badge3Example />
+</ExampleSnippet>
+
+### Positioned
+
+Use `position` prop to modify a component and position it in the corner of a link or button.
+
+import { BadgePositionedExample } from './examples/BadgePositionedExample.tsx'
+import BadgePositionedExampleTS from '!!raw-loader!./examples/BadgePositionedExample.tsx'
+
+<ExampleSnippet code={BadgePositionedExampleTS} componentName="React Badge">
+ <BadgePositionedExample />
+</ExampleSnippet>
+
+You can also create more generic indicators without a counter using a few more utilities.
+
+import { BadgePositioned2Example } from './examples/BadgePositioned2Example.tsx'
+import BadgePositioned2ExampleTS from '!!raw-loader!./examples/BadgePositioned2Example.tsx'
+
+<ExampleSnippet code={BadgePositioned2ExampleTS} componentName="React Badge">
+ <BadgePositioned2Example />
+</ExampleSnippet>
+
+## Contextual variations
+
+Add any of the below-mentioned `color` props to modify the presentation of a react badge.
+
+import { BadgeContextualVariations } from './examples/BadgeContextualVariations.tsx'
+import BadgeContextualVariationsTS from '!!raw-loader!./examples/BadgeContextualVariations.tsx'
+
+<ExampleSnippet code={BadgeContextualVariationsTS} componentName="React Badge">
+ <BadgeContextualVariations />
+</ExampleSnippet>
+
+You can also apply contextual variations with the `textBgColor` property, which automatically sets the text color to ensure compliance with the WCAG 4.5:1 contrast ratio standard for enhanced accessibility.
+
+import { BadgeContextual2Variations } from './examples/BadgeContextual2Variations.tsx'
+import BadgeContextual2VariationsTS from '!!raw-loader!./examples/BadgeContextual2Variations.tsx'
+
+<ExampleSnippet code={BadgeContextual2VariationsTS} componentName="React Badge">
+ <BadgeContextual2Variations />
+</ExampleSnippet>
+
+## Pill badges
+
+Apply the `shape="rounded-pill"` prop to make badges rounded.
+
+import { BadgePillExample } from './examples/BadgePillExample.tsx'
+import BadgePillExampleTS from '!!raw-loader!./examples/BadgePillExample.tsx'
+
+<ExampleSnippet code={BadgePillExampleTS} componentName="React Badge">
+ <BadgePillExample />
+</ExampleSnippet>
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [<CBadge />](./api/#cbadge)
diff --git a/packages/docs/content/components/badge/styling.mdx b/packages/docs/content/components/badge/styling.mdx
new file mode 100644
index 00000000..fa63eaeb
--- /dev/null
+++ b/packages/docs/content/components/badge/styling.mdx
@@ -0,0 +1,39 @@
+---
+title: React Badge Component Styling
+name: Badge Styling
+description: Learn how to customize the React Badge component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/badge/
+---
+
+{/* ### CSS class names
+
+React Badge comes with built-in class names that make styling super simple. Here’s a quick rundown of what you can use:
+
+<ClassNamesDocs
+ files={[
+ 'components/alert/CBadge.tsx',
+ 'components/alert/CBadgeHeading.tsx',
+ 'components/alert/CBadgeLink.tsx',
+ ]}
+/> */}
+
+### CSS variables
+
+React Badge supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.
+
+<ScssDocs file="_badge.scss" capture="badge-css-vars" />
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+ '--cui-avatar-font-size': '2rem',
+ '--cui-avatar-color': '#f2f3f4',
+}
+
+return <CBadge style={customVars} />
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="badge-variables" />
diff --git a/packages/docs/content/components/breadcrumb.mdx b/packages/docs/content/components/breadcrumb.mdx
deleted file mode 100644
index 96c0d6df..00000000
--- a/packages/docs/content/components/breadcrumb.mdx
+++ /dev/null
@@ -1,113 +0,0 @@
----
-title: React Breadcrumb Component
-name: Breadcrumb
-description: React breadcrumb navigation component which indicates the current location within a navigational hierarchy that automatically adds separators.
-menu: Components
-route: /components/breadcrumb
-other_frameworks: breadcrumb
----
-
-import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react/src/index'
-
-## 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.
-
-```jsx preview
-<CBreadcrumb>
- <CBreadcrumbItem active>Home</CBreadcrumbItem>
-</CBreadcrumb>
-
-<CBreadcrumb>
- <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
- <CBreadcrumbItem active>Library</CBreadcrumbItem>
-</CBreadcrumb>
-
-<CBreadcrumb>
- <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
- <CBreadcrumbItem href="#">Library</CBreadcrumbItem>
- <CBreadcrumbItem active>Data</CBreadcrumbItem>
-</CBreadcrumb>
-```
-
-## Dividers
-
-Dividers are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content). They can be changed by modifying a local CSS custom property `--coreui-breadcrumb-divider`, or through the `$breadcrumb-divider` Sass variable — and `$breadcrumb-divider-flipped` for its RTL counterpart, if needed. We default to our Sass variable, which is set as a fallback to the custom property. This way, you get a global divider that you can override without recompiling CSS at any time.
-
-```jsx preview
-<CBreadcrumb style={{"--cui-breadcrumb-divider": "'>'"}}>
- <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
- <CBreadcrumbItem active>Library</CBreadcrumbItem>
-</CBreadcrumb>
-```
-
-When modifying via Sass, the [quote](https://sass-lang.com/documentation/modules/string#quote) function is required to generate the quotes around a string. For example, using `>` as the divider, you can use this:
-
-```scss
-$breadcrumb-divider: quote(">");
-```
-
-It's also possible to use an **embedded SVG icon**. Apply it via our CSS custom property, or use the Sass variable.
-
-```jsx preview
-<CBreadcrumb style={{"--cui-breadcrumb-divider": "url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");"}}>
- <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
- <CBreadcrumbItem active>Library</CBreadcrumbItem>
-</CBreadcrumb>
-```
-
-```scss
-$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
-width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");
-```
-
-You can also remove the divider setting `--cui-breadcrumb-divider: '';` (empty strings in CSS custom properties counts as a value), or setting the Sass variable to `$breadcrumb-divider: none;`.
-
-```jsx preview
-<CBreadcrumb style={{"--cui-breadcrumb-divider": "'';"}}>
- <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
- <CBreadcrumbItem active>Library</CBreadcrumbItem>
-</CBreadcrumb>
-```
-
-```scss
-$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.**
-
-For more information, see the [WAI-ARIA Authoring Practices for the breadcrumb pattern](https://www.w3.org/TR/wai-aria-practices/#breadcrumb).
-
-## Customizing
-
-### CSS variables
-
-React breadcrumbs use local CSS variables on `.breadcrumb` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
-
-<ScssDocs file="_breadcrumb.scss" capture="breadcrumb-css-vars"/>
-
-#### How to use CSS variables
-
-```jsx
-const vars = {
- '--my-css-var': 10,
- '--my-another-css-var': "red"
-}
-return <CBreadcrumb style={vars}>...</CBreadcrumb>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="breadcrumb-variables"/>
-
-## API
-
-### CBreadcrumb
-
-`markdown:CBreadcrumb.api.mdx`
-
-### CBreadcrumbItem
-
-`markdown:CBreadcrumbItem.api.mdx`
diff --git a/packages/docs/content/components/breadcrumb/api.mdx b/packages/docs/content/components/breadcrumb/api.mdx
new file mode 100644
index 00000000..a2f37b3f
--- /dev/null
+++ b/packages/docs/content/components/breadcrumb/api.mdx
@@ -0,0 +1,17 @@
+---
+title: React Breadcrumb Component API
+name: Breadcrumb API
+description: Explore the API reference for the React Breadcrumb component and discover how to effectively utilize its props for customization.
+route: /components/breadcrumb/
+---
+
+import CBreadcrumbAPI from '../../api/CBreadcrumb.api.mdx'
+import CBreadcrumbItemAPI from '../../api/CBreadcrumbItem.api.mdx'
+
+## CBreadcrumb
+
+<CBreadcrumbAPI />
+
+## CBreadcrumbItem
+
+<CBreadcrumbItemAPI />
diff --git a/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers2Example.jsx b/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers2Example.jsx
new file mode 100644
index 00000000..da355c51
--- /dev/null
+++ b/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers2Example.jsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react'
+
+export const BreadcrumbDividers2Example = () => {
+ return (
+ <CBreadcrumb
+ style={{
+ '--cui-breadcrumb-divider': `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E")`,
+ }}
+ >
+ <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
+ <CBreadcrumbItem active>Library</CBreadcrumbItem>
+ </CBreadcrumb>
+ )
+}
diff --git a/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers2Example.tsx b/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers2Example.tsx
new file mode 100644
index 00000000..04a943a2
--- /dev/null
+++ b/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers2Example.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react'
+
+export const BreadcrumbDividers2Example = () => {
+ return (
+ <CBreadcrumb
+ style={
+ {
+ '--cui-breadcrumb-divider': `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E")`,
+ } as React.CSSProperties
+ }
+ >
+ <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
+ <CBreadcrumbItem active>Library</CBreadcrumbItem>
+ </CBreadcrumb>
+ )
+}
diff --git a/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers3Example.jsx b/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers3Example.jsx
new file mode 100644
index 00000000..9b814696
--- /dev/null
+++ b/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers3Example.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react'
+
+export const BreadcrumbDividers3Example = () => {
+ return (
+ <CBreadcrumb style={{ '--cui-breadcrumb-divider': '""' }}>
+ <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
+ <CBreadcrumbItem active>Library</CBreadcrumbItem>
+ </CBreadcrumb>
+ )
+}
diff --git a/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers3Example.tsx b/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers3Example.tsx
new file mode 100644
index 00000000..bd002005
--- /dev/null
+++ b/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers3Example.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react'
+
+export const BreadcrumbDividers3Example = () => {
+ return (
+ <CBreadcrumb style={{ '--cui-breadcrumb-divider': '""' } as React.CSSProperties}>
+ <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
+ <CBreadcrumbItem active>Library</CBreadcrumbItem>
+ </CBreadcrumb>
+ )
+}
diff --git a/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividersExample.jsx b/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividersExample.jsx
new file mode 100644
index 00000000..d9006e97
--- /dev/null
+++ b/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividersExample.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react'
+
+export const BreadcrumbDividersExample = () => {
+ return (
+ <CBreadcrumb style={{ '--cui-breadcrumb-divider': '">"' }}>
+ <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
+ <CBreadcrumbItem active>Library</CBreadcrumbItem>
+ </CBreadcrumb>
+ )
+}
diff --git a/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividersExample.tsx b/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividersExample.tsx
new file mode 100644
index 00000000..2ab4116e
--- /dev/null
+++ b/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividersExample.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react'
+
+export const BreadcrumbDividersExample = () => {
+ return (
+ <CBreadcrumb style={{ '--cui-breadcrumb-divider': '">"' } as React.CSSProperties}>
+ <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
+ <CBreadcrumbItem active>Library</CBreadcrumbItem>
+ </CBreadcrumb>
+ )
+}
diff --git a/packages/docs/content/components/breadcrumb/examples/BreadcrumbExample.tsx b/packages/docs/content/components/breadcrumb/examples/BreadcrumbExample.tsx
new file mode 100644
index 00000000..a50c180a
--- /dev/null
+++ b/packages/docs/content/components/breadcrumb/examples/BreadcrumbExample.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react'
+
+export const BreadcrumbExample = () => {
+ return (
+ <>
+ <CBreadcrumb>
+ <CBreadcrumbItem active>Home</CBreadcrumbItem>
+ </CBreadcrumb>
+
+ <CBreadcrumb>
+ <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
+ <CBreadcrumbItem active>Library</CBreadcrumbItem>
+ </CBreadcrumb>
+
+ <CBreadcrumb>
+ <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
+ <CBreadcrumbItem href="#">Library</CBreadcrumbItem>
+ <CBreadcrumbItem active>Data</CBreadcrumbItem>
+ </CBreadcrumb>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/breadcrumb/index.mdx b/packages/docs/content/components/breadcrumb/index.mdx
new file mode 100644
index 00000000..ae12318f
--- /dev/null
+++ b/packages/docs/content/components/breadcrumb/index.mdx
@@ -0,0 +1,89 @@
+---
+title: React Breadcrumb Component
+name: Breadcrumb
+description: React breadcrumb navigation component which indicates the current location within a navigational hierarchy that automatically adds separators.
+route: /components/breadcrumb/
+other_frameworks: breadcrumb
+---
+
+import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react/src/index'
+
+## 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.
+
+import { BreadcrumbExample } from './examples/BreadcrumbExample.tsx'
+import BreadcrumbExampleTS from '!!raw-loader!./examples/BreadcrumbExample.tsx'
+
+<ExampleSnippet code={BreadcrumbExampleTS} componentName="React Breadcrumb">
+ <BreadcrumbExample />
+</ExampleSnippet>
+
+## Dividers
+
+Dividers are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content). They can be changed by modifying a local CSS custom property `--cui-breadcrumb-divider`, or through the `$breadcrumb-divider` Sass variable — and `$breadcrumb-divider-flipped` for its RTL counterpart, if needed. We default to our Sass variable, which is set as a fallback to the custom property. This way, you get a global divider that you can override without recompiling CSS at any time.
+
+import { BreadcrumbDividersExample } from './examples/BreadcrumbDividersExample.tsx'
+import BreadcrumbDividersExampleJS from '!!raw-loader!./examples/BreadcrumbDividersExample.jsx'
+import BreadcrumbDividersExampleTS from '!!raw-loader!./examples/BreadcrumbDividersExample.tsx'
+
+<ExampleSnippet
+ code={{ js: BreadcrumbDividersExampleJS, ts: BreadcrumbDividersExampleTS }}
+ componentName="React Breadcrumb"
+>
+ <BreadcrumbDividersExample />
+</ExampleSnippet>
+
+When modifying via Sass, the [quote](https://sass-lang.com/documentation/modules/string#quote) function is required to generate the quotes around a string. For example, using `>` as the divider, you can use this:
+
+```scss
+$breadcrumb-divider: quote('>');
+```
+
+It's also possible to use an **embedded SVG icon**. Apply it via our CSS custom property, or use the Sass variable.
+
+import { BreadcrumbDividers2Example } from './examples/BreadcrumbDividers2Example.tsx'
+import BreadcrumbDividers2ExampleJS from '!!raw-loader!./examples/BreadcrumbDividers2Example.jsx'
+import BreadcrumbDividers2ExampleTS from '!!raw-loader!./examples/BreadcrumbDividers2Example.tsx'
+
+<ExampleSnippet
+ code={{ js: BreadcrumbDividers2ExampleJS, ts: BreadcrumbDividers2ExampleTS }}
+ componentName="React Breadcrumb"
+>
+ <BreadcrumbDividers2Example />
+</ExampleSnippet>
+
+```scss
+$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
+width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");
+```
+
+You can also remove the divider setting `--cui-breadcrumb-divider: '';` (empty strings in CSS custom properties counts as a value), or setting the Sass variable to `$breadcrumb-divider: none;`.
+
+import { BreadcrumbDividers3Example } from './examples/BreadcrumbDividers3Example.tsx'
+import BreadcrumbDividers3ExampleJS from '!!raw-loader!./examples/BreadcrumbDividers3Example.jsx'
+import BreadcrumbDividers3ExampleTS from '!!raw-loader!./examples/BreadcrumbDividers3Example.tsx'
+
+<ExampleSnippet
+ code={{ js: BreadcrumbDividers3ExampleJS, ts: BreadcrumbDividers3ExampleTS }}
+ componentName="React Breadcrumb"
+>
+ <BreadcrumbDividers3Example />
+</ExampleSnippet>
+
+```scss
+$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.**
+
+For more information, see the [WAI-ARIA Authoring Practices for the breadcrumb pattern](https://www.w3.org/TR/wai-aria-practices/#breadcrumb).
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [<CBreadcrumb />](./api/#cbreadcrumb)
+- [<CBreadcrumbItem />](./api/#cbreadcrumbitem)
diff --git a/packages/docs/content/components/breadcrumb/styling.mdx b/packages/docs/content/components/breadcrumb/styling.mdx
new file mode 100644
index 00000000..b9360e40
--- /dev/null
+++ b/packages/docs/content/components/breadcrumb/styling.mdx
@@ -0,0 +1,38 @@
+---
+title: React Breadcrumb Component Styling
+name: Breadcrumb Styling
+description: Learn how to customize the React Breadcrumb component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/breadcrumb/
+---
+
+{/* ### CSS class names
+
+React Breadcrumb comes with built-in class names that make styling super simple. Here’s a quick rundown of what you can use:
+
+<ClassNamesDocs
+ files={[
+ 'components/breadcrumb/CBreadcrumb.tsx',
+ 'components/breadcrumb/CBreadcrumbItem.tsx',
+ ]}
+/> */}
+
+### CSS variables
+
+React Breadcrumb supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.
+
+<ScssDocs file="_breadcrumb.scss" capture="breadcrumb-css-vars" />
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+ '--cui-breadcrumb-bg': '#eee',
+ '--cui-breadcrumb-divider-color': '#a2a3a4',
+}
+
+return <CBreadcrumb style={customVars} />
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="breadcrumb-variables" />
diff --git a/packages/docs/content/components/button-group.mdx b/packages/docs/content/components/button-group.mdx
deleted file mode 100644
index d14bcb53..00000000
--- a/packages/docs/content/components/button-group.mdx
+++ /dev/null
@@ -1,332 +0,0 @@
----
-title: React Button Group Component
-name: Button group
-description: React button group component allows to group a series of buttons and power them with JavaScript.
-menu: Components
-route: /components/button-group
-other_frameworks: button-group
----
-
-import {
- CButtonGroup,
- CButtonToolbar,
- CButton,
- CDropdown,
- CDropdownDivider,
- CDropdownHeader,
- CDropdownItem,
- CDropdownItemPlain,
- CDropdownMenu,
- CDropdownToggle,
- CFormCheck,
- CFormInput,
- CInputGroup,
- CInputGroupText,
-} from '@coreui/react/src/index'
-
-## How to use React Button Group Component.
-
-Wrap a series of `<CButton>` components in `<CButtonGroup>`.
-
-
-```jsx preview
-<CButtonGroup role="group" aria-label="Basic example">
- <CButton color="primary">Left</CButton>
- <CButton color="primary">Middle</CButton>
- <CButton color="primary">Right</CButton>
-</CButtonGroup>
-```
-
-##### Ensure the correct `role` and provide a label
-
-For assistive technologies (ex. screen readers) to communicate that a series of buttons are grouped, a proper `role` attribute has to be provided. For button groups, this should be `role="group"`, while toolbars should have a `role="toolbar"`.
-
-Besides, groups and toolbars should be provided an understandable label, as most assistive technologies will otherwise not declare them, despite the appearance of the specific role attribute. In the following examples provided here, we apply `aria-label`, but options such as `aria-labelledby` can also be used.
-
-These classes can also be added to groups of links, as an alternative to the `<CNav>` components.
-
-```jsx preview
-<CButtonGroup>
- <CButton href="#" color="primary" active>Active link</CButton>
- <CButton href="#" color="primary">Link</CButton>
- <CButton href="#" color="primary">Link</CButton>
-</CButtonGroup>
-```
-
-## Mixed styles
-
-```jsx preview
-<CButtonGroup role="group" aria-label="Basic mixed styles example">
- <CButton color="danger">Left</CButton>
- <CButton color="warning">Middle</CButton>
- <CButton color="success">Right</CButton>
-</CButtonGroup>
-```
-
-## Outlined styles
-
-```jsx preview
-<CButtonGroup role="group" aria-label="Basic outlined example">
- <CButton color="primary" variant="outline">Left</CButton>
- <CButton color="primary" variant="outline">Middle</CButton>
- <CButton color="primary" variant="outline">Right</CButton>
-</CButtonGroup>
-```
-
-## Checkbox and radio button groups
-
-Combine button-like checkbox and radio toggle buttons into a seamless looking button group.
-
-```jsx preview
-<CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
- <CFormCheck
- button={{ color: 'primary', variant: 'outline' }}
- id="btncheck1"
- autoComplete="off"
- label="Checkbox 1"
- />
- <CFormCheck
- button={{ color: 'primary', variant: 'outline' }}
- id="btncheck2"
- autoComplete="off"
- label="Checkbox 2"
- />
- <CFormCheck
- button={{ color: 'primary', variant: 'outline' }}
- id="btncheck3"
- autoComplete="off"
- label="Checkbox 3"
- />
-</CButtonGroup>
-```
-
-```jsx preview
-<CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
- <CFormCheck
- type="radio"
- button={{ color: 'primary', variant: 'outline' }}
- name="btnradio"
- id="btnradio1"
- autoComplete="off"
- label="Radio 1"
- />
- <CFormCheck
- type="radio"
- button={{ color: 'primary', variant: 'outline' }}
- name="btnradio"
- id="btnradio2"
- autoComplete="off"
- label="Radio 2"
- />
- <CFormCheck
- type="radio"
- button={{ color: 'primary', variant: 'outline' }}
- name="btnradio"
- id="btnradio3"
- autoComplete="off"
- label="Radio 3"
- />
-</CButtonGroup>
-```
-
-## Button toolbar
-
-Join sets of button groups into button toolbars for more complicated components. Use utility classes as needed to space out groups, buttons, and more.
-
-```jsx preview
-<CButtonToolbar role="group" aria-label="Toolbar with button groups">
- <CButtonGroup className="me-2" role="group" aria-label="First group">
- <CButton color="primary">1</CButton>
- <CButton color="primary">2</CButton>
- <CButton color="primary">3</CButton>
- <CButton color="primary">4</CButton>
- </CButtonGroup>
- <CButtonGroup className="me-2" role="group" aria-label="Second group">
- <CButton color="secondary">5</CButton>
- <CButton color="secondary">6</CButton>
- <CButton color="secondary">7</CButton>
- </CButtonGroup>
- <CButtonGroup className="me-2" role="group" aria-label="Third group">
- <CButton color="info">8</CButton>
- </CButtonGroup>
-</CButtonToolbar>
-```
-
-Feel free to combine input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities through to space items correctly.
-
-```jsx preview
-<CButtonToolbar className="mb-3" role="group" aria-label="Toolbar with button groups">
- <CButtonGroup className="me-2" role="group" aria-label="First group">
- <CButton color="secondary" variant="outline">1</CButton>
- <CButton color="secondary" variant="outline">2</CButton>
- <CButton color="secondary" variant="outline">3</CButton>
- <CButton color="secondary" variant="outline">4</CButton>
- </CButtonGroup>
- <CInputGroup>
- <CInputGroupText>@</CInputGroupText>
- <CFormInput placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon"/>
- </CInputGroup>
-</CButtonToolbar>
-<CButtonToolbar className="justify-content-between" role="group" aria-label="Toolbar with button groups">
- <CButtonGroup className="me-2" role="group" aria-label="First group">
- <CButton color="secondary" variant="outline">1</CButton>
- <CButton color="secondary" variant="outline">2</CButton>
- <CButton color="secondary" variant="outline">3</CButton>
- <CButton color="secondary" variant="outline">4</CButton>
- </CButtonGroup>
- <CInputGroup>
- <CInputGroupText>@</CInputGroupText>
- <CFormInput placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon"/>
- </CInputGroup>
-</CButtonToolbar>
-```
-
-## Sizing
-
-Alternatively, of implementing button sizing classes to each button in a group, set `size` property to all `<CButtonGroup>`'s, including each one when nesting multiple groups.
-
-```jsx preview
-<CButtonGroup size="lg" role="group" aria-label="Large button group">
- <CButton color="primary" variant="outline">Left</CButton>
- <CButton color="primary" variant="outline">Middle</CButton>
- <CButton color="primary" variant="outline">Right</CButton>
-</CButtonGroup>
-<br/>
-<CButtonGroup role="group" aria-label="Default button group">
- <CButton color="primary" variant="outline">Left</CButton>
- <CButton color="primary" variant="outline">Middle</CButton>
- <CButton color="primary" variant="outline">Right</CButton>
-</CButtonGroup>
-<br/>
-<CButtonGroup size="sm" role="group" aria-label="Small button group">
- <CButton color="primary" variant="outline">Left</CButton>
- <CButton color="primary" variant="outline">Middle</CButton>
- <CButton color="primary" variant="outline">Right</CButton>
-</CButtonGroup>
-```
-
-## Nesting
-
-Put a `<CButtonGroup>` inside another `<CButtonGroup>` when you need dropdown menus combined with a series of buttons.
-
-```jsx preview
-<CButtonGroup role="group" aria-label="Button group with nested dropdown">
- <CButton color="primary">1</CButton>
- <CButton color="primary">2</CButton>
- <CDropdown variant="btn-group">
- <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownItem href="#">Something else here</CDropdownItem>
- <CDropdownDivider />
- <CDropdownItem href="#">Separated link</CDropdownItem>
- </CDropdownMenu>
- </CDropdown>
-</CButtonGroup>
-```
-
-## Vertical variation
-
-Create a set of buttons that appear vertically stacked rather than horizontally. **Split button dropdowns are not supported here.**
-
-```jsx preview
-<CButtonGroup vertical role="group" aria-label="Vertical button group">
- <CButton color="primary">Button</CButton>
- <CButton color="primary">Button</CButton>
- <CButton color="primary">Button</CButton>
- <CButton color="primary">Button</CButton>
- <CButton color="primary">Button</CButton>
- <CButton color="primary">Button</CButton>
- <CButton color="primary">Button</CButton>
-</CButtonGroup>
-```
-
-```jsx preview
-<CButtonGroup vertical role="group" aria-label="Vertical button group">
- <CButton color="primary">Button</CButton>
- <CButton color="primary">Button</CButton>
- <CDropdown variant="btn-group">
- <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownItem href="#">Something else here</CDropdownItem>
- <CDropdownDivider />
- <CDropdownItem href="#">Separated link</CDropdownItem>
- </CDropdownMenu>
- </CDropdown>
- <CButton color="primary">Button</CButton>
- <CButton color="primary">Button</CButton>
- <CDropdown variant="btn-group">
- <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownItem href="#">Something else here</CDropdownItem>
- <CDropdownDivider />
- <CDropdownItem href="#">Separated link</CDropdownItem>
- </CDropdownMenu>
- </CDropdown>
- <CDropdown variant="btn-group">
- <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownItem href="#">Something else here</CDropdownItem>
- <CDropdownDivider />
- <CDropdownItem href="#">Separated link</CDropdownItem>
- </CDropdownMenu>
- </CDropdown>
- <CDropdown variant="btn-group">
- <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownItem href="#">Something else here</CDropdownItem>
- <CDropdownDivider />
- <CDropdownItem href="#">Separated link</CDropdownItem>
- </CDropdownMenu>
- </CDropdown>
-</CButtonGroup>
-```
-
-```jsx preview
-<CButtonGroup vertical role="group" aria-label="Vertical button group">
- <CFormCheck
- type="radio"
- button={{ color: 'danger', variant: 'outline' }}
- name="vbtnradio"
- id="vbtnradio1"
- autoComplete="off"
- label="Radio 1"
- defaultChecked
- />
- <CFormCheck
- type="radio"
- button={{ color: 'danger', variant: 'outline' }}
- name="vbtnradio"
- id="vbtnradio2"
- autoComplete="off"
- label="Radio 2"
- />
- <CFormCheck
- type="radio"
- button={{ color: 'danger', variant: 'outline' }}
- name="vbtnradio"
- id="vbtnradio3"
- autoComplete="off"
- label="Radio 3"
- />
-</CButtonGroup>
-```
-
-## API
-
-### CButtonGroup
-
-`markdown:CButtonGroup.api.mdx`
-
-### CButtonToolbar
-
-`markdown:CButtonToolbar.api.mdx`
diff --git a/packages/docs/content/components/button-group/api.mdx b/packages/docs/content/components/button-group/api.mdx
new file mode 100644
index 00000000..dcf5b538
--- /dev/null
+++ b/packages/docs/content/components/button-group/api.mdx
@@ -0,0 +1,17 @@
+---
+title: React Button Group Component API
+name: Button Group API
+description: Explore the API reference for the React Button Group component and discover how to effectively utilize its props for customization.
+route: /components/button-group/
+---
+
+import CButtonGroupAPI from '../../api/CButtonGroup.api.mdx'
+import CButtonToolbarAPI from '../../api/CButtonToolbar.api.mdx'
+
+## CButtonGroup
+
+<CButtonGroupAPI />
+
+## CButtonToolbar
+
+<CButtonToolbarAPI />
diff --git a/packages/docs/content/components/button-group/examples/ButtonGroup2Example.tsx b/packages/docs/content/components/button-group/examples/ButtonGroup2Example.tsx
new file mode 100644
index 00000000..f4e129cf
--- /dev/null
+++ b/packages/docs/content/components/button-group/examples/ButtonGroup2Example.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CButton, CButtonGroup } from '@coreui/react'
+
+export const ButtonGroup2Example = () => {
+ return (
+ <CButtonGroup>
+ <CButton href="#" color="primary" active>Active link</CButton>
+ <CButton href="#" color="primary">Link</CButton>
+ <CButton href="#" color="primary">Link</CButton>
+ </CButtonGroup>
+ )
+}
diff --git a/packages/docs/content/components/button-group/examples/ButtonGroupCheckboxAndRadio2Example.tsx b/packages/docs/content/components/button-group/examples/ButtonGroupCheckboxAndRadio2Example.tsx
new file mode 100644
index 00000000..e18dc93b
--- /dev/null
+++ b/packages/docs/content/components/button-group/examples/ButtonGroupCheckboxAndRadio2Example.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import { CButtonGroup, CFormCheck } from '@coreui/react'
+
+export const ButtonGroupCheckboxAndRadio2Example = () => {
+ return (
+ <CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
+ <CFormCheck
+ type="radio"
+ button={{ color: 'primary', variant: 'outline' }}
+ name="btnradio"
+ id="btnradio1"
+ autoComplete="off"
+ label="Radio 1"
+ />
+ <CFormCheck
+ type="radio"
+ button={{ color: 'primary', variant: 'outline' }}
+ name="btnradio"
+ id="btnradio2"
+ autoComplete="off"
+ label="Radio 2"
+ />
+ <CFormCheck
+ type="radio"
+ button={{ color: 'primary', variant: 'outline' }}
+ name="btnradio"
+ id="btnradio3"
+ autoComplete="off"
+ label="Radio 3"
+ />
+ </CButtonGroup>
+ )
+}
diff --git a/packages/docs/content/components/button-group/examples/ButtonGroupCheckboxAndRadioExample.tsx b/packages/docs/content/components/button-group/examples/ButtonGroupCheckboxAndRadioExample.tsx
new file mode 100644
index 00000000..8246f88f
--- /dev/null
+++ b/packages/docs/content/components/button-group/examples/ButtonGroupCheckboxAndRadioExample.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import { CButtonGroup, CFormCheck } from '@coreui/react'
+
+export const ButtonGroupCheckboxAndRadioExample = () => {
+ return (
+ <CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
+ <CFormCheck
+ button={{ color: 'primary', variant: 'outline' }}
+ id="btncheck1"
+ autoComplete="off"
+ label="Checkbox 1"
+ />
+ <CFormCheck
+ button={{ color: 'primary', variant: 'outline' }}
+ id="btncheck2"
+ autoComplete="off"
+ label="Checkbox 2"
+ />
+ <CFormCheck
+ button={{ color: 'primary', variant: 'outline' }}
+ id="btncheck3"
+ autoComplete="off"
+ label="Checkbox 3"
+ />
+ </CButtonGroup>
+ )
+}
diff --git a/packages/docs/content/components/button-group/examples/ButtonGroupExample.tsx b/packages/docs/content/components/button-group/examples/ButtonGroupExample.tsx
new file mode 100644
index 00000000..3f6fd246
--- /dev/null
+++ b/packages/docs/content/components/button-group/examples/ButtonGroupExample.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CButton, CButtonGroup } from '@coreui/react'
+
+export const ButtonGroupExample = () => {
+ return (
+ <CButtonGroup role="group" aria-label="Basic example">
+ <CButton color="primary">Left</CButton>
+ <CButton color="primary">Middle</CButton>
+ <CButton color="primary">Right</CButton>
+ </CButtonGroup>
+ )
+}
diff --git a/packages/docs/content/components/button-group/examples/ButtonGroupMixedStylesExample.tsx b/packages/docs/content/components/button-group/examples/ButtonGroupMixedStylesExample.tsx
new file mode 100644
index 00000000..aaaf76c0
--- /dev/null
+++ b/packages/docs/content/components/button-group/examples/ButtonGroupMixedStylesExample.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CButton, CButtonGroup } from '@coreui/react'
+
+export const ButtonGroupMixedStylesExample = () => {
+ return (
+ <CButtonGroup role="group" aria-label="Basic mixed styles example">
+ <CButton color="danger">Left</CButton>
+ <CButton color="warning">Middle</CButton>
+ <CButton color="success">Right</CButton>
+ </CButtonGroup>
+ )
+}
diff --git a/packages/docs/content/components/button-group/examples/ButtonGroupNestingExample.tsx b/packages/docs/content/components/button-group/examples/ButtonGroupNestingExample.tsx
new file mode 100644
index 00000000..6e2a4ef6
--- /dev/null
+++ b/packages/docs/content/components/button-group/examples/ButtonGroupNestingExample.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import {
+ CButton,
+ CButtonGroup,
+ CDropdown,
+ CDropdownDivider,
+ CDropdownItem,
+ CDropdownMenu,
+ CDropdownToggle,
+} from '@coreui/react'
+
+export const ButtonGroupNestingExample = () => {
+ return (
+ <CButtonGroup role="group" aria-label="Button group with nested dropdown">
+ <CButton color="primary">1</CButton>
+ <CButton color="primary">2</CButton>
+ <CDropdown variant="btn-group">
+ <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ </CButtonGroup>
+ )
+}
diff --git a/packages/docs/content/components/button-group/examples/ButtonGroupOutlinedStylesExample.tsx b/packages/docs/content/components/button-group/examples/ButtonGroupOutlinedStylesExample.tsx
new file mode 100644
index 00000000..338151bb
--- /dev/null
+++ b/packages/docs/content/components/button-group/examples/ButtonGroupOutlinedStylesExample.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CButton, CButtonGroup } from '@coreui/react'
+
+export const ButtonGroupOutlinedStylesExample = () => {
+ return (
+ <CButtonGroup role="group" aria-label="Basic outlined example">
+ <CButton color="primary" variant="outline">Left</CButton>
+ <CButton color="primary" variant="outline">Middle</CButton>
+ <CButton color="primary" variant="outline">Right</CButton>
+ </CButtonGroup>
+ )
+}
diff --git a/packages/docs/content/components/button-group/examples/ButtonGroupSizingExample.tsx b/packages/docs/content/components/button-group/examples/ButtonGroupSizingExample.tsx
new file mode 100644
index 00000000..e1b943ac
--- /dev/null
+++ b/packages/docs/content/components/button-group/examples/ButtonGroupSizingExample.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import { CButton, CButtonGroup } from '@coreui/react'
+
+export const ButtonGroupSizingExample = () => {
+ return (
+ <>
+ <CButtonGroup size="lg" role="group" aria-label="Large button group">
+ <CButton color="primary" variant="outline">Left</CButton>
+ <CButton color="primary" variant="outline">Middle</CButton>
+ <CButton color="primary" variant="outline">Right</CButton>
+ </CButtonGroup>
+ <br/>
+ <CButtonGroup role="group" aria-label="Default button group">
+ <CButton color="primary" variant="outline">Left</CButton>
+ <CButton color="primary" variant="outline">Middle</CButton>
+ <CButton color="primary" variant="outline">Right</CButton>
+ </CButtonGroup>
+ <br/>
+ <CButtonGroup size="sm" role="group" aria-label="Small button group">
+ <CButton color="primary" variant="outline">Left</CButton>
+ <CButton color="primary" variant="outline">Middle</CButton>
+ <CButton color="primary" variant="outline">Right</CButton>
+ </CButtonGroup>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/button-group/examples/ButtonGroupVerticalExample.tsx b/packages/docs/content/components/button-group/examples/ButtonGroupVerticalExample.tsx
new file mode 100644
index 00000000..dda517d3
--- /dev/null
+++ b/packages/docs/content/components/button-group/examples/ButtonGroupVerticalExample.tsx
@@ -0,0 +1,108 @@
+import React from 'react'
+import {
+ CButton,
+ CButtonGroup,
+ CCol,
+ CFormCheck,
+ CDropdown,
+ CDropdownDivider,
+ CDropdownItem,
+ CDropdownMenu,
+ CDropdownToggle,
+ CRow,
+} from '@coreui/react'
+
+export const ButtonGroupVerticalExample = () => {
+ return (
+ <CRow>
+ <CCol>
+ <CButtonGroup vertical role="group" aria-label="Vertical button group">
+ <CButton color="primary">Button</CButton>
+ <CButton color="primary">Button</CButton>
+ <CButton color="primary">Button</CButton>
+ <CButton color="primary">Button</CButton>
+ <CButton color="primary">Button</CButton>
+ <CButton color="primary">Button</CButton>
+ <CButton color="primary">Button</CButton>
+ </CButtonGroup>
+ </CCol>
+ <CCol>
+ <CButtonGroup vertical role="group" aria-label="Vertical button group">
+ <CButton color="primary">Button</CButton>
+ <CButton color="primary">Button</CButton>
+ <CDropdown variant="btn-group">
+ <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ <CButton color="primary">Button</CButton>
+ <CButton color="primary">Button</CButton>
+ <CDropdown variant="btn-group">
+ <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ <CDropdown variant="btn-group">
+ <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ <CDropdown variant="btn-group">
+ <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ </CButtonGroup>
+ </CCol>
+ <CCol>
+ <CButtonGroup vertical role="group" aria-label="Vertical button group">
+ <CFormCheck
+ type="radio"
+ button={{ color: 'danger', variant: 'outline' }}
+ name="vbtnradio"
+ id="vbtnradio1"
+ autoComplete="off"
+ label="Radio 1"
+ defaultChecked
+ />
+ <CFormCheck
+ type="radio"
+ button={{ color: 'danger', variant: 'outline' }}
+ name="vbtnradio"
+ id="vbtnradio2"
+ autoComplete="off"
+ label="Radio 2"
+ />
+ <CFormCheck
+ type="radio"
+ button={{ color: 'danger', variant: 'outline' }}
+ name="vbtnradio"
+ id="vbtnradio3"
+ autoComplete="off"
+ label="Radio 3"
+ />
+ </CButtonGroup>
+ </CCol>
+ </CRow>
+ )
+}
diff --git a/packages/docs/content/components/button-group/examples/ButtonToolbar2Example.tsx b/packages/docs/content/components/button-group/examples/ButtonToolbar2Example.tsx
new file mode 100644
index 00000000..db237544
--- /dev/null
+++ b/packages/docs/content/components/button-group/examples/ButtonToolbar2Example.tsx
@@ -0,0 +1,68 @@
+import React from 'react'
+import {
+ CButton,
+ CButtonGroup,
+ CButtonToolbar,
+ CFormInput,
+ CInputGroup,
+ CInputGroupText,
+} from '@coreui/react'
+
+export const ButtonToolbar2Example = () => {
+ return (
+ <>
+ <CButtonToolbar className="mb-3" role="group" aria-label="Toolbar with button groups">
+ <CButtonGroup className="me-2" role="group" aria-label="First group">
+ <CButton color="secondary" variant="outline">
+ 1
+ </CButton>
+ <CButton color="secondary" variant="outline">
+ 2
+ </CButton>
+ <CButton color="secondary" variant="outline">
+ 3
+ </CButton>
+ <CButton color="secondary" variant="outline">
+ 4
+ </CButton>
+ </CButtonGroup>
+ <CInputGroup>
+ <CInputGroupText>@</CInputGroupText>
+ <CFormInput
+ placeholder="Input group example"
+ aria-label="Input group example"
+ aria-describedby="btnGroupAddon"
+ />
+ </CInputGroup>
+ </CButtonToolbar>
+ <CButtonToolbar
+ className="justify-content-between"
+ role="group"
+ aria-label="Toolbar with button groups"
+ >
+ <CButtonGroup className="me-2" role="group" aria-label="First group">
+ <CButton color="secondary" variant="outline">
+ 1
+ </CButton>
+ <CButton color="secondary" variant="outline">
+ 2
+ </CButton>
+ <CButton color="secondary" variant="outline">
+ 3
+ </CButton>
+ <CButton color="secondary" variant="outline">
+ 4
+ </CButton>
+ </CButtonGroup>
+ <CInputGroup>
+ <CInputGroupText>@</CInputGroupText>
+ <CFormInput
+ placeholder="Input group example"
+ aria-label="Input group example"
+ aria-describedby="btnGroupAddon"
+ />
+ </CInputGroup>
+ </CButtonToolbar>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/button-group/examples/ButtonToolbarExample.tsx b/packages/docs/content/components/button-group/examples/ButtonToolbarExample.tsx
new file mode 100644
index 00000000..a974353c
--- /dev/null
+++ b/packages/docs/content/components/button-group/examples/ButtonToolbarExample.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import { CButton, CButtonGroup, CButtonToolbar } from '@coreui/react'
+
+export const ButtonToolbarExample = () => {
+ return (
+ <CButtonToolbar role="group" aria-label="Toolbar with button groups">
+ <CButtonGroup className="me-2" role="group" aria-label="First group">
+ <CButton color="primary">1</CButton>
+ <CButton color="primary">2</CButton>
+ <CButton color="primary">3</CButton>
+ <CButton color="primary">4</CButton>
+ </CButtonGroup>
+ <CButtonGroup className="me-2" role="group" aria-label="Second group">
+ <CButton color="secondary">5</CButton>
+ <CButton color="secondary">6</CButton>
+ <CButton color="secondary">7</CButton>
+ </CButtonGroup>
+ <CButtonGroup className="me-2" role="group" aria-label="Third group">
+ <CButton color="info">8</CButton>
+ </CButtonGroup>
+ </CButtonToolbar>
+ )
+}
diff --git a/packages/docs/content/components/button-group/index.mdx b/packages/docs/content/components/button-group/index.mdx
new file mode 100644
index 00000000..28903523
--- /dev/null
+++ b/packages/docs/content/components/button-group/index.mdx
@@ -0,0 +1,146 @@
+---
+title: React Button Group Component
+name: Button group
+description: React button group component allows to group a series of buttons and power them with JavaScript.
+route: /components/button-group/
+other_frameworks: button-group
+---
+
+import {
+ CButtonGroup,
+ CButtonToolbar,
+ CButton,
+ CDropdown,
+ CDropdownDivider,
+ CDropdownHeader,
+ CDropdownItem,
+ CDropdownItemPlain,
+ CDropdownMenu,
+ CDropdownToggle,
+ CFormCheck,
+ CFormInput,
+ CInputGroup,
+ CInputGroupText,
+} from '@coreui/react/src/index'
+
+## How to use React Button Group Component.
+
+Wrap a series of `<CButton>` components in `<CButtonGroup>`.
+
+import { ButtonGroupExample } from './examples/ButtonGroupExample.tsx'
+import ButtonGroupExampleTS from '!!raw-loader!./examples/ButtonGroupExample.tsx'
+
+<ExampleSnippet code={ButtonGroupExampleTS} componentName="React Button Group">
+ <ButtonGroupExample />
+</ExampleSnippet>
+
+<Callout color="info" title="Conveying meaning to assistive technologies">
+ For assistive technologies (ex. screen readers) to communicate that a series of buttons are grouped, a proper <code>role</code> attribute has to be provided. For button groups, this should be <code>role="group"</code>, while toolbars should have a <code>role="toolbar"</code>.
+
+ Besides, groups and toolbars should be provided an understandable label, as most assistive technologies will otherwise not declare them, despite the appearance of the specific role attribute. In the following examples provided here, we apply <code>aria-label</code>, but options such as <code>aria-labelledby</code> can also be used.
+</Callout>
+
+These classes can also be added to groups of links, as an alternative to the [`CNav`](./../navs-tabs/#base-nav) components.
+
+import { ButtonGroup2Example } from './examples/ButtonGroup2Example.tsx'
+import ButtonGroup2ExampleTS from '!!raw-loader!./examples/ButtonGroup2Example.tsx'
+
+<ExampleSnippet code={ButtonGroup2ExampleTS} componentName="React Button Group">
+ <ButtonGroup2Example />
+</ExampleSnippet>
+
+## Mixed styles
+
+import { ButtonGroupMixedStylesExample } from './examples/ButtonGroupMixedStylesExample.tsx'
+import ButtonGroupMixedStylesExampleTS from '!!raw-loader!./examples/ButtonGroupMixedStylesExample.tsx'
+
+<ExampleSnippet code={ButtonGroupMixedStylesExampleTS} componentName="React Button Group">
+ <ButtonGroupMixedStylesExample />
+</ExampleSnippet>
+
+## Outlined styles
+
+import { ButtonGroupOutlinedStylesExample } from './examples/ButtonGroupOutlinedStylesExample.tsx'
+import ButtonGroupOutlinedStylesExampleTS from '!!raw-loader!./examples/ButtonGroupOutlinedStylesExample.tsx'
+
+<ExampleSnippet code={ButtonGroupOutlinedStylesExampleTS} componentName="React Button Group">
+ <ButtonGroupOutlinedStylesExample />
+</ExampleSnippet>
+
+## Checkbox and radio button groups
+
+Combine button-like checkbox and radio toggle buttons into a seamless looking button group.
+
+import { ButtonGroupCheckboxAndRadioExample } from './examples/ButtonGroupCheckboxAndRadioExample.tsx'
+import ButtonGroupCheckboxAndRadioExampleTS from '!!raw-loader!./examples/ButtonGroupCheckboxAndRadioExample.tsx'
+
+<ExampleSnippet code={ButtonGroupCheckboxAndRadioExampleTS} componentName="React Button Group">
+ <ButtonGroupCheckboxAndRadioExample />
+</ExampleSnippet>
+
+import { ButtonGroupCheckboxAndRadio2Example } from './examples/ButtonGroupCheckboxAndRadio2Example.tsx'
+import ButtonGroupCheckboxAndRadio2ExampleTS from '!!raw-loader!./examples/ButtonGroupCheckboxAndRadio2Example.tsx'
+
+<ExampleSnippet code={ButtonGroupCheckboxAndRadio2ExampleTS} componentName="React Button Group">
+ <ButtonGroupCheckboxAndRadio2Example />
+</ExampleSnippet>
+
+## Button toolbar
+
+Join sets of button groups into button toolbars for more complicated components. Use utility classes as needed to space out groups, buttons, and more.
+
+import { ButtonToolbarExample } from './examples/ButtonToolbarExample.tsx'
+import ButtonToolbarExampleTS from '!!raw-loader!./examples/ButtonToolbarExample.tsx'
+
+<ExampleSnippet code={ButtonToolbarExampleTS} componentName="React Button Group">
+ <ButtonToolbarExample />
+</ExampleSnippet>
+
+Feel free to combine input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities through to space items correctly.
+
+import { ButtonToolbar2Example } from './examples/ButtonToolbar2Example.tsx'
+import ButtonToolbar2ExampleTS from '!!raw-loader!./examples/ButtonToolbar2Example.tsx'
+
+<ExampleSnippet code={ButtonToolbar2ExampleTS} componentName="React Button Group">
+ <ButtonToolbar2Example />
+</ExampleSnippet>
+
+## Sizing
+
+Alternatively, of implementing button sizing classes to each button in a group, set `size` property to all `<CButtonGroup>`'s, including each one when nesting multiple groups.
+
+import { ButtonGroupSizingExample } from './examples/ButtonGroupSizingExample.tsx'
+import ButtonGroupSizingExampleTS from '!!raw-loader!./examples/ButtonGroupSizingExample.tsx'
+
+<ExampleSnippet code={ButtonGroupSizingExampleTS} componentName="React Button Group">
+ <ButtonGroupSizingExample />
+</ExampleSnippet>
+
+## Nesting
+
+Put a `<CButtonGroup>` inside another `<CButtonGroup>` when you need dropdown menus combined with a series of buttons.
+
+import { ButtonGroupNestingExample } from './examples/ButtonGroupNestingExample.tsx'
+import ButtonGroupNestingExampleTS from '!!raw-loader!./examples/ButtonGroupNestingExample.tsx'
+
+<ExampleSnippet code={ButtonGroupNestingExampleTS} componentName="React Button Group">
+ <ButtonGroupNestingExample />
+</ExampleSnippet>
+
+## Vertical variation
+
+Create a set of buttons that appear vertically stacked rather than horizontally. **Split button dropdowns are not supported here.**
+
+import { ButtonGroupVerticalExample } from './examples/ButtonGroupVerticalExample.tsx'
+import ButtonGroupVerticalExampleTS from '!!raw-loader!./examples/ButtonGroupVerticalExample.tsx'
+
+<ExampleSnippet code={ButtonGroupVerticalExampleTS} componentName="React Button Group">
+ <ButtonGroupVerticalExample />
+</ExampleSnippet>
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [<CButtonGroup />](./api/#cbuttongroup)
+- [<CButtonToolbar />](./api/#cbuttontoolbar)
diff --git a/packages/docs/content/components/button.mdx b/packages/docs/content/components/button.mdx
deleted file mode 100644
index f8b0380a..00000000
--- a/packages/docs/content/components/button.mdx
+++ /dev/null
@@ -1,216 +0,0 @@
----
-title: React Button Component
-name: Buttons
-description: React button component for actions in tables, forms, cards, and more. CoreUI for React.js provides various styles, states, and size. Ready to use and easy to customize.
-menu: Components
-route: /components/buttons
-other_frameworks: button
----
-
-import { CButton } from '@coreui/react/src/index'
-
-## How to use React Button Component.
-
-CoreUI includes a bunch of predefined buttons components, each serving its own semantic purpose. React buttons show what action will happen when the user clicks or touches it. CoreUI buttons are used to initialize operations, both in the background or foreground of an experience.
-
-```jsx preview
-<CButton color="primary">Primary</CButton>
-<CButton color="secondary">Secondary</CButton>
-<CButton color="success">Success</CButton>
-<CButton color="danger">Danger</CButton>
-<CButton color="warning">Warning</CButton>
-<CButton color="info">Info</CButton>
-<CButton color="light">Light</CButton>
-<CButton color="dark">Dark</CButton>
-<CButton color="link">Link</CButton>
-```
-
-<Callout color="info" title="Conveying meaning to assistive technologies">
- Using color to add meaning only provides a visual indication, which will not be conveyed to
- users of assistive technologies – such as screen readers. Ensure that information denoted by the
- color is either obvious from the content itself (e.g. the visible text), or is included through
- alternative means, such as additional text hidden with the `.visually-hidden` class.
-</Callout>
-
-## 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.
-
-## Button components
-
-The `<CButton>` component are designed for `<button>` , `<a>` or `<input>` elements (though some browsers may apply a slightly different rendering).
-
-If you're using `<CButton>` component as `<a>` elements that are used to trigger functionality ex. collapsing content, these links should be given a `role="button"` to adequately communicate their meaning to assistive technologies such as screen readers.
-
-```jsx preview
-<CButton as="a" color="primary" href="#" role="button">Link</CButton>
-<CButton type="submit" color="primary">Button</CButton>
-<CButton as="input" type="button" color="primary" value="Input"/>
-<CButton as="input" type="submit" color="primary" value="Submit"/>
-<CButton as="input" type="reset" color="primary" value="Reset"/>
-```
-
-## Outline buttons
-
-If you need a button, but without the strong background colors. Set `variant="outline"` prop to remove all background colors.
-
-```jsx preview
-<CButton color="primary" variant="outline">Primary</CButton>
-<CButton color="secondary" variant="outline">Secondary</CButton>
-<CButton color="success" variant="outline">Success</CButton>
-<CButton color="danger" variant="outline">Danger</CButton>
-<CButton color="warning" variant="outline">Warning</CButton>
-<CButton color="info" variant="outline">Info</CButton>
-<CButton color="light" variant="outline">Light</CButton>
-<CButton color="dark" variant="outline">Dark</CButton>
-```
-
-## Ghost buttons
-
-If you need a ghost variant of react button, set `variant="ghost"` prop to remove all background colors.
-
-```jsx preview
-<CButton color="primary" variant="ghost">Primary</CButton>
-<CButton color="secondary" variant="ghost">Secondary</CButton>
-<CButton color="success" variant="ghost">Success</CButton>
-<CButton color="danger" variant="ghost">Danger</CButton>
-<CButton color="warning" variant="ghost">Warning</CButton>
-<CButton color="info" variant="ghost">Info</CButton>
-<CButton color="light" variant="ghost">Light</CButton>
-<CButton color="dark" variant="ghost">Dark</CButton>
-```
-
-<Callout color="info">
- Some of the button styles use a relatively light foreground color, and should only be used on a
- dark background in order to have sufficient contrast.
-</Callout>
-
-## Sizes
-
-Larger or smaller react buttons? Add `size="lg"` or `size="sm"` for additional sizes.
-
-```jsx preview
-<CButton color="primary" size="lg">Large button</CButton>
-<CButton color="secondary" size="lg">Large button</CButton>
-```
-
-```jsx preview
-<CButton color="primary" size="sm">Small button</CButton>
-<CButton color="secondary" size="sm">Small button</CButton>
-```
-
-## Shapes
-
-### Pill buttons
-
-```jsx preview
-<CButton color="primary" shape="rounded-pill">Primary</CButton>
-<CButton color="secondary" shape="rounded-pill">Secondary</CButton>
-<CButton color="success" shape="rounded-pill">Success</CButton>
-<CButton color="danger" shape="rounded-pill">Danger</CButton>
-<CButton color="warning" shape="rounded-pill">Warning</CButton>
-<CButton color="info" shape="rounded-pill">Info</CButton>
-<CButton color="light" shape="rounded-pill">Light</CButton>
-<CButton color="dark" shape="rounded-pill">Dark</CButton>
-<CButton color="link" shape="rounded-pill">Link</CButton>
-```
-
-### Square buttons
-
-```jsx preview
-<CButton color="primary" shape="rounded-0">Primary</CButton>
-<CButton color="secondary" shape="rounded-0">Secondary</CButton>
-<CButton color="success" shape="rounded-0">Success</CButton>
-<CButton color="danger" shape="rounded-0">Danger</CButton>
-<CButton color="warning" shape="rounded-0">Warning</CButton>
-<CButton color="info" shape="rounded-0">Info</CButton>
-<CButton color="light" shape="rounded-0">Light</CButton>
-<CButton color="dark" shape="rounded-0">Dark</CButton>
-<CButton color="link" shape="rounded-0">Link</CButton>
-```
-
-## Disabled state
-
-Add the `disabled` boolean prop to any `<CButton>` component to make buttons look inactive. Disabled button has `pointer-events: none` applied to, disabling hover and active states from triggering.
-
-```jsx preview
-<CButton color="primary" size="lg" disabled>Primary button</CButton>
-<CButton color="secondary" size="lg" disabled>Button</CButton>
-```
-
-Disabled buttons using the `<a>` component act a little different:
-
-`<a>`s don't support the `disabled` attribute, so CoreUI has to add `.disabled` className to make buttons look inactive. CoreUI also has to add to the disabled button component `aria-disabled="true"` attribute to show the state of the component to assistive technologies.
-
-```jsx preview
-<CButton as="a" href="#" color="primary" size="lg" disabled>Primary link</CButton>
-<CButton as="a" href="#" color="secondary" size="lg" disabled>Link</CButton>
-```
-
-The `.disabled` class uses `pointer-events: none` to try to disable the link functionality of `<a>`s, but that CSS property is not yet standardized. Besides, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, we automatically add a `tabindex="-1"` attribute on disabled links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.
-
-## Block buttons
-
-Create buttons that span the full width of a parent—by using utilities.
-
-```jsx preview
-<div className="d-grid gap-2">
- <CButton color="primary">Button</CButton>
- <CButton color="primary">Button</CButton>
-</div>
-```
-
-Here we create a responsive variation, starting with vertically stacked buttons until the `md` breakpoint, where `.d-md-block` replaces the `.d-grid` class, thus nullifying the `gap-2` utility. Resize your browser to see them change.
-
-```jsx preview
-<div className="d-grid gap-2 d-md-block">
- <CButton color="primary">Button</CButton>
- <CButton color="primary">Button</CButton>
-</div>
-```
-
-You can adjust the width of your block buttons with grid column width classes. For example, for a half-width "block button", use `.col-6`. Center it horizontally with `.mx-auto`, too.
-
-```jsx preview
-<div className="d-grid gap-2 col-6 mx-auto">
- <CButton color="primary">Button</CButton>
- <CButton color="primary">Button</CButton>
-</div>
-```
-
-Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we've taken our previous responsive example and added some flex utilities and a margin utility on the button to right align the buttons when they're no longer stacked.
-
-```jsx preview
-<div className="d-grid gap-2 d-md-flex justify-content-md-end">
- <CButton color="primary" className="me-md-2">Button</CButton>
- <CButton color="primary">Button</CButton>
-</div>
-```
-
-## Customizing
-
-### CSS variables
-
-React buttons use local CSS variables on `.btn` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
-
-<ScssDocs file="_buttons.scss" capture="btn-css-vars"/>
-
-#### How to use CSS variables
-
-```jsx
-const vars = {
- '--my-css-var': 10,
- '--my-another-css-var': "red"
-}
-return <CButton style={vars}>...</CButton>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="btn-variables"/>
-
-## API
-
-### CButton
-
-`markdown:CButton.api.mdx`
diff --git a/packages/docs/content/components/button/api.mdx b/packages/docs/content/components/button/api.mdx
new file mode 100644
index 00000000..532898de
--- /dev/null
+++ b/packages/docs/content/components/button/api.mdx
@@ -0,0 +1,12 @@
+---
+title: React Button Component API
+name: Button API
+description: Explore the API reference for the React Button component and discover how to effectively utilize its props for customization.
+route: /components/button/
+---
+
+import CButtonAPI from '../../api/CButton.api.mdx'
+
+## CButton
+
+<CButtonAPI />
diff --git a/packages/docs/content/components/button/examples/ButtonBlock2Example.tsx b/packages/docs/content/components/button/examples/ButtonBlock2Example.tsx
new file mode 100644
index 00000000..83bf2b92
--- /dev/null
+++ b/packages/docs/content/components/button/examples/ButtonBlock2Example.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { CButton } from '@coreui/react'
+
+export const ButtonBlock2Example = () => {
+ return (
+ <div className="d-grid gap-2 d-md-block">
+ <CButton color="primary">Button</CButton>
+ <CButton color="primary">Button</CButton>
+ </div>
+ )
+}
diff --git a/packages/docs/content/components/button/examples/ButtonBlock3Example.tsx b/packages/docs/content/components/button/examples/ButtonBlock3Example.tsx
new file mode 100644
index 00000000..585c7e6f
--- /dev/null
+++ b/packages/docs/content/components/button/examples/ButtonBlock3Example.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { CButton } from '@coreui/react'
+
+export const ButtonBlock3Example = () => {
+ return (
+ <div className="d-grid gap-2 col-6 mx-auto">
+ <CButton color="primary">Button</CButton>
+ <CButton color="primary">Button</CButton>
+ </div>
+ )
+}
diff --git a/packages/docs/content/components/button/examples/ButtonBlock4Example.tsx b/packages/docs/content/components/button/examples/ButtonBlock4Example.tsx
new file mode 100644
index 00000000..4ed267b0
--- /dev/null
+++ b/packages/docs/content/components/button/examples/ButtonBlock4Example.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { CButton } from '@coreui/react'
+
+export const ButtonBlock4Example = () => {
+ return (
+ <div className="d-grid gap-2 d-md-flex justify-content-md-end">
+ <CButton color="primary" className="me-md-2">Button</CButton>
+ <CButton color="primary">Button</CButton>
+ </div>
+ )
+}
diff --git a/packages/docs/content/components/button/examples/ButtonBlockExample.tsx b/packages/docs/content/components/button/examples/ButtonBlockExample.tsx
new file mode 100644
index 00000000..6a3f1c67
--- /dev/null
+++ b/packages/docs/content/components/button/examples/ButtonBlockExample.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { CButton } from '@coreui/react'
+
+export const ButtonBlockExample = () => {
+ return (
+ <div className="d-grid gap-2">
+ <CButton color="primary">Button</CButton>
+ <CButton color="primary">Button</CButton>
+ </div>
+ )
+}
diff --git a/packages/docs/content/components/button/examples/ButtonComponentsExample.tsx b/packages/docs/content/components/button/examples/ButtonComponentsExample.tsx
new file mode 100644
index 00000000..92871d4f
--- /dev/null
+++ b/packages/docs/content/components/button/examples/ButtonComponentsExample.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { CButton } from '@coreui/react'
+
+export const ButtonComponentsExample = () => {
+ return (
+ <>
+ <CButton as="a" color="primary" href="#" role="button">Link</CButton>
+ <CButton type="submit" color="primary">Button</CButton>
+ <CButton as="input" type="button" color="primary" value="Input" />
+ <CButton as="input" type="submit" color="primary" value="Submit" />
+ <CButton as="input" type="reset" color="primary" value="Reset" />
+ </>
+ )
+}
diff --git a/packages/docs/content/components/button/examples/ButtonDisabled2Example.tsx b/packages/docs/content/components/button/examples/ButtonDisabled2Example.tsx
new file mode 100644
index 00000000..bd4c611f
--- /dev/null
+++ b/packages/docs/content/components/button/examples/ButtonDisabled2Example.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { CButton } from '@coreui/react'
+
+export const ButtonDisabled2Example = () => {
+ return (
+ <>
+ <CButton as="a" href="#" color="primary" disabled>Primary link</CButton>
+ <CButton as="a" href="#" color="secondary" disabled>Link</CButton>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/button/examples/ButtonDisabledExample.tsx b/packages/docs/content/components/button/examples/ButtonDisabledExample.tsx
new file mode 100644
index 00000000..fce450db
--- /dev/null
+++ b/packages/docs/content/components/button/examples/ButtonDisabledExample.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { CButton } from '@coreui/react'
+
+export const ButtonDisabledExample = () => {
+ return (
+ <>
+ <CButton color="primary" disabled>Primary button</CButton>
+ <CButton color="secondary" disabled>Button</CButton>
+ <CButton color="primary" variant="outline" disabled>Primary button</CButton>
+ <CButton color="secondary" variant="outline" disabled>Button</CButton>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/button/examples/ButtonExample.tsx b/packages/docs/content/components/button/examples/ButtonExample.tsx
new file mode 100644
index 00000000..fcf44a76
--- /dev/null
+++ b/packages/docs/content/components/button/examples/ButtonExample.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { CButton } from '@coreui/react'
+
+export const ButtonExample = () => {
+ return (
+ <>
+ <CButton color="primary">Primary</CButton>
+ <CButton color="secondary">Secondary</CButton>
+ <CButton color="success">Success</CButton>
+ <CButton color="danger">Danger</CButton>
+ <CButton color="warning">Warning</CButton>
+ <CButton color="info">Info</CButton>
+ <CButton color="light">Light</CButton>
+ <CButton color="dark">Dark</CButton>
+ <CButton color="link">Link</CButton>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/button/examples/ButtonGhostExample.tsx b/packages/docs/content/components/button/examples/ButtonGhostExample.tsx
new file mode 100644
index 00000000..6e595f10
--- /dev/null
+++ b/packages/docs/content/components/button/examples/ButtonGhostExample.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { CButton } from '@coreui/react'
+
+export const ButtonGhostExample = () => {
+ return (
+ <>
+ <CButton color="primary" variant="ghost">Primary</CButton>
+ <CButton color="secondary" variant="ghost">Secondary</CButton>
+ <CButton color="success" variant="ghost">Success</CButton>
+ <CButton color="danger" variant="ghost">Danger</CButton>
+ <CButton color="warning" variant="ghost">Warning</CButton>
+ <CButton color="info" variant="ghost">Info</CButton>
+ <CButton color="light" variant="ghost">Light</CButton>
+ <CButton color="dark" variant="ghost">Dark</CButton>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/button/examples/ButtonOutlineExample.tsx b/packages/docs/content/components/button/examples/ButtonOutlineExample.tsx
new file mode 100644
index 00000000..56a41b5c
--- /dev/null
+++ b/packages/docs/content/components/button/examples/ButtonOutlineExample.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { CButton } from '@coreui/react'
+
+export const ButtonOutlineExample = () => {
+ return (
+ <>
+ <CButton color="primary" variant="outline">Primary</CButton>
+ <CButton color="secondary" variant="outline">Secondary</CButton>
+ <CButton color="success" variant="outline">Success</CButton>
+ <CButton color="danger" variant="outline">Danger</CButton>
+ <CButton color="warning" variant="outline">Warning</CButton>
+ <CButton color="info" variant="outline">Info</CButton>
+ <CButton color="light" variant="outline">Light</CButton>
+ <CButton color="dark" variant="outline">Dark</CButton>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/button/examples/ButtonShapePillExample.tsx b/packages/docs/content/components/button/examples/ButtonShapePillExample.tsx
new file mode 100644
index 00000000..73a918b3
--- /dev/null
+++ b/packages/docs/content/components/button/examples/ButtonShapePillExample.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { CButton } from '@coreui/react'
+
+export const ButtonShapePillExample = () => {
+ return (
+ <>
+ <CButton color="primary" className="rounded-pill">Primary</CButton>
+ <CButton color="secondary" className="rounded-pill">Secondary</CButton>
+ <CButton color="success" className="rounded-pill">Success</CButton>
+ <CButton color="danger" className="rounded-pill">Danger</CButton>
+ <CButton color="warning" className="rounded-pill">Warning</CButton>
+ <CButton color="info" className="rounded-pill">Info</CButton>
+ <CButton color="light" className="rounded-pill">Light</CButton>
+ <CButton color="dark" className="rounded-pill">Dark</CButton>
+ <CButton color="link" className="rounded-pill">Link</CButton>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/button/examples/ButtonShapeSquareExample.tsx b/packages/docs/content/components/button/examples/ButtonShapeSquareExample.tsx
new file mode 100644
index 00000000..4b307ee8
--- /dev/null
+++ b/packages/docs/content/components/button/examples/ButtonShapeSquareExample.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { CButton } from '@coreui/react'
+
+export const ButtonShapeSquareExample = () => {
+ return (
+ <>
+ <CButton color="primary" className="rounded-0">Primary</CButton>
+ <CButton color="secondary" className="rounded-0">Secondary</CButton>
+ <CButton color="success" className="rounded-0">Success</CButton>
+ <CButton color="danger" className="rounded-0">Danger</CButton>
+ <CButton color="warning" className="rounded-0">Warning</CButton>
+ <CButton color="info" className="rounded-0">Info</CButton>
+ <CButton color="light" className="rounded-0">Light</CButton>
+ <CButton color="dark" className="rounded-0">Dark</CButton>
+ <CButton color="link" className="rounded-0">Link</CButton>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/button/examples/ButtonSizes2Example.tsx b/packages/docs/content/components/button/examples/ButtonSizes2Example.tsx
new file mode 100644
index 00000000..f7f4db15
--- /dev/null
+++ b/packages/docs/content/components/button/examples/ButtonSizes2Example.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { CButton } from '@coreui/react'
+
+export const ButtonSizes2Example = () => {
+ return (
+ <>
+ <CButton color="primary" size="sm">Small button</CButton>
+ <CButton color="secondary" size="sm">Small button</CButton>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/button/examples/ButtonSizes3Example.jsx b/packages/docs/content/components/button/examples/ButtonSizes3Example.jsx
new file mode 100644
index 00000000..91c8c4ac
--- /dev/null
+++ b/packages/docs/content/components/button/examples/ButtonSizes3Example.jsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { CButton } from '@coreui/react'
+
+export const ButtonSizes3Example = () => {
+ const customVars = {
+ '--cui-btn-padding-y': '.25rem',
+ '--cui-btn-padding-x': '.5rem',
+ '--cui-btn-font-size': '.75rem',
+ }
+
+ return (
+ <CButton color="primary" size="sm" style={customVars}>
+ Custom button
+ </CButton>
+ )
+}
diff --git a/packages/docs/content/components/button/examples/ButtonSizes3Example.tsx b/packages/docs/content/components/button/examples/ButtonSizes3Example.tsx
new file mode 100644
index 00000000..10eceae6
--- /dev/null
+++ b/packages/docs/content/components/button/examples/ButtonSizes3Example.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { CButton } from '@coreui/react'
+
+export const ButtonSizes3Example = () => {
+ const customVars = {
+ '--cui-btn-padding-y': '.25rem',
+ '--cui-btn-padding-x': '.5rem',
+ '--cui-btn-font-size': '.75rem',
+ } as React.CSSProperties
+
+ return (
+ <CButton color="primary" size="sm" style={customVars}>
+ Custom button
+ </CButton>
+ )
+}
diff --git a/packages/docs/content/components/button/examples/ButtonSizesExample.tsx b/packages/docs/content/components/button/examples/ButtonSizesExample.tsx
new file mode 100644
index 00000000..30ee215f
--- /dev/null
+++ b/packages/docs/content/components/button/examples/ButtonSizesExample.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { CButton } from '@coreui/react'
+
+export const ButtonSizesExample = () => {
+ return (
+ <>
+ <CButton color="primary" size="lg">Large button</CButton>
+ <CButton color="secondary" size="lg">Large button</CButton>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/button/index.mdx b/packages/docs/content/components/button/index.mdx
new file mode 100644
index 00000000..183d4e96
--- /dev/null
+++ b/packages/docs/content/components/button/index.mdx
@@ -0,0 +1,190 @@
+---
+title: React Button Component
+name: Buttons
+description: React button component for actions in tables, forms, cards, and more. CoreUI for React.js provides various styles, states, and size. Ready to use and easy to customize.
+route: /components/button/
+other_frameworks: button
+---
+
+import { CButton } from '@coreui/react/src/index'
+
+## How to use React Button Component.
+
+CoreUI includes a bunch of predefined buttons components, each serving its own semantic purpose. React buttons show what action will happen when the user clicks or touches it. CoreUI buttons are used to initialize operations, both in the background or foreground of an experience.
+
+import { ButtonExample } from './examples/ButtonExample.tsx'
+import ButtonExampleTS from '!!raw-loader!./examples/ButtonExample.tsx'
+
+<ExampleSnippet code={ButtonExampleTS} componentName="React Button">
+ <ButtonExample />
+</ExampleSnippet>
+
+<Callout color="info" title="Conveying meaning to assistive technologies">
+ Using color to add meaning only provides a visual indication, which will not be conveyed to users
+ of assistive technologies – such as screen readers. Ensure that information denoted by the color
+ is either obvious from the content itself (e.g. the visible text), or is included through
+ alternative means, such as additional text hidden with the `.visually-hidden` class.
+</Callout>
+
+## 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.
+
+## Button components
+
+The `<CButton>` component are designed for `<button>` , `<a>` or `<input>` elements (though some browsers may apply a slightly different rendering).
+
+If you're using `<CButton>` component as `<a>` elements that are used to trigger functionality ex. collapsing content, these links should be given a `role="button"` to adequately communicate their meaning to assistive technologies such as screen readers.
+
+import { ButtonComponentsExample } from './examples/ButtonComponentsExample.tsx'
+import ButtonComponentsExampleTS from '!!raw-loader!./examples/ButtonComponentsExample.tsx'
+
+<ExampleSnippet code={ButtonComponentsExampleTS} componentName="React Button">
+ <ButtonComponentsExample />
+</ExampleSnippet>
+
+## Outline buttons
+
+If you need a button, but without the strong background colors. Set `variant="outline"` prop to remove all background colors.
+
+import { ButtonOutlineExample } from './examples/ButtonOutlineExample.tsx'
+import ButtonOutlineExampleTS from '!!raw-loader!./examples/ButtonOutlineExample.tsx'
+
+<ExampleSnippet code={ButtonOutlineExampleTS} componentName="React Button">
+ <ButtonOutlineExample />
+</ExampleSnippet>
+
+## Ghost buttons
+
+If you need a ghost variant of react button, set `variant="ghost"` prop to remove all background colors.
+
+import { ButtonGhostExample } from './examples/ButtonGhostExample.tsx'
+import ButtonGhostExampleTS from '!!raw-loader!./examples/ButtonGhostExample.tsx'
+
+<ExampleSnippet code={ButtonGhostExampleTS} componentName="React Button">
+ <ButtonGhostExample />
+</ExampleSnippet>
+
+<Callout color="info">
+ Some of the button styles use a relatively light foreground color, and should only be used on a
+ dark background in order to have sufficient contrast.
+</Callout>
+
+## Sizes
+
+Larger or smaller react buttons? Add `size="lg"` or `size="sm"` for additional sizes.
+
+import { ButtonSizesExample } from './examples/ButtonSizesExample.tsx'
+import ButtonSizesExampleTS from '!!raw-loader!./examples/ButtonSizesExample.tsx'
+
+<ExampleSnippet code={ButtonSizesExampleTS} componentName="React Button">
+ <ButtonSizesExample />
+</ExampleSnippet>
+
+import { ButtonSizes2Example } from './examples/ButtonSizes2Example.tsx'
+import ButtonSizes2ExampleTS from '!!raw-loader!./examples/ButtonSizes2Example.tsx'
+
+<ExampleSnippet code={ButtonSizes2ExampleTS} componentName="React Button">
+ <ButtonSizes2Example />
+</ExampleSnippet>
+
+You can even roll your own custom sizing with CSS variables:
+
+import { ButtonSizes3Example } from './examples/ButtonSizes3Example.tsx'
+import ButtonSizes3ExampleJS from '!!raw-loader!./examples/ButtonSizes3Example.jsx'
+import ButtonSizes3ExampleTS from '!!raw-loader!./examples/ButtonSizes3Example.tsx'
+
+<ExampleSnippet
+ code={{ js: ButtonSizes3ExampleJS, ts: ButtonSizes3ExampleTS }}
+ componentName="React Button"
+>
+ <ButtonSizes3Example />
+</ExampleSnippet>
+
+## Shapes
+
+### Pill buttons
+
+import { ButtonShapePillExample } from './examples/ButtonShapePillExample.tsx'
+import ButtonShapePillExampleTS from '!!raw-loader!./examples/ButtonShapePillExample.tsx'
+
+<ExampleSnippet code={ButtonShapePillExampleTS} componentName="React Button">
+ <ButtonShapePillExample />
+</ExampleSnippet>
+
+### Square buttons
+
+import { ButtonShapeSquareExample } from './examples/ButtonShapeSquareExample.tsx'
+import ButtonShapeSquareExampleTS from '!!raw-loader!./examples/ButtonShapeSquareExample.tsx'
+
+<ExampleSnippet code={ButtonShapeSquareExampleTS} componentName="React Button">
+ <ButtonShapeSquareExample />
+</ExampleSnippet>
+
+## Disabled state
+
+Add the `disabled` boolean prop to any `<CButton>` component to make buttons look inactive. Disabled button has `pointer-events: none` applied to, disabling hover and active states from triggering.
+
+import { ButtonDisabledExample } from './examples/ButtonDisabledExample.tsx'
+import ButtonDisabledExampleTS from '!!raw-loader!./examples/ButtonDisabledExample.tsx'
+
+<ExampleSnippet code={ButtonDisabledExampleTS} componentName="React Button">
+ <ButtonDisabledExample />
+</ExampleSnippet>
+
+Disabled buttons using the `<a>` component act a little different:
+
+`<a>`s don't support the `disabled` attribute, so CoreUI has to add `.disabled` className to make buttons look inactive. CoreUI also has to add to the disabled button component `aria-disabled="true"` attribute to show the state of the component to assistive technologies.
+
+import { ButtonDisabled2Example } from './examples/ButtonDisabled2Example.tsx'
+import ButtonDisabled2ExampleTS from '!!raw-loader!./examples/ButtonDisabled2Example.tsx'
+
+<ExampleSnippet code={ButtonDisabled2ExampleTS} componentName="React Button">
+ <ButtonDisabled2Example />
+</ExampleSnippet>
+
+The `.disabled` class uses `pointer-events: none` to try to disable the link functionality of `<a>`s, but that CSS property is not yet standardized. Besides, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, we automatically add a `tabindex="-1"` attribute on disabled links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.
+
+## Block buttons
+
+Create buttons that span the full width of a parent—by using utilities.
+
+import { ButtonBlockExample } from './examples/ButtonBlockExample.tsx'
+import ButtonBlockExampleTS from '!!raw-loader!./examples/ButtonBlockExample.tsx'
+
+<ExampleSnippet code={ButtonBlockExampleTS} componentName="React Button">
+ <ButtonBlockExample />
+</ExampleSnippet>
+
+Here we create a responsive variation, starting with vertically stacked buttons until the `md` breakpoint, where `.d-md-block` replaces the `.d-grid` class, thus nullifying the `gap-2` utility. Resize your browser to see them change.
+
+import { ButtonBlock2Example } from './examples/ButtonBlock2Example.tsx'
+import ButtonBlock2ExampleTS from '!!raw-loader!./examples/ButtonBlock2Example.tsx'
+
+<ExampleSnippet code={ButtonBlock2ExampleTS} componentName="React Button">
+ <ButtonBlock2Example />
+</ExampleSnippet>
+
+You can adjust the width of your block buttons with grid column width classes. For example, for a half-width "block button", use `.col-6`. Center it horizontally with `.mx-auto`, too.
+
+import { ButtonBlock3Example } from './examples/ButtonBlock3Example.tsx'
+import ButtonBlock3ExampleTS from '!!raw-loader!./examples/ButtonBlock3Example.tsx'
+
+<ExampleSnippet code={ButtonBlock3ExampleTS} componentName="React Button">
+ <ButtonBlock3Example />
+</ExampleSnippet>
+
+Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we've taken our previous responsive example and added some flex utilities and a margin utility on the button to right align the buttons when they're no longer stacked.
+
+import { ButtonBlock4Example } from './examples/ButtonBlock4Example.tsx'
+import ButtonBlock4ExampleTS from '!!raw-loader!./examples/ButtonBlock4Example.tsx'
+
+<ExampleSnippet code={ButtonBlock4ExampleTS} componentName="React Button">
+ <ButtonBlock4Example />
+</ExampleSnippet>
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [<CButton />](./api/#cbutton)
\ No newline at end of file
diff --git a/packages/docs/content/components/button/styling.mdx b/packages/docs/content/components/button/styling.mdx
new file mode 100644
index 00000000..35557ba8
--- /dev/null
+++ b/packages/docs/content/components/button/styling.mdx
@@ -0,0 +1,37 @@
+---
+title: React Button Component Styling
+name: Button Styling
+description: Learn how to customize the React Button component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/button/
+---
+
+{/* ### CSS class names
+
+React Button comes with built-in class names that make styling super simple. Here’s a quick rundown of what you can use:
+
+<ClassNamesDocs
+ files={[
+ 'components/button/CButton.tsx',
+ ]}
+/> */}
+
+### CSS variables
+
+React Button supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.
+
+<ScssDocs file="_buttons.scss" capture="btn-css-vars" />
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+ '--cui-btn-color': '#ffe484',
+ '--cui-btn-bg': '#efefef',
+}
+
+return <CButton style={customVars}>{/* Button content */}</CButton>
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="btn-variables" />
diff --git a/packages/docs/content/components/callout.mdx b/packages/docs/content/components/callout.mdx
deleted file mode 100644
index 71ef0099..00000000
--- a/packages/docs/content/components/callout.mdx
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: React Callout Component
-name: Callout
-description: React callout component provides presentation of content in a visually distinct manner. Includes a heading, icon and typically text-based content.
-menu: Components
-route: /components/callout
-other_frameworks: callout
----
-
-import { CCallout } from '@coreui/react/src/index'
-
-## Examples
-
-Callout component is prepared for any length of text, as well as an optional elements like icons, headings, etc. For a styling, use one of the **required** contextual props (e.g., `color="success"`).
-
-```jsx preview
-<CCallout color="primary">
- New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
- terminology, guidelines, and code snippets.
-</CCallout>
-<CCallout color="secondary">
- New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
- terminology, guidelines, and code snippets.
-</CCallout>
-<CCallout color="success">
- New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
- terminology, guidelines, and code snippets.
-</CCallout>
-<CCallout color="danger">
- New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
- terminology, guidelines, and code snippets.
-</CCallout>
-<CCallout color="warning">
- New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
- terminology, guidelines, and code snippets.
-</CCallout>
-<CCallout color="info">
- New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
- terminology, guidelines, and code snippets.
-</CCallout>
-<CCallout color="light">
- New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
- terminology, guidelines, and code snippets.
-</CCallout>
-<CCallout color="dark">
- New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
- terminology, guidelines, and code snippets.
-</CCallout>
-```
-
-<Callout color="info" title="Conveying meaning to assistive technologies">
- Using color to add meaning only provides a visual indication, which will not be conveyed to
- users of assistive technologies – such as screen readers. Ensure that information denoted by the
- color is either obvious from the content itself (e.g. the visible text), or is included through
- alternative means, such as additional text hidden with the `.visually-hidden` class.
-</Callout>
-
-## Customizing
-
-### CSS variables
-
-React callouts use local CSS variables on `.callout` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
-
-<ScssDocs file="_callout.scss" capture="callout-css-vars"/>
-
-#### How to use CSS variables
-
-```jsx
-const vars = {
- '--my-css-var': 10,
- '--my-another-css-var': "red"
-}
-return <CCallout style={vars}>...</CCallout>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="callout-variables"/>
-
-## API
-
-### CCallout
-
-`markdown:CCallout.api.mdx`
diff --git a/packages/docs/content/components/callout/api.mdx b/packages/docs/content/components/callout/api.mdx
new file mode 100644
index 00000000..8281d7b6
--- /dev/null
+++ b/packages/docs/content/components/callout/api.mdx
@@ -0,0 +1,12 @@
+---
+title: React Callout Component API
+name: Callout API
+description: Explore the API reference for the React Callout component and discover how to effectively utilize its props for customization.
+route: /components/callout/
+---
+
+import CCalloutAPI from '../../api/CCallout.api.mdx'
+
+## CCallout
+
+<CCalloutAPI />
diff --git a/packages/docs/content/components/callout/examples/CalloutExample.tsx b/packages/docs/content/components/callout/examples/CalloutExample.tsx
new file mode 100644
index 00000000..a378b299
--- /dev/null
+++ b/packages/docs/content/components/callout/examples/CalloutExample.tsx
@@ -0,0 +1,41 @@
+import React from 'react'
+import { CCallout } from '@coreui/react'
+
+export const CalloutExample = () => {
+ return (
+ <>
+ <CCallout color="primary">
+ New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
+ terminology, guidelines, and code snippets.
+ </CCallout>
+ <CCallout color="secondary">
+ New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
+ terminology, guidelines, and code snippets.
+ </CCallout>
+ <CCallout color="success">
+ New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
+ terminology, guidelines, and code snippets.
+ </CCallout>
+ <CCallout color="danger">
+ New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
+ terminology, guidelines, and code snippets.
+ </CCallout>
+ <CCallout color="warning">
+ New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
+ terminology, guidelines, and code snippets.
+ </CCallout>
+ <CCallout color="info">
+ New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
+ terminology, guidelines, and code snippets.
+ </CCallout>
+ <CCallout color="light">
+ New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
+ terminology, guidelines, and code snippets.
+ </CCallout>
+ <CCallout color="dark">
+ New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
+ terminology, guidelines, and code snippets.
+ </CCallout>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/callout/index.mdx b/packages/docs/content/components/callout/index.mdx
new file mode 100644
index 00000000..7f8f5dc8
--- /dev/null
+++ b/packages/docs/content/components/callout/index.mdx
@@ -0,0 +1,31 @@
+---
+title: React Callout Component
+name: Callout
+description: React callout component provides presentation of content in a visually distinct manner. Includes a heading, icon and typically text-based content.
+route: /components/callout/
+other_frameworks: callout
+---
+
+## Examples
+
+Callout component is prepared for any length of text, as well as an optional elements like icons, headings, etc. For a styling, use one of the **required** contextual props (e.g., `color="success"`).
+
+import { CalloutExample } from './examples/CalloutExample.tsx'
+import CalloutExampleTS from '!!raw-loader!./examples/CalloutExample.tsx'
+
+<ExampleSnippet code={CalloutExampleTS} componentName="React Callout">
+ <CalloutExample />
+</ExampleSnippet>
+
+<Callout color="info" title="Conveying meaning to assistive technologies">
+ Using color to add meaning only provides a visual indication, which will not be conveyed to
+ users of assistive technologies – such as screen readers. Ensure that information denoted by the
+ color is either obvious from the content itself (e.g. the visible text), or is included through
+ alternative means, such as additional text hidden with the `.visually-hidden` class.
+</Callout>
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [<CCallout />](./api/#ccallout)
diff --git a/packages/docs/content/components/callout/styling.mdx b/packages/docs/content/components/callout/styling.mdx
new file mode 100644
index 00000000..c4f58f86
--- /dev/null
+++ b/packages/docs/content/components/callout/styling.mdx
@@ -0,0 +1,36 @@
+---
+title: React Calout Component Styling
+name: Calout Styling
+description: Learn how to customize the React Calout component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/callout/
+---
+
+{/* ### CSS class names
+
+React Calout comes with built-in class names that make styling super simple. Here’s a quick rundown of what you can use:
+
+<ClassNamesDocs
+ files={[
+ 'components/callout/CCalout.tsx',
+ ]}
+/> */}
+
+### CSS variables
+
+React Calout supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.
+
+<ScssDocs file="_callout.scss" capture="callout-css-vars"/>
+
+#### How to use CSS variables
+
+```jsx
+const vars = {
+ '--my-css-var': 10,
+ '--my-another-css-var': "red"
+}
+return <CCallout style={vars}>...</CCallout>
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="callout-variables"/>
diff --git a/packages/docs/content/components/card.mdx b/packages/docs/content/components/card.mdx
deleted file mode 100644
index 93e199c7..00000000
--- a/packages/docs/content/components/card.mdx
+++ /dev/null
@@ -1,1096 +0,0 @@
----
-title: React Card Component
-name: Card
-description: React card component provides a flexible and extensible container for displaying content. Card is delivered with a bunch of variants and options.
-menu: Components
-route: /components/card
-other_frameworks: card
----
-
-import {
- CButton,
- CCard,
- CCardBody,
- CCardFooter,
- CCardGroup,
- CCardHeader,
- CCardImage,
- CCardImageOverlay,
- CCardLink,
- CCardSubtitle,
- CCardTitle,
- CCardText,
- CListGroup,
- CListGroupItem,
- CCol,
- CNav,
- CNavItem,
- CNavLink,
- CRow,
-} from '@coreui/react/src/index'
-
-import ReactImg from './../assets/images/react.jpg'
-import React400Img from './../assets/images/react400.jpg'
-
-## 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.
-
-## Example
-
-Cards are built with as little markup and styles as possible but still manage to deliver a bunch of control and customization. Built with flexbox, they offer easy alignment and mix well with other CoreUI components. Cards have no top, left, and right margins by default, so use [spacing utilities](https://coreui.io/docs/utilities/spacing) as needed. They have no fixed width to start, so they'll fill the full width of its parent.
-
-Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of its parent element.
-
-```jsx preview
-<CCard style={{ width: '18rem' }}>
- <CCardImage orientation="top" src={ReactImg} />
- <CCardBody>
- <CCardTitle>Card title</CCardTitle>
- <CCardText>
- Some quick example text to build on the card title and make up the bulk of the card's content.
- </CCardText>
- <CButton color="primary" href="#">Go somewhere</CButton>
- </CCardBody>
-</CCard>
-```
-
-## Content types
-
-CoreUI card supports a wide variety of content, including images, text, list groups, links, and more. Below are examples of those elements.
-
-### Body
-
-The main block of a card is the `<CCardBody>`. Use it whenever you need a padded section within a card.
-
-```jsx preview
-<CCard>
- <CCardBody>This is some text within a card body.</CCardBody>
-</CCard>
-```
-
-### Titles, text, and links
-
-Card titles are managed by `<CCardTitle>` component. Identically, links are attached and collected next to each other by `<CCardLink>` component.
-
-Subtitles are managed by `<CCardSubtitle>` component. If the `<CCardTitle>` also, the `<CCardSubtitle>` items are stored in a `<CCardBody>` item, the card title, and subtitle are arranged rightly.
-
-```jsx preview
-<CCard style={{ width: '18rem' }}>
- <CCardBody>
- <CCardTitle>Card title</CCardTitle>
- <CCardSubtitle className="mb-2 text-body-secondary">Card subtitle</CCardSubtitle>
- <CCardText>
- Some quick example text to build on the card title and make up the bulk of the card's content.
- </CCardText>
- <CCardLink href="#">Card link</CCardLink>
- <CCardLink href="#">Another link</CCardLink>
- </CCardBody>
-</CCard>
-```
-
-### Images
-
-`orientation="top"` places a picture to the top of the card. With `<CCardText>`, text can be added to the card. Text within `<CCardText>` can additionally be styled with the regular HTML tags.
-
-```jsx preview
-<CCard style={{ width: '18rem' }}>
- <CCardImage orientation="top" src={ReactImg} />
- <CCardBody>
- <CCardText>
- Some quick example text to build on the card title and make up the bulk of the card's content.
- </CCardText>
- </CCardBody>
-</CCard>
-```
-
-### List groups
-
-Create lists of content in a card with a flush list group.
-
-```jsx preview
-<CCard style={{ width: '18rem' }}>
- <CListGroup flush>
- <CListGroupItem>Cras justo odio</CListGroupItem>
- <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
- <CListGroupItem>Vestibulum at eros</CListGroupItem>
- </CListGroup>
-</CCard>
-```
-
-```jsx preview
-<CCard style={{ width: '18rem' }}>
- <CCardHeader>Header</CCardHeader>
- <CListGroup flush>
- <CListGroupItem>Cras justo odio</CListGroupItem>
- <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
- <CListGroupItem>Vestibulum at eros</CListGroupItem>
- </CListGroup>
-</CCard>
-```
-
-```jsx preview
-<CCard style={{ width: '18rem' }}>
- <CListGroup flush>
- <CListGroupItem>Cras justo odio</CListGroupItem>
- <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
- <CListGroupItem>Vestibulum at eros</CListGroupItem>
- </CListGroup>
- <CCardFooter>Footer</CCardFooter>
-</CCard>
-```
-
-### Kitchen sink
-
-Combine and match many content types to build the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.
-
-```jsx preview
-<CCard style={{ width: '18rem' }}>
- <CCardImage orientation="top" src={ReactImg} />
- <CCardBody>
- <CCardTitle>Card title</CCardTitle>
- <CCardText>
- Some quick example text to build on the card title and make up the bulk of the card's content.
- </CCardText>
- </CCardBody>
- <CListGroup flush>
- <CListGroupItem>Cras justo odio</CListGroupItem>
- <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
- <CListGroupItem>Vestibulum at eros</CListGroupItem>
- </CListGroup>
- <CCardBody>
- <CCardLink href="#">Card link</CCardLink>
- <CCardLink href="#">Another link</CCardLink>
- </CCardBody>
-</CCard>
-```
-
-### Header and footer
-
-Add an optional header and/or footer within a card.
-
-```jsx preview
-<CCard>
- <CCardHeader>Header</CCardHeader>
- <CCardBody>
- <CCardTitle>Special title treatment</CCardTitle>
- <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
- <CButton color="primary" href="#">Go somewhere</CButton>
- </CCardBody>
-</CCard>
-```
-
-Card headers can be styled by adding ex. `as="h5"`.
-
-```jsx preview
-<CCard>
- <CCardHeader as="h5">Header</CCardHeader>
- <CCardBody>
- <CCardTitle>Special title treatment</CCardTitle>
- <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
- <CButton color="primary" href="#">Go somewhere</CButton>
- </CCardBody>
-</CCard>
-```
-
-```jsx preview
-<CCard>
- <CCardHeader>Quote</CCardHeader>
- <CCardBody>
- <blockquote className="blockquote mb-0">
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
- <footer className="blockquote-footer">
- Someone famous in <cite title="Source Title">Source Title</cite>
- </footer>
- </blockquote>
- </CCardBody>
-</CCard>
-```
-
-```jsx preview
-<CCard className="text-center">
- <CCardHeader>Header</CCardHeader>
- <CCardBody>
- <CCardTitle>Special title treatment</CCardTitle>
- <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
- <CButton color="primary" href="#">Go somewhere</CButton>
- </CCardBody>
- <CCardFooter className="text-body-secondary">2 days ago</CCardFooter>
-</CCard>
-```
-
-## Sizing
-
-Cards assume no specific `width` to start, so they'll be 100% wide unless otherwise stated. You can adjust this as required with custom CSS, grid classes, grid Sass mixins, or services.
-
-### Using grid markup
-
-Using the grid, wrap cards in columns and rows as needed.
-
-```jsx preview
-<CRow>
- <CCol sm={6}>
- <CCard>
- <CCardBody>
- <CCardTitle>Special title treatment</CCardTitle>
- <CCardText>
- With supporting text below as a natural lead-in to additional content.
- </CCardText>
- <CButton color="primary" href="#">Go somewhere</CButton>
- </CCardBody>
- </CCard>
- </CCol>
- <CCol sm={6}>
- <CCard>
- <CCardBody>
- <CCardTitle>Special title treatment</CCardTitle>
- <CCardText>
- With supporting text below as a natural lead-in to additional content.
- </CCardText>
- <CButton color="primary" href="#">Go somewhere</CButton>
- </CCardBody>
- </CCard>
- </CCol>
-</CRow>
-```
-
-### Using utilities
-
-Use some of [available sizing utilities](https://coreui.io/docs/utilities/sizing/) to rapidly set a card's width.
-
-```jsx preview
- <CCard className="w-75">
- <CCardBody>
- <CCardTitle>Card title</CCardTitle>
- <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
- <CButton color="primary" href="#">Go somewhere</CButton>
- </CCardBody>
- </CCard>
- <CCard className="w-50">
- <CCardBody>
- <CCardTitle>Card title</CCardTitle>
- <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
- <CButton color="primary" href="#">Go somewhere</CButton>
- </CCardBody>
- </CCard>
-```
-
-### Using custom CSS
-
-Use custom CSS in your stylesheets or as inline styles to set a width.
-
-```jsx preview
-<CCard style={{ width: '18rem' }}>
- <CCardBody>
- <CCardTitle>Special title treatment</CCardTitle>
- <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
- <CButton color="primary" href="#">Go somewhere</CButton>
- </CCardBody>
-</CCard>
-```
-
-## Text alignment
-
-You can instantly change the text arrangement of any card—in its whole or specific parts—with [text align classes](https://coreui.io/docs/utilities/text/#text-alignment).
-
-```jsx preview
- <CCard style={{width: '18rem'}}>
- <CCardBody>
- <CCardTitle>Special title treatment</CCardTitle>
- <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
- <CButton color="primary" href="#">Go somewhere</CButton>
- </CCardBody>
- </CCard>
- <CCard className="text-center" style={{width: '18rem'}}>
- <CCardBody>
- <CCardTitle>Special title treatment</CCardTitle>
- <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
- <CButton color="primary" href="#">Go somewhere</CButton>
- </CCardBody>
- </CCard>
- <CCard className="text-end" style={{width: '18rem'}}>
- <CCardBody>
- <CCardTitle>Special title treatment</CCardTitle>
- <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
- <CButton color="primary" href="#">Go somewhere</CButton>
- </CCardBody>
- </CCard>
-```
-
-## Navigation
-
-Add some navigation to a `<CCardHeader>` with our `<CNav>` component.
-
-```jsx preview
-<CCard className="text-center">
- <CCardHeader>
- <CNav variant="tabs" className="card-header-tabs">
- <CNavItem>
- <CNavLink href="#" active>Active</CNavLink>
- </CNavItem>
- <CNavItem>
- <CNavLink href="#">Link</CNavLink>
- </CNavItem>
- <CNavItem>
- <CNavLink href="#" disabled>Disabled</CNavLink>
- </CNavItem>
- </CNav>
- </CCardHeader>
- <CCardBody>
- <CCardTitle>Special title treatment</CCardTitle>
- <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
- <CButton color="primary" href="#">Go somewhere</CButton>
- </CCardBody>
-</CCard>
-```
-
-```jsx preview
-<CCard className="text-center">
- <CCardHeader>
- <CNav variant="pills" className="card-header-pills">
- <CNavItem>
- <CNavLink href="#" active>Active</CNavLink>
- </CNavItem>
- <CNavItem>
- <CNavLink href="#">Link</CNavLink>
- </CNavItem>
- <CNavItem>
- <CNavLink href="#" disabled>Disabled</CNavLink>
- </CNavItem>
- </CNav>
- </CCardHeader>
- <CCardBody>
- <CCardTitle>Special title treatment</CCardTitle>
- <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
- <CButton color="primary" href="#">Go somewhere</CButton>
- </CCardBody>
-</CCard>
-```
-
-## Images
-
-Cards introduce several options for acting with images. Pick from appending "image caps" at either end of a card, overlaying images with content, or just inserting the image in a card.
-
-### Image caps
-
-Similar to headers and footers, cards can include top and bottom "image caps"—images at the top or bottom of a card.
-
-```jsx preview
-<CCard className="mb-3">
- <CCardImage orientation="top" src={ReactImg} />
- <CCardBody>
- <CCardTitle>Card title</CCardTitle>
- <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
- <CCardText><small className="text-body-secondary">Last updated 3 mins ago</small></CCardText>
- </CCardBody>
-</CCard>
-<CCard className="mb-3">
- <CCardBody>
- <CCardTitle>Card title</CCardTitle>
- <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
- <CCardText><small className="text-body-secondary">Last updated 3 mins ago</small></CCardText>
- </CCardBody>
- <CCardImage orientation="bottom" src={ReactImg} />
-</CCard>
-```
-
-### Image overlays
-
-Adapt an image into a background and overlay your text. Depending on the image, you may need additional styles or utilities.
-
-```jsx preview
-<CCard className="mb-3 bg-dark text-white">
- <CCardImage src={ReactImg} />
- <CCardImageOverlay>
- <CCardTitle>Card title</CCardTitle>
- <CCardText>
- This is a wider card with supporting text below as a natural lead-in to additional content.
- This content is a little bit longer.
- </CCardText>
- <CCardText>Last updated 3 mins ago</CCardText>
- </CCardImageOverlay>
-</CCard>
-```
-
-## Horizontal
-
-Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with `.g-0` and use `.col-md-*` classes to make the card horizontal at the `md` breakpoint. Further adjustments may be needed depending on your card content.
-
-```jsx preview
-<CCard className="mb-3" style={{ maxWidth: '540px' }}>
- <CRow className="g-0">
- <CCol md={4}>
- <CCardImage src={React400Img} />
- </CCol>
- <CCol md={8}>
- <CCardBody>
- <CCardTitle>Card title</CCardTitle>
- <CCardText>
- This is a wider card with supporting text below as a natural lead-in to additional
- content. This content is a little bit longer.
- </CCardText>
- <CCardText>
- <small className="text-body-secondary">Last updated 3 mins ago</small>
- </CCardText>
- </CCardBody>
- </CCol>
- </CRow>
-</CCard>
-```
-
-## Card styles
-
-Cards include various options for customizing their backgrounds, borders, and color.
-
-### Background and color
-
-Use `color` property to change the appearance of a card.
-
-<Example>
- <>
- {[
- { color: 'primary' },
- { color: 'secondary' },
- { color: 'success' },
- { color: 'danger' },
- { color: 'warning' },
- { color: 'info' },
- { color: 'light' },
- { color: 'dark' },
- ].map((item, index) => (
- <CCard
- textBgColor={item.color}
- className="mb-3"
- style={{ maxWidth: '18rem' }}
- key={index}
- >
- <CCardHeader>Header</CCardHeader>
- <CCardBody>
- <CCardTitle>{item.color} card title</CCardTitle>
- <CCardText> Some quick example text to build on the card title and make up the bulk of the card's content.</CCardText>
- </CCardBody>
- </CCard>
- ))}
- </>
-</Example>
-
-You can also apply contextual variations with the `textBgColor` property, which automatically sets the text color to ensure compliance with the WCAG 4.5:1 contrast ratio standard for enhanced accessibility.
-
-
-```jsx
-<>
- {[
- { color: 'primary' },
- { color: 'secondary' },
- { color: 'success' },
- { color: 'danger' },
- { color: 'warning' },
- { color: 'info' },
- { color: 'light' },
- { color: 'dark' },
- ].map((item, index) => (
- <CCard
- textBgColor={item.color}
- className="mb-3"
- style={{ maxWidth: '18rem' }}
- key={index}
- >
- <CCardHeader>Header</CCardHeader>
- <CCardBody>
- <CCardTitle>{item.color} card title</CCardTitle>
- <CCardText>
- Some quick example text to build on the card title and make up the bulk of the card's
- content.
- </CCardText>
- </CCardBody>
- </CCard>
- ))}
-</>
-```
-<Example>
- <>
- {[
- { color: 'primary', textColor: 'white' },
- { color: 'secondary', textColor: 'white' },
- { color: 'success', textColor: 'white' },
- { color: 'danger', textColor: 'white' },
- { color: 'warning' },
- { color: 'info', textColor: 'white' },
- { color: 'light' },
- { color: 'dark', textColor: 'white' },
- ].map((item, index) => (
- <CCard
- color={item.color}
- textColor={item.textColor}
- className="mb-3"
- style={{ maxWidth: '18rem' }}
- key={index}
- >
- <CCardHeader>Header</CCardHeader>
- <CCardBody>
- <CCardTitle>{item.color} card title</CCardTitle>
- <CCardText> Some quick example text to build on the card title and make up the bulk of the card's content.</CCardText>
- </CCardBody>
- </CCard>
- ))}
- </>
-</Example>
-
-```jsx
-<>
- {[
- { color: 'primary', textColor: 'white' },
- { color: 'secondary', textColor: 'white' },
- { color: 'success', textColor: 'white' },
- { color: 'danger', textColor: 'white' },
- { color: 'warning' },
- { color: 'info', textColor: 'white' },
- { color: 'light' },
- { color: 'dark', textColor: 'white' },
- ].map((item, index) => (
- <CCard
- color={item.color}
- textColor={item.textColor}
- className="mb-3"
- style={{ maxWidth: '18rem' }}
- key={index}
- >
- <CCardHeader>Header</CCardHeader>
- <CCardBody>
- <CCardTitle>{item.color} card title</CCardTitle>
- <CCardText>
- Some quick example text to build on the card title and make up the bulk of the card's
- content.
- </CCardText>
- </CCardBody>
- </CCard>
- ))}
-</>
-```
-
-<Callout color="info" title="Conveying meaning to assistive technologies">
- Using color to add meaning only provides a visual indication, which will not be conveyed to
- users of assistive technologies – such as screen readers. Ensure that information denoted by the
- color is either obvious from the content itself (e.g. the visible text), or is included through
- alternative means, such as additional text hidden with the `.visually-hidden` class.
-</Callout>
-
-### Border
-
-Use [border utilities](https://coreui.io/docs/utilities/borders/) to change just the `border-color` of a card. Note that you can set `textColor` property on the `<CCard>` or a subset of the card's contents as shown below.
-
-<Example>
- <>
- {[
- { color: 'primary', textColor: 'primary' },
- { color: 'secondary', textColor: 'secondary' },
- { color: 'success', textColor: 'success' },
- { color: 'danger', textColor: 'danger' },
- { color: 'warning', textColor: 'warning' },
- { color: 'info', textColor: 'info' },
- { color: 'light' },
- { color: 'dark' },
- ].map((item, index) => (
- <CCard
- textColor={item.textColor}
- className={`mb-3 border-${item.color}`}
- style={{ maxWidth: '18rem' }}
- key={index}
- >
- <CCardHeader>Header</CCardHeader>
- <CCardBody>
- <CCardTitle>{item.color} card title</CCardTitle>
- <CCardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CCardText>
- </CCardBody>
- </CCard>
- ))}
- </>
-</Example>
-
-```jsx
-<>
- {[
- { color: 'primary', textColor: 'primary' },
- { color: 'secondary', textColor: 'secondary' },
- { color: 'success', textColor: 'success' },
- { color: 'danger', textColor: 'danger' },
- { color: 'warning', textColor: 'warning' },
- { color: 'info', textColor: 'info' },
- { color: 'light' },
- { color: 'dark' },
- ].map((item, index) => (
- <CCard
- textColor={item.textColor}
- className={`mb-3 border-${item.color}`}
- style={{ maxWidth: '18rem' }}
- key={index}
- >
- <CCardHeader>Header</CCardHeader>
- <CCardBody>
- <CCardTitle>{item.color} card title</CCardTitle>
- <CCardText>
- Some quick example text to build on the card title and make up the bulk of the card's
- content.
- </CCardText>
- </CCardBody>
- </CCard>
- ))}
-</>
-```
-
-### Top border
-
-<Example>
- <>
- {[
- { color: 'primary', textColor: 'primary' },
- { color: 'secondary', textColor: 'secondary' },
- { color: 'success', textColor: 'success' },
- { color: 'danger', textColor: 'danger' },
- { color: 'warning', textColor: 'warning' },
- { color: 'info', textColor: 'info' },
- { color: 'light' },
- { color: 'dark' },
- ].map((item, index) => (
- <CCard
- textColor={item.textColor}
- className={`mb-3 border-top-${item.color} border-top-3`}
- style={{ maxWidth: '18rem' }}
- key={index}
- >
- <CCardHeader>Header</CCardHeader>
- <CCardBody>
- <CCardTitle>{item.color} card title</CCardTitle>
- <CCardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CCardText>
- </CCardBody>
- </CCard>
- ))}
- </>
-</Example>
-
-```jsx
-<>
- {[
- { color: 'primary', textColor: 'primary' },
- { color: 'secondary', textColor: 'secondary' },
- { color: 'success', textColor: 'success' },
- { color: 'danger', textColor: 'danger' },
- { color: 'warning', textColor: 'warning' },
- { color: 'info', textColor: 'info' },
- { color: 'light' },
- { color: 'dark' },
- ].map((item, index) => (
- <CCard
- textColor={item.textColor}
- className={`mb-3 border-top-${item.color} border-top-3`}
- style={{ maxWidth: '18rem' }}
- key={index}
- >
- <CCardHeader>Header</CCardHeader>
- <CCardBody>
- <CCardTitle>{item.color} card title</CCardTitle>
- <CCardText>
- Some quick example text to build on the card title and make up the bulk of the card's
- content.
- </CCardText>
- </CCardBody>
- </CCard>
- ))}
-</>
-```
-
-## Card layout
-
-In addition to styling the content within cards, CoreUI includes a few options for laying out series of cards. For the time being, **these layout options are not yet responsive**.
-
-### Card groups
-
-Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use `display: flex;` to become attached with uniform dimensions starting at the `sm` breakpoint.
-
-```jsx preview
-<CCardGroup>
- <CCard>
- <CCardImage orientation="top" src={ReactImg} />
- <CCardBody>
- <CCardTitle>Card title</CCardTitle>
- <CCardText>
- This is a wider card with supporting text below as a natural lead-in to additional content.
- This content is a little bit longer.
- </CCardText>
- <CCardText>
- <small className="text-body-secondary">Last updated 3 mins ago</small>
- </CCardText>
- </CCardBody>
- </CCard>
- <CCard>
- <CCardImage orientation="top" src={ReactImg} />
- <CCardBody>
- <CCardTitle>Card title</CCardTitle>
- <CCardText>
- This card has supporting text below as a natural lead-in to additional content.
- </CCardText>
- <CCardText>
- <small className="text-body-secondary">Last updated 3 mins ago</small>
- </CCardText>
- </CCardBody>
- </CCard>
- <CCard>
- <CCardImage orientation="top" src={ReactImg} />
- <CCardBody>
- <CCardTitle>Card title</CCardTitle>
- <CCardText>
- This is a wider card with supporting text below as a natural lead-in to additional content.
- This card has even longer content than the first to show that equal height action.
- </CCardText>
- <CCardText>
- <small className="text-body-secondary">Last updated 3 mins ago</small>
- </CCardText>
- </CCardBody>
- </CCard>
-</CCardGroup>
-```
-
-When using card groups with footers, their content will automatically line up.
-
-```jsx preview
-<CCardGroup>
- <CCard>
- <CCardImage orientation="top" src={ReactImg} />
- <CCardBody>
- <CCardTitle>Card title</CCardTitle>
- <CCardText>
- This is a wider card with supporting text below as a natural lead-in to additional content.
- This content is a little bit longer.
- </CCardText>
- </CCardBody>
- <CCardFooter>
- <small className="text-body-secondary">Last updated 3 mins ago</small>
- </CCardFooter>
- </CCard>
- <CCard>
- <CCardImage orientation="top" src={ReactImg} />
- <CCardBody>
- <CCardTitle>Card title</CCardTitle>
- <CCardText>
- This card has supporting text below as a natural lead-in to additional content.
- </CCardText>
- </CCardBody>
- <CCardFooter>
- <small className="text-body-secondary">Last updated 3 mins ago</small>
- </CCardFooter>
- </CCard>
- <CCard>
- <CCardImage orientation="top" src={ReactImg} />
- <CCardBody>
- <CCardTitle>Card title</CCardTitle>
- <CCardText>
- This is a wider card with supporting text below as a natural lead-in to additional content.
- This card has even longer content than the first to show that equal height action.
- </CCardText>
- </CCardBody>
- <CCardFooter>
- <small className="text-body-secondary">Last updated 3 mins ago</small>
- </CCardFooter>
- </CCard>
-</CCardGroup>
-```
-
-### Grid cards
-
-Use the `CRow` component and set `xs|sm|md|lg|xl|xxl}={{ cols: * }}` property to control how many grid columns (wrapped around your cards) you show per row. For example, here's `xs={{cols: 1}}` laying out the cards on one column, and `md={{cols: 1}}` splitting four cards to equal width across multiple rows, from the medium breakpoint up.
-
-```jsx preview
-<CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 2 }}>
- <CCol xs>
- <CCard>
- <CCardImage orientation="top" src={ReactImg} />
- <CCardBody>
- <CCardTitle>Card title</CCardTitle>
- <CCardText>
- This is a wider card with supporting text below as a natural lead-in to additional
- content. This content is a little bit longer.
- </CCardText>
- </CCardBody>
- <CCardFooter>
- <small className="text-body-secondary">Last updated 3 mins ago</small>
- </CCardFooter>
- </CCard>
- </CCol>
- <CCol xs>
- <CCard>
- <CCardImage orientation="top" src={ReactImg} />
- <CCardBody>
- <CCardTitle>Card title</CCardTitle>
- <CCardText>
- This is a wider card with supporting text below as a natural lead-in to additional
- content. This content is a little bit longer.
- </CCardText>
- </CCardBody>
- <CCardFooter>
- <small className="text-body-secondary">Last updated 3 mins ago</small>
- </CCardFooter>
- </CCard>
- </CCol>
- <CCol xs>
- <CCard>
- <CCardImage orientation="top" src={ReactImg} />
- <CCardBody>
- <CCardTitle>Card title</CCardTitle>
- <CCardText>
- This is a wider card with supporting text below as a natural lead-in to additional
- content. This content is a little bit longer.
- </CCardText>
- </CCardBody>
- <CCardFooter>
- <small className="text-body-secondary">Last updated 3 mins ago</small>
- </CCardFooter>
- </CCard>
- </CCol>
- <CCol xs>
- <CCard>
- <CCardImage orientation="top" src={ReactImg} />
- <CCardBody>
- <CCardTitle>Card title</CCardTitle>
- <CCardText>
- This is a wider card with supporting text below as a natural lead-in to additional
- content. This content is a little bit longer.
- </CCardText>
- </CCardBody>
- <CCardFooter>
- <small className="text-body-secondary">Last updated 3 mins ago</small>
- </CCardFooter>
- </CCard>
- </CCol>
-</CRow>
-```
-
-Change it to `md={{ cols: 3}}` and you'll see the fourth card wrap.
-
-```jsx preview
-<CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 3 }}>
- <CCol xs>
- <CCard>
- <CCardImage orientation="top" src={ReactImg} />
- <CCardBody>
- <CCardTitle>Card title</CCardTitle>
- <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
- </CCardBody>
- <CCardFooter>
- <small className="text-body-secondary">Last updated 3 mins ago</small>
- </CCardFooter>
- </CCard>
- </CCol>
- <CCol xs>
- <CCard>
- <CCardImage orientation="top" src={ReactImg} />
- <CCardBody>
- <CCardTitle>Card title</CCardTitle>
- <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
- </CCardBody>
- <CCardFooter>
- <small className="text-body-secondary">Last updated 3 mins ago</small>
- </CCardFooter>
- </CCard>
- </CCol>
- <CCol xs>
- <CCard>
- <CCardImage orientation="top" src={ReactImg} />
- <CCardBody>
- <CCardTitle>Card title</CCardTitle>
- <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
- </CCardBody>
- <CCardFooter>
- <small className="text-body-secondary">Last updated 3 mins ago</small>
- </CCardFooter>
- </CCard>
- </CCol>
- <CCol xs>
- <CCard>
- <CCardImage orientation="top" src={ReactImg} />
- <CCardBody>
- <CCardTitle>Card title</CCardTitle>
- <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
- </CCardBody>
- <CCardFooter>
- <small className="text-body-secondary">Last updated 3 mins ago</small>
- </CCardFooter>
- </CCard>
- </CCol>
-</CRow>
-```
-
-When you need equal height, add `.h-100` to the cards. If you want equal heights by default, you can set `$card-height: 100%` in Sass.
-
-```jsx preview
-<CRow xs={{ cols: 1 }} md={{ cols: 3 }} className="g-4">
- <CCol xs>
- <CCard className="h-100">
- <CCardImage orientation="top" src={ReactImg} />
- <CCardBody>
- <CCardTitle>Card title</CCardTitle>
- <CCardText>
- This is a wider card with supporting text below as a natural lead-in to additional
- content. This content is a little bit longer.
- </CCardText>
- </CCardBody>
- </CCard>
- </CCol>
- <CCol xs>
- <CCard className="h-100">
- <CCardImage orientation="top" src={ReactImg} />
- <CCardBody>
- <CCardTitle>Card title</CCardTitle>
- <CCardText>
- This card has supporting text below as a natural lead-in to additional content.
- </CCardText>
- </CCardBody>
- </CCard>
- </CCol>
- <CCol xs>
- <CCard className="h-100">
- <CCardImage orientation="top" src={ReactImg} />
- <CCardBody>
- <CCardTitle>Card title</CCardTitle>
- <CCardText>
- This is a wider card with supporting text below as a natural lead-in to additional
- content. This card has even longer content than the first to show that equal height
- action.
- </CCardText>
- </CCardBody>
- </CCard>
- </CCol>
- <CCol xs>
- <CCard className="h-100">
- <CCardImage orientation="top" src={ReactImg} />
- <CCardBody>
- <CCardTitle>Card title</CCardTitle>
- <CCardText>
- This is a wider card with supporting text below as a natural lead-in to additional
- content. This content is a little bit longer.
- </CCardText>
- </CCardBody>
- </CCard>
- </CCol>
-</CRow>
-```
-
-Just like with card groups, card footers will automatically line up.
-
-```jsx preview
-<CRow xs={{ cols: 1 }} md={{ cols: 3 }} className="g-4">
- <CCol xs>
- <CCard className="h-100">
- <CCardImage orientation="top" src={ReactImg} />
- <CCardBody>
- <CCardTitle>Card title</CCardTitle>
- <CCardText>
- This is a wider card with supporting text below as a natural lead-in to additional
- content. This content is a little bit longer.
- </CCardText>
- </CCardBody>
- <CCardFooter>
- <small className="text-body-secondary">Last updated 3 mins ago</small>
- </CCardFooter>
- </CCard>
- </CCol>
- <CCol xs>
- <CCard className="h-100">
- <CCardImage orientation="top" src={ReactImg} />
- <CCardBody>
- <CCardTitle>Card title</CCardTitle>
- <CCardText>
- This card has supporting text below as a natural lead-in to additional content.
- </CCardText>
- </CCardBody>
- <CCardFooter>
- <small className="text-body-secondary">Last updated 3 mins ago</small>
- </CCardFooter>
- </CCard>
- </CCol>
- <CCol xs>
- <CCard className="h-100">
- <CCardImage orientation="top" src={ReactImg} />
- <CCardBody>
- <CCardTitle>Card title</CCardTitle>
- <CCardText>
- This is a wider card with supporting text below as a natural lead-in to additional
- content. This card has even longer content than the first to show that equal height
- action.
- </CCardText>
- </CCardBody>
- <CCardFooter>
- <small className="text-body-secondary">Last updated 3 mins ago</small>
- </CCardFooter>
- </CCard>
- </CCol>
-</CRow>
-```
-
-
-## Customizing
-
-### CSS variables
-
-React cards use local CSS variables on `.card` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
-
-<ScssDocs file="_card.scss" capture="card-css-vars"/>
-
-#### How to use CSS variables
-
-```jsx
-const vars = {
- '--my-css-var': 10,
- '--my-another-css-var': "red"
-}
-return <CCard style={vars}>...</CCard>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="card-variables"/>
-
-## API
-
-### CCard
-
-`markdown:CCard.api.mdx`
-
-### CCardBody
-
-`markdown:CCardBody.api.mdx`
-
-### CCardFooter
-
-`markdown:CCardFooter.api.mdx`
-
-### CCardGroup
-
-`markdown:CCardGroup.api.mdx`
-
-### CCardHeader
-
-`markdown:CCardHeader.api.mdx`
-
-### CCardImage
-
-`markdown:CCardImage.api.mdx`
-
-### CCardImageOverlay
-
-`markdown:CCardImageOverlay.api.mdx`
-
-### CCardLink
-
-`markdown:CCardLink.api.mdx`
-
-### CCardSubtitle
-
-`markdown:CCardSubtitle.api.mdx`
-
-### CCardText
-
-`markdown:CCardText.api.mdx`
-
-### CCardTitle
-
-`markdown:CCardTitle.api.mdx`
diff --git a/packages/docs/content/components/card/api.mdx b/packages/docs/content/components/card/api.mdx
new file mode 100644
index 00000000..19d54e93
--- /dev/null
+++ b/packages/docs/content/components/card/api.mdx
@@ -0,0 +1,62 @@
+---
+title: React Card Component API
+name: Card API
+description: Explore the API reference for the React Card component and discover how to effectively utilize its props for customization.
+route: /components/card/
+---
+
+import CCardAPI from '../../api/CCard.api.mdx'
+import CCardBodyAPI from '../../api/CCardBody.api.mdx'
+import CCardFooterAPI from '../../api/CCardFooter.api.mdx'
+import CCardGroupAPI from '../../api/CCardGroup.api.mdx'
+import CCardHeaderAPI from '../../api/CCardHeader.api.mdx'
+import CCardImageAPI from '../../api/CCardImage.api.mdx'
+import CCardImageOverlayAPI from '../../api/CCardImageOverlay.api.mdx'
+import CCardLinkAPI from '../../api/CCardLink.api.mdx'
+import CCardSubtitleAPI from '../../api/CCardSubtitle.api.mdx'
+import CCardTextAPI from '../../api/CCardText.api.mdx'
+import CCardTitleAPI from '../../api/CCardTitle.api.mdx'
+
+## CCard
+
+<CCardAPI />
+
+## CCardBody
+
+<CCardBodyAPI />
+
+## CCardFooter
+
+<CCardFooterAPI />
+
+## CCardGroup
+
+<CCardGroupAPI />
+
+## CCardHeader
+
+<CCardHeaderAPI />
+
+## CCardImage
+
+<CCardImageAPI />
+
+## CCardImageOverlay
+
+<CCardImageOverlayAPI />
+
+## CCardLink
+
+<CCardLinkAPI />
+
+## CCardSubtitle
+
+<CCardSubtitleAPI />
+
+## CCardText
+
+<CCardTextAPI />
+
+## CCardTitle
+
+<CCardTitleAPI />
diff --git a/packages/docs/content/components/card/examples/CardBodyExample.tsx b/packages/docs/content/components/card/examples/CardBodyExample.tsx
new file mode 100644
index 00000000..6cdc49d6
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardBodyExample.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import { CCard, CCardBody } from '@coreui/react'
+
+export const CardBodyExample = () => {
+ return (
+ <CCard>
+ <CCardBody>This is some text within a card body.</CCardBody>
+ </CCard>
+ )
+}
diff --git a/packages/docs/content/components/card/examples/CardExample.tsx b/packages/docs/content/components/card/examples/CardExample.tsx
new file mode 100644
index 00000000..dabc40e2
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardExample.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { CButton, CCard, CCardBody, CCardImage, CCardText, CCardTitle } from '@coreui/react'
+
+import ReactImg from './../../../assets/images/react.jpg'
+
+export const CardExample = () => {
+ return (
+ <CCard style={{ width: '18rem' }}>
+ <CCardImage orientation="top" src={ReactImg} />
+ <CCardBody>
+ <CCardTitle>Card title</CCardTitle>
+ <CCardText>
+ Some quick example text to build on the card title and make up the bulk of the card's
+ content.
+ </CCardText>
+ <CButton color="primary" href="#">
+ Go somewhere
+ </CButton>
+ </CCardBody>
+ </CCard>
+ )
+}
diff --git a/packages/docs/content/components/card/examples/CardGrid2Example.tsx b/packages/docs/content/components/card/examples/CardGrid2Example.tsx
new file mode 100644
index 00000000..ec8e6541
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardGrid2Example.tsx
@@ -0,0 +1,80 @@
+import React from 'react'
+import {
+ CCard,
+ CCardBody,
+ CCardFooter,
+ CCardImage,
+ CCardText,
+ CCardTitle,
+ CCol,
+ CRow,
+} from '@coreui/react'
+
+import ReactImg from './../../../assets/images/react.jpg'
+
+export const CardGrid2Example = () => {
+ return (
+ <CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 3 }}>
+ <CCol xs>
+ <CCard>
+ <CCardImage orientation="top" src={ReactImg} />
+ <CCardBody>
+ <CCardTitle>Card title</CCardTitle>
+ <CCardText>
+ This is a wider card with supporting text below as a natural lead-in to additional
+ content. This content is a little bit longer.
+ </CCardText>
+ </CCardBody>
+ <CCardFooter>
+ <small className="text-body-secondary">Last updated 3 mins ago</small>
+ </CCardFooter>
+ </CCard>
+ </CCol>
+ <CCol xs>
+ <CCard>
+ <CCardImage orientation="top" src={ReactImg} />
+ <CCardBody>
+ <CCardTitle>Card title</CCardTitle>
+ <CCardText>
+ This is a wider card with supporting text below as a natural lead-in to additional
+ content. This content is a little bit longer.
+ </CCardText>
+ </CCardBody>
+ <CCardFooter>
+ <small className="text-body-secondary">Last updated 3 mins ago</small>
+ </CCardFooter>
+ </CCard>
+ </CCol>
+ <CCol xs>
+ <CCard>
+ <CCardImage orientation="top" src={ReactImg} />
+ <CCardBody>
+ <CCardTitle>Card title</CCardTitle>
+ <CCardText>
+ This is a wider card with supporting text below as a natural lead-in to additional
+ content. This content is a little bit longer.
+ </CCardText>
+ </CCardBody>
+ <CCardFooter>
+ <small className="text-body-secondary">Last updated 3 mins ago</small>
+ </CCardFooter>
+ </CCard>
+ </CCol>
+ <CCol xs>
+ <CCard>
+ <CCardImage orientation="top" src={ReactImg} />
+ <CCardBody>
+ <CCardTitle>Card title</CCardTitle>
+ <CCardText>
+ This is a wider card with supporting text below as a natural lead-in to additional
+ content. This content is a little bit longer.
+ </CCardText>
+ </CCardBody>
+ <CCardFooter>
+ <small className="text-body-secondary">Last updated 3 mins ago</small>
+ </CCardFooter>
+ </CCard>
+ </CCol>
+ </CRow>
+ )
+}
diff --git a/packages/docs/content/components/card/examples/CardGrid3Example.tsx b/packages/docs/content/components/card/examples/CardGrid3Example.tsx
new file mode 100644
index 00000000..51a21d8c
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardGrid3Example.tsx
@@ -0,0 +1,59 @@
+import React from 'react'
+import { CCard, CCardBody, CCardImage, CCardText, CCardTitle, CCol, CRow } from '@coreui/react'
+
+import ReactImg from './../../../assets/images/react.jpg'
+
+export const CardGrid3Example = () => {
+ return (
+ <CRow xs={{ cols: 1 }} md={{ cols: 3 }} className="g-4">
+ <CCol xs>
+ <CCard className="h-100">
+ <CCardImage orientation="top" src={ReactImg} />
+ <CCardBody>
+ <CCardTitle>Card title</CCardTitle>
+ <CCardText>
+ This is a wider card with supporting text below as a natural lead-in to additional
+ content. This content is a little bit longer.
+ </CCardText>
+ </CCardBody>
+ </CCard>
+ </CCol>
+ <CCol xs>
+ <CCard className="h-100">
+ <CCardImage orientation="top" src={ReactImg} />
+ <CCardBody>
+ <CCardTitle>Card title</CCardTitle>
+ <CCardText>
+ This card has supporting text below as a natural lead-in to additional content.
+ </CCardText>
+ </CCardBody>
+ </CCard>
+ </CCol>
+ <CCol xs>
+ <CCard className="h-100">
+ <CCardImage orientation="top" src={ReactImg} />
+ <CCardBody>
+ <CCardTitle>Card title</CCardTitle>
+ <CCardText>
+ This is a wider card with supporting text below as a natural lead-in to additional
+ content. This card has even longer content than the first to show that equal height
+ action.
+ </CCardText>
+ </CCardBody>
+ </CCard>
+ </CCol>
+ <CCol xs>
+ <CCard className="h-100">
+ <CCardImage orientation="top" src={ReactImg} />
+ <CCardBody>
+ <CCardTitle>Card title</CCardTitle>
+ <CCardText>
+ This is a wider card with supporting text below as a natural lead-in to additional
+ content. This content is a little bit longer.
+ </CCardText>
+ </CCardBody>
+ </CCard>
+ </CCol>
+ </CRow>
+ )
+}
diff --git a/packages/docs/content/components/card/examples/CardGrid4Example.tsx b/packages/docs/content/components/card/examples/CardGrid4Example.tsx
new file mode 100644
index 00000000..fec6f1bc
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardGrid4Example.tsx
@@ -0,0 +1,65 @@
+import React from 'react'
+import {
+ CCard,
+ CCardBody,
+ CCardFooter,
+ CCardImage,
+ CCardText,
+ CCardTitle,
+ CCol,
+ CRow,
+} from '@coreui/react'
+
+import ReactImg from './../../../assets/images/react.jpg'
+
+export const CardGrid4Example = () => {
+ return (
+ <CRow xs={{ cols: 1 }} md={{ cols: 3 }} className="g-4">
+ <CCol xs>
+ <CCard className="h-100">
+ <CCardImage orientation="top" src={ReactImg} />
+ <CCardBody>
+ <CCardTitle>Card title</CCardTitle>
+ <CCardText>
+ This is a wider card with supporting text below as a natural lead-in to additional
+ content. This content is a little bit longer.
+ </CCardText>
+ </CCardBody>
+ <CCardFooter>
+ <small className="text-body-secondary">Last updated 3 mins ago</small>
+ </CCardFooter>
+ </CCard>
+ </CCol>
+ <CCol xs>
+ <CCard className="h-100">
+ <CCardImage orientation="top" src={ReactImg} />
+ <CCardBody>
+ <CCardTitle>Card title</CCardTitle>
+ <CCardText>
+ This card has supporting text below as a natural lead-in to additional content.
+ </CCardText>
+ </CCardBody>
+ <CCardFooter>
+ <small className="text-body-secondary">Last updated 3 mins ago</small>
+ </CCardFooter>
+ </CCard>
+ </CCol>
+ <CCol xs>
+ <CCard className="h-100">
+ <CCardImage orientation="top" src={ReactImg} />
+ <CCardBody>
+ <CCardTitle>Card title</CCardTitle>
+ <CCardText>
+ This is a wider card with supporting text below as a natural lead-in to additional
+ content. This card has even longer content than the first to show that equal height
+ action.
+ </CCardText>
+ </CCardBody>
+ <CCardFooter>
+ <small className="text-body-secondary">Last updated 3 mins ago</small>
+ </CCardFooter>
+ </CCard>
+ </CCol>
+ </CRow>
+ )
+}
diff --git a/packages/docs/content/components/card/examples/CardGridExample.tsx b/packages/docs/content/components/card/examples/CardGridExample.tsx
new file mode 100644
index 00000000..584deef3
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardGridExample.tsx
@@ -0,0 +1,80 @@
+import React from 'react'
+import {
+ CCard,
+ CCardBody,
+ CCardFooter,
+ CCardImage,
+ CCardText,
+ CCardTitle,
+ CCol,
+ CRow,
+} from '@coreui/react'
+
+import ReactImg from './../../../assets/images/react.jpg'
+
+export const CardGridExample = () => {
+ return (
+ <CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 2 }}>
+ <CCol xs>
+ <CCard>
+ <CCardImage orientation="top" src={ReactImg} />
+ <CCardBody>
+ <CCardTitle>Card title</CCardTitle>
+ <CCardText>
+ This is a wider card with supporting text below as a natural lead-in to additional
+ content. This content is a little bit longer.
+ </CCardText>
+ </CCardBody>
+ <CCardFooter>
+ <small className="text-body-secondary">Last updated 3 mins ago</small>
+ </CCardFooter>
+ </CCard>
+ </CCol>
+ <CCol xs>
+ <CCard>
+ <CCardImage orientation="top" src={ReactImg} />
+ <CCardBody>
+ <CCardTitle>Card title</CCardTitle>
+ <CCardText>
+ This is a wider card with supporting text below as a natural lead-in to additional
+ content. This content is a little bit longer.
+ </CCardText>
+ </CCardBody>
+ <CCardFooter>
+ <small className="text-body-secondary">Last updated 3 mins ago</small>
+ </CCardFooter>
+ </CCard>
+ </CCol>
+ <CCol xs>
+ <CCard>
+ <CCardImage orientation="top" src={ReactImg} />
+ <CCardBody>
+ <CCardTitle>Card title</CCardTitle>
+ <CCardText>
+ This is a wider card with supporting text below as a natural lead-in to additional
+ content. This content is a little bit longer.
+ </CCardText>
+ </CCardBody>
+ <CCardFooter>
+ <small className="text-body-secondary">Last updated 3 mins ago</small>
+ </CCardFooter>
+ </CCard>
+ </CCol>
+ <CCol xs>
+ <CCard>
+ <CCardImage orientation="top" src={ReactImg} />
+ <CCardBody>
+ <CCardTitle>Card title</CCardTitle>
+ <CCardText>
+ This is a wider card with supporting text below as a natural lead-in to additional
+ content. This content is a little bit longer.
+ </CCardText>
+ </CCardBody>
+ <CCardFooter>
+ <small className="text-body-secondary">Last updated 3 mins ago</small>
+ </CCardFooter>
+ </CCard>
+ </CCol>
+ </CRow>
+ )
+}
diff --git a/packages/docs/content/components/card/examples/CardGroups2Example.tsx b/packages/docs/content/components/card/examples/CardGroups2Example.tsx
new file mode 100644
index 00000000..ffdc1d0d
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardGroups2Example.tsx
@@ -0,0 +1,58 @@
+import React from 'react'
+import {
+ CCard,
+ CCardBody,
+ CCardFooter,
+ CCardGroup,
+ CCardImage,
+ CCardText,
+ CCardTitle,
+} from '@coreui/react'
+
+import ReactImg from './../../../assets/images/react.jpg'
+
+export const CardGroups2Example = () => {
+ return (
+ <CCardGroup>
+ <CCard>
+ <CCardImage orientation="top" src={ReactImg} />
+ <CCardBody>
+ <CCardTitle>Card title</CCardTitle>
+ <CCardText>
+ This is a wider card with supporting text below as a natural lead-in to additional
+ content. This content is a little bit longer.
+ </CCardText>
+ </CCardBody>
+ <CCardFooter>
+ <small className="text-body-secondary">Last updated 3 mins ago</small>
+ </CCardFooter>
+ </CCard>
+ <CCard>
+ <CCardImage orientation="top" src={ReactImg} />
+ <CCardBody>
+ <CCardTitle>Card title</CCardTitle>
+ <CCardText>
+ This card has supporting text below as a natural lead-in to additional content.
+ </CCardText>
+ </CCardBody>
+ <CCardFooter>
+ <small className="text-body-secondary">Last updated 3 mins ago</small>
+ </CCardFooter>
+ </CCard>
+ <CCard>
+ <CCardImage orientation="top" src={ReactImg} />
+ <CCardBody>
+ <CCardTitle>Card title</CCardTitle>
+ <CCardText>
+ This is a wider card with supporting text below as a natural lead-in to additional
+ content. This card has even longer content than the first to show that equal height
+ action.
+ </CCardText>
+ </CCardBody>
+ <CCardFooter>
+ <small className="text-body-secondary">Last updated 3 mins ago</small>
+ </CCardFooter>
+ </CCard>
+ </CCardGroup>
+ )
+}
diff --git a/packages/docs/content/components/card/examples/CardGroupsExample.tsx b/packages/docs/content/components/card/examples/CardGroupsExample.tsx
new file mode 100644
index 00000000..d0711d70
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardGroupsExample.tsx
@@ -0,0 +1,50 @@
+import React from 'react'
+import { CCard, CCardBody, CCardGroup, CCardImage, CCardText, CCardTitle } from '@coreui/react'
+
+import ReactImg from './../../../assets/images/react.jpg'
+
+export const CardGroupsExample = () => {
+ return (
+ <CCardGroup>
+ <CCard>
+ <CCardImage orientation="top" src={ReactImg} />
+ <CCardBody>
+ <CCardTitle>Card title</CCardTitle>
+ <CCardText>
+ This is a wider card with supporting text below as a natural lead-in to additional
+ content. This content is a little bit longer.
+ </CCardText>
+ <CCardText>
+ <small className="text-body-secondary">Last updated 3 mins ago</small>
+ </CCardText>
+ </CCardBody>
+ </CCard>
+ <CCard>
+ <CCardImage orientation="top" src={ReactImg} />
+ <CCardBody>
+ <CCardTitle>Card title</CCardTitle>
+ <CCardText>
+ This card has supporting text below as a natural lead-in to additional content.
+ </CCardText>
+ <CCardText>
+ <small className="text-body-secondary">Last updated 3 mins ago</small>
+ </CCardText>
+ </CCardBody>
+ </CCard>
+ <CCard>
+ <CCardImage orientation="top" src={ReactImg} />
+ <CCardBody>
+ <CCardTitle>Card title</CCardTitle>
+ <CCardText>
+ This is a wider card with supporting text below as a natural lead-in to additional
+ content. This card has even longer content than the first to show that equal height
+ action.
+ </CCardText>
+ <CCardText>
+ <small className="text-body-secondary">Last updated 3 mins ago</small>
+ </CCardText>
+ </CCardBody>
+ </CCard>
+ </CCardGroup>
+ )
+}
diff --git a/packages/docs/content/components/card/examples/CardHeader2Example.tsx b/packages/docs/content/components/card/examples/CardHeader2Example.tsx
new file mode 100644
index 00000000..56d8a1e7
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardHeader2Example.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import { CButton, CCard, CCardBody, CCardHeader, CCardText, CCardTitle } from '@coreui/react'
+
+export const CardHeader2Example = () => {
+ return (
+ <CCard>
+ <CCardHeader as="h5">Header</CCardHeader>
+ <CCardBody>
+ <CCardTitle>Special title treatment</CCardTitle>
+ <CCardText>
+ With supporting text below as a natural lead-in to additional content.
+ </CCardText>
+ <CButton color="primary" href="#">
+ Go somewhere
+ </CButton>
+ </CCardBody>
+ </CCard>
+ )
+}
diff --git a/packages/docs/content/components/card/examples/CardHeader3Example.tsx b/packages/docs/content/components/card/examples/CardHeader3Example.tsx
new file mode 100644
index 00000000..aff6f3c0
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardHeader3Example.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import { CCard, CCardBody, CCardHeader } from '@coreui/react'
+
+export const CardHeader3Example = () => {
+ return (
+ <CCard>
+ <CCardHeader>Quote</CCardHeader>
+ <CCardBody>
+ <blockquote className="blockquote mb-0">
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+ </p>
+ <footer className="blockquote-footer">
+ Someone famous in <cite title="Source Title">Source Title</cite>
+ </footer>
+ </blockquote>
+ </CCardBody>
+ </CCard>
+ )
+}
diff --git a/packages/docs/content/components/card/examples/CardHeaderAndFooterExample.tsx b/packages/docs/content/components/card/examples/CardHeaderAndFooterExample.tsx
new file mode 100644
index 00000000..190a1731
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardHeaderAndFooterExample.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import {
+ CButton,
+ CCard,
+ CCardBody,
+ CCardFooter,
+ CCardHeader,
+ CCardText,
+ CCardTitle,
+} from '@coreui/react'
+
+export const CardHeaderAndFooterExample = () => {
+ return (
+ <CCard className="text-center">
+ <CCardHeader>Header</CCardHeader>
+ <CCardBody>
+ <CCardTitle>Special title treatment</CCardTitle>
+ <CCardText>
+ With supporting text below as a natural lead-in to additional content.
+ </CCardText>
+ <CButton color="primary" href="#">
+ Go somewhere
+ </CButton>
+ </CCardBody>
+ <CCardFooter className="text-body-secondary">2 days ago</CCardFooter>
+ </CCard>
+ )
+}
diff --git a/packages/docs/content/components/card/examples/CardHeaderExample.tsx b/packages/docs/content/components/card/examples/CardHeaderExample.tsx
new file mode 100644
index 00000000..c80926ed
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardHeaderExample.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import { CButton, CCard, CCardBody, CCardHeader, CCardText, CCardTitle } from '@coreui/react'
+
+export const CardHeaderExample = () => {
+ return (
+ <CCard>
+ <CCardHeader>Header</CCardHeader>
+ <CCardBody>
+ <CCardTitle>Special title treatment</CCardTitle>
+ <CCardText>
+ With supporting text below as a natural lead-in to additional content.
+ </CCardText>
+ <CButton color="primary" href="#">
+ Go somewhere
+ </CButton>
+ </CCardBody>
+ </CCard>
+ )
+}
diff --git a/packages/docs/content/components/card/examples/CardImageCapsExample.tsx b/packages/docs/content/components/card/examples/CardImageCapsExample.tsx
new file mode 100644
index 00000000..e4bb33ab
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardImageCapsExample.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import { CCard, CCardBody, CCardImage, CCardText, CCardTitle } from '@coreui/react'
+
+import ReactImg from './../../../assets/images/react.jpg'
+
+export const CardImageCapsExample = () => {
+ return (
+ <>
+ <CCard className="mb-3">
+ <CCardImage orientation="top" src={ReactImg} />
+ <CCardBody>
+ <CCardTitle>Card title</CCardTitle>
+ <CCardText>
+ This is a wider card with supporting text below as a natural lead-in to additional
+ content. This content is a little bit longer.
+ </CCardText>
+ <CCardText>
+ <small className="text-body-secondary">Last updated 3 mins ago</small>
+ </CCardText>
+ </CCardBody>
+ </CCard>
+ <CCard className="mb-3">
+ <CCardBody>
+ <CCardTitle>Card title</CCardTitle>
+ <CCardText>
+ This is a wider card with supporting text below as a natural lead-in to additional
+ content. This content is a little bit longer.
+ </CCardText>
+ <CCardText>
+ <small className="text-body-secondary">Last updated 3 mins ago</small>
+ </CCardText>
+ </CCardBody>
+ <CCardImage orientation="bottom" src={ReactImg} />
+ </CCard>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/card/examples/CardImageHorizontalExample.tsx b/packages/docs/content/components/card/examples/CardImageHorizontalExample.tsx
new file mode 100644
index 00000000..1226d5ba
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardImageHorizontalExample.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import { CCard, CCardBody, CCardImage, CCardText, CCardTitle, CCol, CRow } from '@coreui/react'
+
+import React400Img from './../../../assets/images/react400.jpg'
+
+export const CardImageHorizontalExample = () => {
+ return (
+ <CCard className="mb-3" style={{ maxWidth: '540px' }}>
+ <CRow className="g-0">
+ <CCol md={4}>
+ <CCardImage src={React400Img} />
+ </CCol>
+ <CCol md={8}>
+ <CCardBody>
+ <CCardTitle>Card title</CCardTitle>
+ <CCardText>
+ This is a wider card with supporting text below as a natural lead-in to additional
+ content. This content is a little bit longer.
+ </CCardText>
+ <CCardText>
+ <small className="text-body-secondary">Last updated 3 mins ago</small>
+ </CCardText>
+ </CCardBody>
+ </CCol>
+ </CRow>
+ </CCard>
+ )
+}
diff --git a/packages/docs/content/components/card/examples/CardImageOverlaysExample.tsx b/packages/docs/content/components/card/examples/CardImageOverlaysExample.tsx
new file mode 100644
index 00000000..339af97f
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardImageOverlaysExample.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import { CCard, CCardImage, CCardImageOverlay, CCardText, CCardTitle } from '@coreui/react'
+
+import ReactImg from './../../../assets/images/react.jpg'
+
+export const CardImageOverlaysExample = () => {
+ return (
+ <CCard className="mb-3 bg-dark text-white">
+ <CCardImage src={ReactImg} />
+ <CCardImageOverlay className="d-flex flex-column align-items-center justify-content-center">
+ <CCardTitle>Card title</CCardTitle>
+ <CCardText>
+ This is a wider card with supporting text below as a natural lead-in to additional
+ content. This content is a little bit longer.
+ </CCardText>
+ <CCardText>Last updated 3 mins ago</CCardText>
+ </CCardImageOverlay>
+ </CCard>
+ )
+}
diff --git a/packages/docs/content/components/card/examples/CardImagesExample.tsx b/packages/docs/content/components/card/examples/CardImagesExample.tsx
new file mode 100644
index 00000000..919b1f71
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardImagesExample.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { CCard, CCardBody, CCardImage, CCardText } from '@coreui/react'
+
+import ReactImg from './../../../assets/images/react.jpg'
+
+export const CardImagesExample = () => {
+ return (
+ <CCard style={{ width: '18rem' }}>
+ <CCardImage orientation="top" src={ReactImg} />
+ <CCardBody>
+ <CCardText>
+ Some quick example text to build on the card title and make up the bulk of the card's
+ content.
+ </CCardText>
+ </CCardBody>
+ </CCard>
+ )
+}
diff --git a/packages/docs/content/components/card/examples/CardKitchenSinkExample.tsx b/packages/docs/content/components/card/examples/CardKitchenSinkExample.tsx
new file mode 100644
index 00000000..90f4c7ec
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardKitchenSinkExample.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import {
+ CCard,
+ CCardBody,
+ CCardImage,
+ CCardLink,
+ CCardText,
+ CCardTitle,
+ CListGroup,
+ CListGroupItem,
+} from '@coreui/react'
+
+import ReactImg from './../../../assets/images/react.jpg'
+
+export const CardKitchenSinkExample = () => {
+ return (
+ <CCard style={{ width: '18rem' }}>
+ <CCardImage orientation="top" src={ReactImg} />
+ <CCardBody>
+ <CCardTitle>Card title</CCardTitle>
+ <CCardText>
+ Some quick example text to build on the card title and make up the bulk of the card's
+ content.
+ </CCardText>
+ </CCardBody>
+ <CListGroup flush>
+ <CListGroupItem>Cras justo odio</CListGroupItem>
+ <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
+ <CListGroupItem>Vestibulum at eros</CListGroupItem>
+ </CListGroup>
+ <CCardBody>
+ <CCardLink href="#">Card link</CCardLink>
+ <CCardLink href="#">Another link</CCardLink>
+ </CCardBody>
+ </CCard>
+ )
+}
diff --git a/packages/docs/content/components/card/examples/CardListGroups2Example.tsx b/packages/docs/content/components/card/examples/CardListGroups2Example.tsx
new file mode 100644
index 00000000..e57730b7
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardListGroups2Example.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { CCard, CCardHeader, CListGroup, CListGroupItem } from '@coreui/react'
+
+export const CardListGroups2Example = () => {
+ return (
+ <CCard style={{ width: '18rem' }}>
+ <CCardHeader>Header</CCardHeader>
+ <CListGroup flush>
+ <CListGroupItem>Cras justo odio</CListGroupItem>
+ <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
+ <CListGroupItem>Vestibulum at eros</CListGroupItem>
+ </CListGroup>
+ </CCard>
+ )
+}
diff --git a/packages/docs/content/components/card/examples/CardListGroups3Example.tsx b/packages/docs/content/components/card/examples/CardListGroups3Example.tsx
new file mode 100644
index 00000000..eacf3f75
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardListGroups3Example.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { CCard, CCardFooter, CListGroup, CListGroupItem } from '@coreui/react'
+
+export const CardListGroups3Example = () => {
+ return (
+ <CCard style={{ width: '18rem' }}>
+ <CListGroup flush>
+ <CListGroupItem>Cras justo odio</CListGroupItem>
+ <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
+ <CListGroupItem>Vestibulum at eros</CListGroupItem>
+ </CListGroup>
+ <CCardFooter>Footer</CCardFooter>
+ </CCard>
+ )
+}
diff --git a/packages/docs/content/components/card/examples/CardListGroupsExample.tsx b/packages/docs/content/components/card/examples/CardListGroupsExample.tsx
new file mode 100644
index 00000000..843294fa
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardListGroupsExample.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { CCard, CListGroup, CListGroupItem } from '@coreui/react'
+
+export const CardListGroupsExample = () => {
+ return (
+ <CCard style={{ width: '18rem' }}>
+ <CListGroup flush>
+ <CListGroupItem>Cras justo odio</CListGroupItem>
+ <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
+ <CListGroupItem>Vestibulum at eros</CListGroupItem>
+ </CListGroup>
+ </CCard>
+ )
+}
diff --git a/packages/docs/content/components/card/examples/CardNavigation2Example.tsx b/packages/docs/content/components/card/examples/CardNavigation2Example.tsx
new file mode 100644
index 00000000..6469f59d
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardNavigation2Example.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import {
+ CButton,
+ CCard,
+ CCardBody,
+ CCardHeader,
+ CCardText,
+ CCardTitle,
+ CNav,
+ CNavItem,
+ CNavLink,
+} from '@coreui/react'
+
+export const CardNavigation2Example = () => {
+ return (
+ <CCard className="text-center">
+ <CCardHeader>
+ <CNav variant="pills" className="card-header-pills">
+ <CNavItem>
+ <CNavLink href="#" active>Active</CNavLink>
+ </CNavItem>
+ <CNavItem>
+ <CNavLink href="#">Link</CNavLink>
+ </CNavItem>
+ <CNavItem>
+ <CNavLink href="#" disabled>Disabled</CNavLink>
+ </CNavItem>
+ </CNav>
+ </CCardHeader>
+ <CCardBody>
+ <CCardTitle>Special title treatment</CCardTitle>
+ <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
+ <CButton color="primary" href="#">Go somewhere</CButton>
+ </CCardBody>
+ </CCard>
+ )
+}
diff --git a/packages/docs/content/components/card/examples/CardNavigationExample.tsx b/packages/docs/content/components/card/examples/CardNavigationExample.tsx
new file mode 100644
index 00000000..a4d41714
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardNavigationExample.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import {
+ CButton,
+ CCard,
+ CCardBody,
+ CCardHeader,
+ CCardText,
+ CCardTitle,
+ CNav,
+ CNavItem,
+ CNavLink,
+} from '@coreui/react'
+
+export const CardNavigationExample = () => {
+ return (
+ <CCard className="text-center">
+ <CCardHeader>
+ <CNav variant="tabs" className="card-header-tabs">
+ <CNavItem>
+ <CNavLink href="#" active>Active</CNavLink>
+ </CNavItem>
+ <CNavItem>
+ <CNavLink href="#">Link</CNavLink>
+ </CNavItem>
+ <CNavItem>
+ <CNavLink href="#" disabled>Disabled</CNavLink>
+ </CNavItem>
+ </CNav>
+ </CCardHeader>
+ <CCardBody>
+ <CCardTitle>Special title treatment</CCardTitle>
+ <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
+ <CButton color="primary" href="#">Go somewhere</CButton>
+ </CCardBody>
+ </CCard>
+ )
+}
diff --git a/packages/docs/content/components/card/examples/CardSizing2Example.tsx b/packages/docs/content/components/card/examples/CardSizing2Example.tsx
new file mode 100644
index 00000000..6abe386a
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardSizing2Example.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { CButton, CCard, CCardBody, CCardText, CCardTitle } from '@coreui/react'
+
+export const CardSizing2Example = () => {
+ return (
+ <>
+ <CCard className="w-75 mb-3">
+ <CCardBody>
+ <CCardTitle>Card title</CCardTitle>
+ <CCardText>
+ With supporting text below as a natural lead-in to additional content.
+ </CCardText>
+ <CButton color="primary" href="#">
+ Go somewhere
+ </CButton>
+ </CCardBody>
+ </CCard>
+ <CCard className="w-50">
+ <CCardBody>
+ <CCardTitle>Card title</CCardTitle>
+ <CCardText>
+ With supporting text below as a natural lead-in to additional content.
+ </CCardText>
+ <CButton color="primary" href="#">Go somewhere</CButton>
+ </CCardBody>
+ </CCard>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/card/examples/CardSizing3Example.tsx b/packages/docs/content/components/card/examples/CardSizing3Example.tsx
new file mode 100644
index 00000000..4a98d744
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardSizing3Example.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { CButton, CCard, CCardBody, CCardText, CCardTitle } from '@coreui/react'
+
+export const CardSizing3Example = () => {
+ return (
+ <CCard style={{ width: '18rem' }}>
+ <CCardBody>
+ <CCardTitle>Special title treatment</CCardTitle>
+ <CCardText>
+ With supporting text below as a natural lead-in to additional content.
+ </CCardText>
+ <CButton color="primary" href="#">Go somewhere</CButton>
+ </CCardBody>
+ </CCard>
+ )
+}
diff --git a/packages/docs/content/components/card/examples/CardSizingExample.tsx b/packages/docs/content/components/card/examples/CardSizingExample.tsx
new file mode 100644
index 00000000..cabb8cc5
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardSizingExample.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import { CButton, CCard, CCardBody, CCardText, CCardTitle, CCol, CRow } from '@coreui/react'
+
+export const CardSizingExample = () => {
+ return (
+ <CRow>
+ <CCol sm={6}>
+ <CCard>
+ <CCardBody>
+ <CCardTitle>Special title treatment</CCardTitle>
+ <CCardText>
+ With supporting text below as a natural lead-in to additional content.
+ </CCardText>
+ <CButton color="primary" href="#">Go somewhere</CButton>
+ </CCardBody>
+ </CCard>
+ </CCol>
+ <CCol sm={6}>
+ <CCard>
+ <CCardBody>
+ <CCardTitle>Special title treatment</CCardTitle>
+ <CCardText>
+ With supporting text below as a natural lead-in to additional content.
+ </CCardText>
+ <CButton color="primary" href="#">Go somewhere</CButton>
+ </CCardBody>
+ </CCard>
+ </CCol>
+ </CRow>
+ )
+}
diff --git a/packages/docs/content/components/card/examples/CardStylesBackgroundAndColorExample.tsx b/packages/docs/content/components/card/examples/CardStylesBackgroundAndColorExample.tsx
new file mode 100644
index 00000000..a2f67bca
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardStylesBackgroundAndColorExample.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import { CCard, CCardBody, CCardHeader, CCardText, CCardTitle, CCol, CRow } from '@coreui/react'
+
+export const CardStylesBackgroundAndColorExample = () => {
+ const colors = [
+ { color: 'primary' },
+ { color: 'secondary' },
+ { color: 'success' },
+ { color: 'danger' },
+ { color: 'warning' },
+ { color: 'info' },
+ { color: 'light' },
+ { color: 'dark' },
+ ]
+
+ return (
+ <CRow>
+ {colors.map((item, index) => (
+ <CCol sm={6} key={index}>
+ <CCard textBgColor={item.color} className="mb-3">
+ <CCardHeader>Header</CCardHeader>
+ <CCardBody>
+ <CCardTitle>{item.color} card title</CCardTitle>
+ <CCardText>
+ Some quick example text to build on the card title and make up the bulk of the
+ card's content.
+ </CCardText>
+ </CCardBody>
+ </CCard>
+ </CCol>
+ ))}
+ </CRow>
+ )
+}
diff --git a/packages/docs/content/components/card/examples/CardStylesBorderExample.tsx b/packages/docs/content/components/card/examples/CardStylesBorderExample.tsx
new file mode 100644
index 00000000..192c1151
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardStylesBorderExample.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import { CCard, CCardBody, CCardHeader, CCardText, CCardTitle, CCol, CRow } from '@coreui/react'
+
+export const CardStylesBorderExample = () => {
+ const colors = [
+ { color: 'primary', textColor: 'primary' },
+ { color: 'secondary', textColor: 'secondary' },
+ { color: 'success', textColor: 'success' },
+ { color: 'danger', textColor: 'danger' },
+ { color: 'warning', textColor: 'warning' },
+ { color: 'info', textColor: 'info' },
+ { color: 'dark', textColor: 'dark' },
+ ]
+
+ return (
+ <CRow>
+ {colors.map((item, index) => (
+ <CCol sm={6} key={index}>
+ <CCard textColor={item.textColor} className={`mb-3 border-${item.color}`}>
+ <CCardHeader>Header</CCardHeader>
+ <CCardBody>
+ <CCardTitle>{item.color} card title</CCardTitle>
+ <CCardText>
+ Some quick example text to build on the card title and make up the bulk of the
+ card's content.
+ </CCardText>
+ </CCardBody>
+ </CCard>
+ </CCol>
+ ))}
+ </CRow>
+ )
+}
diff --git a/packages/docs/content/components/card/examples/CardStylesTopBorderExample.tsx b/packages/docs/content/components/card/examples/CardStylesTopBorderExample.tsx
new file mode 100644
index 00000000..5567efa0
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardStylesTopBorderExample.tsx
@@ -0,0 +1,36 @@
+import React from 'react'
+import { CCard, CCardBody, CCardHeader, CCardText, CCardTitle, CCol, CRow } from '@coreui/react'
+
+export const CardStylesTopBorderExample = () => {
+ const colors = [
+ { color: 'primary', textColor: 'primary' },
+ { color: 'secondary', textColor: 'secondary' },
+ { color: 'success', textColor: 'success' },
+ { color: 'danger', textColor: 'danger' },
+ { color: 'warning', textColor: 'warning' },
+ { color: 'info', textColor: 'info' },
+ { color: 'dark', textColor: 'dark' },
+ ]
+
+ return (
+ <CRow>
+ {colors.map((item, index) => (
+ <CCol sm={6} key={index}>
+ <CCard
+ textColor={item.textColor}
+ className={`mb-3 border-top-${item.color} border-top-3`}
+ >
+ <CCardHeader>Header</CCardHeader>
+ <CCardBody>
+ <CCardTitle>{item.color} card title</CCardTitle>
+ <CCardText>
+ Some quick example text to build on the card title and make up the bulk of the
+ card's content.
+ </CCardText>
+ </CCardBody>
+ </CCard>
+ </CCol>
+ ))}
+ </CRow>
+ )
+}
diff --git a/packages/docs/content/components/card/examples/CardTextAlignmentExample.tsx b/packages/docs/content/components/card/examples/CardTextAlignmentExample.tsx
new file mode 100644
index 00000000..181c290c
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardTextAlignmentExample.tsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import { CButton, CCard, CCardBody, CCardText, CCardTitle } from '@coreui/react'
+
+export const CardTextAlignmentExample = () => {
+ return (
+ <>
+ <CCard className="mb-3" style={{ width: '18rem' }}>
+ <CCardBody>
+ <CCardTitle>Special title treatment</CCardTitle>
+ <CCardText>
+ With supporting text below as a natural lead-in to additional content.
+ </CCardText>
+ <CButton color="primary" href="#">
+ Go somewhere
+ </CButton>
+ </CCardBody>
+ </CCard>
+ <CCard className="mb-3 text-center" style={{ width: '18rem' }}>
+ <CCardBody>
+ <CCardTitle>Special title treatment</CCardTitle>
+ <CCardText>
+ With supporting text below as a natural lead-in to additional content.
+ </CCardText>
+ <CButton color="primary" href="#">
+ Go somewhere
+ </CButton>
+ </CCardBody>
+ </CCard>
+ <CCard className="text-end" style={{ width: '18rem' }}>
+ <CCardBody>
+ <CCardTitle>Special title treatment</CCardTitle>
+ <CCardText>
+ With supporting text below as a natural lead-in to additional content.
+ </CCardText>
+ <CButton color="primary" href="#">
+ Go somewhere
+ </CButton>
+ </CCardBody>
+ </CCard>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/card/examples/CardTitleExample.tsx b/packages/docs/content/components/card/examples/CardTitleExample.tsx
new file mode 100644
index 00000000..7d134b86
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardTitleExample.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import { CCard, CCardBody, CCardLink, CCardSubtitle, CCardText, CCardTitle } from '@coreui/react'
+
+export const CardTitleExample = () => {
+ return (
+ <CCard style={{ width: '18rem' }}>
+ <CCardBody>
+ <CCardTitle>Card title</CCardTitle>
+ <CCardSubtitle className="mb-2 text-body-secondary">Card subtitle</CCardSubtitle>
+ <CCardText>
+ Some quick example text to build on the card title and make up the bulk of the card's
+ content.
+ </CCardText>
+ <CCardLink href="#">Card link</CCardLink>
+ <CCardLink href="#">Another link</CCardLink>
+ </CCardBody>
+ </CCard>
+ )
+}
diff --git a/packages/docs/content/components/card/index.mdx b/packages/docs/content/components/card/index.mdx
new file mode 100644
index 00000000..cfc4f2bd
--- /dev/null
+++ b/packages/docs/content/components/card/index.mdx
@@ -0,0 +1,352 @@
+---
+title: React Card Component
+name: Card
+description: React card component provides a flexible and extensible container for displaying content. Card is delivered with a bunch of variants and options.
+route: /components/card/
+other_frameworks: card
+---
+
+## 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.
+
+## Example
+
+Cards are built with as little markup and styles as possible but still manage to deliver a bunch of control and customization. Built with flexbox, they offer easy alignment and mix well with other CoreUI components. Cards have no top, left, and right margins by default, so use [spacing utilities](https://coreui.io/docs/utilities/spacing) as needed. They have no fixed width to start, so they'll fill the full width of its parent.
+
+Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of its parent element.
+
+<ExampleSnippet2 component="CardExample" componentName="React Card" />
+
+## Content types
+
+CoreUI card supports a wide variety of content, including images, text, list groups, links, and more. Below are examples of those elements.
+
+### Body
+
+The main block of a card is the `<CCardBody>`. Use it whenever you need a padded section within a card.
+
+
+import { CardBodyExample } from './examples/CardBodyExample.tsx'
+import CardBodyExampleTS from '!!raw-loader!./examples/CardBodyExample.tsx'
+
+<ExampleSnippet code={CardBodyExampleTS} componentName="React Card">
+ <CardBodyExample />
+</ExampleSnippet>
+
+### Titles, text, and links
+
+Card titles are managed by `<CCardTitle>` component. Identically, links are attached and collected next to each other by `<CCardLink>` component.
+
+Subtitles are managed by `<CCardSubtitle>` component. If the `<CCardTitle>` also, the `<CCardSubtitle>` items are stored in a `<CCardBody>` item, the card title, and subtitle are arranged rightly.
+
+import { CardTitleExample } from './examples/CardTitleExample.tsx'
+import CardTitleExampleTS from '!!raw-loader!./examples/CardTitleExample.tsx'
+
+<ExampleSnippet code={CardTitleExampleTS} componentName="React Card">
+ <CardTitleExample />
+</ExampleSnippet>
+
+### Images
+
+`orientation="top"` places a picture to the top of the card. With `<CCardText>`, text can be added to the card. Text within `<CCardText>` can additionally be styled with the regular HTML tags.
+
+import { CardImagesExample } from './examples/CardImagesExample.tsx'
+import CardImagesExampleTS from '!!raw-loader!./examples/CardImagesExample.tsx'
+
+<ExampleSnippet code={CardImagesExampleTS} componentName="React Card">
+ <CardImagesExample />
+</ExampleSnippet>
+
+### List groups
+
+Create lists of content in a card with a flush list group.
+
+import { CardListGroupsExample } from './examples/CardListGroupsExample.tsx'
+import CardListGroupsExampleTS from '!!raw-loader!./examples/CardListGroupsExample.tsx'
+
+<ExampleSnippet code={CardListGroupsExampleTS} componentName="React Card">
+ <CardListGroupsExample />
+</ExampleSnippet>
+
+import { CardListGroups2Example } from './examples/CardListGroups2Example.tsx'
+import CardListGroups2ExampleTS from '!!raw-loader!./examples/CardListGroups2Example.tsx'
+
+<ExampleSnippet code={CardListGroups2ExampleTS} componentName="React Card">
+ <CardListGroups2Example />
+</ExampleSnippet>
+
+import { CardListGroups3Example } from './examples/CardListGroups3Example.tsx'
+import CardListGroups3ExampleTS from '!!raw-loader!./examples/CardListGroups3Example.tsx'
+
+<ExampleSnippet code={CardListGroups3ExampleTS} componentName="React Card">
+ <CardListGroups3Example />
+</ExampleSnippet>
+
+### Kitchen sink
+
+Combine and match many content types to build the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.
+
+import { CardKitchenSinkExample } from './examples/CardKitchenSinkExample.tsx'
+import CardKitchenSinkExampleTS from '!!raw-loader!./examples/CardKitchenSinkExample.tsx'
+
+<ExampleSnippet code={CardKitchenSinkExampleTS} componentName="React Card">
+ <CardKitchenSinkExample />
+</ExampleSnippet>
+
+### Header and footer
+
+Add an optional header and/or footer within a card.
+
+import { CardHeaderExample } from './examples/CardHeaderExample.tsx'
+import CardHeaderExampleTS from '!!raw-loader!./examples/CardHeaderExample.tsx'
+
+<ExampleSnippet code={CardHeaderExampleTS} componentName="React Card">
+ <CardHeaderExample />
+</ExampleSnippet>
+
+Card headers can be styled by adding ex. `as="h5"`.
+
+import { CardHeader2Example } from './examples/CardHeader2Example.tsx'
+import CardHeader2ExampleTS from '!!raw-loader!./examples/CardHeader2Example.tsx'
+
+<ExampleSnippet code={CardHeader2ExampleTS} componentName="React Card">
+ <CardHeader2Example />
+</ExampleSnippet>
+
+import { CardHeader3Example } from './examples/CardHeader3Example.tsx'
+import CardHeader3ExampleTS from '!!raw-loader!./examples/CardHeader3Example.tsx'
+
+<ExampleSnippet code={CardHeader3ExampleTS} componentName="React Card">
+ <CardHeader3Example />
+</ExampleSnippet>
+
+import { CardHeaderAndFooterExample } from './examples/CardHeaderAndFooterExample.tsx'
+import CardHeaderAndFooterExampleTS from '!!raw-loader!./examples/CardHeaderAndFooterExample.tsx'
+
+<ExampleSnippet code={CardHeaderAndFooterExampleTS} componentName="React Card">
+ <CardHeaderAndFooterExample />
+</ExampleSnippet>
+
+## Sizing
+
+Cards assume no specific `width` to start, so they'll be 100% wide unless otherwise stated. You can adjust this as required with custom CSS, grid classes, grid Sass mixins, or services.
+
+### Using grid markup
+
+Using the grid, wrap cards in columns and rows as needed.
+
+import { CardSizingExample } from './examples/CardSizingExample.tsx'
+import CardSizingExampleTS from '!!raw-loader!./examples/CardSizingExample.tsx'
+
+<ExampleSnippet code={CardSizingExampleTS} componentName="React Card">
+ <CardSizingExample />
+</ExampleSnippet>
+
+### Using utilities
+
+Use some of [available sizing utilities](https://coreui.io/docs/utilities/sizing/) to rapidly set a card's width.
+
+import { CardSizing2Example } from './examples/CardSizing2Example.tsx'
+import CardSizing2ExampleTS from '!!raw-loader!./examples/CardSizing2Example.tsx'
+
+<ExampleSnippet code={CardSizing2ExampleTS} componentName="React Card">
+ <CardSizing2Example />
+</ExampleSnippet>
+
+### Using custom CSS
+
+Use custom CSS in your stylesheets or as inline styles to set a width.
+
+import { CardSizing3Example } from './examples/CardSizing3Example.tsx'
+import CardSizing3ExampleTS from '!!raw-loader!./examples/CardSizing3Example.tsx'
+
+<ExampleSnippet code={CardSizing3ExampleTS} componentName="React Card">
+ <CardSizing3Example />
+</ExampleSnippet>
+
+## Text alignment
+
+You can instantly change the text arrangement of any card—in its whole or specific parts—with [text align classes](https://coreui.io/docs/utilities/text/#text-alignment).
+
+import { CardTextAlignmentExample } from './examples/CardTextAlignmentExample.tsx'
+import CardTextAlignmentExampleTS from '!!raw-loader!./examples/CardTextAlignmentExample.tsx'
+
+<ExampleSnippet code={CardTextAlignmentExampleTS} componentName="React Card">
+ <CardTextAlignmentExample />
+</ExampleSnippet>
+
+## Navigation
+
+Add some navigation to a `<CCardHeader>` with our `<CNav>` component.
+
+import { CardNavigationExample } from './examples/CardNavigationExample.tsx'
+import CardNavigationExampleTS from '!!raw-loader!./examples/CardNavigationExample.tsx'
+
+<ExampleSnippet code={CardNavigationExampleTS} componentName="React Card">
+ <CardNavigationExample />
+</ExampleSnippet>
+
+import { CardNavigation2Example } from './examples/CardNavigation2Example.tsx'
+import CardNavigation2ExampleTS from '!!raw-loader!./examples/CardNavigation2Example.tsx'
+
+<ExampleSnippet code={CardNavigation2ExampleTS} componentName="React Card">
+ <CardNavigation2Example />
+</ExampleSnippet>
+
+## Images
+
+Cards introduce several options for acting with images. Pick from appending "image caps" at either end of a card, overlaying images with content, or just inserting the image in a card.
+
+### Image caps
+
+Similar to headers and footers, cards can include top and bottom "image caps"—images at the top or bottom of a card.
+
+import { CardImageCapsExample } from './examples/CardImageCapsExample.tsx'
+import CardImageCapsExampleTS from '!!raw-loader!./examples/CardImageCapsExample.tsx'
+
+<ExampleSnippet code={CardImageCapsExampleTS} componentName="React Card">
+ <CardImageCapsExample />
+</ExampleSnippet>
+
+### Image overlays
+
+Adapt an image into a background and overlay your text. Depending on the image, you may need additional styles or utilities.
+
+import { CardImageOverlaysExample } from './examples/CardImageOverlaysExample.tsx'
+import CardImageOverlaysExampleTS from '!!raw-loader!./examples/CardImageOverlaysExample.tsx'
+
+<ExampleSnippet code={CardImageOverlaysExampleTS} componentName="React Card">
+ <CardImageOverlaysExample />
+</ExampleSnippet>
+
+## Horizontal
+
+Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with `.g-0` and use `.col-md-*` classes to make the card horizontal at the `md` breakpoint. Further adjustments may be needed depending on your card content.
+
+import { CardImageHorizontalExample } from './examples/CardImageHorizontalExample.tsx'
+import CardImageHorizontalExampleTS from '!!raw-loader!./examples/CardImageHorizontalExample.tsx'
+
+<ExampleSnippet code={CardImageHorizontalExampleTS} componentName="React Card">
+ <CardImageHorizontalExample />
+</ExampleSnippet>
+
+## Card styles
+
+Cards include various options for customizing their backgrounds, borders, and color.
+
+### Background and color
+
+Use `color` property to change the appearance of a card.
+
+import { CardStylesBackgroundAndColorExample } from './examples/CardStylesBackgroundAndColorExample.tsx'
+import CardStylesBackgroundAndColorExampleTS from '!!raw-loader!./examples/CardStylesBackgroundAndColorExample.tsx'
+
+<ExampleSnippet code={CardStylesBackgroundAndColorExampleTS} componentName="React Card">
+ <CardStylesBackgroundAndColorExample />
+</ExampleSnippet>
+
+<Callout color="info" title="Conveying meaning to assistive technologies">
+ Using color to add meaning only provides a visual indication, which will not be conveyed to
+ users of assistive technologies – such as screen readers. Ensure that information denoted by the
+ color is either obvious from the content itself (e.g. the visible text), or is included through
+ alternative means, such as additional text hidden with the `.visually-hidden` class.
+</Callout>
+
+### Border
+
+Use [border utilities](https://coreui.io/docs/utilities/borders/) to change just the `border-color` of a card. Note that you can set `textColor` property on the `<CCard>` or a subset of the card's contents as shown below.
+
+import { CardStylesBorderExample } from './examples/CardStylesBorderExample.tsx'
+import CardStylesBorderExampleTS from '!!raw-loader!./examples/CardStylesBorderExample.tsx'
+
+<ExampleSnippet code={CardStylesBorderExampleTS} componentName="React Card">
+ <CardStylesBorderExample />
+</ExampleSnippet>
+
+### Top border
+
+import { CardStylesTopBorderExample } from './examples/CardStylesTopBorderExample.tsx'
+import CardStylesTopBorderExampleTS from '!!raw-loader!./examples/CardStylesTopBorderExample.tsx'
+
+<ExampleSnippet code={CardStylesTopBorderExampleTS} componentName="React Card">
+ <CardStylesTopBorderExample />
+</ExampleSnippet>
+
+## Card layout
+
+In addition to styling the content within cards, CoreUI includes a few options for laying out series of cards. For the time being, **these layout options are not yet responsive**.
+
+### Card groups
+
+Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use `display: flex;` to become attached with uniform dimensions starting at the `sm` breakpoint.
+
+import { CardGroupsExample } from './examples/CardGroupsExample.tsx'
+import CardGroupsExampleTS from '!!raw-loader!./examples/CardGroupsExample.tsx'
+
+<ExampleSnippet code={CardGroupsExampleTS} componentName="React Card">
+ <CardGroupsExample />
+</ExampleSnippet>
+
+When using card groups with footers, their content will automatically line up.
+
+import { CardGroups2Example } from './examples/CardGroups2Example.tsx'
+import CardGroups2ExampleTS from '!!raw-loader!./examples/CardGroups2Example.tsx'
+
+<ExampleSnippet code={CardGroups2ExampleTS} componentName="React Card">
+ <CardGroups2Example />
+</ExampleSnippet>
+
+### Grid cards
+
+Use the `CRow` component and set `xs|sm|md|lg|xl|xxl}={{ cols: * }}` property to control how many grid columns (wrapped around your cards) you show per row. For example, here's `xs={{cols: 1}}` laying out the cards on one column, and `md={{cols: 1}}` splitting four cards to equal width across multiple rows, from the medium breakpoint up.
+
+import { CardGridExample } from './examples/CardGridExample.tsx'
+import CardGridExampleTS from '!!raw-loader!./examples/CardGridExample.tsx'
+
+<ExampleSnippet code={CardGridExampleTS} componentName="React Card">
+ <CardGridExample />
+</ExampleSnippet>
+
+Change it to `md={{ cols: 3}}` and you'll see the fourth card wrap.
+
+import { CardGrid2Example } from './examples/CardGrid2Example.tsx'
+import CardGrid2ExampleTS from '!!raw-loader!./examples/CardGrid2Example.tsx'
+
+<ExampleSnippet code={CardGrid2ExampleTS} componentName="React Card">
+ <CardGrid2Example />
+</ExampleSnippet>
+
+When you need equal height, add `.h-100` to the cards. If you want equal heights by default, you can set `$card-height: 100%` in Sass.
+
+import { CardGrid3Example } from './examples/CardGrid3Example.tsx'
+import CardGrid3ExampleTS from '!!raw-loader!./examples/CardGrid3Example.tsx'
+
+<ExampleSnippet code={CardGrid3ExampleTS} componentName="React Card">
+ <CardGrid3Example />
+</ExampleSnippet>
+
+Just like with card groups, card footers will automatically line up.
+
+import { CardGrid4Example } from './examples/CardGrid4Example.tsx'
+import CardGrid4ExampleTS from '!!raw-loader!./examples/CardGrid4Example.tsx'
+
+<ExampleSnippet code={CardGrid4ExampleTS} componentName="React Card">
+ <CardGrid4Example />
+</ExampleSnippet>
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [<CCard />](./api/#ccard)
+- [<CCardBody />](./api/#ccardbody)
+- [<CCardFooter />](./api/#ccardfooter)
+- [<CCardGroup />](./api/#ccardgroup)
+- [<CCardHeader />](./api/#ccardheader)
+- [<CCardImage />](./api/#ccardimage)
+- [<CCardImageOverlay />](./api/#ccardimageoverlay)
+- [<CCardLink />](./api/#ccardlink)
+- [<CCardSubtitle />](./api/#ccardsubtitle)
+- [<CCardText />](./api/#ccardtext)
+- [<CCardTitle />](./api/#ccardtitle)
diff --git a/packages/docs/content/components/card/styling.mdx b/packages/docs/content/components/card/styling.mdx
new file mode 100644
index 00000000..e78be408
--- /dev/null
+++ b/packages/docs/content/components/card/styling.mdx
@@ -0,0 +1,37 @@
+---
+title: React Card Component Styling
+name: Card Styling
+description: Learn how to customize the React Card component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/card/
+---
+
+{/* ### CSS class names
+
+React Card comes with built-in class names that make styling super simple. Here’s a quick rundown of what you can use:
+
+<ClassNamesDocs
+ files={[
+ 'components/button/CCard.tsx',
+ ]}
+/> */}
+
+### CSS variables
+
+React Card supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.
+
+<ScssDocs file="_card.scss" capture="card-css-vars"/>
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+ '--cui-card-cap-bg': '#555',
+ '--cui-card-color': '#efefef',
+}
+
+return <CCard style={customVars}>{/* Card content */}</CCard>
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="card-variables"/>
diff --git a/packages/docs/content/components/carousel.mdx b/packages/docs/content/components/carousel.mdx
deleted file mode 100644
index a79a0ed2..00000000
--- a/packages/docs/content/components/carousel.mdx
+++ /dev/null
@@ -1,232 +0,0 @@
----
-title: React Carousel Component
-name: Carousel
-description: React carousel is a slideshow component for cycling through elements—images or slides of text—like a carousel.
-menu: Components
-route: /components/carousel
-other_frameworks: carousel
----
-
-import {
- CCallout,
- CCarousel,
- CCarouselCaption,
- CCarouselItem,
- CImage,
-} from '@coreui/react/src/index'
-
-import AngularImg from './../assets/images/angular.jpg'
-import ReactImg from './../assets/images/react.jpg'
-import VueImg from './../assets/images/vue.jpg'
-
-## How it works
-
-The React carousel is a slideshow for cycling within a group of content. It runs with a group of images, text, or html elements. It also incorporates support for previous/next buttons.
-
-In browsers where the [Page Visibility API](https://www.w3.org/TR/page-visibility/) is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).
-
-## Example
-
-Carousels don't automatically normalize slide dimensions. As such, you may want to use extra utilities or custom methods to properly size content. While carousels support previous/next controls and indicators, they're not explicitly expected. Add and customize as you see fit.
-
-### Slides only
-
-```jsx preview
-<CCarousel>
- <CCarouselItem>
- <CImage className="d-block w-100" src={ReactImg} alt="slide 1" />
- </CCarouselItem>
- <CCarouselItem>
- <CImage className="d-block w-100" src={VueImg} alt="slide 2" />
- </CCarouselItem>
- <CCarouselItem>
- <CImage className="d-block w-100" src={AngularImg} alt="slide 3" />
- </CCarouselItem>
-</CCarousel>
-```
-
-### With controls
-
-Adding in the previous and next controls by `controls` property.
-
-```jsx preview
-<CCarousel controls>
- <CCarouselItem>
- <CImage className="d-block w-100" src={ReactImg} alt="slide 1" />
- </CCarouselItem>
- <CCarouselItem>
- <CImage className="d-block w-100" src={VueImg} alt="slide 2" />
- </CCarouselItem>
- <CCarouselItem>
- <CImage className="d-block w-100" src={AngularImg} alt="slide 3" />
- </CCarouselItem>
-</CCarousel>
-```
-
-### With indicators
-
-You can attach the indicators to the carousel, lengthwise the controls, too.
-
-```jsx preview
-<CCarousel controls indicators>
- <CCarouselItem>
- <CImage className="d-block w-100" src={ReactImg} alt="slide 1" />
- </CCarouselItem>
- <CCarouselItem>
- <CImage className="d-block w-100" src={VueImg} alt="slide 2" />
- </CCarouselItem>
- <CCarouselItem>
- <CImage className="d-block w-100" src={AngularImg} alt="slide 3" />
- </CCarouselItem>
-</CCarousel>
-```
-
-### With captions
-
-You can add captions to slides with the `<CCarouselCaption>` element within any `<CCarouselItem>`. They can be immediately hidden on smaller viewports, as shown below, with optional [display utilities](https://coreui.io/4.0/utilities/display). We hide them with `.d-none` and draw them back on medium-sized devices with `.d-md-block`.
-
-<Example>
- <CCarousel controls indicators>
- <CCarouselItem>
- <CImage className="d-block w-100" src={ReactImg} alt="slide 1" />
- <CCarouselCaption className="d-none d-md-block">
- <h5>First slide label</h5>
- <p>Some representative placeholder content for the first slide.</p>
- </CCarouselCaption>
- </CCarouselItem>
- <CCarouselItem>
- <CImage className="d-block w-100" src={VueImg} alt="slide 2" />
- <CCarouselCaption className="d-none d-md-block">
- <h5>Second slide label</h5>
- <p>Some representative placeholder content for the first slide.</p>
- </CCarouselCaption>
- </CCarouselItem>
- <CCarouselItem>
- <CImage className="d-block w-100" src={AngularImg} alt="slide 3" />
- <CCarouselCaption className="d-none d-md-block">
- <h5>Third slide label</h5>
- <p>Some representative placeholder content for the first slide.</p>
- </CCarouselCaption>
- </CCarouselItem>
- </CCarousel>
-</Example>
-
-```jsx
-<CCarousel controls indicators>
- <CCarouselItem>
- <CImage className="d-block w-100" src={ReactImg} alt="slide 1" />
- <CCarouselCaption className="d-none d-md-block">
- <h5>First slide label</h5>
- <p>Some representative placeholder content for the first slide.</p>
- </CCarouselCaption>
- </CCarouselItem>
- <CCarouselItem>
- <CImage className="d-block w-100" src={VueImg} alt="slide 2" />
- <CCarouselCaption className="d-none d-md-block">
- <h5>Second slide label</h5>
- <p>Some representative placeholder content for the first slide.</p>
- </CCarouselCaption>
- </CCarouselItem>
- <CCarouselItem>
- <CImage className="d-block w-100" src={AngularImg} alt="slide 3" />
- <CCarouselCaption className="d-none d-md-block">
- <h5>Third slide label</h5>
- <p>Some representative placeholder content for the first slide.</p>
- </CCarouselCaption>
- </CCarouselItem>
-</CCarousel>
-```
-
-### Crossfade
-
-Add `transition="crossfade"` to your carousel to animate slides with a fade transition instead of a slide.
-
-```jsx preview
-<CCarousel controls transition="crossfade">
- <CCarouselItem>
- <CImage className="d-block w-100" src={ReactImg} alt="slide 1" />
- </CCarouselItem>
- <CCarouselItem>
- <CImage className="d-block w-100" src={VueImg} alt="slide 2" />
- </CCarouselItem>
- <CCarouselItem>
- <CImage className="d-block w-100" src={AngularImg} alt="slide 3" />
- </CCarouselItem>
-</CCarousel>
-```
-
-## Dark variant
-
-Add `dark` property to the `CCarousel` for darker controls, indicators, and captions. Controls have been inverted from their default white fill with the `filter` CSS property. Captions and controls have additional Sass variables that customize the `color` and `background-color`.
-
-<Example>
- <CCarousel controls indicators dark>
- <CCarouselItem>
- <CImage className="d-block w-100" src={ReactImg} alt="slide 1" />
- <CCarouselCaption className="d-none d-md-block">
- <h5>First slide label</h5>
- <p>Some representative placeholder content for the first slide.</p>
- </CCarouselCaption>
- </CCarouselItem>
- <CCarouselItem>
- <CImage className="d-block w-100" src={VueImg} alt="slide 2" />
- <CCarouselCaption className="d-none d-md-block">
- <h5>Second slide label</h5>
- <p>Some representative placeholder content for the first slide.</p>
- </CCarouselCaption>
- </CCarouselItem>
- <CCarouselItem>
- <CImage className="d-block w-100" src={AngularImg} alt="slide 3" />
- <CCarouselCaption className="d-none d-md-block">
- <h5>Third slide label</h5>
- <p>Some representative placeholder content for the first slide.</p>
- </CCarouselCaption>
- </CCarouselItem>
- </CCarousel>
-</Example>
-
-```jsx
-<CCarousel controls indicators dark>
- <CCarouselItem>
- <CImage className="d-block w-100" src={ReactImg} alt="slide 1" />
- <CCarouselCaption className="d-none d-md-block">
- <h5>First slide label</h5>
- <p>Some representative placeholder content for the first slide.</p>
- </CCarouselCaption>
- </CCarouselItem>
- <CCarouselItem>
- <CImage className="d-block w-100" src={VueImg} alt="slide 2" />
- <CCarouselCaption className="d-none d-md-block">
- <h5>Second slide label</h5>
- <p>Some representative placeholder content for the first slide.</p>
- </CCarouselCaption>
- </CCarouselItem>
- <CCarouselItem>
- <CImage className="d-block w-100" src={AngularImg} alt="slide 3" />
- <CCarouselCaption className="d-none d-md-block">
- <h5>Third slide label</h5>
- <p>Some representative placeholder content for the first slide.</p>
- </CCarouselCaption>
- </CCarouselItem>
-</CCarousel>
-```
-
-## Customizing
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="carousel-variables"/>
-
-## API
-
-### CCarousel
-
-`markdown:CCarousel.api.mdx`
-
-### CCarouselCaption
-
-`markdown:CCarouselCaption.api.mdx`
-
-### CCarouselItem
-
-`markdown:CCarouselItem.api.mdx`
diff --git a/packages/docs/content/components/carousel/api.mdx b/packages/docs/content/components/carousel/api.mdx
new file mode 100644
index 00000000..b1d8ffb5
--- /dev/null
+++ b/packages/docs/content/components/carousel/api.mdx
@@ -0,0 +1,22 @@
+---
+title: React Carousel Component API
+name: Carousel API
+description: Explore the API reference for the React Carousel component and discover how to effectively utilize its props for customization.
+route: /components/carousel/
+---
+
+import CCarouselAPI from '../../api/CCarousel.api.mdx'
+import CCarouselCaptionAPI from '../../api/CCarouselCaption.api.mdx'
+import CCarouselItemAPI from '../../api/CCarouselItem.api.mdx'
+
+## CCarousel
+
+<CCarouselAPI />
+
+## CCarouselCaption
+
+<CCarouselCaptionAPI />
+
+## CCarouselItem
+
+<CCarouselItemAPI />
diff --git a/packages/docs/content/components/carousel/examples/CarouselCrossfadeExample.tsx b/packages/docs/content/components/carousel/examples/CarouselCrossfadeExample.tsx
new file mode 100644
index 00000000..267f12c6
--- /dev/null
+++ b/packages/docs/content/components/carousel/examples/CarouselCrossfadeExample.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { CCarousel, CCarouselItem, CImage } from '@coreui/react'
+
+import AngularImg from './../../../assets/images/angular.jpg'
+import ReactImg from './../../../assets/images/react.jpg'
+import VueImg from './../../../assets/images/vue.jpg'
+
+export const CarouselCrossfadeExample = () => {
+ return (
+ <CCarousel controls transition="crossfade">
+ <CCarouselItem>
+ <CImage className="d-block w-100" src={ReactImg} alt="slide 1" />
+ </CCarouselItem>
+ <CCarouselItem>
+ <CImage className="d-block w-100" src={VueImg} alt="slide 2" />
+ </CCarouselItem>
+ <CCarouselItem>
+ <CImage className="d-block w-100" src={AngularImg} alt="slide 3" />
+ </CCarouselItem>
+ </CCarousel>
+ )
+}
diff --git a/packages/docs/content/components/carousel/examples/CarouselDarkVariantExample.tsx b/packages/docs/content/components/carousel/examples/CarouselDarkVariantExample.tsx
new file mode 100644
index 00000000..ac579557
--- /dev/null
+++ b/packages/docs/content/components/carousel/examples/CarouselDarkVariantExample.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import { CCarousel, CCarouselCaption, CCarouselItem, CImage } from '@coreui/react'
+
+import AngularImg from './../../../assets/images/angular.jpg'
+import ReactImg from './../../../assets/images/react.jpg'
+import VueImg from './../../../assets/images/vue.jpg'
+
+export const CarouselDarkVariantExample = () => {
+ return (
+ <CCarousel controls indicators dark>
+ <CCarouselItem>
+ <CImage className="d-block w-100" src={ReactImg} alt="slide 1" />
+ <CCarouselCaption className="d-none d-md-block">
+ <h5>First slide label</h5>
+ <p>Some representative placeholder content for the first slide.</p>
+ </CCarouselCaption>
+ </CCarouselItem>
+ <CCarouselItem>
+ <CImage className="d-block w-100" src={VueImg} alt="slide 2" />
+ <CCarouselCaption className="d-none d-md-block">
+ <h5>Second slide label</h5>
+ <p>Some representative placeholder content for the first slide.</p>
+ </CCarouselCaption>
+ </CCarouselItem>
+ <CCarouselItem>
+ <CImage className="d-block w-100" src={AngularImg} alt="slide 3" />
+ <CCarouselCaption className="d-none d-md-block">
+ <h5>Third slide label</h5>
+ <p>Some representative placeholder content for the first slide.</p>
+ </CCarouselCaption>
+ </CCarouselItem>
+ </CCarousel>
+ )
+}
diff --git a/packages/docs/content/components/carousel/examples/CarouselSlidesOnlyExample.tsx b/packages/docs/content/components/carousel/examples/CarouselSlidesOnlyExample.tsx
new file mode 100644
index 00000000..272824f1
--- /dev/null
+++ b/packages/docs/content/components/carousel/examples/CarouselSlidesOnlyExample.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { CCarousel, CCarouselItem, CImage } from '@coreui/react'
+
+import AngularImg from './../../../assets/images/angular.jpg'
+import ReactImg from './../../../assets/images/react.jpg'
+import VueImg from './../../../assets/images/vue.jpg'
+
+export const CarouselSlidesOnlyExample = () => {
+ return (
+ <CCarousel>
+ <CCarouselItem>
+ <CImage className="d-block w-100" src={ReactImg} alt="slide 1" />
+ </CCarouselItem>
+ <CCarouselItem>
+ <CImage className="d-block w-100" src={VueImg} alt="slide 2" />
+ </CCarouselItem>
+ <CCarouselItem>
+ <CImage className="d-block w-100" src={AngularImg} alt="slide 3" />
+ </CCarouselItem>
+ </CCarousel>
+ )
+}
diff --git a/packages/docs/content/components/carousel/examples/CarouselWithCaptionsExample.tsx b/packages/docs/content/components/carousel/examples/CarouselWithCaptionsExample.tsx
new file mode 100644
index 00000000..5287d9c1
--- /dev/null
+++ b/packages/docs/content/components/carousel/examples/CarouselWithCaptionsExample.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import { CCarousel, CCarouselCaption, CCarouselItem, CImage } from '@coreui/react'
+
+import AngularImg from './../../../assets/images/angular.jpg'
+import ReactImg from './../../../assets/images/react.jpg'
+import VueImg from './../../../assets/images/vue.jpg'
+
+export const CarouselWithCaptionsExample = () => {
+ return (
+ <CCarousel controls indicators>
+ <CCarouselItem>
+ <CImage className="d-block w-100" src={ReactImg} alt="slide 1" />
+ <CCarouselCaption className="d-none d-md-block">
+ <h5>First slide label</h5>
+ <p>Some representative placeholder content for the first slide.</p>
+ </CCarouselCaption>
+ </CCarouselItem>
+ <CCarouselItem>
+ <CImage className="d-block w-100" src={VueImg} alt="slide 2" />
+ <CCarouselCaption className="d-none d-md-block">
+ <h5>Second slide label</h5>
+ <p>Some representative placeholder content for the first slide.</p>
+ </CCarouselCaption>
+ </CCarouselItem>
+ <CCarouselItem>
+ <CImage className="d-block w-100" src={AngularImg} alt="slide 3" />
+ <CCarouselCaption className="d-none d-md-block">
+ <h5>Third slide label</h5>
+ <p>Some representative placeholder content for the first slide.</p>
+ </CCarouselCaption>
+ </CCarouselItem>
+ </CCarousel>
+ )
+}
diff --git a/packages/docs/content/components/carousel/examples/CarouselWithControlsExample.tsx b/packages/docs/content/components/carousel/examples/CarouselWithControlsExample.tsx
new file mode 100644
index 00000000..11af5ea3
--- /dev/null
+++ b/packages/docs/content/components/carousel/examples/CarouselWithControlsExample.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { CCarousel, CCarouselItem, CImage } from '@coreui/react'
+
+import AngularImg from './../../../assets/images/angular.jpg'
+import ReactImg from './../../../assets/images/react.jpg'
+import VueImg from './../../../assets/images/vue.jpg'
+
+export const CarouselWithControlsExample = () => {
+ return (
+ <CCarousel controls>
+ <CCarouselItem>
+ <CImage className="d-block w-100" src={ReactImg} alt="slide 1" />
+ </CCarouselItem>
+ <CCarouselItem>
+ <CImage className="d-block w-100" src={VueImg} alt="slide 2" />
+ </CCarouselItem>
+ <CCarouselItem>
+ <CImage className="d-block w-100" src={AngularImg} alt="slide 3" />
+ </CCarouselItem>
+ </CCarousel>
+ )
+}
diff --git a/packages/docs/content/components/carousel/examples/CarouselWithIndicatorsExample.tsx b/packages/docs/content/components/carousel/examples/CarouselWithIndicatorsExample.tsx
new file mode 100644
index 00000000..95e70c49
--- /dev/null
+++ b/packages/docs/content/components/carousel/examples/CarouselWithIndicatorsExample.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { CCarousel, CCarouselItem, CImage } from '@coreui/react'
+
+import AngularImg from './../../../assets/images/angular.jpg'
+import ReactImg from './../../../assets/images/react.jpg'
+import VueImg from './../../../assets/images/vue.jpg'
+
+export const CarouselWithIndicatorsExample = () => {
+ return (
+ <CCarousel controls indicators>
+ <CCarouselItem>
+ <CImage className="d-block w-100" src={ReactImg} alt="slide 1" />
+ </CCarouselItem>
+ <CCarouselItem>
+ <CImage className="d-block w-100" src={VueImg} alt="slide 2" />
+ </CCarouselItem>
+ <CCarouselItem>
+ <CImage className="d-block w-100" src={AngularImg} alt="slide 3" />
+ </CCarouselItem>
+ </CCarousel>
+ )
+}
diff --git a/packages/docs/content/components/carousel/index.mdx b/packages/docs/content/components/carousel/index.mdx
new file mode 100644
index 00000000..2acae4c4
--- /dev/null
+++ b/packages/docs/content/components/carousel/index.mdx
@@ -0,0 +1,89 @@
+---
+title: React Carousel Component
+name: Carousel
+description: React carousel is a slideshow component for cycling through elements—images or slides of text—like a carousel.
+route: /components/carousel/
+other_frameworks: carousel
+---
+
+## How it works
+
+The React carousel is a slideshow for cycling within a group of content. It runs with a group of images, text, or html elements. It also incorporates support for previous/next buttons.
+
+In browsers where the [Page Visibility API](https://www.w3.org/TR/page-visibility/) is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).
+
+## Example
+
+Carousels don't automatically normalize slide dimensions. As such, you may want to use extra utilities or custom methods to properly size content. While carousels support previous/next controls and indicators, they're not explicitly expected. Add and customize as you see fit.
+
+### Slides only
+
+import { CarouselSlidesOnlyExample } from './examples/CarouselSlidesOnlyExample.tsx'
+import CarouselSlidesOnlyExampleTS from '!!raw-loader!./examples/CarouselSlidesOnlyExample.tsx'
+
+<ExampleSnippet code={CarouselSlidesOnlyExampleTS} componentName="React Carousel">
+ <CarouselSlidesOnlyExample />
+</ExampleSnippet>
+
+### With controls
+
+Adding in the previous and next controls by `controls` property.
+
+import { CarouselWithControlsExample } from './examples/CarouselWithControlsExample.tsx'
+import CarouselWithControlsExampleTS from '!!raw-loader!./examples/CarouselWithControlsExample.tsx'
+
+<ExampleSnippet code={CarouselWithControlsExampleTS} componentName="React Carousel">
+ <CarouselWithControlsExample />
+</ExampleSnippet>
+
+### With indicators
+
+You can attach the indicators to the carousel, lengthwise the controls, too.
+
+import { CarouselWithIndicatorsExample } from './examples/CarouselWithIndicatorsExample.tsx'
+import CarouselWithIndicatorsExampleTS from '!!raw-loader!./examples/CarouselWithIndicatorsExample.tsx'
+
+<ExampleSnippet code={CarouselWithIndicatorsExampleTS} componentName="React Carousel">
+ <CarouselWithIndicatorsExample />
+</ExampleSnippet>
+
+### With captions
+
+You can add captions to slides with the `<CCarouselCaption>` element within any `<CCarouselItem>`. They can be immediately hidden on smaller viewports, as shown below, with optional [display utilities](https://coreui.io/4.0/utilities/display). We hide them with `.d-none` and draw them back on medium-sized devices with `.d-md-block`.
+
+import { CarouselWithCaptionsExample } from './examples/CarouselWithCaptionsExample.tsx'
+import CarouselWithCaptionsExampleTS from '!!raw-loader!./examples/CarouselWithCaptionsExample.tsx'
+
+<ExampleSnippet code={CarouselWithCaptionsExampleTS} componentName="React Carousel">
+ <CarouselWithCaptionsExample />
+</ExampleSnippet>
+
+### Crossfade
+
+Add `transition="crossfade"` to your carousel to animate slides with a fade transition instead of a slide.
+
+import { CarouselCrossfadeExample } from './examples/CarouselCrossfadeExample.tsx'
+import CarouselCrossfadeExampleTS from '!!raw-loader!./examples/CarouselCrossfadeExample.tsx'
+
+<ExampleSnippet code={CarouselCrossfadeExampleTS} componentName="React Carousel">
+ <CarouselCrossfadeExample />
+</ExampleSnippet>
+
+## Dark variant
+
+Add `dark` property to the `CCarousel` for darker controls, indicators, and captions. Controls have been inverted from their default white fill with the `filter` CSS property. Captions and controls have additional Sass variables that customize the `color` and `background-color`.
+
+import { CarouselDarkVariantExample } from './examples/CarouselDarkVariantExample.tsx'
+import CarouselDarkVariantExampleTS from '!!raw-loader!./examples/CarouselDarkVariantExample.tsx'
+
+<ExampleSnippet code={CarouselDarkVariantExampleTS} componentName="React Carousel">
+ <CarouselDarkVariantExample />
+</ExampleSnippet>
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [<CCarousel />](./api/#ccarousel)
+- [<CCarouselCaption />](./api/#ccarouselcaption)
+- [<CCarouselItem />](./api/#ccarouselitem)
diff --git a/packages/docs/content/components/carousel/styling.mdx b/packages/docs/content/components/carousel/styling.mdx
new file mode 100644
index 00000000..c8241054
--- /dev/null
+++ b/packages/docs/content/components/carousel/styling.mdx
@@ -0,0 +1,20 @@
+---
+title: React Carousel Component Styling
+name: Carousel Styling
+description: Learn how to customize the React Carousel component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/carousel/
+---
+
+{/* ### CSS class names
+
+React Carousel comes with built-in class names that make styling super simple. Here’s a quick rundown of what you can use:
+
+<ClassNamesDocs
+ files={[
+ 'components/carousel/CCarousel.tsx',
+ ]}
+/> */}
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="carousel-variables" />
diff --git a/packages/docs/content/components/chart.mdx b/packages/docs/content/components/chart.mdx
deleted file mode 100644
index b5e43f03..00000000
--- a/packages/docs/content/components/chart.mdx
+++ /dev/null
@@ -1,847 +0,0 @@
----
-title: React Chart.js Component
-name: Chart
-description: React wrapper for Chart.js 4.x, the most popular charting library.
-menu: Components
-route: /components/chart
----
-
-import {
- CChart,
- CChartBar,
- CChartBubble,
- CChartDoughnut,
- CChartLine,
- CChartPolarArea,
- CChartRadar,
- CChartScatter
-} from '@coreui/react-chartjs'
-
-import { useEffect, useRef, useState } from 'react'
-import { getStyle } from '@coreui/utils'
-
-## Installation
-
-If you want to use our Chart.js React wrapper you have to install an additional package.
-
-### Npm
-
-```bash
-npm install @coreui/react-chartjs
-```
-
-### Yarn
-
-```bash
-yarn add @coreui/react-chartjs
-```
-
-## Chart Types
-
-### Line Chart
-
-A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets.
-[Line Chart properties](https://www.chartjs.org/docs/latest/charts/line.html#dataset-properties)
-
-export const LineChartExample = () => {
- const chartRef = useRef()
-
- useEffect(() => {
- document.documentElement.addEventListener('ColorSchemeChange', () => {
- if (chartRef.current) {
- chartRef.current.options.plugins.legend.labels.color = getStyle('--cui-body-color')
- chartRef.current.options.scales.x.grid.color = getStyle('--cui-border-color-translucent')
- chartRef.current.options.scales.x.ticks.color = getStyle('--cui-body-color')
- chartRef.current.options.scales.y.grid.color = getStyle('--cui-border-color-translucent')
- chartRef.current.options.scales.y.ticks.color = getStyle('--cui-body-color')
- chartRef.current.update()
- }
- })
- }, [chartRef])
-
- return (
- <CChart
- ref={chartRef}
- type="line"
- data={{
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [
- {
- label: "My First dataset",
- backgroundColor: "rgba(220, 220, 220, 0.2)",
- borderColor: "rgba(220, 220, 220, 1)",
- pointBackgroundColor: "rgba(220, 220, 220, 1)",
- pointBorderColor: "#fff",
- data: [40, 20, 12, 39, 10, 40, 39, 80, 40]
- },
- {
- label: "My Second dataset",
- backgroundColor: "rgba(151, 187, 205, 0.2)",
- borderColor: "rgba(151, 187, 205, 1)",
- pointBackgroundColor: "rgba(151, 187, 205, 1)",
- pointBorderColor: "#fff",
- data: [50, 12, 28, 29, 7, 25, 12, 70, 60]
- },
- ],
- }}
- options={{
- plugins: {
- legend: {
- labels: {
- color: getStyle('--cui-body-color'),
- }
- }
- },
- scales: {
- x: {
- grid: {
- color: getStyle('--cui-border-color-translucent'),
- },
- ticks: {
- color: getStyle('--cui-body-color'),
- },
- },
- y: {
- grid: {
- color: getStyle('--cui-border-color-translucent'),
- },
- ticks: {
- color: getStyle('--cui-body-color'),
- },
- },
- },
- }}
- />
- )
-}
-
-<Example>
- <LineChartExample />
-</Example>
-
-
-```jsx
-<CChart
- type="line"
- data={{
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [
- {
- label: "My First dataset",
- backgroundColor: "rgba(220, 220, 220, 0.2)",
- borderColor: "rgba(220, 220, 220, 1)",
- pointBackgroundColor: "rgba(220, 220, 220, 1)",
- pointBorderColor: "#fff",
- data: [40, 20, 12, 39, 10, 40, 39, 80, 40]
- },
- {
- label: "My Second dataset",
- backgroundColor: "rgba(151, 187, 205, 0.2)",
- borderColor: "rgba(151, 187, 205, 1)",
- pointBackgroundColor: "rgba(151, 187, 205, 1)",
- pointBorderColor: "#fff",
- data: [50, 12, 28, 29, 7, 25, 12, 70, 60]
- },
- ],
- }}
- options={{
- plugins: {
- legend: {
- labels: {
- color: getStyle('--cui-body-color'),
- }
- }
- },
- scales: {
- x: {
- grid: {
- color: getStyle('--cui-border-color-translucent'),
- },
- ticks: {
- color: getStyle('--cui-body-color'),
- },
- },
- y: {
- grid: {
- color: getStyle('--cui-border-color-translucent'),
- },
- ticks: {
- color: getStyle('--cui-body-color'),
- },
- },
- },
- }}
-/>
-```
-
-### Bar Chart
-
-A bar chart provides a way of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side. [Bar Chart properties](https://www.chartjs.org/docs/latest/charts/bar.html#dataset-properties)
-
-export const BarChartExample = () => {
- const chartRef = useRef()
-
- useEffect(() => {
- document.documentElement.addEventListener('ColorSchemeChange', () => {
- if (chartRef.current) {
- chartRef.current.options.plugins.legend.labels.color = getStyle('--cui-body-color')
- chartRef.current.options.scales.x.grid.color = getStyle('--cui-border-color-translucent')
- chartRef.current.options.scales.x.ticks.color = getStyle('--cui-body-color')
- chartRef.current.options.scales.y.grid.color = getStyle('--cui-border-color-translucent')
- chartRef.current.options.scales.y.ticks.color = getStyle('--cui-body-color')
- chartRef.current.update()
- }
- })
- }, [chartRef])
-
- return (
- <CChart
- ref={chartRef}
- type="bar"
- data={{
- labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
- datasets: [
- {
- label: 'GitHub Commits',
- backgroundColor: '#f87979',
- data: [40, 20, 12, 39, 10, 40, 39, 80, 40],
- },
- ],
- }}
- labels="months"
- options={{
- plugins: {
- legend: {
- labels: {
- color: getStyle('--cui-body-color'),
- }
- }
- },
- scales: {
- x: {
- grid: {
- color: getStyle('--cui-border-color-translucent'),
- },
- ticks: {
- color: getStyle('--cui-body-color'),
- },
- },
- y: {
- grid: {
- color: getStyle('--cui-border-color-translucent'),
- },
- ticks: {
- color: getStyle('--cui-body-color'),
- },
- },
- },
- }}
- />
- )
-}
-
-<Example>
- <BarChartExample />
-</Example>
-
-```jsx
-<CChart
- type="bar"
- data={{
- labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
- datasets: [
- {
- label: 'GitHub Commits',
- backgroundColor: '#f87979',
- data: [40, 20, 12, 39, 10, 40, 39, 80, 40],
- },
- ],
- }}
- labels="months"
- options={{
- plugins: {
- legend: {
- labels: {
- color: getStyle('--cui-body-color'),
- }
- }
- },
- scales: {
- x: {
- grid: {
- color: getStyle('--cui-border-color-translucent'),
- },
- ticks: {
- color: getStyle('--cui-body-color'),
- },
- },
- y: {
- grid: {
- color: getStyle('--cui-border-color-translucent'),
- },
- ticks: {
- color: getStyle('--cui-body-color'),
- },
- },
- },
- }}
-/>
-```
-
-### Radar Chart
-
-A radar chart is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets. [Radar Chart properties](https://www.chartjs.org/docs/latest/charts/radar.html#dataset-properties)
-
-export const RadarChartExample = () => {
- const chartRef = useRef()
-
- useEffect(() => {
- document.documentElement.addEventListener('ColorSchemeChange', () => {
- if (chartRef.current) {
- chartRef.current.options.plugins.legend.labels.color = getStyle('--cui-body-color')
- chartRef.current.options.scales.r.grid.color = getStyle('--cui-border-color-translucent')
- chartRef.current.options.scales.r.ticks.color = getStyle('--cui-body-color')
- chartRef.current.update()
- }
- })
- }, [chartRef])
-
- return (
- <CChart
- ref={chartRef}
- type="radar"
- data={{
- labels: [
- 'Eating',
- 'Drinking',
- 'Sleeping',
- 'Designing',
- 'Coding',
- 'Cycling',
- 'Running',
- ],
- datasets: [
- {
- label: 'My First dataset',
- backgroundColor: 'rgba(220, 220, 220, 0.2)',
- borderColor: 'rgba(220, 220, 220, 1)',
- pointBackgroundColor: 'rgba(220, 220, 220, 1)',
- pointBorderColor: '#fff',
- pointHighlightFill: '#fff',
- pointHighlightStroke: 'rgba(220, 220, 220, 1)',
- data: [65, 59, 90, 81, 56, 55, 40],
- },
- {
- label: 'My Second dataset',
- backgroundColor: 'rgba(151, 187, 205, 0.2)',
- borderColor: 'rgba(151, 187, 205, 1)',
- pointBackgroundColor: 'rgba(151, 187, 205, 1)',
- pointBorderColor: '#fff',
- pointHighlightFill: '#fff',
- pointHighlightStroke: 'rgba(151, 187, 205, 1)',
- data: [28, 48, 40, 19, 96, 27, 100],
- },
- ],
- }}
- options={{
- plugins: {
- legend: {
- labels: {
- color: getStyle('--cui-body-color'),
- }
- }
- },
- scales: {
- r: {
- grid: {
- color: getStyle('--cui-border-color-translucent'),
- },
- ticks: {
- color: getStyle('--cui-body-color'),
- },
- },
- },
- }}
- />
- )
-}
-
-<Example>
- <RadarChartExample />
-</Example>
-
-```jsx
-<CChart
- type="radar"
- data={{
- labels: [
- 'Eating',
- 'Drinking',
- 'Sleeping',
- 'Designing',
- 'Coding',
- 'Cycling',
- 'Running',
- ],
- datasets: [
- {
- label: 'My First dataset',
- backgroundColor: 'rgba(220, 220, 220, 0.2)',
- borderColor: 'rgba(220, 220, 220, 1)',
- pointBackgroundColor: 'rgba(220, 220, 220, 1)',
- pointBorderColor: '#fff',
- pointHighlightFill: '#fff',
- pointHighlightStroke: 'rgba(220, 220, 220, 1)',
- data: [65, 59, 90, 81, 56, 55, 40],
- },
- {
- label: 'My Second dataset',
- backgroundColor: 'rgba(151, 187, 205, 0.2)',
- borderColor: 'rgba(151, 187, 205, 1)',
- pointBackgroundColor: 'rgba(151, 187, 205, 1)',
- pointBorderColor: '#fff',
- pointHighlightFill: '#fff',
- pointHighlightStroke: 'rgba(151, 187, 205, 1)',
- data: [28, 48, 40, 19, 96, 27, 100],
- },
- ],
- }}
- options={{
- plugins: {
- legend: {
- labels: {
- color: getStyle('--cui-body-color'),
- }
- }
- },
- scales: {
- r: {
- grid: {
- color: getStyle('--cui-border-color-translucent'),
- },
- ticks: {
- color: getStyle('--cui-body-color'),
- },
- },
- },
- }}
-/>
-```
-
-### Doughnut and Pie Charts
-
-Pie and doughnut charts are probably the most commonly used charts. They are divided into segments, the arc of each segment shows the proportional value of each piece of data. [Doughnut and Pie Charts properties](https://www.chartjs.org/docs/latest/charts/doughnut.html#dataset-properties)
-
-export const DoughnutAndPieExample = () => {
- const chartRef = useRef()
-
- useEffect(() => {
- document.documentElement.addEventListener('ColorSchemeChange', () => {
- if (chartRef.current) {
- chartRef.current.options.plugins.legend.labels.color = getStyle('--cui-body-color')
- chartRef.current.update()
- }
- })
- }, [chartRef])
-
- return (
- <CChart
- ref={chartRef}
- type="doughnut"
- data={{
- labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
- datasets: [
- {
- backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
- data: [40, 20, 80, 10],
- },
- ],
- }}
- options={{
- plugins: {
- legend: {
- labels: {
- color: getStyle('--cui-body-color'),
- }
- }
- },
- }}
- />
- )
-}
-
-<Example>
- <DoughnutAndPieExample />
-</Example>
-
-```jsx
-<CChart
- type="doughnut"
- data={{
- labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
- datasets: [
- {
- backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
- data: [40, 20, 80, 10],
- },
- ],
- }}
- options={{
- plugins: {
- legend: {
- labels: {
- color: getStyle('--cui-body-color'),
- }
- }
- },
- }}
-/>
-```
-
-### Polar Area Chart
-
-Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value. [Polar Area Chart properties](https://www.chartjs.org/docs/latest/charts/polar.html#dataset-properties)
-
-export const PolarAreaExample = () => {
- const chartRef = useRef()
-
- useEffect(() => {
- document.documentElement.addEventListener('ColorSchemeChange', () => {
- if (chartRef.current) {
- chartRef.current.options.plugins.legend.labels.color = getStyle('--cui-body-color')
- chartRef.current.options.scales.r.grid.color = getStyle('--cui-border-color-translucent')
- chartRef.current.update()
- }
- })
- }, [chartRef])
-
- return (
- <CChart
- ref={chartRef}
- type="polarArea"
- data={{
- labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'],
- datasets: [
- {
- data: [11, 16, 7, 3, 14],
- backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB'],
- },
- ],
- }}
- options={{
- plugins: {
- legend: {
- labels: {
- color: getStyle('--cui-body-color'),
- }
- }
- },
- scales: {
- r: {
- grid: {
- color: getStyle('--cui-border-color'),
- },
- }
- }
- }}
- />
- )
-}
-
-<Example>
- <PolarAreaExample />
-</Example>
-
-```jsx
-<CChart
- type="polarArea"
- data={{
- labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'],
- datasets: [
- {
- data: [11, 16, 7, 3, 14],
- backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB'],
- },
- ],
- }}
- options={{
- plugins: {
- legend: {
- labels: {
- color: getStyle('--cui-body-color'),
- }
- }
- },
- scales: {
- r: {
- grid: {
- color: getStyle('--cui-border-color'),
- },
- }
- }
- }}
-/>
-```
-
-### Bubble Chart
-
-A bubble chart is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the corresponding horizontal and vertical axes. The third dimension is represented by the size of the individual bubbles. [Bubble Chart properties](https://www.chartjs.org/docs/latest/charts/bubble.html#dataset-properties)
-
-export const BubbleChartExample = () => {
- const chartRef = useRef()
-
- useEffect(() => {
- document.documentElement.addEventListener('ColorSchemeChange', () => {
- if (chartRef.current) {
- chartRef.current.options.plugins.legend.labels.color = getStyle('--cui-body-color')
- chartRef.current.options.scales.x.grid.color = getStyle('--cui-border-color-translucent')
- chartRef.current.options.scales.x.ticks.color = getStyle('--cui-body-color')
- chartRef.current.options.scales.y.grid.color = getStyle('--cui-border-color-translucent')
- chartRef.current.options.scales.y.ticks.color = getStyle('--cui-body-color')
- chartRef.current.update()
- }
- })
- }, [chartRef])
-
- return (
- <CChart
- ref={chartRef}
- type="bubble"
- data={{
- datasets: [{
- label: 'First Dataset',
- data: [{
- x: 20,
- y: 30,
- r: 15
- }, {
- x: 40,
- y: 10,
- r: 10
- }],
- backgroundColor: 'rgb(255, 99, 132)'
- }]
- }}
- options={{
- plugins: {
- legend: {
- labels: {
- color: getStyle('--cui-body-color'),
- }
- }
- },
- scales: {
- x: {
- grid: {
- color: getStyle('--cui-border-color-translucent'),
- },
- ticks: {
- color: getStyle('--cui-body-color'),
- },
- },
- y: {
- grid: {
- color: getStyle('--cui-border-color-translucent'),
- },
- ticks: {
- color: getStyle('--cui-body-color'),
- },
- },
- },
- }}
- />
- )
-}
-
-<Example>
- <BubbleChartExample />
-</Example>
-
-```jsx
-<CChart
- type="bubble"
- data={{
- datasets: [{
- label: 'First Dataset',
- data: [{
- x: 20,
- y: 30,
- r: 15
- }, {
- x: 40,
- y: 10,
- r: 10
- }],
- backgroundColor: 'rgb(255, 99, 132)'
- }]
- }}
- options={{
- plugins: {
- legend: {
- labels: {
- color: getStyle('--cui-body-color'),
- }
- }
- },
- scales: {
- x: {
- grid: {
- color: getStyle('--cui-border-color-translucent'),
- },
- ticks: {
- color: getStyle('--cui-body-color'),
- },
- },
- y: {
- grid: {
- color: getStyle('--cui-border-color-translucent'),
- },
- ticks: {
- color: getStyle('--cui-body-color'),
- },
- },
- },
- }}
-/>
-```
-
-### Scatter Chart
-
-A bubble chart is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the corresponding horizontal and vertical axes. The third dimension is represented by the size of the individual bubbles. [Scatter Chart properties](https://www.chartjs.org/docs/latest/charts/scatter.html#dataset-properties)
-
-export const ScatterChartExample = () => {
- const chartRef = useRef()
-
- useEffect(() => {
- document.documentElement.addEventListener('ColorSchemeChange', () => {
- if (chartRef.current) {
- chartRef.current.options.plugins.legend.labels.color = getStyle('--cui-body-color')
- chartRef.current.options.scales.x.grid.color = getStyle('--cui-border-color-translucent')
- chartRef.current.options.scales.x.ticks.color = getStyle('--cui-body-color')
- chartRef.current.options.scales.y.grid.color = getStyle('--cui-border-color-translucent')
- chartRef.current.options.scales.y.ticks.color = getStyle('--cui-body-color')
- chartRef.current.update()
- }
- })
- }, [chartRef])
-
- return (
- <CChart
- ref={chartRef}
- type="scatter"
- data={{
- datasets: [{
- label: 'Scatter Dataset',
- data: [{
- x: -10,
- y: 0
- }, {
- x: 0,
- y: 10
- }, {
- x: 10,
- y: 5
- }, {
- x: 0.5,
- y: 5.5
- }],
- backgroundColor: 'rgb(255, 99, 132)'
- }],
- }}
- options={{
- plugins: {
- legend: {
- labels: {
- color: getStyle('--cui-body-color'),
- }
- }
- },
- scales: {
- x: {
- grid: {
- color: getStyle('--cui-border-color-translucent'),
- },
- position: 'bottom',
- ticks: {
- color: getStyle('--cui-body-color'),
- },
- type: 'linear',
- },
- y: {
- grid: {
- color: getStyle('--cui-border-color-translucent'),
- },
- ticks: {
- color: getStyle('--cui-body-color'),
- },
- },
- },
- }}
- />
- )
-}
-
-<Example>
- <ScatterChartExample />
-</Example>
-
-
-```jsx
-<CChart
- type="scatter"
- data={{
- datasets: [{
- label: 'Scatter Dataset',
- data: [{
- x: -10,
- y: 0
- }, {
- x: 0,
- y: 10
- }, {
- x: 10,
- y: 5
- }, {
- x: 0.5,
- y: 5.5
- }],
- backgroundColor: 'rgb(255, 99, 132)'
- }],
- }}
- options={{
- plugins: {
- legend: {
- labels: {
- color: getStyle('--cui-body-color'),
- }
- }
- },
- scales: {
- x: {
- grid: {
- color: getStyle('--cui-border-color-translucent'),
- },
- position: 'bottom',
- ticks: {
- color: getStyle('--cui-body-color'),
- },
- type: 'linear',
- },
- y: {
- grid: {
- color: getStyle('--cui-border-color-translucent'),
- },
- ticks: {
- color: getStyle('--cui-body-color'),
- },
- },
- },
- }}
-/>
-```
-
-## API
-
-### CChart
-
-`markdown:CChart.api.mdx`
\ No newline at end of file
diff --git a/packages/docs/content/components/chart/api.mdx b/packages/docs/content/components/chart/api.mdx
new file mode 100644
index 00000000..ad211b14
--- /dev/null
+++ b/packages/docs/content/components/chart/api.mdx
@@ -0,0 +1,12 @@
+---
+title: React Chart.js Component API
+name: Chart.js API
+description: Explore the API reference for the React Chart.js component and discover how to effectively utilize its props for customization.
+route: /components/chart/
+---
+
+import CChartAPI from '../../api/CChart.api.mdx'
+
+## CChart
+
+<CChartAPI />
diff --git a/packages/docs/content/components/chart/examples/ChartBarExample.jsx b/packages/docs/content/components/chart/examples/ChartBarExample.jsx
new file mode 100644
index 00000000..89417d6a
--- /dev/null
+++ b/packages/docs/content/components/chart/examples/ChartBarExample.jsx
@@ -0,0 +1,90 @@
+import React, { useEffect, useRef } from 'react'
+import { getStyle } from '@coreui/utils'
+import { CChart } from '@coreui/react-chartjs'
+
+export const ChartBarExample = () => {
+ const chartRef = useRef(null)
+
+ useEffect(() => {
+ const handleColorSchemeChange = () => {
+ const chartInstance = chartRef.current
+ if (chartInstance) {
+ const { options } = chartInstance
+
+ if (options.plugins?.legend?.labels) {
+ options.plugins.legend.labels.color = getStyle('--cui-body-color')
+ }
+
+ if (options.scales?.x) {
+ if (options.scales.x.grid) {
+ options.scales.x.grid.color = getStyle('--cui-border-color-translucent')
+ }
+ if (options.scales.x.ticks) {
+ options.scales.x.ticks.color = getStyle('--cui-body-color')
+ }
+ }
+
+ if (options.scales?.y) {
+ if (options.scales.y.grid) {
+ options.scales.y.grid.color = getStyle('--cui-border-color-translucent')
+ }
+ if (options.scales.y.ticks) {
+ options.scales.y.ticks.color = getStyle('--cui-body-color')
+ }
+ }
+
+ chartInstance.update()
+ }
+ }
+
+ document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)
+
+ return () => {
+ document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
+ }
+ }, [])
+
+ const data = {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September'], // 9 labels
+ datasets: [
+ {
+ label: 'GitHub Commits',
+ backgroundColor: '#f87979',
+ borderColor: '#f87979',
+ data: [40, 20, 12, 39, 10, 40, 39, 80, 40],
+ },
+ ],
+ }
+
+ const options = {
+ plugins: {
+ legend: {
+ labels: {
+ color: getStyle('--cui-body-color'),
+ },
+ },
+ },
+ scales: {
+ x: {
+ grid: {
+ color: getStyle('--cui-border-color-translucent'),
+ },
+ ticks: {
+ color: getStyle('--cui-body-color'),
+ },
+ type: 'category',
+ },
+ y: {
+ grid: {
+ color: getStyle('--cui-border-color-translucent'),
+ },
+ ticks: {
+ color: getStyle('--cui-body-color'),
+ },
+ beginAtZero: true,
+ },
+ },
+ }
+
+ return <CChart type="bar" data={data} options={options} ref={chartRef} />
+}
diff --git a/packages/docs/content/components/chart/examples/ChartBarExample.tsx b/packages/docs/content/components/chart/examples/ChartBarExample.tsx
new file mode 100644
index 00000000..9443d6f3
--- /dev/null
+++ b/packages/docs/content/components/chart/examples/ChartBarExample.tsx
@@ -0,0 +1,92 @@
+import React, { useEffect, useRef } from 'react'
+import { getStyle } from '@coreui/utils'
+import { CChart } from '@coreui/react-chartjs'
+import { Chart } from 'chart.js'
+import type { ChartData, ChartOptions } from 'chart.js'
+
+export const ChartBarExample = () => {
+ const chartRef = useRef<Chart<'bar'> | null>(null)
+
+ useEffect(() => {
+ const handleColorSchemeChange = () => {
+ const chartInstance = chartRef.current
+ if (chartInstance) {
+ const { options } = chartInstance
+
+ if (options.plugins?.legend?.labels) {
+ options.plugins.legend.labels.color = getStyle('--cui-body-color')
+ }
+
+ if (options.scales?.x) {
+ if (options.scales.x.grid) {
+ options.scales.x.grid.color = getStyle('--cui-border-color-translucent')
+ }
+ if (options.scales.x.ticks) {
+ options.scales.x.ticks.color = getStyle('--cui-body-color')
+ }
+ }
+
+ if (options.scales?.y) {
+ if (options.scales.y.grid) {
+ options.scales.y.grid.color = getStyle('--cui-border-color-translucent')
+ }
+ if (options.scales.y.ticks) {
+ options.scales.y.ticks.color = getStyle('--cui-body-color')
+ }
+ }
+
+ chartInstance.update()
+ }
+ }
+
+ document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)
+
+ return () => {
+ document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
+ }
+ }, [])
+
+ const data: ChartData<'bar'> = {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September'], // 9 labels
+ datasets: [
+ {
+ label: 'GitHub Commits',
+ backgroundColor: '#f87979',
+ borderColor: '#f87979',
+ data: [40, 20, 12, 39, 10, 40, 39, 80, 40],
+ },
+ ],
+ }
+
+ const options: ChartOptions<'bar'> = {
+ plugins: {
+ legend: {
+ labels: {
+ color: getStyle('--cui-body-color'),
+ },
+ },
+ },
+ scales: {
+ x: {
+ grid: {
+ color: getStyle('--cui-border-color-translucent'),
+ },
+ ticks: {
+ color: getStyle('--cui-body-color'),
+ },
+ type: 'category',
+ },
+ y: {
+ grid: {
+ color: getStyle('--cui-border-color-translucent'),
+ },
+ ticks: {
+ color: getStyle('--cui-body-color'),
+ },
+ beginAtZero: true,
+ },
+ },
+ }
+
+ return <CChart type="bar" data={data} options={options} ref={chartRef} />
+}
diff --git a/packages/docs/content/components/chart/examples/ChartBubbleExample.jsx b/packages/docs/content/components/chart/examples/ChartBubbleExample.jsx
new file mode 100644
index 00000000..105a11b4
--- /dev/null
+++ b/packages/docs/content/components/chart/examples/ChartBubbleExample.jsx
@@ -0,0 +1,92 @@
+import React, { useEffect, useRef } from 'react'
+import { getStyle } from '@coreui/utils'
+import { CChart } from '@coreui/react-chartjs'
+
+export const ChartBubbleExample = () => {
+ const chartRef = useRef(null)
+
+ useEffect(() => {
+ const handleColorSchemeChange = () => {
+ const chartInstance = chartRef.current
+ if (chartInstance) {
+ const { options } = chartInstance
+
+ if (options.plugins?.legend?.labels) {
+ options.plugins.legend.labels.color = getStyle('--cui-body-color')
+ }
+
+ if (options.scales?.x) {
+ if (options.scales.x.grid) {
+ options.scales.x.grid.color = getStyle('--cui-border-color-translucent')
+ }
+ if (options.scales.x.ticks) {
+ options.scales.x.ticks.color = getStyle('--cui-body-color')
+ }
+ }
+
+ if (options.scales?.y) {
+ if (options.scales.y.grid) {
+ options.scales.y.grid.color = getStyle('--cui-border-color-translucent')
+ }
+ if (options.scales.y.ticks) {
+ options.scales.y.ticks.color = getStyle('--cui-body-color')
+ }
+ }
+
+ chartInstance.update()
+ }
+ }
+
+ document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)
+
+ return () => {
+ document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
+ }
+ }, [])
+
+ const data = {
+ datasets: [
+ {
+ label: 'First Dataset',
+ data: [
+ { x: 20, y: 30, r: 15 },
+ { x: 40, y: 10, r: 10 },
+ ],
+ backgroundColor: 'rgb(255, 99, 132)',
+ },
+ ],
+ }
+
+ const options = {
+ plugins: {
+ legend: {
+ labels: {
+ color: getStyle('--cui-body-color'),
+ },
+ },
+ },
+ scales: {
+ x: {
+ grid: {
+ color: getStyle('--cui-border-color-translucent'),
+ },
+ ticks: {
+ color: getStyle('--cui-body-color'),
+ },
+ type: 'linear',
+ position: 'bottom',
+ },
+ y: {
+ grid: {
+ color: getStyle('--cui-border-color-translucent'),
+ },
+ ticks: {
+ color: getStyle('--cui-body-color'),
+ },
+ beginAtZero: true,
+ },
+ },
+ }
+
+ return <CChart type="bubble" data={data} options={options} ref={chartRef} />
+}
diff --git a/packages/docs/content/components/chart/examples/ChartBubbleExample.tsx b/packages/docs/content/components/chart/examples/ChartBubbleExample.tsx
new file mode 100644
index 00000000..d0931e8b
--- /dev/null
+++ b/packages/docs/content/components/chart/examples/ChartBubbleExample.tsx
@@ -0,0 +1,94 @@
+import React, { useEffect, useRef } from 'react'
+import { getStyle } from '@coreui/utils'
+import { CChart } from '@coreui/react-chartjs'
+import { Chart } from 'chart.js'
+import type { ChartData, ChartOptions } from 'chart.js'
+
+export const ChartBubbleExample = () => {
+ const chartRef = useRef<Chart<'bubble'> | null>(null)
+
+ useEffect(() => {
+ const handleColorSchemeChange = () => {
+ const chartInstance = chartRef.current
+ if (chartInstance) {
+ const { options } = chartInstance
+
+ if (options.plugins?.legend?.labels) {
+ options.plugins.legend.labels.color = getStyle('--cui-body-color')
+ }
+
+ if (options.scales?.x) {
+ if (options.scales.x.grid) {
+ options.scales.x.grid.color = getStyle('--cui-border-color-translucent')
+ }
+ if (options.scales.x.ticks) {
+ options.scales.x.ticks.color = getStyle('--cui-body-color')
+ }
+ }
+
+ if (options.scales?.y) {
+ if (options.scales.y.grid) {
+ options.scales.y.grid.color = getStyle('--cui-border-color-translucent')
+ }
+ if (options.scales.y.ticks) {
+ options.scales.y.ticks.color = getStyle('--cui-body-color')
+ }
+ }
+
+ chartInstance.update()
+ }
+ }
+
+ document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)
+
+ return () => {
+ document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
+ }
+ }, [])
+
+ const data: ChartData<'bubble'> = {
+ datasets: [
+ {
+ label: 'First Dataset',
+ data: [
+ { x: 20, y: 30, r: 15 },
+ { x: 40, y: 10, r: 10 },
+ ],
+ backgroundColor: 'rgb(255, 99, 132)',
+ },
+ ],
+ }
+
+ const options: ChartOptions<'bubble'> = {
+ plugins: {
+ legend: {
+ labels: {
+ color: getStyle('--cui-body-color'),
+ },
+ },
+ },
+ scales: {
+ x: {
+ grid: {
+ color: getStyle('--cui-border-color-translucent'),
+ },
+ ticks: {
+ color: getStyle('--cui-body-color'),
+ },
+ type: 'linear',
+ position: 'bottom',
+ },
+ y: {
+ grid: {
+ color: getStyle('--cui-border-color-translucent'),
+ },
+ ticks: {
+ color: getStyle('--cui-body-color'),
+ },
+ beginAtZero: true,
+ },
+ },
+ }
+
+ return <CChart type="bubble" data={data} options={options} ref={chartRef} />
+}
diff --git a/packages/docs/content/components/chart/examples/ChartDoughnutAndPieExample.jsx b/packages/docs/content/components/chart/examples/ChartDoughnutAndPieExample.jsx
new file mode 100644
index 00000000..9a5344de
--- /dev/null
+++ b/packages/docs/content/components/chart/examples/ChartDoughnutAndPieExample.jsx
@@ -0,0 +1,50 @@
+import React, { useEffect, useRef } from 'react'
+import { getStyle } from '@coreui/utils'
+import { CChart } from '@coreui/react-chartjs'
+
+export const ChartDoughnutAndPieExample = () => {
+ const chartRef = useRef(null)
+
+ useEffect(() => {
+ const handleColorSchemeChange = () => {
+ const chartInstance = chartRef.current
+ if (chartInstance) {
+ const { options } = chartInstance
+
+ if (options.plugins?.legend?.labels) {
+ options.plugins.legend.labels.color = getStyle('--cui-body-color')
+ }
+
+ chartInstance.update()
+ }
+ }
+
+ document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)
+
+ return () => {
+ document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
+ }
+ }, [])
+
+ const data = {
+ labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
+ datasets: [
+ {
+ backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
+ data: [40, 20, 80, 10],
+ },
+ ],
+ }
+
+ const options = {
+ plugins: {
+ legend: {
+ labels: {
+ color: getStyle('--cui-body-color'),
+ },
+ },
+ },
+ }
+
+ return <CChart type="doughnut" data={data} options={options} ref={chartRef} />
+}
diff --git a/packages/docs/content/components/chart/examples/ChartDoughnutAndPieExample.tsx b/packages/docs/content/components/chart/examples/ChartDoughnutAndPieExample.tsx
new file mode 100644
index 00000000..70bcea01
--- /dev/null
+++ b/packages/docs/content/components/chart/examples/ChartDoughnutAndPieExample.tsx
@@ -0,0 +1,52 @@
+import React, { useEffect, useRef } from 'react'
+import { getStyle } from '@coreui/utils'
+import { CChart } from '@coreui/react-chartjs'
+import { Chart } from 'chart.js'
+import type { ChartData, ChartOptions } from 'chart.js'
+
+export const ChartDoughnutAndPieExample = () => {
+ const chartRef = useRef<Chart<'doughnut'> | null>(null)
+
+ useEffect(() => {
+ const handleColorSchemeChange = () => {
+ const chartInstance = chartRef.current
+ if (chartInstance) {
+ const { options } = chartInstance
+
+ if (options.plugins?.legend?.labels) {
+ options.plugins.legend.labels.color = getStyle('--cui-body-color')
+ }
+
+ chartInstance.update()
+ }
+ }
+
+ document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)
+
+ return () => {
+ document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
+ }
+ }, [])
+
+ const data: ChartData<'doughnut'> = {
+ labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
+ datasets: [
+ {
+ backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
+ data: [40, 20, 80, 10],
+ },
+ ],
+ }
+
+ const options: ChartOptions<'doughnut'> = {
+ plugins: {
+ legend: {
+ labels: {
+ color: getStyle('--cui-body-color'),
+ },
+ },
+ },
+ }
+
+ return <CChart type="doughnut" data={data} options={options} ref={chartRef} />
+}
diff --git a/packages/docs/content/components/chart/examples/ChartLineExample.jsx b/packages/docs/content/components/chart/examples/ChartLineExample.jsx
new file mode 100644
index 00000000..0a369af0
--- /dev/null
+++ b/packages/docs/content/components/chart/examples/ChartLineExample.jsx
@@ -0,0 +1,102 @@
+import React, { useEffect, useRef } from 'react'
+import { getStyle } from '@coreui/utils'
+import { CChart } from '@coreui/react-chartjs'
+
+export const ChartLineExample = () => {
+ const chartRef = useRef(null)
+
+ useEffect(() => {
+ const handleColorSchemeChange = () => {
+ const chartInstance = chartRef.current
+ if (chartInstance) {
+ const { options } = chartInstance
+
+ if (options.plugins?.legend?.labels) {
+ options.plugins.legend.labels.color = getStyle('--cui-body-color')
+ }
+
+ if (options.scales?.x) {
+ if (options.scales.x.grid) {
+ options.scales.x.grid.color = getStyle('--cui-border-color-translucent')
+ }
+ if (options.scales.x.ticks) {
+ options.scales.x.ticks.color = getStyle('--cui-body-color')
+ }
+ }
+
+ if (options.scales?.y) {
+ if (options.scales.y.grid) {
+ options.scales.y.grid.color = getStyle('--cui-border-color-translucent')
+ }
+ if (options.scales.y.ticks) {
+ options.scales.y.ticks.color = getStyle('--cui-body-color')
+ }
+ }
+
+ chartInstance.update()
+ }
+ }
+
+ document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)
+
+ return () => {
+ document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
+ }
+ }, [])
+
+ const data = {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September'],
+ datasets: [
+ {
+ label: 'My First dataset',
+ backgroundColor: 'rgba(220, 220, 220, 0.2)',
+ borderColor: 'rgba(220, 220, 220, 1)',
+ pointBackgroundColor: 'rgba(220, 220, 220, 1)',
+ pointBorderColor: '#fff',
+ data: [40, 20, 12, 39, 10, 40, 39, 80, 40],
+ fill: true,
+ },
+ {
+ label: 'My Second dataset',
+ backgroundColor: 'rgba(151, 187, 205, 0.2)',
+ borderColor: 'rgba(151, 187, 205, 1)',
+ pointBackgroundColor: 'rgba(151, 187, 205, 1)',
+ pointBorderColor: '#fff',
+ data: [50, 12, 28, 29, 7, 25, 12, 70, 60],
+ fill: true,
+ },
+ ],
+ }
+
+ const options = {
+ plugins: {
+ legend: {
+ labels: {
+ color: getStyle('--cui-body-color'),
+ },
+ },
+ },
+ scales: {
+ x: {
+ grid: {
+ color: getStyle('--cui-border-color-translucent'),
+ },
+ ticks: {
+ color: getStyle('--cui-body-color'),
+ },
+ type: 'category',
+ },
+ y: {
+ grid: {
+ color: getStyle('--cui-border-color-translucent'),
+ },
+ ticks: {
+ color: getStyle('--cui-body-color'),
+ },
+ beginAtZero: true,
+ },
+ },
+ }
+
+ return <CChart type="line" data={data} options={options} ref={chartRef} />
+}
diff --git a/packages/docs/content/components/chart/examples/ChartLineExample.tsx b/packages/docs/content/components/chart/examples/ChartLineExample.tsx
new file mode 100644
index 00000000..d5784722
--- /dev/null
+++ b/packages/docs/content/components/chart/examples/ChartLineExample.tsx
@@ -0,0 +1,104 @@
+import React, { useEffect, useRef } from 'react'
+import { getStyle } from '@coreui/utils'
+import { CChart } from '@coreui/react-chartjs'
+import { Chart } from 'chart.js'
+import type { ChartData, ChartOptions } from 'chart.js'
+
+export const ChartLineExample = () => {
+ const chartRef = useRef<Chart<'line'> | null>(null)
+
+ useEffect(() => {
+ const handleColorSchemeChange = () => {
+ const chartInstance = chartRef.current
+ if (chartInstance) {
+ const { options } = chartInstance
+
+ if (options.plugins?.legend?.labels) {
+ options.plugins.legend.labels.color = getStyle('--cui-body-color')
+ }
+
+ if (options.scales?.x) {
+ if (options.scales.x.grid) {
+ options.scales.x.grid.color = getStyle('--cui-border-color-translucent')
+ }
+ if (options.scales.x.ticks) {
+ options.scales.x.ticks.color = getStyle('--cui-body-color')
+ }
+ }
+
+ if (options.scales?.y) {
+ if (options.scales.y.grid) {
+ options.scales.y.grid.color = getStyle('--cui-border-color-translucent')
+ }
+ if (options.scales.y.ticks) {
+ options.scales.y.ticks.color = getStyle('--cui-body-color')
+ }
+ }
+
+ chartInstance.update()
+ }
+ }
+
+ document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)
+
+ return () => {
+ document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
+ }
+ }, [])
+
+ const data: ChartData<'line'> = {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September'],
+ datasets: [
+ {
+ label: 'My First dataset',
+ backgroundColor: 'rgba(220, 220, 220, 0.2)',
+ borderColor: 'rgba(220, 220, 220, 1)',
+ pointBackgroundColor: 'rgba(220, 220, 220, 1)',
+ pointBorderColor: '#fff',
+ data: [40, 20, 12, 39, 10, 40, 39, 80, 40],
+ fill: true,
+ },
+ {
+ label: 'My Second dataset',
+ backgroundColor: 'rgba(151, 187, 205, 0.2)',
+ borderColor: 'rgba(151, 187, 205, 1)',
+ pointBackgroundColor: 'rgba(151, 187, 205, 1)',
+ pointBorderColor: '#fff',
+ data: [50, 12, 28, 29, 7, 25, 12, 70, 60],
+ fill: true,
+ },
+ ],
+ }
+
+ const options: ChartOptions<'line'> = {
+ plugins: {
+ legend: {
+ labels: {
+ color: getStyle('--cui-body-color'),
+ },
+ },
+ },
+ scales: {
+ x: {
+ grid: {
+ color: getStyle('--cui-border-color-translucent'),
+ },
+ ticks: {
+ color: getStyle('--cui-body-color'),
+ },
+ type: 'category',
+ },
+ y: {
+ grid: {
+ color: getStyle('--cui-border-color-translucent'),
+ },
+ ticks: {
+ color: getStyle('--cui-body-color'),
+ },
+ beginAtZero: true,
+ },
+ },
+ }
+
+ return <CChart type="line" data={data} options={options} ref={chartRef} />
+}
diff --git a/packages/docs/content/components/chart/examples/ChartPolarAreaExample.jsx b/packages/docs/content/components/chart/examples/ChartPolarAreaExample.jsx
new file mode 100644
index 00000000..6c6b4f7b
--- /dev/null
+++ b/packages/docs/content/components/chart/examples/ChartPolarAreaExample.jsx
@@ -0,0 +1,71 @@
+import React, { useEffect, useRef } from 'react'
+import { getStyle } from '@coreui/utils'
+import { CChart } from '@coreui/react-chartjs'
+
+export const ChartPolarAreaExample = () => {
+ const chartRef = useRef(null)
+
+ useEffect(() => {
+ const handleColorSchemeChange = () => {
+ const chartInstance = chartRef.current
+ if (chartInstance) {
+ const { options } = chartInstance
+
+ if (options.plugins?.legend?.labels) {
+ options.plugins.legend.labels.color = getStyle('--cui-body-color')
+ }
+
+ if (options.scales?.r?.grid) {
+ options.scales.r.grid.color = getStyle('--cui-border-color-translucent')
+ }
+
+ chartInstance.update()
+ }
+ }
+
+ document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)
+
+ return () => {
+ document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
+ }
+ }, [])
+
+ const data = {
+ labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'],
+ datasets: [
+ {
+ data: [11, 16, 7, 3, 14],
+ backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB'],
+ },
+ ],
+ }
+
+ const options = {
+ plugins: {
+ legend: {
+ labels: {
+ color: getStyle('--cui-body-color'),
+ },
+ },
+ },
+ scales: {
+ r: {
+ grid: {
+ color: getStyle('--cui-border-color-translucent'),
+ },
+ ticks: {
+ color: getStyle('--cui-body-color'),
+ },
+ angleLines: {
+ color: getStyle('--cui-border-color-translucent'),
+ },
+ pointLabels: {
+ color: getStyle('--cui-body-color'),
+ },
+ beginAtZero: true,
+ },
+ },
+ }
+
+ return <CChart type="polarArea" data={data} options={options} ref={chartRef} />
+}
diff --git a/packages/docs/content/components/chart/examples/ChartPolarAreaExample.tsx b/packages/docs/content/components/chart/examples/ChartPolarAreaExample.tsx
new file mode 100644
index 00000000..eb3fc974
--- /dev/null
+++ b/packages/docs/content/components/chart/examples/ChartPolarAreaExample.tsx
@@ -0,0 +1,73 @@
+import React, { useEffect, useRef } from 'react'
+import { getStyle } from '@coreui/utils'
+import { CChart } from '@coreui/react-chartjs'
+import { Chart } from 'chart.js'
+import type { ChartData, ChartOptions } from 'chart.js'
+
+export const ChartPolarAreaExample = () => {
+ const chartRef = useRef<Chart<'polarArea'> | null>(null)
+
+ useEffect(() => {
+ const handleColorSchemeChange = () => {
+ const chartInstance = chartRef.current
+ if (chartInstance) {
+ const { options } = chartInstance
+
+ if (options.plugins?.legend?.labels) {
+ options.plugins.legend.labels.color = getStyle('--cui-body-color')
+ }
+
+ if (options.scales?.r?.grid) {
+ options.scales.r.grid.color = getStyle('--cui-border-color-translucent')
+ }
+
+ chartInstance.update()
+ }
+ }
+
+ document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)
+
+ return () => {
+ document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
+ }
+ }, [])
+
+ const data: ChartData<'polarArea'> = {
+ labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'],
+ datasets: [
+ {
+ data: [11, 16, 7, 3, 14],
+ backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB'],
+ },
+ ],
+ }
+
+ const options: ChartOptions<'polarArea'> = {
+ plugins: {
+ legend: {
+ labels: {
+ color: getStyle('--cui-body-color'),
+ },
+ },
+ },
+ scales: {
+ r: {
+ grid: {
+ color: getStyle('--cui-border-color-translucent'),
+ },
+ ticks: {
+ color: getStyle('--cui-body-color'),
+ },
+ angleLines: {
+ color: getStyle('--cui-border-color-translucent'),
+ },
+ pointLabels: {
+ color: getStyle('--cui-body-color'),
+ },
+ beginAtZero: true,
+ },
+ },
+ }
+
+ return <CChart type="polarArea" data={data} options={options} ref={chartRef} />
+}
diff --git a/packages/docs/content/components/chart/examples/ChartRadarExample.jsx b/packages/docs/content/components/chart/examples/ChartRadarExample.jsx
new file mode 100644
index 00000000..e1049440
--- /dev/null
+++ b/packages/docs/content/components/chart/examples/ChartRadarExample.jsx
@@ -0,0 +1,94 @@
+import React, { useEffect, useRef } from 'react'
+import { getStyle } from '@coreui/utils'
+import { CChart } from '@coreui/react-chartjs'
+
+export const ChartRadarExample = () => {
+ const chartRef = useRef(null)
+
+ useEffect(() => {
+ const handleColorSchemeChange = () => {
+ const chartInstance = chartRef.current
+ if (chartInstance) {
+ const { options } = chartInstance
+
+ if (options.plugins?.legend?.labels) {
+ options.plugins.legend.labels.color = getStyle('--cui-body-color')
+ }
+
+ if (options.scales?.r) {
+ if (options.scales.r.grid) {
+ options.scales.r.grid.color = getStyle('--cui-border-color-translucent')
+ }
+ if (options.scales.r.ticks) {
+ options.scales.r.ticks.color = getStyle('--cui-body-color')
+ }
+ }
+
+ chartInstance.update()
+ }
+ }
+
+ document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)
+
+ return () => {
+ document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
+ }
+ }, [])
+
+ const data = {
+ labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
+ datasets: [
+ {
+ label: 'My First dataset',
+ backgroundColor: 'rgba(220, 220, 220, 0.2)',
+ borderColor: 'rgba(220, 220, 220, 1)',
+ pointBackgroundColor: 'rgba(220, 220, 220, 1)',
+ pointBorderColor: '#fff',
+ pointHoverBackgroundColor: '#fff',
+ pointHoverBorderColor: 'rgba(220, 220, 220, 1)',
+ data: [65, 59, 90, 81, 56, 55, 40],
+ fill: true,
+ },
+ {
+ label: 'My Second dataset',
+ backgroundColor: 'rgba(151, 187, 205, 0.2)',
+ borderColor: 'rgba(151, 187, 205, 1)',
+ pointBackgroundColor: 'rgba(151, 187, 205, 1)',
+ pointBorderColor: '#fff',
+ pointHoverBackgroundColor: '#fff',
+ pointHoverBorderColor: 'rgba(151, 187, 205, 1)',
+ data: [28, 48, 40, 19, 96, 27, 100],
+ fill: true,
+ },
+ ],
+ }
+
+ const options = {
+ plugins: {
+ legend: {
+ labels: {
+ color: getStyle('--cui-body-color'),
+ },
+ },
+ },
+ scales: {
+ r: {
+ grid: {
+ color: getStyle('--cui-border-color-translucent'),
+ },
+ ticks: {
+ color: getStyle('--cui-body-color'),
+ },
+ angleLines: {
+ color: getStyle('--cui-border-color-translucent'),
+ },
+ pointLabels: {
+ color: getStyle('--cui-body-color'),
+ },
+ beginAtZero: true,
+ },
+ },
+ }
+
+ return <CChart type="radar" data={data} options={options} ref={chartRef} />
+}
diff --git a/packages/docs/content/components/chart/examples/ChartRadarExample.tsx b/packages/docs/content/components/chart/examples/ChartRadarExample.tsx
new file mode 100644
index 00000000..5a143a21
--- /dev/null
+++ b/packages/docs/content/components/chart/examples/ChartRadarExample.tsx
@@ -0,0 +1,96 @@
+import React, { useEffect, useRef } from 'react'
+import { getStyle } from '@coreui/utils'
+import { CChart } from '@coreui/react-chartjs'
+import { Chart } from 'chart.js'
+import type { ChartData, ChartOptions } from 'chart.js'
+
+export const ChartRadarExample = () => {
+ const chartRef = useRef<Chart<'radar'> | null>(null)
+
+ useEffect(() => {
+ const handleColorSchemeChange = () => {
+ const chartInstance = chartRef.current
+ if (chartInstance) {
+ const { options } = chartInstance
+
+ if (options.plugins?.legend?.labels) {
+ options.plugins.legend.labels.color = getStyle('--cui-body-color')
+ }
+
+ if (options.scales?.r) {
+ if (options.scales.r.grid) {
+ options.scales.r.grid.color = getStyle('--cui-border-color-translucent')
+ }
+ if (options.scales.r.ticks) {
+ options.scales.r.ticks.color = getStyle('--cui-body-color')
+ }
+ }
+
+ chartInstance.update()
+ }
+ }
+
+ document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)
+
+ return () => {
+ document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
+ }
+ }, [])
+
+ const data: ChartData<'radar'> = {
+ labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
+ datasets: [
+ {
+ label: 'My First dataset',
+ backgroundColor: 'rgba(220, 220, 220, 0.2)',
+ borderColor: 'rgba(220, 220, 220, 1)',
+ pointBackgroundColor: 'rgba(220, 220, 220, 1)',
+ pointBorderColor: '#fff',
+ pointHoverBackgroundColor: '#fff',
+ pointHoverBorderColor: 'rgba(220, 220, 220, 1)',
+ data: [65, 59, 90, 81, 56, 55, 40],
+ fill: true,
+ },
+ {
+ label: 'My Second dataset',
+ backgroundColor: 'rgba(151, 187, 205, 0.2)',
+ borderColor: 'rgba(151, 187, 205, 1)',
+ pointBackgroundColor: 'rgba(151, 187, 205, 1)',
+ pointBorderColor: '#fff',
+ pointHoverBackgroundColor: '#fff',
+ pointHoverBorderColor: 'rgba(151, 187, 205, 1)',
+ data: [28, 48, 40, 19, 96, 27, 100],
+ fill: true,
+ },
+ ],
+ }
+
+ const options: ChartOptions<'radar'> = {
+ plugins: {
+ legend: {
+ labels: {
+ color: getStyle('--cui-body-color'),
+ },
+ },
+ },
+ scales: {
+ r: {
+ grid: {
+ color: getStyle('--cui-border-color-translucent'),
+ },
+ ticks: {
+ color: getStyle('--cui-body-color'),
+ },
+ angleLines: {
+ color: getStyle('--cui-border-color-translucent'),
+ },
+ pointLabels: {
+ color: getStyle('--cui-body-color'),
+ },
+ beginAtZero: true,
+ },
+ },
+ }
+
+ return <CChart type="radar" data={data} options={options} ref={chartRef} />
+}
diff --git a/packages/docs/content/components/chart/examples/ChartScatterExample.jsx b/packages/docs/content/components/chart/examples/ChartScatterExample.jsx
new file mode 100644
index 00000000..a03f7c9a
--- /dev/null
+++ b/packages/docs/content/components/chart/examples/ChartScatterExample.jsx
@@ -0,0 +1,89 @@
+import React, { useEffect, useRef } from 'react'
+import { getStyle } from '@coreui/utils'
+import { CChart } from '@coreui/react-chartjs'
+
+export const ChartScatterExample = () => {
+ const chartRef = useRef(null)
+
+ useEffect(() => {
+ const handleColorSchemeChange = () => {
+ const chartInstance = chartRef.current
+ if (chartInstance) {
+ const { options } = chartInstance
+ if (options.plugins?.legend?.labels) {
+ options.plugins.legend.labels.color = getStyle('--cui-body-color')
+ }
+
+ if (options.scales) {
+ const xAxis = options.scales.x
+ const yAxis = options.scales.y
+
+ if (xAxis?.grid && xAxis?.ticks) {
+ xAxis.grid.color = getStyle('--cui-border-color-translucent')
+ xAxis.ticks.color = getStyle('--cui-body-color')
+ }
+
+ if (yAxis?.grid && yAxis?.ticks) {
+ yAxis.grid.color = getStyle('--cui-border-color-translucent')
+ yAxis.ticks.color = getStyle('--cui-body-color')
+ }
+ }
+
+ chartInstance.update()
+ }
+ }
+
+ document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)
+
+ return () => {
+ document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
+ }
+ }, [])
+
+ const data = {
+ datasets: [
+ {
+ label: 'Scatter Dataset',
+ data: [
+ { x: -10, y: 0 },
+ { x: 0, y: 10 },
+ { x: 10, y: 5 },
+ { x: 0.5, y: 5.5 },
+ ],
+ backgroundColor: 'rgb(255, 99, 132)',
+ },
+ ],
+ }
+
+ const options = {
+ plugins: {
+ legend: {
+ labels: {
+ color: getStyle('--cui-body-color'),
+ },
+ },
+ },
+ scales: {
+ x: {
+ type: 'linear',
+ position: 'bottom',
+ grid: {
+ color: getStyle('--cui-border-color-translucent'),
+ },
+ ticks: {
+ color: getStyle('--cui-body-color'),
+ },
+ },
+ y: {
+ grid: {
+ color: getStyle('--cui-border-color-translucent'),
+ },
+ ticks: {
+ color: getStyle('--cui-body-color'),
+ },
+ },
+ },
+ }
+
+ return <CChart type="scatter" data={data} options={options} ref={chartRef} />
+}
diff --git a/packages/docs/content/components/chart/examples/ChartScatterExample.tsx b/packages/docs/content/components/chart/examples/ChartScatterExample.tsx
new file mode 100644
index 00000000..3e2b20a5
--- /dev/null
+++ b/packages/docs/content/components/chart/examples/ChartScatterExample.tsx
@@ -0,0 +1,91 @@
+import React, { useEffect, useRef } from 'react'
+import { getStyle } from '@coreui/utils'
+import { CChart } from '@coreui/react-chartjs'
+import { Chart } from 'chart.js'
+import type { ChartData, ChartOptions } from 'chart.js'
+
+export const ChartScatterExample = () => {
+ const chartRef = useRef<Chart<'scatter'> | null>(null)
+
+ useEffect(() => {
+ const handleColorSchemeChange = () => {
+ const chartInstance = chartRef.current
+ if (chartInstance) {
+ const { options } = chartInstance
+ if (options.plugins?.legend?.labels) {
+ options.plugins.legend.labels.color = getStyle('--cui-body-color')
+ }
+
+ if (options.scales) {
+ const xAxis = options.scales.x
+ const yAxis = options.scales.y
+
+ if (xAxis?.grid && xAxis?.ticks) {
+ xAxis.grid.color = getStyle('--cui-border-color-translucent')
+ xAxis.ticks.color = getStyle('--cui-body-color')
+ }
+
+ if (yAxis?.grid && yAxis?.ticks) {
+ yAxis.grid.color = getStyle('--cui-border-color-translucent')
+ yAxis.ticks.color = getStyle('--cui-body-color')
+ }
+ }
+
+ chartInstance.update()
+ }
+ }
+
+ document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)
+
+ return () => {
+ document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
+ }
+ }, [])
+
+ const data: ChartData<'line'> = {
+ datasets: [
+ {
+ label: 'Scatter Dataset',
+ data: [
+ { x: -10, y: 0 },
+ { x: 0, y: 10 },
+ { x: 10, y: 5 },
+ { x: 0.5, y: 5.5 },
+ ],
+ backgroundColor: 'rgb(255, 99, 132)',
+ },
+ ],
+ }
+
+ const options: ChartOptions<'scatter'> = {
+ plugins: {
+ legend: {
+ labels: {
+ color: getStyle('--cui-body-color'),
+ },
+ },
+ },
+ scales: {
+ x: {
+ type: 'linear',
+ position: 'bottom',
+ grid: {
+ color: getStyle('--cui-border-color-translucent'),
+ },
+ ticks: {
+ color: getStyle('--cui-body-color'),
+ },
+ },
+ y: {
+ grid: {
+ color: getStyle('--cui-border-color-translucent'),
+ },
+ ticks: {
+ color: getStyle('--cui-body-color'),
+ },
+ },
+ },
+ }
+
+ return <CChart type="scatter" data={data} options={options} ref={chartRef} />
+}
diff --git a/packages/docs/content/components/chart/index.mdx b/packages/docs/content/components/chart/index.mdx
new file mode 100644
index 00000000..baf94a23
--- /dev/null
+++ b/packages/docs/content/components/chart/index.mdx
@@ -0,0 +1,147 @@
+---
+title: React Chart.js Component
+name: Chart
+description: React wrapper for Chart.js 4.x, the most popular charting library.
+route: /components/chart/
+---
+
+import {
+ CChart,
+ CChartBar,
+ CChartBubble,
+ CChartDoughnut,
+ CChartLine,
+ CChartPolarArea,
+ CChartRadar,
+ CChartScatter,
+} from '@coreui/react-chartjs'
+
+import { useEffect, useRef, useState } from 'react'
+import { getStyle } from '@coreui/utils'
+
+## Installation
+
+If you want to use our Chart.js React wrapper you have to install an additional package.
+
+### Npm
+
+```bash
+npm install @coreui/react-chartjs
+```
+
+### Yarn
+
+```bash
+yarn add @coreui/react-chartjs
+```
+
+## Chart Types
+
+### Line Chart
+
+A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets.
+[Line Chart properties](https://www.chartjs.org/docs/latest/charts/line.html#dataset-properties)
+
+import { ChartLineExample } from './examples/ChartLineExample.tsx'
+import ChartLineExampleJS from '!!raw-loader!./examples/ChartLineExample.jsx'
+import ChartLineExampleTS from '!!raw-loader!./examples/ChartLineExample.tsx'
+
+<ExampleSnippet
+ code={{ js: ChartLineExampleJS, ts: ChartLineExampleTS }}
+ componentName="React Chart"
+>
+ <ChartLineExample />
+</ExampleSnippet>
+
+### Bar Chart
+
+A bar chart provides a way of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side. [Bar Chart properties](https://www.chartjs.org/docs/latest/charts/bar.html#dataset-properties)
+
+import { ChartBarExample } from './examples/ChartBarExample.tsx'
+import ChartBarExampleJS from '!!raw-loader!./examples/ChartBarExample.jsx'
+import ChartBarExampleTS from '!!raw-loader!./examples/ChartBarExample.tsx'
+
+<ExampleSnippet code={{ js: ChartBarExampleJS, ts: ChartBarExampleTS }} componentName="React Chart">
+ <ChartBarExample />
+</ExampleSnippet>
+
+### Radar Chart
+
+A radar chart is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets. [Radar Chart properties](https://www.chartjs.org/docs/latest/charts/radar.html#dataset-properties)
+
+import { ChartRadarExample } from './examples/ChartRadarExample.tsx'
+import ChartRadarExampleJS from '!!raw-loader!./examples/ChartRadarExample.jsx'
+import ChartRadarExampleTS from '!!raw-loader!./examples/ChartRadarExample.tsx'
+
+<ExampleSnippet
+ code={{ js: ChartRadarExampleJS, ts: ChartRadarExampleTS }}
+ componentName="React Chart"
+>
+ <ChartRadarExample />
+</ExampleSnippet>
+
+### Doughnut and Pie Charts
+
+Pie and doughnut charts are probably the most commonly used charts. They are divided into segments, the arc of each segment shows the proportional value of each piece of data. [Doughnut and Pie Charts properties](https://www.chartjs.org/docs/latest/charts/doughnut.html#dataset-properties)
+
+import { ChartDoughnutAndPieExample } from './examples/ChartDoughnutAndPieExample.tsx'
+import ChartDoughnutAndPieExampleJS from '!!raw-loader!./examples/ChartDoughnutAndPieExample.jsx'
+import ChartDoughnutAndPieExampleTS from '!!raw-loader!./examples/ChartDoughnutAndPieExample.tsx'
+
+<ExampleSnippet
+ code={{ js: ChartDoughnutAndPieExampleJS, ts: ChartDoughnutAndPieExampleTS }}
+ componentName="React Chart"
+>
+ <ChartDoughnutAndPieExample />
+</ExampleSnippet>
+
+### Polar Area Chart
+
+Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value. [Polar Area Chart properties](https://www.chartjs.org/docs/latest/charts/polar.html#dataset-properties)
+
+import { ChartPolarAreaExample } from './examples/ChartPolarAreaExample.tsx'
+import ChartPolarAreaExampleJS from '!!raw-loader!./examples/ChartPolarAreaExample.jsx'
+import ChartPolarAreaExampleTS from '!!raw-loader!./examples/ChartPolarAreaExample.tsx'
+
+<ExampleSnippet
+ code={{ js: ChartPolarAreaExampleJS, ts: ChartPolarAreaExampleTS }}
+ componentName="React Chart"
+>
+ <ChartPolarAreaExample />
+</ExampleSnippet>
+
+### Bubble Chart
+
+A bubble chart is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the corresponding horizontal and vertical axes. The third dimension is represented by the size of the individual bubbles. [Bubble Chart properties](https://www.chartjs.org/docs/latest/charts/bubble.html#dataset-properties)
+
+import { ChartBubbleExample } from './examples/ChartBubbleExample.tsx'
+import ChartBubbleExampleJS from '!!raw-loader!./examples/ChartBubbleExample.jsx'
+import ChartBubbleExampleTS from '!!raw-loader!./examples/ChartBubbleExample.tsx'
+
+<ExampleSnippet
+ code={{ js: ChartBubbleExampleJS, ts: ChartBubbleExampleTS }}
+ componentName="React Chart"
+>
+ <ChartBubbleExample />
+</ExampleSnippet>
+
+### Scatter Chart
+
+A bubble chart is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the corresponding horizontal and vertical axes. The third dimension is represented by the size of the individual bubbles. [Scatter Chart properties](https://www.chartjs.org/docs/latest/charts/scatter.html#dataset-properties)
+
+import { ChartScatterExample } from './examples/ChartScatterExample.tsx'
+import ChartScatterExampleJS from '!!raw-loader!./examples/ChartScatterExample.jsx'
+import ChartScatterExampleTS from '!!raw-loader!./examples/ChartScatterExample.tsx'
+
+<ExampleSnippet
+ code={{ js: ChartScatterExampleJS, ts: ChartScatterExampleTS }}
+ componentName="React Chart"
+>
+ <ChartScatterExample />
+</ExampleSnippet>
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [<CChart />](./api/#cchart)
diff --git a/packages/docs/content/components/close-button/api.mdx b/packages/docs/content/components/close-button/api.mdx
new file mode 100644
index 00000000..550b5888
--- /dev/null
+++ b/packages/docs/content/components/close-button/api.mdx
@@ -0,0 +1,12 @@
+---
+title: React Close Button Component API
+name: Close Button API
+description: Explore the API reference for the React Close Button component and discover how to effectively utilize its props for customization.
+route: /components/close-button/
+---
+
+import CCloseButtonAPI from '../../api/CCloseButton.api.mdx'
+
+## CCloseButton
+
+<CCloseButtonAPI />
diff --git a/packages/docs/content/components/close-button.mdx b/packages/docs/content/components/close-button/index.mdx
similarity index 83%
rename from packages/docs/content/components/close-button.mdx
rename to packages/docs/content/components/close-button/index.mdx
index 98fa69b8..37fe0cc2 100644
--- a/packages/docs/content/components/close-button.mdx
+++ b/packages/docs/content/components/close-button/index.mdx
@@ -2,8 +2,7 @@
title: React Close Button Component
name: Close Button
description: A generic close button component for dismissing content like modals and alerts.
-menu: Components
-route: /components/close-button
+route: /components/close-button/
other_frameworks: close-button
---
@@ -36,6 +35,6 @@ Add `dark` boolean property to the `<CCloseButton>`, to invert the close button.
## API
-### CCloseButton
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
-`markdown:CCloseButton.api.mdx`
+- [<CCloseButton />](./api/#cclosebutton)
diff --git a/packages/docs/content/components/collapse.mdx b/packages/docs/content/components/collapse.mdx
deleted file mode 100644
index ed1dff62..00000000
--- a/packages/docs/content/components/collapse.mdx
+++ /dev/null
@@ -1,263 +0,0 @@
----
-title: React Collapse Component
-name: Collapse
-description: React collapse component toggles the visibility of content across your project with a few classes and some scripts. Useful for a large amount of content.
-menu: Components
-route: /components/collapse
-other_frameworks: collapse
----
-
-import { useState } from 'react'
-
-import {
- CButton,
- CCard,
- CCardBody,
- CCol,
- CCollapse,
- CContainer,
- CRow,
-} from '@coreui/react/src/index'
-
-## How it works
-
-The collapse component is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the `height` from its current value to `0`. Given how CSS handles animations, you cannot use `padding` on a `.collapse` element. Instead, use the class as an independent wrapping element.
-
-## Example
-
-You can use a link or a button component.
-
-export const BasicExample = () => {
- const [visible, setVisible] = useState(false)
- return (
- <>
- <CButton
- color="primary"
- href="#"
- onClick={(event) => {
- event.preventDefault()
- setVisible(!visible)
- }}
- >
- Link
- </CButton>
- <CButton color="primary" onClick={() => setVisible(!visible)}>
- Button
- </CButton>
- <CCollapse visible={visible}>
- <CCard className="mt-3">
- <CCardBody>
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
- squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
- sapiente ea proident.
- </CCardBody>
- </CCard>
- </CCollapse>
- </>
- )
-}
-
-<Example>
- <BasicExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
- <>
- <CButton
- color="primary"
- href="#"
- onClick={(event) => {
- event.preventDefault()
- setVisible(!visible)
- }}
- >
- Link
- </CButton>
- <CButton color="primary" onClick={() => setVisible(!visible)}>
- Button
- </CButton>
- <CCollapse visible={visible}>
- <CCard className="mt-3">
- <CCardBody>
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
- squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
- sapiente ea proident.
- </CCardBody>
- </CCard>
- </CCollapse>
- </>
-)
-```
-
-## Horizontal
-
-The collapse plugin also supports horizontal collapsing. Add the `horizontal` property to transition the `width` instead of `height` and set a `width` on the immediate child element.
-
-export const HorizontalExample = () => {
- const [visible, setVisible] = useState(false)
- return (
- <>
- <CButton
- color="primary"
- className="mb-3"
- onClick={() => setVisible(!visible)}
- aria-expanded={visible}
- aria-controls="collapseWidthExample"
- >
- Button
- </CButton>
- <div style={{ minHeight: '120px' }}>
- <CCollapse id="collapseWidthExample" horizontal visible={visible}>
- <CCard style={{ width: '300px' }}>
- <CCardBody>
- This is some placeholder content for a horizontal collapse. It's hidden by default and
- shown when triggered.
- </CCardBody>
- </CCard>
- </CCollapse>
- </div>
- </>
- )
-}
-
-<Example>
- <HorizontalExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
- <>
- <CButton
- className="mb-3"
- onClick={() => setVisible(!visible)}
- aria-expanded={visible}
- aria-controls="collapseWidthExample"
- >
- Button
- </CButton>
- <div style={{ minHeight: '120px' }}>
- <CCollapse id="collapseWidthExample" horizontal visible={visible}>
- <CCard style={{ width: '300px' }}>
- <CCardBody>
- This is some placeholder content for a horizontal collapse. It's hidden by default and
- shown when triggered.
- </CCardBody>
- </CCard>
- </CCollapse>
- </div>
- </>
-)
-```
-
-## Multiple targets
-
-A `<CButton>` can show and hide multiple elements.
-
-export const MultipleTargetsExample = () => {
- const [visibleA, setVisibleA] = useState(false)
- const [visibleB, setVisibleB] = useState(false)
- return (
- <>
- <CButton color="primary" onClick={() => setVisibleA(!visibleA)}>
- Toggle first element
- </CButton>
- <CButton color="primary" onClick={() => setVisibleB(!visibleB)}>
- Toggle second element
- </CButton>
- <CButton
- color="primary"
- onClick={() => {
- setVisibleA(!visibleA)
- setVisibleB(!visibleB)
- }}
- >
- Toggle both elements
- </CButton>
- <CRow>
- <CCol xs={6}>
- <CCollapse visible={visibleA}>
- <CCard className="mt-3">
- <CCardBody>
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
- richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
- cred nesciunt sapiente ea proident.
- </CCardBody>
- </CCard>
- </CCollapse>
- </CCol>
- <CCol xs={6}>
- <CCollapse visible={visibleB}>
- <CCard className="mt-3">
- <CCardBody>
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
- richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
- cred nesciunt sapiente ea proident.
- </CCardBody>
- </CCard>
- </CCollapse>
- </CCol>
- </CRow>
- </>
- )
-}
-
-<Example>
- <MultipleTargetsExample />
-</Example>
-
-```jsx
-const [visibleA, setVisibleA] = useState(false)
-const [visibleB, setVisibleB] = useState(false)
-return (
- <>
- <CButton color="primary" onClick={() => setVisibleA(!visibleA)}>
- Toggle first element
- </CButton>
- <CButton color="primary" onClick={() => setVisibleB(!visibleB)}>
- Toggle second element
- </CButton>
- <CButton
- color="primary"
- onClick={() => {
- setVisibleA(!visibleA)
- setVisibleB(!visibleB)
- }}
- >
- Toggle both elements
- </CButton>
- <CRow>
- <CCol xs={6}>
- <CCollapse visible={visibleA}>
- <CCard className="mt-3">
- <CCardBody>
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
- ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
- sapiente ea proident.
- </CCardBody>
- </CCard>
- </CCollapse>
- </CCol>
- <CCol xs={6}>
- <CCollapse visible={visibleB}>
- <CCard className="mt-3">
- <CCardBody>
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
- ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
- sapiente ea proident.
- </CCardBody>
- </CCard>
- </CCollapse>
- </CCol>
- </CRow>
- </>
-)
-```
-
-## API
-
-### CCollapse
-
-`markdown:CCollapse.api.mdx`
diff --git a/packages/docs/content/components/collapse/api.mdx b/packages/docs/content/components/collapse/api.mdx
new file mode 100644
index 00000000..385857f8
--- /dev/null
+++ b/packages/docs/content/components/collapse/api.mdx
@@ -0,0 +1,12 @@
+---
+title: React Collapse Component API
+name: Collapse API
+description: Explore the API reference for the React Collapse component and discover how to effectively utilize its props for customization.
+route: /components/collapse/
+---
+
+import CCollapseAPI from '../../api/CCollapse.api.mdx'
+
+## CCollapse
+
+<CCollapseAPI />
diff --git a/packages/docs/content/components/collapse/examples/CollapseExample.tsx b/packages/docs/content/components/collapse/examples/CollapseExample.tsx
new file mode 100644
index 00000000..ac5d5989
--- /dev/null
+++ b/packages/docs/content/components/collapse/examples/CollapseExample.tsx
@@ -0,0 +1,32 @@
+import React, { useState } from 'react'
+import { CButton, CCollapse, CCard, CCardBody } from '@coreui/react'
+
+export const CollapseExample = () => {
+ const [visible, setVisible] = useState(false)
+ return (
+ <>
+ <CButton
+ color="primary"
+ href="#"
+ onClick={(event) => {
+ event.preventDefault()
+ setVisible(!visible)
+ }}
+ >
+ Link
+ </CButton>
+ <CButton color="primary" onClick={() => setVisible(!visible)}>
+ Button
+ </CButton>
+ <CCollapse visible={visible}>
+ <CCard className="mt-3">
+ <CCardBody>
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
+ squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
+ sapiente ea proident.
+ </CCardBody>
+ </CCard>
+ </CCollapse>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/collapse/examples/CollapseHorizontalExample.tsx b/packages/docs/content/components/collapse/examples/CollapseHorizontalExample.tsx
new file mode 100644
index 00000000..5e101f0c
--- /dev/null
+++ b/packages/docs/content/components/collapse/examples/CollapseHorizontalExample.tsx
@@ -0,0 +1,29 @@
+import React, { useState } from 'react'
+import { CButton, CCollapse, CCard, CCardBody } from '@coreui/react'
+
+export const CollapseHorizontalExample = () => {
+ const [visible, setVisible] = useState(false)
+ return (
+ <>
+ <CButton
+ color="primary"
+ className="mb-3"
+ onClick={() => setVisible(!visible)}
+ aria-expanded={visible}
+ aria-controls="collapseWidthExample"
+ >
+ Button
+ </CButton>
+ <div style={{ minHeight: '120px' }}>
+ <CCollapse id="collapseWidthExample" horizontal visible={visible}>
+ <CCard style={{ width: '300px' }}>
+ <CCardBody>
+ This is some placeholder content for a horizontal collapse. It's hidden by default and
+ shown when triggered.
+ </CCardBody>
+ </CCard>
+ </CCollapse>
+ </div>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/collapse/examples/CollapseMultipleTargetsExample.tsx b/packages/docs/content/components/collapse/examples/CollapseMultipleTargetsExample.tsx
new file mode 100644
index 00000000..63836659
--- /dev/null
+++ b/packages/docs/content/components/collapse/examples/CollapseMultipleTargetsExample.tsx
@@ -0,0 +1,50 @@
+import React, { useState } from 'react'
+import { CButton, CCollapse, CCard, CCardBody, CCol, CRow } from '@coreui/react'
+
+export const CollapseMultipleTargetsExample = () => {
+ const [visibleA, setVisibleA] = useState(false)
+ const [visibleB, setVisibleB] = useState(false)
+ return (
+ <>
+ <CButton color="primary" onClick={() => setVisibleA(!visibleA)}>
+ Toggle first element
+ </CButton>
+ <CButton color="primary" onClick={() => setVisibleB(!visibleB)}>
+ Toggle second element
+ </CButton>
+ <CButton
+ color="primary"
+ onClick={() => {
+ setVisibleA(!visibleA)
+ setVisibleB(!visibleB)
+ }}
+ >
+ Toggle both elements
+ </CButton>
+ <CRow>
+ <CCol xs={6}>
+ <CCollapse visible={visibleA}>
+ <CCard className="mt-3">
+ <CCardBody>
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
+ richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
+ cred nesciunt sapiente ea proident.
+ </CCardBody>
+ </CCard>
+ </CCollapse>
+ </CCol>
+ <CCol xs={6}>
+ <CCollapse visible={visibleB}>
+ <CCard className="mt-3">
+ <CCardBody>
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
+ richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
+ cred nesciunt sapiente ea proident.
+ </CCardBody>
+ </CCard>
+ </CCollapse>
+ </CCol>
+ </CRow>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/collapse/index.mdx b/packages/docs/content/components/collapse/index.mdx
new file mode 100644
index 00000000..b0ecc741
--- /dev/null
+++ b/packages/docs/content/components/collapse/index.mdx
@@ -0,0 +1,35 @@
+---
+title: React Collapse Component
+name: Collapse
+description: React collapse component toggles the visibility of content across your project with a few classes and some scripts. Useful for a large amount of content.
+route: /components/collapse/
+other_frameworks: collapse
+---
+
+## How it works
+
+The collapse component is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the `height` from its current value to `0`. Given how CSS handles animations, you cannot use `padding` on a `.collapse` element. Instead, use the class as an independent wrapping element.
+
+## Example
+
+You can use a link or a button component.
+
+<ExampleSnippet2 component="CollapseExample" componentName="React Collapse" />
+
+## Horizontal
+
+The collapse plugin also supports horizontal collapsing. Add the `horizontal` property to transition the `width` instead of `height` and set a `width` on the immediate child element.
+
+<ExampleSnippet2 component="CollapseHorizontalExample" componentName="React Collapse" />
+
+## Multiple targets
+
+A `<CButton>` can show and hide multiple elements.
+
+<ExampleSnippet2 component="CollapseMultipleTargetsExample" componentName="React Collapse" />
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [<CCollapse />](./api/#ccollapse)
diff --git a/packages/docs/content/components/dropdown.mdx b/packages/docs/content/components/dropdown.mdx
deleted file mode 100644
index a2cab611..00000000
--- a/packages/docs/content/components/dropdown.mdx
+++ /dev/null
@@ -1,615 +0,0 @@
----
-title: React Dropdown Component
-name: Dropdown
-description: React dropdown component allows you to toggle contextual overlays for displaying lists, links, and more html elements.
-menu: Components
-route: /components/dropdown
-other_frameworks: dropdown
----
-
-import {
- CButton,
- CButtonGroup,
- CCollapse,
- CContainer,
- CDropdown,
- CDropdownDivider,
- CDropdownHeader,
- CDropdownItem,
- CDropdownItemPlain,
- CDropdownMenu,
- CDropdownToggle,
- CForm,
- CFormCheck,
- CFormInput,
- CFormLabel,
- CNavbar,
- CNavbarBrand,
- CNavbarNav,
- CNavbarToggler,
-} from '@coreui/react/src/index'
-
-## Overview
-
-Dropdowns are toggleable, contextual overlays for displaying lists of links and more.
-
-Dropdowns are built on a third party library, [Popper.js](https://popper.js.org/), which provides dynamic positioning and viewport detection. Popper.js isn't used to position dropdowns in navbars though as dynamic positioning isn't required.
-
-## Examples
-
-Bind the dropdown's toggle and the dropdown menu inside `<CDropdown>`, or different element that declares `position: relative;`. Dropdowns can be triggered from `<a>` or `<button>` elements to better fit your possible requirements.
-
-### Single button
-
-Here's how you can put them to work with either `<button>` elements:
-
-```jsx preview
-<CDropdown>
- <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownItem href="#">Something else here</CDropdownItem>
- </CDropdownMenu>
-</CDropdown>
-```
-
-And with `<a>` elements:
-
-```jsx preview
-<CDropdown>
- <CDropdownToggle href="#" color="secondary">Dropdown button</CDropdownToggle>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownItem href="#">Something else here</CDropdownItem>
- </CDropdownMenu>
-</CDropdown>
-```
-
-The best part is you can do this with any button variant, too:
-
-<Example>
- <>
- {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map((color, index) => (
- <CDropdown variant="btn-group" key={index}>
- <CDropdownToggle color={color}>{color}</CDropdownToggle>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownItem href="#">Something else here</CDropdownItem>
- <CDropdownDivider />
- <CDropdownItem href="#">Separated link</CDropdownItem>
- </CDropdownMenu>
- </CDropdown>
- ))}
- </>
-</Example>
-
-```jsx
-<>
- {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map((color, index) => (
- <CDropdown variant="btn-group" key={index}>
- <CDropdownToggle color={color}>{color}</CDropdownToggle>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownItem href="#">Something else here</CDropdownItem>
- <CDropdownDivider />
- <CDropdownItem href="#">Separated link</CDropdownItem>
- </CDropdownMenu>
- </CDropdown>
- ))}
-</>
-```
-
-### Split button
-
-Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of boolean prop `split` for proper spacing around the dropdown caret.
-
-We use this extra class to reduce the horizontal `padding` on either side of the caret by 25% and remove the `margin-left` that's attached for normal button dropdowns. Those additional changes hold the caret centered in the split button and implement a more properly sized hit area next to the main button.
-
-<Example>
- <>
- {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map((color, index) => (
- <CDropdown variant="btn-group" key={index}>
- <CButton color={color}>{color}</CButton>
- <CDropdownToggle color={color} split />
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownItem href="#">Something else here</CDropdownItem>
- <CDropdownDivider />
- <CDropdownItem href="#">Separated link</CDropdownItem>
- </CDropdownMenu>
- </CDropdown>
- ))}
- </>
-</Example>
-
-```jsx
-<>
- {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map((color, index) => (
- <CDropdown variant="btn-group" key={index}>
- <CButton color={color}>{color}</CButton>
- <CDropdownToggle color={color} split />
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownItem href="#">Something else here</CDropdownItem>
- <CDropdownDivider />
- <CDropdownItem href="#">Separated link</CDropdownItem>
- </CDropdownMenu>
- </CDropdown>
- ))}
-</>
-```
-
-## Sizing
-
-Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
-
-```jsx preview
- <CDropdown variant="btn-group">
- <CDropdownToggle color="secondary" size="lg">Large button</CDropdownToggle>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownItem href="#">Something else here</CDropdownItem>
- <CDropdownDivider/>
- <CDropdownItem href="#">Separated link</CDropdownItem>
- </CDropdownMenu>
- </CDropdown>
-
- <CDropdown variant="btn-group">
- <CButton color="secondary" size="lg">Large split button</CButton>
- <CDropdownToggle color="secondary" size="lg" split/>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownItem href="#">Something else here</CDropdownItem>
- <CDropdownDivider/>
- <CDropdownItem href="#">Separated link</CDropdownItem>
- </CDropdownMenu>
- </CDropdown>
-```
-
-```jsx preview
- <CDropdown variant="btn-group">
- <CDropdownToggle color="secondary" size="sm">Small button</CDropdownToggle>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownItem href="#">Something else here</CDropdownItem>
- <CDropdownDivider/>
- <CDropdownItem href="#">Separated link</CDropdownItem>
- </CDropdownMenu>
- </CDropdown>
-
- <CDropdown variant="btn-group">
- <CButton color="secondary" size="sm">Small split button</CButton>
- <CDropdownToggle color="secondary" size="sm"split/>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownItem href="#">Something else here</CDropdownItem>
- <CDropdownDivider/>
- <CDropdownItem href="#">Separated link</CDropdownItem>
- </CDropdownMenu>
- </CDropdown>
-```
-
-## Dark dropdowns
-
-Opt into darker dropdowns to match a dark navbar or custom style by set `dark` property. No changes are required to the dropdown items.
-
-```jsx preview
-<CDropdown dark>
- <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownItem href="#">Something else here</CDropdownItem>
- <CDropdownDivider />
- <CDropdownItem href="#">Separated link</CDropdownItem>
- </CDropdownMenu>
-</CDropdown>
-```
-
-And putting it to use in a navbar:
-
-```jsx preview
-<CNavbar expand="lg" colorScheme="dark" className="bg-dark">
- <CContainer fluid>
- <CNavbarBrand href="#">Navbar</CNavbarBrand>
- <CNavbarToggler aria-label="Toggle navigation" aria-expanded={true} />
- <CCollapse className="navbar-collapse" visible={true}>
- <CNavbarNav>
- <CDropdown dark as="li" variant="nav-item">
- <CDropdownToggle color="dark">Dropdown</CDropdownToggle>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownItem href="#">Something else here</CDropdownItem>
- <CDropdownDivider />
- <CDropdownItem href="#">Separated link</CDropdownItem>
- </CDropdownMenu>
- </CDropdown>
- </CNavbarNav>
- </CCollapse>
- </CContainer>
-</CNavbar>
-```
-
-## Directions
-
-<Callout color="info" title="RTL">
- Directions are mirrored when using CoreUI in RTL, meaning `.dropstart` will appear on the right side.
-</Callout>
-
-### Centered
-
-Make the dropdown menu centered below the toggle by adding `direction="center"` to the `<CDropdown>` component.
-
-```jsx preview
-<CDropdown variant="btn-group" direction="center">
- <CDropdownToggle color="secondary">Centered dropdown</CDropdownToggle>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownItem href="#">Something else here</CDropdownItem>
- <CDropdownDivider/>
- <CDropdownItem href="#">Separated link</CDropdownItem>
- </CDropdownMenu>
-</CDropdown>
-```
-
-### Dropup
-
-Trigger dropdown menus above elements by adding `direction="dropup"` to the `<CDropdown>` component.
-
-```jsx preview
- <CDropdown variant="btn-group" direction="dropup">
- <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownItem href="#">Something else here</CDropdownItem>
- <CDropdownDivider/>
- <CDropdownItem href="#">Separated link</CDropdownItem>
- </CDropdownMenu>
- </CDropdown>
-
- <CDropdown variant="btn-group" direction="dropup">
- <CButton color="secondary" >Small split button</CButton>
- <CDropdownToggle color="secondary" split/>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownItem href="#">Something else here</CDropdownItem>
- <CDropdownDivider/>
- <CDropdownItem href="#">Separated link</CDropdownItem>
- </CDropdownMenu>
- </CDropdown>
-```
-
-### Dropup centered
-
-Make the dropup menu centered above the toggle by adding `direction="dropup-center"` to the `<CDropdown>` component.
-
-```jsx preview
-<CDropdown variant="btn-group" direction="dropup-center">
- <CDropdownToggle color="secondary">Centered dropup</CDropdownToggle>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownItem href="#">Something else here</CDropdownItem>
- <CDropdownDivider/>
- <CDropdownItem href="#">Separated link</CDropdownItem>
- </CDropdownMenu>
-</CDropdown>
-```
-
-### Dropend
-
-Trigger dropdown menus at the right of the elements by adding `direction="dropend"` to the `<CDropdown>` component.
-
-```jsx preview
- <CDropdown variant="btn-group" direction="dropend">
- <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownItem href="#">Something else here</CDropdownItem>
- <CDropdownDivider/>
- <CDropdownItem href="#">Separated link</CDropdownItem>
- </CDropdownMenu>
- </CDropdown>
-
- <CDropdown variant="btn-group" direction="dropend">
- <CButton color="secondary" >Small split button</CButton>
- <CDropdownToggle color="secondary" split/>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownItem href="#">Something else here</CDropdownItem>
- <CDropdownDivider/>
- <CDropdownItem href="#">Separated link</CDropdownItem>
- </CDropdownMenu>
- </CDropdown>
-```
-
-### Dropstart
-
-Trigger dropdown menus at the left of the elements by adding `direction="dropstart"` to the `<CDropdown>` component.
-
-```jsx preview
- <CDropdown variant="btn-group" direction="dropstart">
- <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownItem href="#">Something else here</CDropdownItem>
- <CDropdownDivider/>
- <CDropdownItem href="#">Separated link</CDropdownItem>
- </CDropdownMenu>
- </CDropdown>
-
- <CButtonGroup>
- <CDropdown variant="btn-group" direction="dropstart">
- <CDropdownToggle color="secondary" split/>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownItem href="#">Something else here</CDropdownItem>
- <CDropdownDivider/>
- <CDropdownItem href="#">Separated link</CDropdownItem>
- </CDropdownMenu>
- </CDropdown>
- <CButton color="secondary" >Small split button</CButton>
- </CButtonGroup>
-```
-
-## Menu items
-
-Historically dropdown menu contents _had_ to be links, but that's no longer the case with v4. Now you can optionally use `<button>` elements in your dropdowns instead of just `<a>`s.
-
-```jsx preview
-<CDropdown>
- <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
- <CDropdownMenu>
- <CDropdownItem as="button">Action</CDropdownItem>
- <CDropdownItem as="button">Another action</CDropdownItem>
- <CDropdownItem as="button">Something else here</CDropdownItem>
- <CDropdownDivider />
- <CDropdownItem as="button">Separated link</CDropdownItem>
- </CDropdownMenu>
-</CDropdown>
-```
-
-You can also create non-interactive dropdown items with `<CDropdownItemPlain>`.
-
-```jsx preview
-<CDropdownMenu>
- <CDropdownItemPlain>Dropdown item text</CDropdownItemPlain>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownItem href="#">Something else here</CDropdownItem>
-</CDropdownMenu>
-```
-
-### Active
-
-Set boolean property `active` to **style item as active**.
-
-In the following example we use `div` instead of `<CDropdownMenu>` to show `<CDropdownMenu>` content.
-
-```jsx preview
-<CDropdownMenu>
- <CDropdownItem href="#">Regular link</CDropdownItem>
- <CDropdownItem href="#" active>Active link</CDropdownItem>
- <CDropdownItem href="#">Another link</CDropdownItem>
-</CDropdownMenu>
-```
-
-### Disabled
-
-Add `disabled` boolean property to items in the dropdown to **style them as disabled**.
-
-In the following example we use `div` instead of `<CDropdownMenu>` to show `<CDropdownMenu>` content.
-
-```jsx preview
-<CDropdownMenu>
- <CDropdownItem href="#">Regular link</CDropdownItem>
- <CDropdownItem href="#" disabled>Disabled link</CDropdownItem>
- <CDropdownItem href="#">Another link</CDropdownItem>
-</CDropdownMenu>
-```
-
-## Menu alignment
-
-By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `aligment="end"` to right align the dropdown menu.
-
-<Callout color="info">
- <strong>Heads up!</strong> Dropdowns are positioned thanks to Popper.
-</Callout>
-
-```jsx preview
-<CDropdown alignment="end">
- <CDropdownToggle color="secondary">Right-aligned menu example</CDropdownToggle>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownItem href="#">Something else here</CDropdownItem>
- <CDropdownDivider />
- <CDropdownItem href="#">Separated link</CDropdownItem>
- </CDropdownMenu>
-</CDropdown>
-```
-
-### Responsive alignment
-
-If you use responsive alignment, dynamic positioning is disabled.
-
-To align **right** the dropdown menu with the given breakpoint or larger, add `aligment="xs|sm|md|lg|xl|xxl: end"`.
-
-```jsx preview
-<CDropdown alignment={{ lg: 'end' }}>
- <CDropdownToggle color="secondary">Left-aligned but right aligned when large screen</CDropdownToggle>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownItem href="#">Something else here</CDropdownItem>
- <CDropdownDivider />
- <CDropdownItem href="#">Separated link</CDropdownItem>
- </CDropdownMenu>
-</CDropdown>
-```
-
-To align **left** the dropdown menu with the given breakpoint or larger, add `aligment="xs|sm|md|lg|xl|xxl: start"`.
-
-```jsx preview
-<CDropdown alignment={{ xs: 'end', lg: 'start' }}>
- <CDropdownToggle color="secondary">Right-aligned but left aligned when large screen</CDropdownToggle>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownItem href="#">Something else here</CDropdownItem>
- <CDropdownDivider />
- <CDropdownItem href="#">Separated link</CDropdownItem>
- </CDropdownMenu>
-</CDropdown>
-```
-
-## Menu content
-
-### Headers
-
-Add a header to label sections of actions in any dropdown menu.
-
-In the following example we use `div` instead of `<CDropdownMenu>` to show `<CDropdownMenu>` content.
-
-```jsx preview
-<CDropdownMenu>
- <CDropdownHeader>Dropdown header</CDropdownHeader>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
-</CDropdownMenu>
-```
-
-### Dividers
-
-Separate groups of related menu items with a divider.
-
-In the following example we use `div` instead of `<CDropdownMenu>` to show `<CDropdownMenu>` content.
-
-```jsx preview
-<CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownItem href="#">Something else here</CDropdownItem>
- <CDropdownDivider />
- <CDropdownItem href="#">Separated link</CDropdownItem>
-</CDropdownMenu>
-```
-
-### Text
-
-Place any freeform text within a dropdown menu with text. Note that you'll likely need additional sizing styles to constrain the menu width.
-
-```jsx preview
-<CDropdownMenu className="p-4 text-body-secondary" style={{ maxWidth: '200px' }}>
- <p>Some example text that's free-flowing within the dropdown menu.</p>
- <p className="mb-0">And this is more example text.</p>
-</CDropdownMenu>
-```
-
-### Forms
-
-Put a form within a dropdown menu, or make it into a dropdown menu.
-
-```jsx preview
-<CDropdownMenu>
- <CForm className="px-4 py-4">
- <div className="mb-3">
- <CFormLabel htmlFor="exampleDropdownFormEmail1">Email address</CFormLabel>
- <CFormInput type="email" id="exampleDropdownFormEmail1" placeholder="email@example.com" />
- </div>
- <div className="mb-3">
- <CFormLabel htmlFor="exampleDropdownFormPassword1">Password</CFormLabel>
- <CFormInput type="password" id="exampleDropdownFormPassword1" placeholder="Password" />
- </div>
- <div className="mb-3">
- <CFormCheck id="dropdownCheck" label="Remember me" />
- </div>
- <CButton color="primary" type="submit">Sign in</CButton>
- </CForm>
- <CDropdownDivider />
- <CDropdownItem href="#">New around here? Sign up</CDropdownItem>
- <CDropdownItem href="#">Forgot password?</CDropdownItem>
-</CDropdownMenu>
-```
-
-## Customizing
-
-### CSS variables
-
-React dropdowns use local CSS variables on `.dropdown` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
-
-<ScssDocs file="_dropdown.scss" capture="dropdown-css-vars"/>
-
-Customization through CSS variables can be seen on the `.dropdown-menu-dark` class where we override specific values without adding duplicate CSS selectors.
-
-<ScssDocs file="_dropdown.scss" capture="dropdown-dark-css-vars"/>
-
-#### How to use CSS variables
-
-```jsx
-const vars = {
- '--my-css-var': 10,
- '--my-another-css-var': "red"
-}
-return <CDropdown style={vars}>...</CDropdown>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="dropdown-variables"/>
-
-Variables for the dark dropdown:
-
-<ScssDocs file="_variables.scss" capture="dropdown-dark-variables"/>
-
-Variables for the CSS-based carets that indicate a dropdown's interactivity:
-
-<ScssDocs file="_variables.scss" capture="caret-variables"/>
-
-## API
-
-### CDropdown
-
-`markdown:CDropdown.api.mdx`
-
-### CDropdownDivider
-
-`markdown:CDropdownDivider.api.mdx`
-
-### CDropdownHeader
-
-`markdown:CDropdownHeader.api.mdx`
-
-### CDropdownItem
-
-`markdown:CDropdownItem.api.mdx`
-
-### CDropdownItemPlain
-
-`markdown:CDropdownItemPlain.api.mdx`
-
-### CDropdownMenu
-
-`markdown:CDropdownMenu.api.mdx`
-
-### CDropdownToggle
-
-`markdown:CDropdownToggle.api.mdx`
diff --git a/packages/docs/content/components/dropdown/api.mdx b/packages/docs/content/components/dropdown/api.mdx
new file mode 100644
index 00000000..bb7cec60
--- /dev/null
+++ b/packages/docs/content/components/dropdown/api.mdx
@@ -0,0 +1,42 @@
+---
+title: React Dropdown Component API
+name: Dropdown API
+description: Explore the API reference for the React Dropdown component and discover how to effectively utilize its props for customization.
+route: /components/dropdown/
+---
+
+import CDropdownAPI from '../../api/CDropdown.api.mdx'
+import CDropdownDividerAPI from '../../api/CDropdownDivider.api.mdx'
+import CDropdownHeaderAPI from '../../api/CDropdownHeader.api.mdx'
+import CDropdownItemAPI from '../../api/CDropdownItem.api.mdx'
+import CDropdownItemPlainAPI from '../../api/CDropdownItemPlain.api.mdx'
+import CDropdownMenuAPI from '../../api/CDropdownMenu.api.mdx'
+import CDropdownToggleAPI from '../../api/CDropdownToggle.api.mdx'
+
+## CDropdown
+
+<CDropdownAPI />
+
+## CDropdownDivider
+
+<CDropdownDividerAPI />
+
+## CDropdownHeader
+
+<CDropdownHeaderAPI />
+
+## CDropdownItem
+
+<CDropdownItemAPI />
+
+## CDropdownItemPlain
+
+<CDropdownItemPlainAPI />
+
+## CDropdownMenu
+
+<CDropdownMenuAPI />
+
+## CDropdownToggle
+
+<CDropdownToggleAPI />
diff --git a/packages/docs/content/components/dropdown/examples/DropdownCenteredExample.tsx b/packages/docs/content/components/dropdown/examples/DropdownCenteredExample.tsx
new file mode 100644
index 00000000..ef6e69b2
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownCenteredExample.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import {
+ CDropdown,
+ CDropdownDivider,
+ CDropdownItem,
+ CDropdownMenu,
+ CDropdownToggle,
+} from '@coreui/react'
+
+export const DropdownCenteredExample = () => {
+ return (
+ <CDropdown variant="btn-group" direction="center">
+ <CDropdownToggle color="secondary">Centered dropdown</CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownDark2Example.tsx b/packages/docs/content/components/dropdown/examples/DropdownDark2Example.tsx
new file mode 100644
index 00000000..74a79de5
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownDark2Example.tsx
@@ -0,0 +1,39 @@
+import React from 'react'
+import {
+ CCollapse,
+ CContainer,
+ CDropdown,
+ CDropdownDivider,
+ CDropdownItem,
+ CDropdownMenu,
+ CDropdownToggle,
+ CNavbar,
+ CNavbarBrand,
+ CNavbarNav,
+ CNavbarToggler,
+} from '@coreui/react'
+
+export const DropdownDark2Example = () => {
+ return (
+ <CNavbar expand="lg" colorScheme="dark" className="bg-dark">
+ <CContainer fluid>
+ <CNavbarBrand href="#">Navbar</CNavbarBrand>
+ <CNavbarToggler aria-label="Toggle navigation" aria-expanded={true} />
+ <CCollapse className="navbar-collapse" visible={true}>
+ <CNavbarNav>
+ <CDropdown dark as="li" variant="nav-item">
+ <CDropdownToggle color="dark">Dropdown</CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ </CNavbarNav>
+ </CCollapse>
+ </CContainer>
+ </CNavbar>
+ )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownDarkExample.tsx b/packages/docs/content/components/dropdown/examples/DropdownDarkExample.tsx
new file mode 100644
index 00000000..35cbf127
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownDarkExample.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import {
+ CDropdown,
+ CDropdownDivider,
+ CDropdownItem,
+ CDropdownMenu,
+ CDropdownToggle,
+} from '@coreui/react'
+
+export const DropdownDarkExample = () => {
+ return (
+ <CDropdown dark>
+ <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownDropendExample.tsx b/packages/docs/content/components/dropdown/examples/DropdownDropendExample.tsx
new file mode 100644
index 00000000..e9d0656e
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownDropendExample.tsx
@@ -0,0 +1,38 @@
+import React from 'react'
+import {
+ CButton,
+ CDropdown,
+ CDropdownDivider,
+ CDropdownItem,
+ CDropdownMenu,
+ CDropdownToggle,
+} from '@coreui/react'
+
+export const DropdownDropendExample = () => {
+ return (
+ <>
+ <CDropdown variant="btn-group" direction="dropend">
+ <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+
+ <CDropdown variant="btn-group" direction="dropend">
+ <CButton color="secondary">Small split button</CButton>
+ <CDropdownToggle color="secondary" split />
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownDropstartExample.tsx b/packages/docs/content/components/dropdown/examples/DropdownDropstartExample.tsx
new file mode 100644
index 00000000..276b5cff
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownDropstartExample.tsx
@@ -0,0 +1,41 @@
+import React from 'react'
+import {
+ CButton,
+ CButtonGroup,
+ CDropdown,
+ CDropdownDivider,
+ CDropdownItem,
+ CDropdownMenu,
+ CDropdownToggle,
+} from '@coreui/react'
+
+export const DropdownDropstartExample = () => {
+ return (
+ <>
+ <CDropdown variant="btn-group" direction="dropstart">
+ <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+
+ <CButtonGroup>
+ <CDropdown variant="btn-group" direction="dropstart">
+ <CDropdownToggle color="secondary" split />
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ <CButton color="secondary">Small split button</CButton>
+ </CButtonGroup>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownDropupCenteredExample.tsx b/packages/docs/content/components/dropdown/examples/DropdownDropupCenteredExample.tsx
new file mode 100644
index 00000000..e4c5dd3e
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownDropupCenteredExample.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import {
+ CDropdown,
+ CDropdownDivider,
+ CDropdownItem,
+ CDropdownMenu,
+ CDropdownToggle,
+} from '@coreui/react'
+
+export const DropdownDropupCenteredExample = () => {
+ return (
+ <CDropdown variant="btn-group" direction="dropup-center">
+ <CDropdownToggle color="secondary">Centered dropup</CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownDropupExample.tsx b/packages/docs/content/components/dropdown/examples/DropdownDropupExample.tsx
new file mode 100644
index 00000000..67b41be0
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownDropupExample.tsx
@@ -0,0 +1,38 @@
+import React from 'react'
+import {
+ CButton,
+ CDropdown,
+ CDropdownDivider,
+ CDropdownItem,
+ CDropdownMenu,
+ CDropdownToggle,
+} from '@coreui/react'
+
+export const DropdownDropupExample = () => {
+ return (
+ <>
+ <CDropdown variant="btn-group" direction="dropup">
+ <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+
+ <CDropdown variant="btn-group" direction="dropup">
+ <CButton color="secondary">Small split button</CButton>
+ <CDropdownToggle color="secondary" split />
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownMenuAlignmentExample.tsx b/packages/docs/content/components/dropdown/examples/DropdownMenuAlignmentExample.tsx
new file mode 100644
index 00000000..c4581ffd
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownMenuAlignmentExample.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import {
+ CDropdown,
+ CDropdownDivider,
+ CDropdownItem,
+ CDropdownMenu,
+ CDropdownToggle,
+} from '@coreui/react'
+
+export const DropdownMenuAlignmentExample = () => {
+ return (
+ <CDropdown alignment="end">
+ <CDropdownToggle color="secondary">Right-aligned menu example</CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownMenuContentDividersExample.tsx b/packages/docs/content/components/dropdown/examples/DropdownMenuContentDividersExample.tsx
new file mode 100644
index 00000000..abd44799
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownMenuContentDividersExample.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { CDropdownDivider, CDropdownItem, CDropdownMenu } from '@coreui/react'
+
+export const DropdownMenuContentDividersExample = () => {
+ return (
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownMenuContentFormsExample.tsx b/packages/docs/content/components/dropdown/examples/DropdownMenuContentFormsExample.tsx
new file mode 100644
index 00000000..9fa78e87
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownMenuContentFormsExample.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import {
+ CButton,
+ CDropdownDivider,
+ CDropdownItem,
+ CDropdownMenu,
+ CForm,
+ CFormCheck,
+ CFormInput,
+ CFormLabel,
+} from '@coreui/react'
+
+export const DropdownMenuContentFormsExample = () => {
+ return (
+ <CDropdownMenu>
+ <CForm className="px-4 py-4">
+ <div className="mb-3">
+ <CFormLabel htmlFor="exampleDropdownFormEmail1">Email address</CFormLabel>
+ <CFormInput type="email" id="exampleDropdownFormEmail1" placeholder="email@example.com" />
+ </div>
+ <div className="mb-3">
+ <CFormLabel htmlFor="exampleDropdownFormPassword1">Password</CFormLabel>
+ <CFormInput type="password" id="exampleDropdownFormPassword1" placeholder="Password" />
+ </div>
+ <div className="mb-3">
+ <CFormCheck id="dropdownCheck" label="Remember me" />
+ </div>
+ <CButton color="primary" type="submit">
+ Sign in
+ </CButton>
+ </CForm>
+ <CDropdownDivider />
+ <CDropdownItem href="#">New around here? Sign up</CDropdownItem>
+ <CDropdownItem href="#">Forgot password?</CDropdownItem>
+ </CDropdownMenu>
+ )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownMenuContentHeadersExample.tsx b/packages/docs/content/components/dropdown/examples/DropdownMenuContentHeadersExample.tsx
new file mode 100644
index 00000000..8a44f316
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownMenuContentHeadersExample.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CDropdownHeader, CDropdownItem, CDropdownMenu } from '@coreui/react'
+
+export const DropdownMenuContentHeadersExample = () => {
+ return (
+ <CDropdownMenu>
+ <CDropdownHeader>Dropdown header</CDropdownHeader>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ </CDropdownMenu>
+ )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownMenuContentTextExample.tsx b/packages/docs/content/components/dropdown/examples/DropdownMenuContentTextExample.tsx
new file mode 100644
index 00000000..120d3660
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownMenuContentTextExample.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { CDropdownMenu } from '@coreui/react'
+
+export const DropdownMenuContentTextExample = () => {
+ return (
+ <CDropdownMenu className="p-4 text-body-secondary" style={{ maxWidth: '200px' }}>
+ <p>Some example text that's free-flowing within the dropdown menu.</p>
+ <p className="mb-0">And this is more example text.</p>
+ </CDropdownMenu>
+ )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownMenuItems2Example.tsx b/packages/docs/content/components/dropdown/examples/DropdownMenuItems2Example.tsx
new file mode 100644
index 00000000..661a8d41
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownMenuItems2Example.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { CDropdownItem, CDropdownItemPlain, CDropdownMenu } from '@coreui/react'
+
+export const DropdownMenuItems2Example = () => {
+ return (
+ <CDropdownMenu>
+ <CDropdownItemPlain>Dropdown item text</CDropdownItemPlain>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ </CDropdownMenu>
+ )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownMenuItemsActiveExample.tsx b/packages/docs/content/components/dropdown/examples/DropdownMenuItemsActiveExample.tsx
new file mode 100644
index 00000000..2011b23d
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownMenuItemsActiveExample.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { CDropdownItem, CDropdownMenu } from '@coreui/react'
+
+export const DropdownMenuItemsActiveExample = () => {
+ return (
+ <CDropdownMenu>
+ <CDropdownItem href="#">Regular link</CDropdownItem>
+ <CDropdownItem href="#" active>
+ Active link
+ </CDropdownItem>
+ <CDropdownItem href="#">Another link</CDropdownItem>
+ </CDropdownMenu>
+ )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownMenuItemsDisabledExample.tsx b/packages/docs/content/components/dropdown/examples/DropdownMenuItemsDisabledExample.tsx
new file mode 100644
index 00000000..cb5e10d2
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownMenuItemsDisabledExample.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CDropdownItem, CDropdownMenu } from '@coreui/react'
+
+export const DropdownMenuItemsDisabledExample = () => {
+ return (
+ <CDropdownMenu>
+ <CDropdownItem href="#">Regular link</CDropdownItem>
+ <CDropdownItem href="#" disabled>Disabled link</CDropdownItem>
+ <CDropdownItem href="#">Another link</CDropdownItem>
+ </CDropdownMenu>
+ )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownMenuItemsExample.tsx b/packages/docs/content/components/dropdown/examples/DropdownMenuItemsExample.tsx
new file mode 100644
index 00000000..437435e1
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownMenuItemsExample.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import {
+ CDropdown,
+ CDropdownDivider,
+ CDropdownItem,
+ CDropdownMenu,
+ CDropdownToggle,
+} from '@coreui/react'
+
+export const DropdownMenuItemsExample = () => {
+ return (
+ <CDropdown>
+ <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem as="button">Action</CDropdownItem>
+ <CDropdownItem as="button">Another action</CDropdownItem>
+ <CDropdownItem as="button">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem as="button">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownResponsiveAlignment2Example.tsx b/packages/docs/content/components/dropdown/examples/DropdownResponsiveAlignment2Example.tsx
new file mode 100644
index 00000000..b0296401
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownResponsiveAlignment2Example.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import {
+ CDropdown,
+ CDropdownDivider,
+ CDropdownItem,
+ CDropdownMenu,
+ CDropdownToggle,
+} from '@coreui/react'
+
+export const DropdownResponsiveAlignment2Example = () => {
+ return (
+ <CDropdown alignment={{ xs: 'end', lg: 'start' }}>
+ <CDropdownToggle color="secondary">
+ Right-aligned but left aligned when large screen
+ </CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownResponsiveAlignmentExample.tsx b/packages/docs/content/components/dropdown/examples/DropdownResponsiveAlignmentExample.tsx
new file mode 100644
index 00000000..298835a3
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownResponsiveAlignmentExample.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import {
+ CDropdown,
+ CDropdownDivider,
+ CDropdownItem,
+ CDropdownMenu,
+ CDropdownToggle,
+} from '@coreui/react'
+
+export const DropdownResponsiveAlignmentExample = () => {
+ return (
+ <CDropdown alignment="end">
+ <CDropdownToggle color="secondary">Right-aligned menu example</CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownSingleButton2Example.tsx b/packages/docs/content/components/dropdown/examples/DropdownSingleButton2Example.tsx
new file mode 100644
index 00000000..4ecd2ebe
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownSingleButton2Example.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { CDropdown, CDropdownItem, CDropdownMenu, CDropdownToggle } from '@coreui/react'
+
+export const DropdownSingleButton2Example = () => {
+ return (
+ <CDropdown>
+ <CDropdownToggle href="#" color="secondary">Dropdown button</CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownSingleButton3Example.tsx b/packages/docs/content/components/dropdown/examples/DropdownSingleButton3Example.tsx
new file mode 100644
index 00000000..c8f456b7
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownSingleButton3Example.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import {
+ CDropdown,
+ CDropdownDivider,
+ CDropdownItem,
+ CDropdownMenu,
+ CDropdownToggle,
+} from '@coreui/react'
+
+export const DropdownSingleButton3Example = () => {
+ return (
+ <>
+ {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map((color, index) => (
+ <CDropdown variant="btn-group" key={index}>
+ <CDropdownToggle color={color}>{color}</CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ ))}
+ </>
+ )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownSingleButtonExample.tsx b/packages/docs/content/components/dropdown/examples/DropdownSingleButtonExample.tsx
new file mode 100644
index 00000000..af4382fc
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownSingleButtonExample.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { CDropdown, CDropdownItem, CDropdownMenu, CDropdownToggle } from '@coreui/react'
+
+export const DropdownSingleButtonExample = () => {
+ return (
+ <CDropdown>
+ <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownSizingLargeExample.tsx b/packages/docs/content/components/dropdown/examples/DropdownSizingLargeExample.tsx
new file mode 100644
index 00000000..523afc52
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownSizingLargeExample.tsx
@@ -0,0 +1,38 @@
+import React from 'react'
+import {
+ CButton,
+ CDropdown,
+ CDropdownDivider,
+ CDropdownItem,
+ CDropdownMenu,
+ CDropdownToggle,
+} from '@coreui/react'
+
+export const DropdownSizingLargeExample = () => {
+ return (
+ <>
+ <CDropdown variant="btn-group">
+ <CDropdownToggle color="secondary" size="lg">Large button</CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+
+ <CDropdown variant="btn-group">
+ <CButton color="secondary" size="lg">Large split button</CButton>
+ <CDropdownToggle color="secondary" size="lg" split />
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownSizingSmallExample.tsx b/packages/docs/content/components/dropdown/examples/DropdownSizingSmallExample.tsx
new file mode 100644
index 00000000..487ed5f2
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownSizingSmallExample.tsx
@@ -0,0 +1,38 @@
+import React from 'react'
+import {
+ CButton,
+ CDropdown,
+ CDropdownDivider,
+ CDropdownItem,
+ CDropdownMenu,
+ CDropdownToggle,
+} from '@coreui/react'
+
+export const DropdownSizingSmallExample = () => {
+ return (
+ <>
+ <CDropdown variant="btn-group">
+ <CDropdownToggle color="secondary" size="sm">Small button</CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+
+ <CDropdown variant="btn-group">
+ <CButton color="secondary" size="sm">Small split button</CButton>
+ <CDropdownToggle color="secondary" size="sm" split />
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownSplitButtonExample.tsx b/packages/docs/content/components/dropdown/examples/DropdownSplitButtonExample.tsx
new file mode 100644
index 00000000..cd47ca89
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownSplitButtonExample.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import {
+ CButton,
+ CDropdown,
+ CDropdownDivider,
+ CDropdownItem,
+ CDropdownMenu,
+ CDropdownToggle,
+} from '@coreui/react'
+
+export const DropdownSplitButtonExample = () => {
+ return (
+ <>
+ {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map((color, index) => (
+ <CDropdown variant="btn-group" key={index}>
+ <CButton color={color}>{color}</CButton>
+ <CDropdownToggle color={color} split />
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ ))}
+ </>
+ )
+}
diff --git a/packages/docs/content/components/dropdown/index.mdx b/packages/docs/content/components/dropdown/index.mdx
new file mode 100644
index 00000000..9881909f
--- /dev/null
+++ b/packages/docs/content/components/dropdown/index.mdx
@@ -0,0 +1,186 @@
+---
+title: React Dropdown Component
+name: Dropdown
+description: React dropdown component allows you to toggle contextual overlays for displaying lists, links, and more html elements.
+route: /components/dropdown/
+other_frameworks: dropdown
+---
+
+## Overview
+
+Dropdowns are toggleable, contextual overlays for displaying lists of links and more.
+
+Dropdowns are built on a third party library, [Popper.js](https://popper.js.org/), which provides dynamic positioning and viewport detection. Popper.js isn't used to position dropdowns in navbars though as dynamic positioning isn't required.
+
+## Examples
+
+Bind the dropdown's toggle and the dropdown menu inside `<CDropdown>`, or different element that declares `position: relative;`. Dropdowns can be triggered from `<a>` or `<button>` elements to better fit your possible requirements.
+
+### Single button
+
+Here's how you can put them to work with either `<button>` elements:
+
+<ExampleSnippet2 component="DropdownSingleButtonExample" componentName="React Dropdown" />
+
+And with `<a>` elements:
+
+<ExampleSnippet2 component="DropdownSingleButton2Example" componentName="React Dropdown" />
+
+The best part is you can do this with any button variant, too:
+
+<ExampleSnippet2 component="DropdownSingleButton3Example" componentName="React Dropdown" />
+
+### Split button
+
+Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of boolean prop `split` for proper spacing around the dropdown caret.
+
+We use this extra class to reduce the horizontal `padding` on either side of the caret by 25% and remove the `margin-left` that's attached for normal button dropdowns. Those additional changes hold the caret centered in the split button and implement a more properly sized hit area next to the main button.
+
+<ExampleSnippet2 component="DropdownSplitButtonExample" componentName="React Dropdown" />
+
+## Sizing
+
+Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
+
+<ExampleSnippet2 component="DropdownSizingLargeExample" componentName="React Dropdown" />
+
+<ExampleSnippet2 component="DropdownSizingSmallExample" componentName="React Dropdown" />
+
+## Dark dropdowns
+
+Opt into darker dropdowns to match a dark navbar or custom style by set `dark` property. No changes are required to the dropdown items.
+
+<ExampleSnippet2 component="DropdownDarkExample" componentName="React Dropdown" />
+
+And putting it to use in a navbar:
+
+<ExampleSnippet2 component="DropdownDark2Example" componentName="React Dropdown" />
+
+
+## Directions
+
+<Callout color="info" title="RTL">
+ Directions are mirrored when using CoreUI in RTL, meaning `.dropstart` will appear on the right side.
+</Callout>
+
+### Centered
+
+Make the dropdown menu centered below the toggle by adding `direction="center"` to the `<CDropdown>` component.
+
+<ExampleSnippet2 component="DropdownCenteredExample" componentName="React Dropdown" />
+
+### Dropup
+
+Trigger dropdown menus above elements by adding `direction="dropup"` to the `<CDropdown>` component.
+
+<ExampleSnippet2 component="DropdownDropupExample" componentName="React Dropdown" />
+
+### Dropup centered
+
+Make the dropup menu centered above the toggle by adding `direction="dropup-center"` to the `<CDropdown>` component.
+
+<ExampleSnippet2 component="DropdownDropupCenteredExample" componentName="React Dropdown" />
+
+### Dropend
+
+Trigger dropdown menus at the right of the elements by adding `direction="dropend"` to the `<CDropdown>` component.
+
+<ExampleSnippet2 component="DropdownDropendExample" componentName="React Dropdown" />
+
+### Dropstart
+
+Trigger dropdown menus at the left of the elements by adding `direction="dropstart"` to the `<CDropdown>` component.
+
+<ExampleSnippet2 component="DropdownDropstartExample" componentName="React Dropdown" />
+
+## Menu items
+
+Historically dropdown menu contents _had_ to be links, but that's no longer the case with v4. Now you can optionally use `<button>` elements in your dropdowns instead of just `<a>`s.
+
+<ExampleSnippet2 component="DropdownMenuItemsExample" componentName="React Dropdown" />
+
+You can also create non-interactive dropdown items with `<CDropdownItemPlain>`.
+
+<ExampleSnippet2 component="DropdownMenuItems2Example" componentName="React Dropdown" />
+
+### Active
+
+Set boolean property `active` to **style item as active**.
+
+In the following example we use `div` instead of `<CDropdownMenu>` to show `<CDropdownMenu>` content.
+
+<ExampleSnippet2 component="DropdownMenuItemsActiveExample" componentName="React Dropdown" />
+
+### Disabled
+
+Add `disabled` boolean property to items in the dropdown to **style them as disabled**.
+
+In the following example we use `div` instead of `<CDropdownMenu>` to show `<CDropdownMenu>` content.
+
+<ExampleSnippet2 component="DropdownMenuItemsDisabledExample" componentName="React Dropdown" />
+
+## Menu alignment
+
+By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `aligment="end"` to right align the dropdown menu.
+
+<Callout color="info">
+ <strong>Heads up!</strong> Dropdowns are positioned thanks to Popper.
+</Callout>
+
+<ExampleSnippet2 component="DropdownMenuAlignmentExample" componentName="React Dropdown" />
+
+### Responsive alignment
+
+If you use responsive alignment, dynamic positioning is disabled.
+
+To align **right** the dropdown menu with the given breakpoint or larger, add `aligment="xs|sm|md|lg|xl|xxl: end"`.
+
+<ExampleSnippet2 component="DropdownResponsiveAlignmentExample" componentName="React Dropdown" />
+
+To align **left** the dropdown menu with the given breakpoint or larger, add `aligment="xs|sm|md|lg|xl|xxl: start"`.
+
+<ExampleSnippet2 component="DropdownResponsiveAlignment2Example" componentName="React Dropdown" />
+
+
+## Menu content
+
+### Headers
+
+Add a header to label sections of actions in any dropdown menu.
+
+In the following example we use `div` instead of `<CDropdownMenu>` to show `<CDropdownMenu>` content.
+
+<ExampleSnippet2 component="DropdownMenuContentHeadersExample" componentName="React Dropdown" />
+
+### Dividers
+
+Separate groups of related menu items with a divider.
+
+In the following example we use `div` instead of `<CDropdownMenu>` to show `<CDropdownMenu>` content.
+
+<ExampleSnippet2 component="DropdownMenuContentDividersExample" componentName="React Dropdown" />
+
+### Text
+
+Place any freeform text within a dropdown menu with text. Note that you'll likely need additional sizing styles to constrain the menu width.
+
+<ExampleSnippet2 component="DropdownMenuContentTextExample" componentName="React Dropdown" />
+
+### Forms
+
+Put a form within a dropdown menu, or make it into a dropdown menu.
+
+<ExampleSnippet2 component="DropdownMenuContentFormsExample" componentName="React Dropdown" />
+
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [<CDropdown />](./api/#cdropdown)
+- [<CDropdownDivider />](./api/#cdropdowndivider)
+- [<CDropdownHeader />](./api/#cdropdownheader)
+- [<CDropdownItem />](./api/#cdropdownitem)
+- [<CDropdownItemPlain />](./api/#cdropdownitemplain)
+- [<CDropdownMenu />](./api/#cdropdownmenu)
+- [<CDropdownToggle />](./api/#cdropdowntoggle)
diff --git a/packages/docs/content/components/dropdown/styling.mdx b/packages/docs/content/components/dropdown/styling.mdx
new file mode 100644
index 00000000..41d65e0d
--- /dev/null
+++ b/packages/docs/content/components/dropdown/styling.mdx
@@ -0,0 +1,50 @@
+---
+title: React Dropdown Component Styling
+name: Dropdown Styling
+description: Learn how to customize the React Dropdown component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/dropdown/
+---
+
+{/* ### CSS class names
+
+React Dropdown comes with built-in class names that make styling super simple. Here’s a quick rundown of what you can use:
+
+<ClassNamesDocs
+ files={[
+ 'components/dropdown/CDropdown.tsx',
+ ]}
+/> */}
+
+### CSS variables
+
+React Button supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.
+
+<ScssDocs file="_dropdown.scss" capture="dropdown-css-vars"/>
+
+Customization through CSS variables can be seen on the `.dropdown-menu-dark` class where we override specific values without adding duplicate CSS selectors.
+
+<ScssDocs file="_dropdown.scss" capture="dropdown-dark-css-vars"/>
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+ '--cui-dropdown-color': '#777',
+ '--cui-dropdown-bg': '#efefef',
+}
+
+return <CDropdown style={customVars}>{/* Dropdown content */}</CDropdown>
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="dropdown-variables"/>
+
+Variables for the dark dropdown:
+
+<ScssDocs file="_variables.scss" capture="dropdown-dark-variables"/>
+
+Variables for the CSS-based carets that indicate a dropdown's interactivity:
+
+<ScssDocs file="_variables.scss" capture="caret-variables"/>
+
diff --git a/packages/docs/content/components/image.mdx b/packages/docs/content/components/image.mdx
deleted file mode 100644
index 6831409b..00000000
--- a/packages/docs/content/components/image.mdx
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: React Image Component
-name: Image
-description: React image component with responsive behavior (so it's never become larger than their parent element) and special styles.
-menu: Components
-route: /components/image
-other_frameworks: image
----
-
-import { CImage } from '@coreui/react/src/index'
-
-import ReactImg from './../assets/images/react.jpg'
-import React400Img from './../assets/images/react400.jpg'
-
-## Responsive images
-
-Images in CoreUI for React.js are made responsive with `fluid` property. This applies `max-width: 100%;` and `height: auto;` to the image so that it scales with the parent element.
-
-```jsx preview
-<CImage fluid src={ReactImg} />
-```
-
-## Image thumbnails
-
-In addition to our [border-radius utilities](https://coreui.io/docs/utilities/borders), you can use prop`thumbnail` to give an image a rounded 1px border appearance.
-
-```jsx preview
-<CImage rounded thumbnail src={React400Img} width={200} height={200} />
-```
-
-## Aligning images
-
-Align images with the `align` property.
-
-```jsx preview
-<div className="clearfix">
- <CImage align="start" rounded src={React400Img} width={200} height={200} />
- <CImage align="end" rounded src={React400Img} width={200} height={200} />
-</div>
-```
-
-```jsx preview
-<div className="clearfix">
- <CImage align="center" rounded src={React400Img} width={200} height={200} />
-</div>
-```
-
-```jsx preview
-<div className="text-center">
- <CImage rounded src={React400Img} width={200} height={200} />
-</div>
-```
-
-## API
-
-### CImage
-
-`markdown:CImage.api.mdx`
diff --git a/packages/docs/content/components/image/api.mdx b/packages/docs/content/components/image/api.mdx
new file mode 100644
index 00000000..816292ef
--- /dev/null
+++ b/packages/docs/content/components/image/api.mdx
@@ -0,0 +1,12 @@
+---
+title: React Image Component API
+name: Image API
+description: Explore the API reference for the React Image component and discover how to effectively utilize its props for customization.
+route: /components/image/
+---
+
+import CImageAPI from '../../api/CImage.api.mdx'
+
+## CImage
+
+<CImageAPI />
diff --git a/packages/docs/content/components/image/examples/ImageAligning2Example.tsx b/packages/docs/content/components/image/examples/ImageAligning2Example.tsx
new file mode 100644
index 00000000..e0d20a06
--- /dev/null
+++ b/packages/docs/content/components/image/examples/ImageAligning2Example.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CImage } from '@coreui/react'
+
+import React400Img from './../../../assets/images/react400.jpg'
+
+export const ImageAligning2Example = () => {
+ return (
+ <div className="clearfix">
+ <CImage align="center" rounded src={React400Img} width={200} height={200} />
+ </div>
+ )
+}
diff --git a/packages/docs/content/components/image/examples/ImageAligning3Example.tsx b/packages/docs/content/components/image/examples/ImageAligning3Example.tsx
new file mode 100644
index 00000000..18800504
--- /dev/null
+++ b/packages/docs/content/components/image/examples/ImageAligning3Example.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CImage } from '@coreui/react'
+
+import React400Img from './../../../assets/images/react400.jpg'
+
+export const ImageAligning3Example = () => {
+ return (
+ <div className="text-center">
+ <CImage rounded src={React400Img} width={200} height={200} />
+ </div>
+ )
+}
diff --git a/packages/docs/content/components/image/examples/ImageAligningExample.tsx b/packages/docs/content/components/image/examples/ImageAligningExample.tsx
new file mode 100644
index 00000000..4c8cd186
--- /dev/null
+++ b/packages/docs/content/components/image/examples/ImageAligningExample.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { CImage } from '@coreui/react'
+
+import React400Img from './../../../assets/images/react400.jpg'
+
+export const ImageAligningExample = () => {
+ return (
+ <div className="clearfix">
+ <CImage align="start" rounded src={React400Img} width={200} height={200} />
+ <CImage align="end" rounded src={React400Img} width={200} height={200} />
+ </div>
+ )
+}
diff --git a/packages/docs/content/components/image/examples/ImageResponsiveExample.tsx b/packages/docs/content/components/image/examples/ImageResponsiveExample.tsx
new file mode 100644
index 00000000..6733b748
--- /dev/null
+++ b/packages/docs/content/components/image/examples/ImageResponsiveExample.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import { CImage } from '@coreui/react'
+
+import ReactImg from './../../../assets/images/react.jpg'
+
+export const ImageResponsiveExample = () => {
+ return <CImage fluid src={ReactImg} />
+}
diff --git a/packages/docs/content/components/image/examples/ImageThumbnailExample.tsx b/packages/docs/content/components/image/examples/ImageThumbnailExample.tsx
new file mode 100644
index 00000000..a25e3270
--- /dev/null
+++ b/packages/docs/content/components/image/examples/ImageThumbnailExample.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import { CImage } from '@coreui/react'
+
+import React400Img from './../../../assets/images/react400.jpg'
+
+export const ImageThumbnailExample = () => {
+ return <CImage rounded thumbnail src={React400Img} width={200} height={200} />
+}
diff --git a/packages/docs/content/components/image/index.mdx b/packages/docs/content/components/image/index.mdx
new file mode 100644
index 00000000..a8a2d6c5
--- /dev/null
+++ b/packages/docs/content/components/image/index.mdx
@@ -0,0 +1,35 @@
+---
+title: React Image Component
+name: Image
+description: React image component with responsive behavior (so it's never become larger than their parent element) and special styles.
+route: /components/image/
+other_frameworks: image
+---
+
+## Responsive images
+
+Images in CoreUI for React.js are made responsive with `fluid` property. This applies `max-width: 100%;` and `height: auto;` to the image so that it scales with the parent element.
+
+<ExampleSnippet2 component="ImageResponsiveExample" componentName="React Image" />
+
+## Image thumbnails
+
+In addition to our [border-radius utilities](https://coreui.io/docs/utilities/borders), you can use prop`thumbnail` to give an image a rounded 1px border appearance.
+
+<ExampleSnippet2 component="ImageThumbnailExample" componentName="React Image" />
+
+## Aligning images
+
+Align images with the `align` property.
+
+<ExampleSnippet2 component="ImageAligningExample" componentName="React Image" />
+
+<ExampleSnippet2 component="ImageAligning2Example" componentName="React Image" />
+
+<ExampleSnippet2 component="ImageAligning3Example" componentName="React Image" />
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [<CImage />](./api/#cimage)
\ No newline at end of file
diff --git a/packages/docs/content/components/list-group.mdx b/packages/docs/content/components/list-group.mdx
deleted file mode 100644
index 9bd8593e..00000000
--- a/packages/docs/content/components/list-group.mdx
+++ /dev/null
@@ -1,345 +0,0 @@
----
-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.
-menu: Components
-route: /components/list-group
-other_frameworks: list-group
----
-
-import {
- CBadge,
- CFormCheck,
- CListGroup,
- CListGroupItem,
- CLink,
-} from '@coreui/react/src/index'
-
-## Basic example
-
-The default list group is an unordered list with items and the proper CSS classes. Build upon it with the options that follow, or with your CSS as required.
-
-```jsx preview
-<CListGroup>
- <CListGroupItem>Cras justo odio</CListGroupItem>
- <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
- <CListGroupItem>Morbi leo risus</CListGroupItem>
- <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
- <CListGroupItem>Vestibulum at eros</CListGroupItem>
-</CListGroup>
-```
-
-## Active items
-
-Add `active` boolean property to a `<CListGroupItem>` to show the current active selection.
-
-```jsx preview
-<CListGroup>
- <CListGroupItem active>Cras justo odio</CListGroupItem>
- <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
- <CListGroupItem>Morbi leo risus</CListGroupItem>
- <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
- <CListGroupItem>Vestibulum at eros</CListGroupItem>
-</CListGroup>
-```
-
-## Disabled items
-
-Add `disabled` boolean property to a `<CListGroupItem>` to make it appear disabled.
-
-```jsx preview
-<CListGroup>
- <CListGroupItem disabled>Cras justo odio</CListGroupItem>
- <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
- <CListGroupItem>Morbi leo risus</CListGroupItem>
- <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
- <CListGroupItem>Vestibulum at eros</CListGroupItem>
-</CListGroup>
-```
-
-## Links and buttons
-
-Use `<a>`s or `<button>`s to create _actionable_ list group items with hover, disabled, and active states by adding `as="a|button"`. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like `<li>`s or `<div>`s) don't provide a click or tap affordance.
-
-```jsx preview
-<CListGroup>
- <CListGroupItem as="a" href="#" active>
- Cras justo odio
- </CListGroupItem>
- <CListGroupItem as="a" href="#">
- Dapibus ac facilisis in
- </CListGroupItem>
- <CListGroupItem as="a" href="#">
- Morbi leo risus
- </CListGroupItem>
- <CListGroupItem as="a" href="#">
- Porta ac consectetur ac
- </CListGroupItem>
- <CListGroupItem as="a" href="#" disabled>
- Vestibulum at eros
- </CListGroupItem>
-</CListGroup>
-```
-
-```jsx preview
-<CListGroup>
- <CListGroupItem as="button" active>
- Cras justo odio
- </CListGroupItem>
- <CListGroupItem as="button">Dapibus ac facilisis in</CListGroupItem>
- <CListGroupItem as="button">Morbi leo risus</CListGroupItem>
- <CListGroupItem as="button">Porta ac consectetur ac</CListGroupItem>
- <CListGroupItem as="button" disabled>
- Vestibulum at eros
- </CListGroupItem>
-</CListGroup>
-```
-
-## Flush
-
-Add `flush` boolean property to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).
-
-```jsx preview
-<CListGroup flush>
- <CListGroupItem>Cras justo odio</CListGroupItem>
- <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
- <CListGroupItem>Morbi leo risus</CListGroupItem>
- <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
- <CListGroupItem>Vestibulum at eros</CListGroupItem>
-</CListGroup>
-```
-
-## Horizontal
-
-Add `layout="horizontal"` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.layout="horizontal-{sm|md|lg|xl|xxl}"` to make a list group horizontal starting at that breakpoint's `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.**
-
-<Example>
- <>
- {['', '-sm', '-md', '-lg', '-xl', '-xxl'].map((breakpoint, index) => (
- <CListGroup className="mb-2" layout={`horizontal${breakpoint}`} key={index}>
- <CListGroupItem>Cras justo odio</CListGroupItem>
- <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
- <CListGroupItem>Morbi leo risus</CListGroupItem>
- </CListGroup>
- ))}
- </>
-</Example>
-
-```jsx
-<>
- {['', '-sm', '-md', '-lg', '-xl', '-xxl'].map((breakpoint, index) => (
- <CListGroup className="mb-2" layout={`horizontal${breakpoint}`} key={index}>
- <CListGroupItem>Cras justo odio</CListGroupItem>
- <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
- <CListGroupItem>Morbi leo risus</CListGroupItem>
- </CListGroup>
- ))}
-</>
-```
-
-## Contextual classes
-
-Use contextual classes to style list items with a stateful background and color.
-
-<Example>
- <CListGroup>
- <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
- {['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'].map(
- (color, index) => (
- <CListGroupItem color={color} key={index}>
- A simple {color} list group item
- </CListGroupItem>
- ),
- )}
- </CListGroup>
-</Example>
-
-```jsx
-<CListGroup>
- <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
- {['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'].map(
- (color, index) => (
- <CListGroupItem color={color} key={index}>
- A simple {color} list group item
- </CListGroupItem>
- ),
- )}
-</CListGroup>
-```
-
-Contextual classes also work with `<a>`s or `<button>`s. Note the addition of the hover styles here not present in the previous example. Also supported is the `active` state; apply it to indicate an active selection on a contextual list group item.
-
-<Example>
- <CListGroup>
- <CListGroupItem as="a" href="#">
- Dapibus ac facilisis in
- </CListGroupItem>
- {['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'].map(
- (color, index) => (
- <CListGroupItem as="a" href="#" color={color} key={index}>
- A simple {color} list group item
- </CListGroupItem>
- ),
- )}
- </CListGroup>
-</Example>
-
-```jsx
-<CListGroup>
- <CListGroupItem as="a" href="#">
- Dapibus ac facilisis in
- </CListGroupItem>
- {['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'].map(
- (color, index) => (
- <CListGroupItem as="a" href="#" color={color} key={index}>
- A simple {color} list group item
- </CListGroupItem>
- ),
- )}
-</CListGroup>
-```
-
-<Callout color="info" title="Conveying meaning to assistive technologies">
- Using color to add meaning only provides a visual indication, which will not be conveyed to
- users of assistive technologies – such as screen readers. Ensure that information denoted by the
- color is either obvious from the content itself (e.g. the visible text), or is included through
- alternative means, such as additional text hidden with the `.visually-hidden` class.
-</Callout>
-
-## With badges
-
-Add badges to any list group item to show unread counts, activity, and more.
-
-```jsx preview
-<CListGroup>
- <CListGroupItem className="d-flex justify-content-between align-items-center">
- Cras justo odio
- <CBadge color="primary" shape="rounded-pill">
- 14
- </CBadge>
- </CListGroupItem>
- <CListGroupItem className="d-flex justify-content-between align-items-center">
- Dapibus ac facilisis in
- <CBadge color="primary" shape="rounded-pill">
- 2
- </CBadge>
- </CListGroupItem>
- <CListGroupItem className="d-flex justify-content-between align-items-center">
- Morbi leo risus
- <CBadge color="primary" shape="rounded-pill">
- 1
- </CBadge>
- </CListGroupItem>
-</CListGroup>
-```
-
-## Custom content
-
-Add nearly any HTML within, even for linked list groups like the one below, with the help of [flexbox utilities](https://coreui.io/docs/utilities/flex/).
-
-```jsx preview
-<CListGroup>
- <CListGroupItem as="a" href="#" active>
- <div className="d-flex w-100 justify-content-between">
- <h5 className="mb-1">List group item heading</h5>
- <small>3 days ago</small>
- </div>
- <p className="mb-1">
- Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
- </p>
- <small>Donec id elit non mi porta.</small>
- </CListGroupItem>
- <CListGroupItem as="a" href="#">
- <div className="d-flex w-100 justify-content-between">
- <h5 className="mb-1">List group item heading</h5>
- <small className="text-body-secondary">3 days ago</small>
- </div>
- <p className="mb-1">
- Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
- </p>
- <small className="text-body-secondary">Donec id elit non mi porta.</small>
- </CListGroupItem>
- <CListGroupItem as="a" href="#">
- <div className="d-flex w-100 justify-content-between">
- <h5 className="mb-1">List group item heading</h5>
- <small className="text-body-secondary">3 days ago</small>
- </div>
- <p className="mb-1">
- Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
- </p>
- <small className="text-body-secondary">Donec id elit non mi porta.</small>
- </CListGroupItem>
-</CListGroup>
-```
-
-## Checkboxes and radios
-
-Place CoreUI's checkboxes and radios within list group items and customize as needed.
-
-```jsx preview
-<CListGroup>
- <CListGroupItem>
- <CFormCheck label="Cras justo odio" />
- </CListGroupItem>
- <CListGroupItem>
- <CFormCheck label="Dapibus ac facilisis in" defaultChecked />
- </CListGroupItem>
- <CListGroupItem>
- <CFormCheck label="Morbi leo risus" defaultChecked />
- </CListGroupItem>
- <CListGroupItem>
- <CFormCheck label="orta ac consectetur ac" />
- </CListGroupItem>
- <CListGroupItem>
- <CFormCheck label="Vestibulum at eros" />
- </CListGroupItem>
-</CListGroup>
-```
-
-And if you want `<label>`s as the `.list-group-item` for large hit areas, you can do that, too.
-
-```jsx preview
-<CListGroup>
- <CListGroupItem>
- <CFormCheck hitArea="full" label="First checkbox" value="" id="firstCheckboxStretched" />
- </CListGroupItem>
- <CListGroupItem>
- <CFormCheck hitArea="full" label="Second checkbox" value="" id="secondCheckboxStretched" defaultChecked/>
- </CListGroupItem>
- <CListGroupItem>
- <CFormCheck hitArea="full" label="Third checkbox" value="" id="thirdCheckboxStretched"/>
- </CListGroupItem>
-</CListGroup>
-```
-
-## Customizing
-
-### CSS variables
-
-React list groups use local CSS variables on `.list-group` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
-
-<ScssDocs file="_list-group.scss" capture="list-group-css-vars"/>
-
-#### How to use CSS variables
-
-```jsx
-const vars = {
- '--my-css-var': 10,
- '--my-another-css-var': "red"
-}
-return <CListGroup style={vars}>...</CListGroup>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="list-group-variables"/>
-
-## API
-
-### CListGroup
-
-`markdown:CListGroup.api.mdx`
-
-### CListGroupItem
-
-`markdown:CListGroupItem.api.mdx`
diff --git a/packages/docs/content/components/list-group/api.mdx b/packages/docs/content/components/list-group/api.mdx
new file mode 100644
index 00000000..ba8b36e6
--- /dev/null
+++ b/packages/docs/content/components/list-group/api.mdx
@@ -0,0 +1,17 @@
+---
+title: React List Group Component API
+name: List Group API
+description: Explore the API reference for the React List Group component and discover how to effectively utilize its props for customization.
+route: /components/list-group/
+---
+
+import CListGroupAPI from '../../api/CListGroup.api.mdx'
+import CListGroupItemAPI from '../../api/CListGroupItem.api.mdx'
+
+## CListGroup
+
+<CListGroupAPI />
+
+## CListGroupItem
+
+<CListGroupItemAPI />
diff --git a/packages/docs/content/components/list-group/examples/ListGroupActiveItemsExample.tsx b/packages/docs/content/components/list-group/examples/ListGroupActiveItemsExample.tsx
new file mode 100644
index 00000000..75ec1e42
--- /dev/null
+++ b/packages/docs/content/components/list-group/examples/ListGroupActiveItemsExample.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { CListGroup, CListGroupItem } from '@coreui/react'
+
+export const ListGroupActiveItemsExample = () => {
+ return (
+ <CListGroup>
+ <CListGroupItem active>Cras justo odio</CListGroupItem>
+ <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
+ <CListGroupItem>Morbi leo risus</CListGroupItem>
+ <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
+ <CListGroupItem>Vestibulum at eros</CListGroupItem>
+ </CListGroup>
+ )
+}
diff --git a/packages/docs/content/components/list-group/examples/ListGroupCheckboxesAndRadios2Example.tsx b/packages/docs/content/components/list-group/examples/ListGroupCheckboxesAndRadios2Example.tsx
new file mode 100644
index 00000000..065f4d85
--- /dev/null
+++ b/packages/docs/content/components/list-group/examples/ListGroupCheckboxesAndRadios2Example.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { CFormCheck, CListGroup, CListGroupItem } from '@coreui/react'
+
+export const ListGroupCheckboxesAndRadios2Example = () => {
+ return (
+ <CListGroup>
+ <CListGroupItem>
+ <CFormCheck type="radio" name="reactListGroupRadio" label="First React.js radio" />
+ </CListGroupItem>
+ <CListGroupItem>
+ <CFormCheck type="radio" name="reactListGroupRadio" label="Second React.js radio" />
+ </CListGroupItem>
+ <CListGroupItem>
+ <CFormCheck type="radio" name="reactListGroupRadio" label="Third React.js radio" />
+ </CListGroupItem>
+ </CListGroup>
+ )
+}
diff --git a/packages/docs/content/components/list-group/examples/ListGroupCheckboxesAndRadios3Example.tsx b/packages/docs/content/components/list-group/examples/ListGroupCheckboxesAndRadios3Example.tsx
new file mode 100644
index 00000000..6fde28ae
--- /dev/null
+++ b/packages/docs/content/components/list-group/examples/ListGroupCheckboxesAndRadios3Example.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { CFormCheck, CListGroup, CListGroupItem } from '@coreui/react'
+
+export const ListGroupCheckboxesAndRadios3Example = () => {
+ return (
+ <CListGroup>
+ <CListGroupItem>
+ <CFormCheck hitArea="full" label="First checkbox" value="" id="firstCheckboxStretched" />
+ </CListGroupItem>
+ <CListGroupItem>
+ <CFormCheck hitArea="full" label="Second checkbox" value="" id="secondCheckboxStretched" defaultChecked/>
+ </CListGroupItem>
+ <CListGroupItem>
+ <CFormCheck hitArea="full" label="Third checkbox" value="" id="thirdCheckboxStretched"/>
+ </CListGroupItem>
+ </CListGroup>
+ )
+}
diff --git a/packages/docs/content/components/list-group/examples/ListGroupCheckboxesAndRadiosExample.tsx b/packages/docs/content/components/list-group/examples/ListGroupCheckboxesAndRadiosExample.tsx
new file mode 100644
index 00000000..6e047381
--- /dev/null
+++ b/packages/docs/content/components/list-group/examples/ListGroupCheckboxesAndRadiosExample.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import { CFormCheck, CListGroup, CListGroupItem } from '@coreui/react'
+
+export const ListGroupCheckboxesAndRadiosExample = () => {
+ return (
+ <CListGroup>
+ <CListGroupItem>
+ <CFormCheck label="Cras justo odio" />
+ </CListGroupItem>
+ <CListGroupItem>
+ <CFormCheck label="Dapibus ac facilisis in" defaultChecked />
+ </CListGroupItem>
+ <CListGroupItem>
+ <CFormCheck label="Morbi leo risus" defaultChecked />
+ </CListGroupItem>
+ <CListGroupItem>
+ <CFormCheck label="orta ac consectetur ac" />
+ </CListGroupItem>
+ <CListGroupItem>
+ <CFormCheck label="Vestibulum at eros" />
+ </CListGroupItem>
+ </CListGroup>
+ )
+}
diff --git a/packages/docs/content/components/list-group/examples/ListGroupContextualClasses2Example.tsx b/packages/docs/content/components/list-group/examples/ListGroupContextualClasses2Example.tsx
new file mode 100644
index 00000000..724b3f81
--- /dev/null
+++ b/packages/docs/content/components/list-group/examples/ListGroupContextualClasses2Example.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { CListGroup, CListGroupItem } from '@coreui/react'
+
+export const ListGroupContextualClasses2Example = () => {
+ const colors = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']
+ return (
+ <CListGroup>
+ <CListGroupItem as="a" href="#">
+ Dapibus ac facilisis in
+ </CListGroupItem>
+ {colors.map((color, index) => (
+ <CListGroupItem as="a" href="#" color={color} key={index}>
+ A simple {color} list group item
+ </CListGroupItem>
+ ))}
+ </CListGroup>
+ )
+}
diff --git a/packages/docs/content/components/list-group/examples/ListGroupContextualClassesExample.tsx b/packages/docs/content/components/list-group/examples/ListGroupContextualClassesExample.tsx
new file mode 100644
index 00000000..d84f860e
--- /dev/null
+++ b/packages/docs/content/components/list-group/examples/ListGroupContextualClassesExample.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { CListGroup, CListGroupItem } from '@coreui/react'
+
+export const ListGroupContextualClassesExample = () => {
+ const colors = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']
+ return (
+ <CListGroup>
+ <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
+ {colors.map((color, index) => (
+ <CListGroupItem color={color} key={index}>
+ A simple {color} list group item
+ </CListGroupItem>
+ ))}
+ </CListGroup>
+ )
+}
diff --git a/packages/docs/content/components/list-group/examples/ListGroupCustomContentExample.tsx b/packages/docs/content/components/list-group/examples/ListGroupCustomContentExample.tsx
new file mode 100644
index 00000000..cfd1e7c7
--- /dev/null
+++ b/packages/docs/content/components/list-group/examples/ListGroupCustomContentExample.tsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import { CListGroup, CListGroupItem } from '@coreui/react'
+
+export const ListGroupCustomContentExample = () => {
+ return (
+ <CListGroup>
+ <CListGroupItem as="a" href="#" active>
+ <div className="d-flex w-100 justify-content-between">
+ <h5 className="mb-1">List group item heading</h5>
+ <small>3 days ago</small>
+ </div>
+ <p className="mb-1">
+ Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius
+ blandit.
+ </p>
+ <small>Donec id elit non mi porta.</small>
+ </CListGroupItem>
+ <CListGroupItem as="a" href="#">
+ <div className="d-flex w-100 justify-content-between">
+ <h5 className="mb-1">List group item heading</h5>
+ <small className="text-body-secondary">3 days ago</small>
+ </div>
+ <p className="mb-1">
+ Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius
+ blandit.
+ </p>
+ <small className="text-body-secondary">Donec id elit non mi porta.</small>
+ </CListGroupItem>
+ <CListGroupItem as="a" href="#">
+ <div className="d-flex w-100 justify-content-between">
+ <h5 className="mb-1">List group item heading</h5>
+ <small className="text-body-secondary">3 days ago</small>
+ </div>
+ <p className="mb-1">
+ Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius
+ blandit.
+ </p>
+ <small className="text-body-secondary">Donec id elit non mi porta.</small>
+ </CListGroupItem>
+ </CListGroup>
+ )
+}
diff --git a/packages/docs/content/components/list-group/examples/ListGroupDisabledItemsExample.tsx b/packages/docs/content/components/list-group/examples/ListGroupDisabledItemsExample.tsx
new file mode 100644
index 00000000..7b1ecfef
--- /dev/null
+++ b/packages/docs/content/components/list-group/examples/ListGroupDisabledItemsExample.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { CListGroup, CListGroupItem } from '@coreui/react'
+
+export const ListGroupDisabledItemsExample = () => {
+ return (
+ <CListGroup>
+ <CListGroupItem disabled>Cras justo odio</CListGroupItem>
+ <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
+ <CListGroupItem>Morbi leo risus</CListGroupItem>
+ <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
+ <CListGroupItem>Vestibulum at eros</CListGroupItem>
+ </CListGroup>
+ )
+}
diff --git a/packages/docs/content/components/list-group/examples/ListGroupExample.tsx b/packages/docs/content/components/list-group/examples/ListGroupExample.tsx
new file mode 100644
index 00000000..3ee97cb9
--- /dev/null
+++ b/packages/docs/content/components/list-group/examples/ListGroupExample.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { CListGroup, CListGroupItem } from '@coreui/react'
+
+export const ListGroupExample = () => {
+ return (
+ <CListGroup>
+ <CListGroupItem>Cras justo odio</CListGroupItem>
+ <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
+ <CListGroupItem>Morbi leo risus</CListGroupItem>
+ <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
+ <CListGroupItem>Vestibulum at eros</CListGroupItem>
+ </CListGroup>
+ )
+}
diff --git a/packages/docs/content/components/list-group/examples/ListGroupFlushExample.tsx b/packages/docs/content/components/list-group/examples/ListGroupFlushExample.tsx
new file mode 100644
index 00000000..dbb5a280
--- /dev/null
+++ b/packages/docs/content/components/list-group/examples/ListGroupFlushExample.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { CListGroup, CListGroupItem } from '@coreui/react'
+
+export const ListGroupFlushExample = () => {
+ return (
+ <CListGroup flush>
+ <CListGroupItem>Cras justo odio</CListGroupItem>
+ <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
+ <CListGroupItem>Morbi leo risus</CListGroupItem>
+ <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
+ <CListGroupItem>Vestibulum at eros</CListGroupItem>
+ </CListGroup>
+ )
+}
diff --git a/packages/docs/content/components/list-group/examples/ListGroupHorizontalExample.jsx b/packages/docs/content/components/list-group/examples/ListGroupHorizontalExample.jsx
new file mode 100644
index 00000000..552e1aab
--- /dev/null
+++ b/packages/docs/content/components/list-group/examples/ListGroupHorizontalExample.jsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import { CListGroup, CListGroupItem } from '@coreui/react'
+
+export const ListGroupHorizontalExample = () => {
+ const breakpoints = [
+ 'horizontal',
+ 'horizontal-sm',
+ 'horizontal-md',
+ 'horizontal-lg',
+ 'horizontal-xl',
+ 'horizontal-xxl',
+ ]
+ return (
+ <>
+ {breakpoints.map((breakpoint, index) => (
+ <CListGroup className="mb-2" layout={breakpoint} key={index}>
+ <CListGroupItem>Cras justo odio</CListGroupItem>
+ <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
+ <CListGroupItem>Morbi leo risus</CListGroupItem>
+ </CListGroup>
+ ))}
+ </>
+ )
+}
diff --git a/packages/docs/content/components/list-group/examples/ListGroupHorizontalExample.tsx b/packages/docs/content/components/list-group/examples/ListGroupHorizontalExample.tsx
new file mode 100644
index 00000000..f28516ed
--- /dev/null
+++ b/packages/docs/content/components/list-group/examples/ListGroupHorizontalExample.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import { CListGroup, CListGroupItem } from '@coreui/react'
+
+export const ListGroupHorizontalExample = () => {
+ const breakpoints: Array<
+ | 'horizontal'
+ | 'horizontal-sm'
+ | 'horizontal-md'
+ | 'horizontal-lg'
+ | 'horizontal-xl'
+ | 'horizontal-xxl'
+ > = [
+ 'horizontal',
+ 'horizontal-sm',
+ 'horizontal-md',
+ 'horizontal-lg',
+ 'horizontal-xl',
+ 'horizontal-xxl',
+ ]
+ return (
+ <>
+ {breakpoints.map((breakpoint, index) => (
+ <CListGroup className="mb-2" layout={breakpoint} key={index}>
+ <CListGroupItem>Cras justo odio</CListGroupItem>
+ <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
+ <CListGroupItem>Morbi leo risus</CListGroupItem>
+ </CListGroup>
+ ))}
+ </>
+ )
+}
diff --git a/packages/docs/content/components/list-group/examples/ListGroupLinksAndButtons2Example.tsx b/packages/docs/content/components/list-group/examples/ListGroupLinksAndButtons2Example.tsx
new file mode 100644
index 00000000..2c56beb6
--- /dev/null
+++ b/packages/docs/content/components/list-group/examples/ListGroupLinksAndButtons2Example.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { CListGroup, CListGroupItem } from '@coreui/react'
+
+export const ListGroupLinksAndButtons2Example = () => {
+ return (
+ <CListGroup>
+ <CListGroupItem as="button" active>Cras justo odio</CListGroupItem>
+ <CListGroupItem as="button">Dapibus ac facilisis in</CListGroupItem>
+ <CListGroupItem as="button">Morbi leo risus</CListGroupItem>
+ <CListGroupItem as="button">Porta ac consectetur ac</CListGroupItem>
+ <CListGroupItem as="button" disabled>Vestibulum at eros</CListGroupItem>
+ </CListGroup>
+ )
+}
diff --git a/packages/docs/content/components/list-group/examples/ListGroupLinksAndButtonsExample.tsx b/packages/docs/content/components/list-group/examples/ListGroupLinksAndButtonsExample.tsx
new file mode 100644
index 00000000..7875801e
--- /dev/null
+++ b/packages/docs/content/components/list-group/examples/ListGroupLinksAndButtonsExample.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { CListGroup, CListGroupItem } from '@coreui/react'
+
+export const ListGroupLinksAndButtonsExample = () => {
+ return (
+ <CListGroup>
+ <CListGroupItem as="a" href="#" active>Cras justo odio</CListGroupItem>
+ <CListGroupItem as="a" href="#">Dapibus ac facilisis in</CListGroupItem>
+ <CListGroupItem as="a" href="#"> Morbi leo risus</CListGroupItem>
+ <CListGroupItem as="a" href="#">Porta ac consectetur ac</CListGroupItem>
+ <CListGroupItem as="a" href="#" disabled>Vestibulum at eros</CListGroupItem>
+ </CListGroup>
+ )
+}
diff --git a/packages/docs/content/components/list-group/examples/ListGroupWithBadgesExample.tsx b/packages/docs/content/components/list-group/examples/ListGroupWithBadgesExample.tsx
new file mode 100644
index 00000000..16362bb8
--- /dev/null
+++ b/packages/docs/content/components/list-group/examples/ListGroupWithBadgesExample.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import { CBadge, CListGroup, CListGroupItem } from '@coreui/react'
+
+export const ListGroupWithBadgesExample = () => {
+ return (
+ <CListGroup>
+ <CListGroupItem className="d-flex justify-content-between align-items-center">
+ Cras justo odio
+ <CBadge color="primary" shape="rounded-pill">
+ 14
+ </CBadge>
+ </CListGroupItem>
+ <CListGroupItem className="d-flex justify-content-between align-items-center">
+ Dapibus ac facilisis in
+ <CBadge color="primary" shape="rounded-pill">
+ 2
+ </CBadge>
+ </CListGroupItem>
+ <CListGroupItem className="d-flex justify-content-between align-items-center">
+ Morbi leo risus
+ <CBadge color="primary" shape="rounded-pill">
+ 1
+ </CBadge>
+ </CListGroupItem>
+ </CListGroup>
+ )
+}
diff --git a/packages/docs/content/components/list-group/index.mdx b/packages/docs/content/components/list-group/index.mdx
new file mode 100644
index 00000000..f4fb0e42
--- /dev/null
+++ b/packages/docs/content/components/list-group/index.mdx
@@ -0,0 +1,93 @@
+---
+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.
+route: /components/list-group/
+other_frameworks: list-group
+---
+
+## Basic example
+
+The default list group is an unordered list with items and the proper CSS classes. Build upon it with the options that follow, or with your CSS as required.
+
+<ExampleSnippet2 component="ListGroupExample" componentName="React List Group" />
+
+## Active items
+
+Add `active` boolean property to a `<CListGroupItem>` to show the current active selection.
+
+<ExampleSnippet2 component="ListGroupActiveItemsExample" componentName="React List Group" />
+
+## Disabled items
+
+Add `disabled` boolean property to a `<CListGroupItem>` to make it appear disabled.
+
+<ExampleSnippet2 component="ListGroupDisabledItemsExample" componentName="React List Group" />
+
+## Links and buttons
+
+Use `<a>`s or `<button>`s to create _actionable_ list group items with hover, disabled, and active states by adding `as="a|button"`. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like `<li>`s or `<div>`s) don't provide a click or tap affordance.
+
+<ExampleSnippet2 component="ListGroupLinksAndButtonsExample" componentName="React List Group" />
+
+<ExampleSnippet2 component="ListGroupLinksAndButtons2Example" componentName="React List Group" />
+
+## Flush
+
+Add `flush` boolean property to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).
+
+<ExampleSnippet2 component="ListGroupFlushExample" componentName="React List Group" />
+
+## Horizontal
+
+Add `layout="horizontal"` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.layout="horizontal-{sm|md|lg|xl|xxl}"` to make a list group horizontal starting at that breakpoint's `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.**
+
+<ExampleSnippet2 component="ListGroupHorizontalExample" componentName="React List Group" />
+
+## Contextual classes
+
+Use contextual classes to style list items with a stateful background and color.
+
+<ExampleSnippet2 component="ListGroupContextualClassesExample" componentName="React List Group" />
+
+Contextual classes also work with `<a>`s or `<button>`s. Note the addition of the hover styles here not present in the previous example. Also supported is the `active` state; apply it to indicate an active selection on a contextual list group item.
+
+<ExampleSnippet2 component="ListGroupContextualClasses2Example" componentName="React List Group" />
+
+<Callout color="info" title="Conveying meaning to assistive technologies">
+ Using color to add meaning only provides a visual indication, which will not be conveyed to
+ users of assistive technologies – such as screen readers. Ensure that information denoted by the
+ color is either obvious from the content itself (e.g. the visible text), or is included through
+ alternative means, such as additional text hidden with the `.visually-hidden` class.
+</Callout>
+
+## With badges
+
+Add badges to any list group item to show unread counts, activity, and more.
+
+<ExampleSnippet2 component="ListGroupWithBadgesExample" componentName="React List Group" />
+
+## Custom content
+
+Add nearly any HTML within, even for linked list groups like the one below, with the help of [flexbox utilities](https://coreui.io/docs/utilities/flex/).
+
+<ExampleSnippet2 component="ListGroupCustomContentExample" componentName="React List Group" />
+
+## Checkboxes and radios
+
+Place CoreUI's checkboxes and radios within list group items and customize as needed.
+
+<ExampleSnippet2 component="ListGroupCheckboxesAndRadiosExample" componentName="React List Group" />
+
+<ExampleSnippet2 component="ListGroupCheckboxesAndRadios2Example" componentName="React List Group" />
+
+And if you want `<label>`s as the `.list-group-item` for large hit areas, you can do that, too.
+
+<ExampleSnippet2 component="ListGroupCheckboxesAndRadios3Example" componentName="React List Group" />
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [<CListGroup />](./api/#clistgroup)
+- [<CListGroupItem />](./api/#clistgroupitem)
diff --git a/packages/docs/content/components/list-group/styling.mdx b/packages/docs/content/components/list-group/styling.mdx
new file mode 100644
index 00000000..72db78e8
--- /dev/null
+++ b/packages/docs/content/components/list-group/styling.mdx
@@ -0,0 +1,37 @@
+---
+title: React ListGroup Component Styling
+name: ListGroup Styling
+description: Learn how to customize the React ListGroup component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/list-group/
+---
+
+{/* ### CSS class names
+
+React List Group comes with built-in class names that make styling super simple. Here’s a quick rundown of what you can use:
+
+<ClassNamesDocs
+ files={[
+ 'components/list-group/CListGroup.tsx',
+ ]}
+/> */}
+
+### CSS variables
+
+React List Group supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.
+
+<ScssDocs file="_list-group.scss" capture="list-group-css-vars"/>
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+ '--cui-list-group-color': '#ffe484',
+ '--cui-list-group-bg': '#efefef',
+}
+
+return <CListGroup style={customVars}>{/* List Group content */}</CListGroup>
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="list-group-variables"/>
diff --git a/packages/docs/content/components/modal.mdx b/packages/docs/content/components/modal.mdx
deleted file mode 100644
index 21f212d4..00000000
--- a/packages/docs/content/components/modal.mdx
+++ /dev/null
@@ -1,1375 +0,0 @@
----
-title: React Modal Component
-name: Modal
-description: React Modal component offers a lightweight, multi-purpose popup to add dialogs to yours. Learn how to customize CoreUI React modal components easily. Multiple examples and tutorial.
-menu: Components
-route: /components/modal
-other_frameworks: modal
----
-
-import { useState } from 'react'
-import {
- CButton,
- CLink,
- CModal,
- CModalBody,
- CModalFooter,
- CModalHeader,
- CModalTitle,
- CPopover,
- CTooltip,
-} from '@coreui/react/src/index'
-
-## How to use React Modal Component?
-
-### 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.
-
-<Example>
- <div className="modal position-static d-block" tabIndex="-1">
- <div className="modal-dialog">
- <div className="modal-content">
- <div className="modal-header">
- <h5 className="modal-title">React Modal title</h5>
- <button type="button" className="btn-close" aria-label="Close"></button>
- </div>
- <div className="modal-body">
- <p>React Modal body text goes here.</p>
- </div>
- <div className="modal-footer">
- <button type="button" className="btn btn-secondary">Close</button>
- <button type="button" className="btn btn-primary">Save changes</button>
- </div>
- </div>
- </div>
- </div>
-</Example>
-```jsx
-<CModal>
- <CModalHeader>
- <CModalTitle>React Modal title</CModalTitle>
- </CModalHeader>
- <CModalBody>
- <p>React Modal body text goes here.</p>
- </CModalBody>
- <CModalFooter>
- <CButton color="secondary">Close</CButton>
- <CButton color="primary">Save changes</CButton>
- </CModalFooter>
-</CModal>
-```
-
-### Live demo
-
-Toggle a working React modal component demo by clicking the button below. It will slide down and fade in from the top of the page.
-
-export const LiveDemoExample = () => {
- const [visible, setVisible] = useState(false)
- return (
- <>
- <CButton color="primary" onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
- <CModal
- visible={visible}
- onClose={() => setVisible(false)}
- aria-labelledby="LiveDemoExampleLabel"
- >
- <CModalHeader>
- <CModalTitle id="LiveDemoExampleLabel">Modal title</CModalTitle>
- </CModalHeader>
- <CModalBody>
- <p>Woohoo, you're reading this text in a modal!</p>
- </CModalBody>
- <CModalFooter>
- <CButton color="secondary" onClick={() => setVisible(false)}>
- Close
- </CButton>
- <CButton color="primary">Save changes</CButton>
- </CModalFooter>
- </CModal>
- </>
- )
-}
-
-<Example>
- <LiveDemoExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
- <>
- <CButton color="primary" onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
- <CModal
- visible={visible}
- onClose={() => setVisible(false)}
- aria-labelledby="LiveDemoExampleLabel"
- >
- <CModalHeader>
- <CModalTitle id="LiveDemoExampleLabel">Modal title</CModalTitle>
- </CModalHeader>
- <CModalBody>
- <p>Woohoo, you're reading this text in a modal!</p>
- </CModalBody>
- <CModalFooter>
- <CButton color="secondary" onClick={() => setVisible(false)}>
- Close
- </CButton>
- <CButton color="primary">Save changes</CButton>
- </CModalFooter>
- </CModal>
- </>
-)
-```
-
-### Static backdrop
-
-If you set a `backdrop` to `static`, your React modal component will behave as though the backdrop is static, meaning it will not close when clicking outside it. Click the button below to try it.
-
-export const StaticBackdropExample = () => {
- const [visible, setVisible] = useState(false)
- return (
- <>
- <CButton color="primary" onClick={() => setVisible(!visible)}>Launch static backdrop modal</CButton>
- <CModal
- backdrop="static"
- visible={visible}
- onClose={() => setVisible(false)}
- aria-labelledby="StaticBackdropExampleLabel"
- >
- <CModalHeader>
- <CModalTitle id="StaticBackdropExampleLabel">Modal title</CModalTitle>
- </CModalHeader>
- <CModalBody>
- I will not close if you click outside me. Don't even try to press escape key.
- </CModalBody>
- <CModalFooter>
- <CButton color="secondary" onClick={() => setVisible(false)}>
- Close
- </CButton>
- <CButton color="primary">Save changes</CButton>
- </CModalFooter>
- </CModal>
- </>
- )
-}
-
-<Example>
- <StaticBackdropExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
- <>
- <CButton color="primary" onClick={() => setVisible(!visible)}>Launch static backdrop modal</CButton>
- <CModal
- backdrop="static"
- visible={visible}
- onClose={() => setVisible(false)}
- aria-labelledby="StaticBackdropExampleLabel"
- >
- <CModalHeader>
- <CModalTitle id="StaticBackdropExampleLabel">Modal title</CModalTitle>
- </CModalHeader>
- <CModalBody>
- I will not close if you click outside me. Don't even try to press escape key.
- </CModalBody>
- <CModalFooter>
- <CButton color="secondary" onClick={() => setVisible(false)}>
- Close
- </CButton>
- <CButton color="primary">Save changes</CButton>
- </CModalFooter>
- </CModal>
- </>
-)
-```
-
-### Scrolling long content
-
-When modals become too long for the user's viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.
-
-export const ScrollingLongContentExample = () => {
- const [visible, setVisible] = useState(false)
- return (
- <>
- <CButton color="primary" onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
- <CModal
- visible={visible}
- onClose={() => setVisible(false)}
- aria-labelledby="ScrollingLongContentExampleLabel"
- >
- <CModalHeader>
- <CModalTitle id="ScrollingLongContentExampleLabel">Modal title</CModalTitle>
- </CModalHeader>
- <CModalBody>
- <p>
- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
- in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
- </p>
- <p>
- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
- lacus vel augue laoreet rutrum faucibus dolor auctor.
- </p>
- <p>
- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
- scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
- auctor fringilla.
- </p>
- <p>
- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
- in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
- </p>
- <p>
- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
- lacus vel augue laoreet rutrum faucibus dolor auctor.
- </p>
- <p>
- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
- scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
- auctor fringilla.
- </p>
- <p>
- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
- in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
- </p>
- <p>
- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
- lacus vel augue laoreet rutrum faucibus dolor auctor.
- </p>
- <p>
- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
- scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
- auctor fringilla.
- </p>
- <p>
- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
- in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
- </p>
- <p>
- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
- lacus vel augue laoreet rutrum faucibus dolor auctor.
- </p>
- <p>
- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
- scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
- auctor fringilla.
- </p>
- <p>
- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
- in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
- </p>
- <p>
- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
- lacus vel augue laoreet rutrum faucibus dolor auctor.
- </p>
- <p>
- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
- scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
- auctor fringilla.
- </p>
- <p>
- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
- in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
- </p>
- <p>
- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
- lacus vel augue laoreet rutrum faucibus dolor auctor.
- </p>
- <p>
- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
- scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
- auctor fringilla.
- </p>
- </CModalBody>
- <CModalFooter>
- <CButton color="secondary" onClick={() => setVisible(false)}>
- Close
- </CButton>
- <CButton color="primary">Save changes</CButton>
- </CModalFooter>
- </CModal>
- </>
- )
-}
-
-<Example>
- <ScrollingLongContentExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
- <>
- <CButton color="primary" onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
- <CModal
- visible={visible}
- onClose={() => setVisible(false)}
- aria-labelledby="ScrollingLongContentExampleLabel"
- >
- <CModalHeader>
- <CModalTitle id="ScrollingLongContentExampleLabel">Modal title</CModalTitle>
- </CModalHeader>
- <CModalBody>
- <p>
- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
- in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
- </p>
- <p>
- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
- vel augue laoreet rutrum faucibus dolor auctor.
- </p>
- <p>
- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
- scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
- auctor fringilla.
- </p>
- <p>
- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
- in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
- </p>
- <p>
- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
- vel augue laoreet rutrum faucibus dolor auctor.
- </p>
- <p>
- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
- scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
- auctor fringilla.
- </p>
- <p>
- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
- in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
- </p>
- <p>
- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
- vel augue laoreet rutrum faucibus dolor auctor.
- </p>
- <p>
- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
- scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
- auctor fringilla.
- </p>
- <p>
- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
- in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
- </p>
- <p>
- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
- vel augue laoreet rutrum faucibus dolor auctor.
- </p>
- <p>
- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
- scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
- auctor fringilla.
- </p>
- <p>
- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
- in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
- </p>
- <p>
- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
- vel augue laoreet rutrum faucibus dolor auctor.
- </p>
- <p>
- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
- scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
- auctor fringilla.
- </p>
- <p>
- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
- in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
- </p>
- <p>
- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
- vel augue laoreet rutrum faucibus dolor auctor.
- </p>
- <p>
- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
- scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
- auctor fringilla.
- </p>
- </CModalBody>
- <CModalFooter>
- <CButton color="secondary" onClick={() => setVisible(false)}>
- Close
- </CButton>
- <CButton color="primary">Save changes</CButton>
- </CModalFooter>
- </CModal>
- </>
-)
-```
-
-You can also create a scrollable react modal component that allows scroll the modal body by adding `scrollable` prop.
-
-export const ScrollingLongContentExample2 = () => {
- const [visible, setVisible] = useState(false)
- return (
- <>
- <CButton color="primary" onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
- <CModal
- scrollable
- visible={visible}
- onClose={() => setVisible(false)}
- aria-labelledby="ScrollingLongContentExampleLabel2"
- >
- <CModalHeader>
- <CModalTitle id="ScrollingLongContentExampleLabel2">Modal title</CModalTitle>
- </CModalHeader>
- <CModalBody>
- <p>
- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
- in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
- </p>
- <p>
- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
- lacus vel augue laoreet rutrum faucibus dolor auctor.
- </p>
- <p>
- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
- scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
- auctor fringilla.
- </p>
- <p>
- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
- in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
- </p>
- <p>
- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
- lacus vel augue laoreet rutrum faucibus dolor auctor.
- </p>
- <p>
- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
- scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
- auctor fringilla.
- </p>
- <p>
- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
- in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
- </p>
- <p>
- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
- lacus vel augue laoreet rutrum faucibus dolor auctor.
- </p>
- <p>
- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
- scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
- auctor fringilla.
- </p>
- <p>
- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
- in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
- </p>
- <p>
- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
- lacus vel augue laoreet rutrum faucibus dolor auctor.
- </p>
- <p>
- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
- scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
- auctor fringilla.
- </p>
- <p>
- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
- in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
- </p>
- <p>
- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
- lacus vel augue laoreet rutrum faucibus dolor auctor.
- </p>
- <p>
- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
- scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
- auctor fringilla.
- </p>
- <p>
- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
- in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
- </p>
- <p>
- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
- lacus vel augue laoreet rutrum faucibus dolor auctor.
- </p>
- <p>
- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
- scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
- auctor fringilla.
- </p>
- </CModalBody>
- <CModalFooter>
- <CButton color="secondary" onClick={() => setVisible(false)}>
- Close
- </CButton>
- <CButton color="primary">Save changes</CButton>
- </CModalFooter>
- </CModal>
- </>
- )
-}
-
-<Example>
- <ScrollingLongContentExample2 />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
- <>
- <CButton color="primary" onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
- <CModal
- scrollable
- visible={visible}
- onClose={() => setVisible(false)}
- aria-labelledby="ScrollingLongContentExampleLabel2"
- >
- <CModalHeader>
- <CModalTitle id="ScrollingLongContentExampleLabel2">Modal title</CModalTitle>
- </CModalHeader>
- <CModalBody>
- <p>
- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
- in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
- </p>
- <p>
- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
- vel augue laoreet rutrum faucibus dolor auctor.
- </p>
- <p>
- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
- scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
- auctor fringilla.
- </p>
- <p>
- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
- in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
- </p>
- <p>
- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
- vel augue laoreet rutrum faucibus dolor auctor.
- </p>
- <p>
- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
- scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
- auctor fringilla.
- </p>
- <p>
- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
- in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
- </p>
- <p>
- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
- vel augue laoreet rutrum faucibus dolor auctor.
- </p>
- <p>
- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
- scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
- auctor fringilla.
- </p>
- <p>
- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
- in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
- </p>
- <p>
- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
- vel augue laoreet rutrum faucibus dolor auctor.
- </p>
- <p>
- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
- scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
- auctor fringilla.
- </p>
- <p>
- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
- in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
- </p>
- <p>
- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
- vel augue laoreet rutrum faucibus dolor auctor.
- </p>
- <p>
- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
- scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
- auctor fringilla.
- </p>
- <p>
- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
- in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
- </p>
- <p>
- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
- vel augue laoreet rutrum faucibus dolor auctor.
- </p>
- <p>
- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
- scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
- auctor fringilla.
- </p>
- </CModalBody>
- <CModalFooter>
- <CButton color="secondary" onClick={() => setVisible(false)}>
- Close
- </CButton>
- <CButton color="primary">Save changes</CButton>
- </CModalFooter>
- </CModal>
- </>
-)
-```
-
-### Vertically centered
-
-Add `alignment="center` to `<CModal>` to vertically center the React modal.
-
-export const VerticallyCenteredExample = () => {
- const [visible, setVisible] = useState(false)
- return (
- <>
- <CButton color="primary" onClick={() => setVisible(!visible)}>Vertically centered modal</CButton>
- <CModal
- alignment="center"
- visible={visible}
- onClose={() => setVisible(false)}
- aria-labelledby="VerticallyCenteredExample"
- >
- <CModalHeader>
- <CModalTitle id="VerticallyCenteredExample">Modal title</CModalTitle>
- </CModalHeader>
- <CModalBody>
- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
- in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
- </CModalBody>
- <CModalFooter>
- <CButton color="secondary" onClick={() => setVisible(false)}>
- Close
- </CButton>
- <CButton color="primary">Save changes</CButton>
- </CModalFooter>
- </CModal>
- </>
- )
-}
-
-<Example>
- <VerticallyCenteredExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
- <>
- <CButton color="primary" onClick={() => setVisible(!visible)}>Vertically centered modal</CButton>
- <CModal
- alignment="center"
- visible={visible}
- onClose={() => setVisible(false)}
- aria-labelledby="VerticallyCenteredExample"
- >
- <CModalHeader>
- <CModalTitle id="VerticallyCenteredExample">Modal title</CModalTitle>
- </CModalHeader>
- <CModalBody>
- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
- egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
- </CModalBody>
- <CModalFooter>
- <CButton color="secondary" onClick={() => setVisible(false)}>
- Close
- </CButton>
- <CButton color="primary">Save changes</CButton>
- </CModalFooter>
- </CModal>
- </>
-)
-```
-
-export const VerticallyCenteredScrollableExample = () => {
- const [visible, setVisible] = useState(false)
- return (
- <>
- <CButton color="primary" onClick={() => setVisible(!visible)}>Vertically centered scrollable modal</CButton>
- <CModal
- alignment="center"
- scrollable
- visible={visible}
- onClose={() => setVisible(false)}
- aria-labelledby="VerticallyCenteredScrollableExample2"
- >
- <CModalHeader>
- <CModalTitle id="VerticallyCenteredScrollableExample2">Modal title</CModalTitle>
- </CModalHeader>
- <CModalBody>
- <p>
- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
- in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
- </p>
- <p>
- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
- lacus vel augue laoreet rutrum faucibus dolor auctor.
- </p>
- <p>
- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
- scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
- auctor fringilla.
- </p>
- <p>
- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
- in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
- </p>
- <p>
- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
- lacus vel augue laoreet rutrum faucibus dolor auctor.
- </p>
- </CModalBody>
- <CModalFooter>
- <CButton color="secondary" onClick={() => setVisible(false)}>
- Close
- </CButton>
- <CButton color="primary">Save changes</CButton>
- </CModalFooter>
- </CModal>
- </>
- )
-}
-
-<Example>
- <VerticallyCenteredScrollableExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
- <>
- <CButton color="primary" onClick={() => setVisible(!visible)}>Vertically centered scrollable modal</CButton>
- <CModal
- alignment="center"
- scrollable
- visible={visible}
- onClose={() => setVisible(false)}
- aria-labelledby="VerticallyCenteredScrollableExample2"
- >
- <CModalHeader>
- <CModalTitle id="VerticallyCenteredScrollableExample2">Modal title</CModalTitle>
- </CModalHeader>
- <CModalBody>
- <p>
- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
- in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
- </p>
- <p>
- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
- vel augue laoreet rutrum faucibus dolor auctor.
- </p>
- <p>
- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
- scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
- auctor fringilla.
- </p>
- <p>
- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
- in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
- </p>
- <p>
- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
- vel augue laoreet rutrum faucibus dolor auctor.
- </p>
- </CModalBody>
- <CModalFooter>
- <CButton color="secondary" onClick={() => setVisible(false)}>
- Close
- </CButton>
- <CButton color="primary">Save changes</CButton>
- </CModalFooter>
- </CModal>
- </>
-)
-```
-
-### 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.
-
-export const TooltipsAndPopoversExample = () => {
- const [visible, setVisible] = useState(false)
- return (
- <>
- <CButton color="primary" onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
- <CModal
- alignment="center"
- visible={visible}
- onClose={() => setVisible(false)}
- aria-labelledby="TooltipsAndPopoverExample"
- >
- <CModalHeader>
- <CModalTitle id="TooltipsAndPopoverExample">Modal title</CModalTitle>
- </CModalHeader>
- <CModalBody>
- <h5>Popover in a modal</h5>
- <p>
- This
- <CPopover title="Popover title" content="Popover body content is set in this property.">
- <CButton color="primary">button</CButton>
- </CPopover> triggers a popover on click.
- </p>
- <hr />
- <h5>Tooltips in a modal</h5>
- <p>
- <CTooltip content="Tooltip">
- <CLink>This link</CLink>
- </CTooltip>{' '}
- and
- <CTooltip content="Tooltip">
- <CLink>that link</CLink>
- </CTooltip> have tooltips on hover.
- </p>
- </CModalBody>
- <CModalFooter>
- <CButton color="secondary" onClick={() => setVisible(false)}>
- Close
- </CButton>
- <CButton color="primary">Save changes</CButton>
- </CModalFooter>
- </CModal>
- </>
- )
-}
-
-<Example>
- <TooltipsAndPopoversExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
- <>
- <CButton color="primary" onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
- <CModal
- alignment="center"
- visible={visible}
- onClose={() => setVisible(false)}
- aria-labelledby="TooltipsAndPopoverExample"
- >
- <CModalHeader>
- <CModalTitle id="TooltipsAndPopoverExample">Modal title</CModalTitle>
- </CModalHeader>
- <CModalBody>
- <h5>Popover in a modal</h5>
- <p>
- This
- <CPopover title="Popover title" content="Popover body content is set in this property.">
- <CButton color="primary">button</CButton>
- </CPopover> triggers a popover on click.
- </p>
- <hr />
- <h5>Tooltips in a modal</h5>
- <p>
- <CTooltip content="Tooltip">
- <CLink>This link</CLink>
- </CTooltip>{' '}
- and
- <CTooltip content="Tooltip">
- <CLink>that link</CLink>
- </CTooltip> have tooltips on hover.
- </p>
- </CModalBody>
- <CModalFooter>
- <CButton color="secondary" onClick={() => setVisible(false)}>
- Close
- </CButton>
- <CButton color="primary">Save changes</CButton>
- </CModalFooter>
- </CModal>
- </>
-)
-```
-
-### Toggle between modals
-
-Toggle between multiple modals with some clever placement of the `visible` props. **Please note multiple modals cannot be opened at the same time** — this method simply toggles between two separate modals.
-
-export const ToggleBetweenModalsExample = () => {
- const [visible, setVisible] = useState(false)
- const [visible2, setVisible2] = useState(false)
- return (
- <>
- <CButton color="primary" onClick={() => setVisible(!visible)}>Open first modal</CButton>
- <CModal
- visible={visible}
- onClose={() => setVisible(false)}
- aria-labelledby="ToggleBetweenModalsExample1"
- >
- <CModalHeader>
- <CModalTitle id="ToggleBetweenModalsExample1">Modal 1 title</CModalTitle>
- </CModalHeader>
- <CModalBody>
- <p>Show a second modal and hide this one with the button below.</p>
- </CModalBody>
- <CModalFooter>
- <CButton
- color="primary"
- onClick={() => {
- setVisible(false)
- setVisible2(true)
- }}
- >
- Open second modal
- </CButton>
- </CModalFooter>
- </CModal>
- <CModal
- visible={visible2}
- onClick={() => {
- setVisible(true)
- setVisible2(false)
- }}
- aria-labelledby="ToggleBetweenModalsExample2"
- >
- <CModalHeader>
- <CModalTitle id="ToggleBetweenModalsExample2">Modal 2 title</CModalTitle>
- </CModalHeader>
- <CModalBody>
- <p>Hide this modal and show the first with the button below.</p>
- </CModalBody>
- <CModalFooter>
- <CButton
- color="primary"
- onClick={() => {
- setVisible(true)
- setVisible2(false)
- }}
- >
- Back to first
- </CButton>
- </CModalFooter>
- </CModal>
- </>
- )
-}
-
-<Example>
- <ToggleBetweenModalsExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-const [visible2, setVisible2] = useState(false)
-return (
- <>
- <CButton color="primary" onClick={() => setVisible(!visible)}>Open first modal</CButton>
- <CModal
- visible={visible}
- onClose={() => setVisible(false)}
- aria-labelledby="ToggleBetweenModalsExample1"
- >
- <CModalHeader>
- <CModalTitle id="ToggleBetweenModalsExample1">Modal 1 title</CModalTitle>
- </CModalHeader>
- <CModalBody>
- <p>Show a second modal and hide this one with the button below.</p>
- </CModalBody>
- <CModalFooter>
- <CButton
- color="primary"
- onClick={() => {
- setVisible(false)
- setVisible2(true)
- }}
- >
- Open second modal
- </CButton>
- </CModalFooter>
- </CModal>
- <CModal
- visible={visible2}
- onClick={() => {
- setVisible(true)
- setVisible2(false)
- }}
- aria-labelledby="ToggleBetweenModalsExample2"
- >
- <CModalHeader>
- <CModalTitle id="ToggleBetweenModalsExample2">Modal 2 title</CModalTitle>
- </CModalHeader>
- <CModalBody>
- <p>Hide this modal and show the first with the button below.</p>
- </CModalBody>
- <CModalFooter>
- <CButton
- color="primary"
- onClick={() => {
- setVisible(true)
- setVisible2(false)
- }}
- >
- Back to first
- </CButton>
- </CModalFooter>
- </CModal>
- </>
-)
-```
-
-### Change animation
-
-The variable `$modal-fade-transform` determines the transform state of React Modal component before the modal fade-in animation, whereas the variable `$modal-show-transform` determines the transform state of Modal component after the modal fade-in animation.
-
-If you want a zoom-in animation, for example, set `$modal-fade-transform: scale(.8)`.
-
-### Remove animation
-
-For modals that simply appear rather than fade into view, set `transition` to `false`.
-
-```jsx
-<CModal transition={false}>...</CModal>
-```
-
-### Accessibility
-
-Be sure to add `aria-labelledby="..."`, referencing the modal title, to `<CModal />` Additionally, you may give a description of your modal dialog with `aria-describedby` on `<CModal>`. Note that you don’t need to add `role="dialog`, `aria-hidden="true"`, and `aria-modal="true"` since we already add it.
-
-## Optional sizes
-
-Modals have three optional sizes, available via modifier classes to be placed on a `<CModal>`. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
-
-| Size | Property size | Modal max-width |
-| ----------- | ------------- | --------------- |
-| Small | `'sm'` | `300px` |
-| Default | None | `500px` |
-| Large | `'lg'` | `800px` |
-| Extra large | `'xl'` | `1140px` |
-
-export const OptionalSizesExample = () => {
- const [visibleXL, setVisibleXL] = useState(false)
- const [visibleLg, setVisibleLg] = useState(false)
- const [visibleSm, setVisibleSm] = useState(false)
- return (
- <>
- <CButton color="primary" onClick={() => setVisibleXL(!visibleXL)}>Extra large modal</CButton>
- <CButton color="primary" onClick={() => setVisibleLg(!visibleLg)}>Large modal</CButton>
- <CButton color="primary" onClick={() => setVisibleSm(!visibleSm)}>Small modal</CButton>
- <CModal
- size="xl"
- visible={visibleXL}
- onClose={() => setVisibleXL(false)}
- aria-labelledby="OptionalSizesExample1"
- >
- <CModalHeader>
- <CModalTitle id="OptionalSizesExample1">Extra large modal</CModalTitle>
- </CModalHeader>
- <CModalBody>...</CModalBody>
- </CModal>
- <CModal
- size="lg"
- visible={visibleLg}
- onClose={() => setVisibleLg(false)}
- aria-labelledby="OptionalSizesExample2"
- >
- <CModalHeader>
- <CModalTitle id="OptionalSizesExample2">Large modal</CModalTitle>
- </CModalHeader>
- <CModalBody>...</CModalBody>
- </CModal>
- <CModal
- size="sm"
- visible={visibleSm}
- onClose={() => setVisibleSm(false)}
- aria-labelledby="OptionalSizesExample3"
- >
- <CModalHeader>
- <CModalTitle id="OptionalSizesExample3">Small modal</CModalTitle>
- </CModalHeader>
- <CModalBody>...</CModalBody>
- </CModal>
- </>
- )
-}
-
-<Example>
- <OptionalSizesExample />
-</Example>
-
-```jsx
-const [visibleXL, setVisibleXL] = useState(false)
-const [visibleLg, setVisibleLg] = useState(false)
-const [visibleSm, setVisibleSm] = useState(false)
-return (
- <>
- <CButton color="primary" onClick={() => setVisibleXL(!visibleXL)}>Extra large modal</CButton>
- <CButton color="primary" onClick={() => setVisibleLg(!visibleLg)}>Large modal</CButton>
- <CButton color="primary" onClick={() => setVisibleSm(!visibleSm)}>Small modal</CButton>
- <CModal
- size="xl"
- visible={visibleXL}
- onClose={() => setVisibleXL(false)}
- aria-labelledby="OptionalSizesExample1"
- >
- <CModalHeader>
- <CModalTitle id="OptionalSizesExample1">Extra large modal</CModalTitle>
- </CModalHeader>
- <CModalBody>...</CModalBody>
- </CModal>
- <CModal
- size="lg"
- visible={visibleLg}
- onClose={() => setVisibleLg(false)}
- aria-labelledby="OptionalSizesExample2"
- >
- <CModalHeader>
- <CModalTitle id="OptionalSizesExample2">Large modal</CModalTitle>
- </CModalHeader>
- <CModalBody>...</CModalBody>
- </CModal>
- <CModal
- size="sm"
- visible={visibleSm}
- onClose={() => setVisibleSm(false)}
- aria-labelledby="OptionalSizesExample3"
- >
- <CModalHeader>
- <CModalTitle id="OptionalSizesExample3">Small modal</CModalTitle>
- </CModalHeader>
- <CModalBody>...</CModalBody>
- </CModal>
- </>
-)
-```
-
-## Fullscreen Modal
-
-Another override is the option to pop up a React modal component that covers the user viewport, available via property `fullscrean`.
-
-| Fullscrean | Availability |
-| ---------- | -------------- |
-| `true` | Always |
-| `'sm'` | Below `576px` |
-| `'md'` | Below `768px` |
-| `'lg'` | Below `992px` |
-| `'xl'` | Below `1200px` |
-| `'xxl'` | Below `1400px` |
-
-export const FullscreenExample = () => {
- const [visible, setVisible] = useState(false)
- const [visibleSm, setVisibleSm] = useState(false)
- const [visibleMd, setVisibleMd] = useState(false)
- const [visibleLg, setVisibleLg] = useState(false)
- const [visibleXL, setVisibleXL] = useState(false)
- const [visibleXXL, setVisibleXXL] = useState(false)
- return (
- <>
- <CButton color="primary" onClick={() => setVisible(!visible)}>Full screen</CButton>
- <CButton color="primary" onClick={() => setVisibleSm(!visibleSm)}>Full screen below sm</CButton>
- <CButton color="primary" onClick={() => setVisibleMd(!visibleMd)}>Full screen below md</CButton>
- <CButton color="primary" onClick={() => setVisibleLg(!visibleLg)}>Full screen below lg</CButton>
- <CButton color="primary" onClick={() => setVisibleXL(!visibleXL)}>Full screen below xl</CButton>
- <CButton color="primary" onClick={() => setVisibleXXL(!visibleXXL)}>Full screen below xxl</CButton>
- <CModal
- fullscreen
- visible={visible}
- onClose={() => setVisible(false)}
- aria-labelledby="FullscreenExample1"
- >
- <CModalHeader>
- <CModalTitle id="FullscreenExample1">Full screen</CModalTitle>
- </CModalHeader>
- <CModalBody>...</CModalBody>
- </CModal>
- <CModal
- fullscreen="sm"
- visible={visibleSm}
- onClose={() => setVisibleSm(false)}
- aria-labelledby="FullscreenExample2"
- >
- <CModalHeader>
- <CModalTitle id="FullscreenExample2">Full screen below sm</CModalTitle>
- </CModalHeader>
- <CModalBody>...</CModalBody>
- </CModal>
- <CModal
- fullscreen="md"
- visible={visibleMd}
- onClose={() => setVisibleMd(false)}
- aria-labelledby="FullscreenExample3"
- >
- <CModalHeader>
- <CModalTitle id="FullscreenExample3">Full screen below md</CModalTitle>
- </CModalHeader>
- <CModalBody>...</CModalBody>
- </CModal>
- <CModal
- fullscreen="lg"
- visible={visibleLg}
- onClose={() => setVisibleLg(false)}
- aria-labelledby="FullscreenExample4"
- >
- <CModalHeader>
- <CModalTitle id="FullscreenExample4">Full screen below lg</CModalTitle>
- </CModalHeader>
- <CModalBody>...</CModalBody>
- </CModal>
- <CModal
- fullscreen="xl"
- visible={visibleXL}
- onClose={() => setVisibleXL(false)}
- aria-labelledby="FullscreenExample5"
- >
- <CModalHeader>
- <CModalTitle id="FullscreenExample5">Full screen below xl</CModalTitle>
- </CModalHeader>
- <CModalBody>...</CModalBody>
- </CModal>
- <CModal
- fullscreen="xxl"
- visible={visibleXXL}
- onClose={() => setVisibleXXL(false)}
- aria-labelledby="FullscreenExample6"
- >
- <CModalHeader>
- <CModalTitle id="FullscreenExample6">Full screen below xxl</CModalTitle>
- </CModalHeader>
- <CModalBody>...</CModalBody>
- </CModal>
- </>
- )
-}
-
-<Example>
- <FullscreenExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-const [visibleSm, setVisibleSm] = useState(false)
-const [visibleMd, setVisibleMd] = useState(false)
-const [visibleLg, setVisibleLg] = useState(false)
-const [visibleXL, setVisibleXL] = useState(false)
-const [visibleXXL, setVisibleXXL] = useState(false)
-return (
- <>
- <CButton color="primary" onClick={() => setVisible(!visible)}>Full screen</CButton>
- <CButton color="primary" onClick={() => setVisibleSm(!visibleSm)}>Full screen below sm</CButton>
- <CButton color="primary" onClick={() => setVisibleMd(!visibleMd)}>Full screen below md</CButton>
- <CButton color="primary" onClick={() => setVisibleLg(!visibleLg)}>Full screen below lg</CButton>
- <CButton color="primary" onClick={() => setVisibleXL(!visibleXL)}>Full screen below xl</CButton>
- <CButton color="primary" onClick={() => setVisibleXXL(!visibleXXL)}>Full screen below xxl</CButton>
- <CModal
- fullscreen
- visible={visible}
- onClose={() => setVisible(false)}
- aria-labelledby="FullscreenExample1"
- >
- <CModalHeader>
- <CModalTitle id="FullscreenExample1">Full screen</CModalTitle>
- </CModalHeader>
- <CModalBody>...</CModalBody>
- </CModal>
- <CModal
- fullscreen="sm"
- visible={visibleSm}
- onClose={() => setVisibleSm(false)}
- aria-labelledby="FullscreenExample2"
- >
- <CModalHeader>
- <CModalTitle id="FullscreenExample2">Full screen below sm</CModalTitle>
- </CModalHeader>
- <CModalBody>...</CModalBody>
- </CModal>
- <CModal
- fullscreen="md"
- visible={visibleMd}
- onClose={() => setVisibleMd(false)}
- aria-labelledby="FullscreenExample3"
- >
- <CModalHeader>
- <CModalTitle id="FullscreenExample3">Full screen below md</CModalTitle>
- </CModalHeader>
- <CModalBody>...</CModalBody>
- </CModal>
- <CModal
- fullscreen="lg"
- visible={visibleLg}
- onClose={() => setVisibleLg(false)}
- aria-labelledby="FullscreenExample4"
- >
- <CModalHeader>
- <CModalTitle id="FullscreenExample4">Full screen below lg</CModalTitle>
- </CModalHeader>
- <CModalBody>...</CModalBody>
- </CModal>
- <CModal
- fullscreen="xl"
- visible={visibleXL}
- onClose={() => setVisibleXL(false)}
- aria-labelledby="FullscreenExample5"
- >
- <CModalHeader>
- <CModalTitle id="FullscreenExample5">Full screen below xl</CModalTitle>
- </CModalHeader>
- <CModalBody>...</CModalBody>
- </CModal>
- <CModal
- fullscreen="xxl"
- visible={visibleXXL}
- onClose={() => setVisibleXXL(false)}
- aria-labelledby="FullscreenExample6"
- >
- <CModalHeader>
- <CModalTitle id="FullscreenExample6">Full screen below xxl</CModalTitle>
- </CModalHeader>
- <CModalBody>...</CModalBody>
- </CModal>
- </>
-)
-```
-
-## Customizing
-
-### CSS variables
-
-React modals use local CSS variables on `.modal` and `.modal-backdrop` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
-
-<ScssDocs file="_modal.scss" capture="modal-css-vars" />
-
-<ScssDocs file="_modal.scss" capture="modal-backdrop-css-vars" />
-
-#### How to use CSS variables
-
-```jsx
-const vars = {
- '--my-css-var': 10,
- '--my-another-css-var': 'red',
-}
-return <CModal style={vars}>...</CModal>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="modal-variables" />
-
-### SASS loops
-
-[Responsive fullscreen modals](#fullscreen-modal) are generated via the `$breakpoints` map and a loop in `scss/_modal.scss`.
-
-<ScssDocs file="_modal.scss" capture="modal-fullscreen-loop" />
-
-## API
-
-### CModal
-
-`markdown:CModal.api.mdx`
-
-### CModalBody
-
-`markdown:CModalBody.api.mdx`
-
-### CModalFooter
-
-`markdown:CModalFooter.api.mdx`
-
-### CModalHeader
-
-`markdown:CModalHeader.api.mdx`
-
-### CModalTitle
-
-`markdown:CModalTitle.api.mdx`
diff --git a/packages/docs/content/components/modal/api.mdx b/packages/docs/content/components/modal/api.mdx
new file mode 100644
index 00000000..294226af
--- /dev/null
+++ b/packages/docs/content/components/modal/api.mdx
@@ -0,0 +1,32 @@
+---
+title: React Modal Component API
+name: Modal API
+description: Explore the API reference for the React Modal component and discover how to effectively utilize its props for customization.
+route: /components/modal/
+---
+
+import CModalAPI from '../../api/CModal.api.mdx'
+import CModalBodyAPI from '../../api/CModalBody.api.mdx'
+import CModalFooterAPI from '../../api/CModalFooter.api.mdx'
+import CModalHeaderAPI from '../../api/CModalHeader.api.mdx'
+import CModalTitleAPI from '../../api/CModalTitle.api.mdx'
+
+## CModal
+
+<CModalAPI />
+
+## CModalBody
+
+<CModalBodyAPI />
+
+## CModalFooter
+
+<CModalFooterAPI />
+
+## CModalHeader
+
+<CModalHeaderAPI />
+
+## CModalTitle
+
+<CModalTitleAPI />
diff --git a/packages/docs/content/components/modal/examples/ModalFullscreenExample.tsx b/packages/docs/content/components/modal/examples/ModalFullscreenExample.tsx
new file mode 100644
index 00000000..267c0797
--- /dev/null
+++ b/packages/docs/content/components/modal/examples/ModalFullscreenExample.tsx
@@ -0,0 +1,99 @@
+import React, { useState } from 'react'
+import { CButton, CModal, CModalBody, CModalHeader, CModalTitle } from '@coreui/react'
+
+export const ModalFullscreenExample = () => {
+ const [visible, setVisible] = useState(false)
+ const [visibleSm, setVisibleSm] = useState(false)
+ const [visibleMd, setVisibleMd] = useState(false)
+ const [visibleLg, setVisibleLg] = useState(false)
+ const [visibleXL, setVisibleXL] = useState(false)
+ const [visibleXXL, setVisibleXXL] = useState(false)
+ return (
+ <>
+ <CButton color="primary" onClick={() => setVisible(!visible)}>
+ Full screen
+ </CButton>
+ <CButton color="primary" onClick={() => setVisibleSm(!visibleSm)}>
+ Full screen below sm
+ </CButton>
+ <CButton color="primary" onClick={() => setVisibleMd(!visibleMd)}>
+ Full screen below md
+ </CButton>
+ <CButton color="primary" onClick={() => setVisibleLg(!visibleLg)}>
+ Full screen below lg
+ </CButton>
+ <CButton color="primary" onClick={() => setVisibleXL(!visibleXL)}>
+ Full screen below xl
+ </CButton>
+ <CButton color="primary" onClick={() => setVisibleXXL(!visibleXXL)}>
+ Full screen below xxl
+ </CButton>
+ <CModal
+ fullscreen
+ visible={visible}
+ onClose={() => setVisible(false)}
+ aria-labelledby="FullscreenExample1"
+ >
+ <CModalHeader>
+ <CModalTitle id="FullscreenExample1">Full screen</CModalTitle>
+ </CModalHeader>
+ <CModalBody>...</CModalBody>
+ </CModal>
+ <CModal
+ fullscreen="sm"
+ visible={visibleSm}
+ onClose={() => setVisibleSm(false)}
+ aria-labelledby="FullscreenExample2"
+ >
+ <CModalHeader>
+ <CModalTitle id="FullscreenExample2">Full screen below sm</CModalTitle>
+ </CModalHeader>
+ <CModalBody>...</CModalBody>
+ </CModal>
+ <CModal
+ fullscreen="md"
+ visible={visibleMd}
+ onClose={() => setVisibleMd(false)}
+ aria-labelledby="FullscreenExample3"
+ >
+ <CModalHeader>
+ <CModalTitle id="FullscreenExample3">Full screen below md</CModalTitle>
+ </CModalHeader>
+ <CModalBody>...</CModalBody>
+ </CModal>
+ <CModal
+ fullscreen="lg"
+ visible={visibleLg}
+ onClose={() => setVisibleLg(false)}
+ aria-labelledby="FullscreenExample4"
+ >
+ <CModalHeader>
+ <CModalTitle id="FullscreenExample4">Full screen below lg</CModalTitle>
+ </CModalHeader>
+ <CModalBody>...</CModalBody>
+ </CModal>
+ <CModal
+ fullscreen="xl"
+ visible={visibleXL}
+ onClose={() => setVisibleXL(false)}
+ aria-labelledby="FullscreenExample5"
+ >
+ <CModalHeader>
+ <CModalTitle id="FullscreenExample5">Full screen below xl</CModalTitle>
+ </CModalHeader>
+ <CModalBody>...</CModalBody>
+ </CModal>
+ <CModal
+ fullscreen="xxl"
+ visible={visibleXXL}
+ onClose={() => setVisibleXXL(false)}
+ aria-labelledby="FullscreenExample6"
+ >
+ <CModalHeader>
+ <CModalTitle id="FullscreenExample6">Full screen below xxl</CModalTitle>
+ </CModalHeader>
+ <CModalBody>...</CModalBody>
+ </CModal>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/modal/examples/ModalLiveDemoExample.tsx b/packages/docs/content/components/modal/examples/ModalLiveDemoExample.tsx
new file mode 100644
index 00000000..3bd28d2f
--- /dev/null
+++ b/packages/docs/content/components/modal/examples/ModalLiveDemoExample.tsx
@@ -0,0 +1,29 @@
+import React, { useState } from 'react'
+import { CButton, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle } from '@coreui/react'
+
+export const ModalLiveDemoExample = () => {
+ const [visible, setVisible] = useState(false)
+ return (
+ <>
+ <CButton color="primary" onClick={() => setVisible(!visible)}>
+ Launch demo modal
+ </CButton>
+ <CModal
+ visible={visible}
+ onClose={() => setVisible(false)}
+ aria-labelledby="LiveDemoExampleLabel"
+ >
+ <CModalHeader>
+ <CModalTitle id="LiveDemoExampleLabel">Modal title</CModalTitle>
+ </CModalHeader>
+ <CModalBody>Woohoo, you're reading this text in a modal!</CModalBody>
+ <CModalFooter>
+ <CButton color="secondary" onClick={() => setVisible(false)}>
+ Close
+ </CButton>
+ <CButton color="primary">Save changes</CButton>
+ </CModalFooter>
+ </CModal>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/modal/examples/ModalOptionalSizesExample.tsx b/packages/docs/content/components/modal/examples/ModalOptionalSizesExample.tsx
new file mode 100644
index 00000000..a082c37a
--- /dev/null
+++ b/packages/docs/content/components/modal/examples/ModalOptionalSizesExample.tsx
@@ -0,0 +1,54 @@
+import React, { useState } from 'react'
+import { CButton, CModal, CModalBody, CModalHeader, CModalTitle } from '@coreui/react'
+
+export const ModalOptionalSizesExample = () => {
+ const [visibleXL, setVisibleXL] = useState(false)
+ const [visibleLg, setVisibleLg] = useState(false)
+ const [visibleSm, setVisibleSm] = useState(false)
+ return (
+ <>
+ <CButton color="primary" onClick={() => setVisibleXL(!visibleXL)}>
+ Extra large modal
+ </CButton>
+ <CButton color="primary" onClick={() => setVisibleLg(!visibleLg)}>
+ Large modal
+ </CButton>
+ <CButton color="primary" onClick={() => setVisibleSm(!visibleSm)}>
+ Small modal
+ </CButton>
+ <CModal
+ size="xl"
+ visible={visibleXL}
+ onClose={() => setVisibleXL(false)}
+ aria-labelledby="OptionalSizesExample1"
+ >
+ <CModalHeader>
+ <CModalTitle id="OptionalSizesExample1">Extra large modal</CModalTitle>
+ </CModalHeader>
+ <CModalBody>...</CModalBody>
+ </CModal>
+ <CModal
+ size="lg"
+ visible={visibleLg}
+ onClose={() => setVisibleLg(false)}
+ aria-labelledby="OptionalSizesExample2"
+ >
+ <CModalHeader>
+ <CModalTitle id="OptionalSizesExample2">Large modal</CModalTitle>
+ </CModalHeader>
+ <CModalBody>...</CModalBody>
+ </CModal>
+ <CModal
+ size="sm"
+ visible={visibleSm}
+ onClose={() => setVisibleSm(false)}
+ aria-labelledby="OptionalSizesExample3"
+ >
+ <CModalHeader>
+ <CModalTitle id="OptionalSizesExample3">Small modal</CModalTitle>
+ </CModalHeader>
+ <CModalBody>...</CModalBody>
+ </CModal>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/modal/examples/ModalScrollingLongContent2Example.tsx b/packages/docs/content/components/modal/examples/ModalScrollingLongContent2Example.tsx
new file mode 100644
index 00000000..0e4d9a95
--- /dev/null
+++ b/packages/docs/content/components/modal/examples/ModalScrollingLongContent2Example.tsx
@@ -0,0 +1,53 @@
+import React, { useState } from 'react'
+import { CButton, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle } from '@coreui/react'
+
+export const ModalScrollingLongContent2Example = () => {
+ const [visible, setVisible] = useState(false)
+ return (
+ <>
+ <CButton color="primary" onClick={() => setVisible(!visible)}>
+ Vertically centered scrollable modal
+ </CButton>
+ <CModal
+ alignment="center"
+ scrollable
+ visible={visible}
+ onClose={() => setVisible(false)}
+ aria-labelledby="VerticallyCenteredScrollableExample2"
+ >
+ <CModalHeader>
+ <CModalTitle id="VerticallyCenteredScrollableExample2">Modal title</CModalTitle>
+ </CModalHeader>
+ <CModalBody>
+ <p>
+ Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+ in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+ </p>
+ <p>
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+ lacus vel augue laoreet rutrum faucibus dolor auctor.
+ </p>
+ <p>
+ Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+ scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+ auctor fringilla.
+ </p>
+ <p>
+ Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+ in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+ </p>
+ <p>
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+ lacus vel augue laoreet rutrum faucibus dolor auctor.
+ </p>
+ </CModalBody>
+ <CModalFooter>
+ <CButton color="secondary" onClick={() => setVisible(false)}>
+ Close
+ </CButton>
+ <CButton color="primary">Save changes</CButton>
+ </CModalFooter>
+ </CModal>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/modal/examples/ModalScrollingLongContentExample.tsx b/packages/docs/content/components/modal/examples/ModalScrollingLongContentExample.tsx
new file mode 100644
index 00000000..33ab2119
--- /dev/null
+++ b/packages/docs/content/components/modal/examples/ModalScrollingLongContentExample.tsx
@@ -0,0 +1,108 @@
+import React, { useState } from 'react'
+import { CButton, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle } from '@coreui/react'
+
+export const ModalScrollingLongContentExample = () => {
+ const [visible, setVisible] = useState(false)
+ return (
+ <>
+ <CButton color="primary" onClick={() => setVisible(!visible)}>
+ Launch demo modal
+ </CButton>
+ <CModal
+ visible={visible}
+ onClose={() => setVisible(false)}
+ aria-labelledby="ScrollingLongContentExampleLabel"
+ >
+ <CModalHeader>
+ <CModalTitle id="ScrollingLongContentExampleLabel">Modal title</CModalTitle>
+ </CModalHeader>
+ <CModalBody>
+ <p>
+ Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+ in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+ </p>
+ <p>
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+ lacus vel augue laoreet rutrum faucibus dolor auctor.
+ </p>
+ <p>
+ Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+ scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+ auctor fringilla.
+ </p>
+ <p>
+ Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+ in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+ </p>
+ <p>
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+ lacus vel augue laoreet rutrum faucibus dolor auctor.
+ </p>
+ <p>
+ Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+ scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+ auctor fringilla.
+ </p>
+ <p>
+ Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+ in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+ </p>
+ <p>
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+ lacus vel augue laoreet rutrum faucibus dolor auctor.
+ </p>
+ <p>
+ Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+ scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+ auctor fringilla.
+ </p>
+ <p>
+ Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+ in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+ </p>
+ <p>
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+ lacus vel augue laoreet rutrum faucibus dolor auctor.
+ </p>
+ <p>
+ Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+ scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+ auctor fringilla.
+ </p>
+ <p>
+ Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+ in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+ </p>
+ <p>
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+ lacus vel augue laoreet rutrum faucibus dolor auctor.
+ </p>
+ <p>
+ Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+ scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+ auctor fringilla.
+ </p>
+ <p>
+ Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+ in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+ </p>
+ <p>
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+ lacus vel augue laoreet rutrum faucibus dolor auctor.
+ </p>
+ <p>
+ Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+ scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+ auctor fringilla.
+ </p>
+ </CModalBody>
+ <CModalFooter>
+ <CButton color="secondary" onClick={() => setVisible(false)}>
+ Close
+ </CButton>
+ <CButton color="primary">Save changes</CButton>
+ </CModalFooter>
+ </CModal>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/modal/examples/ModalStaticBackdropExample.tsx b/packages/docs/content/components/modal/examples/ModalStaticBackdropExample.tsx
new file mode 100644
index 00000000..859b1d89
--- /dev/null
+++ b/packages/docs/content/components/modal/examples/ModalStaticBackdropExample.tsx
@@ -0,0 +1,32 @@
+import React, { useState } from 'react'
+import { CButton, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle } from '@coreui/react'
+
+export const ModalStaticBackdropExample = () => {
+ const [visible, setVisible] = useState(false)
+ return (
+ <>
+ <CButton color="primary" onClick={() => setVisible(!visible)}>
+ Launch static backdrop modal
+ </CButton>
+ <CModal
+ backdrop="static"
+ visible={visible}
+ onClose={() => setVisible(false)}
+ aria-labelledby="StaticBackdropExampleLabel"
+ >
+ <CModalHeader>
+ <CModalTitle id="StaticBackdropExampleLabel">Modal title</CModalTitle>
+ </CModalHeader>
+ <CModalBody>
+ I will not close if you click outside me. Don't even try to press escape key.
+ </CModalBody>
+ <CModalFooter>
+ <CButton color="secondary" onClick={() => setVisible(false)}>
+ Close
+ </CButton>
+ <CButton color="primary">Save changes</CButton>
+ </CModalFooter>
+ </CModal>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/modal/examples/ModalToggleBetweenModalsExample.tsx b/packages/docs/content/components/modal/examples/ModalToggleBetweenModalsExample.tsx
new file mode 100644
index 00000000..ba6af0ff
--- /dev/null
+++ b/packages/docs/content/components/modal/examples/ModalToggleBetweenModalsExample.tsx
@@ -0,0 +1,63 @@
+import React, { useState } from 'react'
+import { CButton, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle } from '@coreui/react'
+
+export const ModalToggleBetweenModalsExample = () => {
+ const [visible, setVisible] = useState(false)
+ const [visible2, setVisible2] = useState(false)
+ return (
+ <>
+ <CButton color="primary" onClick={() => setVisible(!visible)}>
+ Open first modal
+ </CButton>
+ <CModal
+ visible={visible}
+ onClose={() => setVisible(false)}
+ aria-labelledby="ToggleBetweenModalsExample1"
+ >
+ <CModalHeader>
+ <CModalTitle id="ToggleBetweenModalsExample1">Modal 1 title</CModalTitle>
+ </CModalHeader>
+ <CModalBody>
+ <p>Show a second modal and hide this one with the button below.</p>
+ </CModalBody>
+ <CModalFooter>
+ <CButton
+ color="primary"
+ onClick={() => {
+ setVisible(false)
+ setVisible2(true)
+ }}
+ >
+ Open second modal
+ </CButton>
+ </CModalFooter>
+ </CModal>
+ <CModal
+ visible={visible2}
+ onClick={() => {
+ setVisible(true)
+ setVisible2(false)
+ }}
+ aria-labelledby="ToggleBetweenModalsExample2"
+ >
+ <CModalHeader>
+ <CModalTitle id="ToggleBetweenModalsExample2">Modal 2 title</CModalTitle>
+ </CModalHeader>
+ <CModalBody>
+ <p>Hide this modal and show the first with the button below.</p>
+ </CModalBody>
+ <CModalFooter>
+ <CButton
+ color="primary"
+ onClick={() => {
+ setVisible(true)
+ setVisible2(false)
+ }}
+ >
+ Back to first
+ </CButton>
+ </CModalFooter>
+ </CModal>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/modal/examples/ModalTooltipsAndPopoversExample.tsx b/packages/docs/content/components/modal/examples/ModalTooltipsAndPopoversExample.tsx
new file mode 100644
index 00000000..46d73846
--- /dev/null
+++ b/packages/docs/content/components/modal/examples/ModalTooltipsAndPopoversExample.tsx
@@ -0,0 +1,61 @@
+import React, { useState } from 'react'
+import {
+ CButton,
+ CModal,
+ CModalBody,
+ CModalFooter,
+ CModalHeader,
+ CModalTitle,
+ CLink,
+ CPopover,
+ CTooltip,
+} from '@coreui/react'
+
+export const ModalTooltipsAndPopoversExample = () => {
+ const [visible, setVisible] = useState(false)
+ return (
+ <>
+ <CButton color="primary" onClick={() => setVisible(!visible)}>
+ Launch demo modal
+ </CButton>
+ <CModal
+ alignment="center"
+ visible={visible}
+ onClose={() => setVisible(false)}
+ aria-labelledby="TooltipsAndPopoverExample"
+ >
+ <CModalHeader>
+ <CModalTitle id="TooltipsAndPopoverExample">Modal title</CModalTitle>
+ </CModalHeader>
+ <CModalBody>
+ <h5>Popover in a modal</h5>
+ <p>
+ This
+ <CPopover title="Popover title" content="Popover body content is set in this property.">
+ <CButton color="primary">button</CButton>
+ </CPopover>{' '}
+ triggers a popover on click.
+ </p>
+ <hr />
+ <h5>Tooltips in a modal</h5>
+ <p>
+ <CTooltip content="Tooltip">
+ <CLink>This link</CLink>
+ </CTooltip>{' '}
+ and
+ <CTooltip content="Tooltip">
+ <CLink>that link</CLink>
+ </CTooltip>{' '}
+ have tooltips on hover.
+ </p>
+ </CModalBody>
+ <CModalFooter>
+ <CButton color="secondary" onClick={() => setVisible(false)}>
+ Close
+ </CButton>
+ <CButton color="primary">Save changes</CButton>
+ </CModalFooter>
+ </CModal>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/modal/examples/ModalVerticallyCenteredExample.tsx b/packages/docs/content/components/modal/examples/ModalVerticallyCenteredExample.tsx
new file mode 100644
index 00000000..f2f43f4e
--- /dev/null
+++ b/packages/docs/content/components/modal/examples/ModalVerticallyCenteredExample.tsx
@@ -0,0 +1,33 @@
+import React, { useState } from 'react'
+import { CButton, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle } from '@coreui/react'
+
+export const ModalVerticallyCenteredExample = () => {
+ const [visible, setVisible] = useState(false)
+ return (
+ <>
+ <CButton color="primary" onClick={() => setVisible(!visible)}>
+ Vertically centered modal
+ </CButton>
+ <CModal
+ alignment="center"
+ visible={visible}
+ onClose={() => setVisible(false)}
+ aria-labelledby="VerticallyCenteredExample"
+ >
+ <CModalHeader>
+ <CModalTitle id="VerticallyCenteredExample">Modal title</CModalTitle>
+ </CModalHeader>
+ <CModalBody>
+ Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+ in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+ </CModalBody>
+ <CModalFooter>
+ <CButton color="secondary" onClick={() => setVisible(false)}>
+ Close
+ </CButton>
+ <CButton color="primary">Save changes</CButton>
+ </CModalFooter>
+ </CModal>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/modal/examples/ModalVerticallyCenteredScrollableExample.tsx b/packages/docs/content/components/modal/examples/ModalVerticallyCenteredScrollableExample.tsx
new file mode 100644
index 00000000..0cc92aea
--- /dev/null
+++ b/packages/docs/content/components/modal/examples/ModalVerticallyCenteredScrollableExample.tsx
@@ -0,0 +1,53 @@
+import React, { useState } from 'react'
+import { CButton, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle } from '@coreui/react'
+
+export const ModalVerticallyCenteredScrollableExample = () => {
+ const [visible, setVisible] = useState(false)
+ return (
+ <>
+ <CButton color="primary" onClick={() => setVisible(!visible)}>
+ Vertically centered scrollable modal
+ </CButton>
+ <CModal
+ alignment="center"
+ scrollable
+ visible={visible}
+ onClose={() => setVisible(false)}
+ aria-labelledby="VerticallyCenteredScrollableExample2"
+ >
+ <CModalHeader>
+ <CModalTitle id="VerticallyCenteredScrollableExample2">Modal title</CModalTitle>
+ </CModalHeader>
+ <CModalBody>
+ <p>
+ Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+ in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+ </p>
+ <p>
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+ lacus vel augue laoreet rutrum faucibus dolor auctor.
+ </p>
+ <p>
+ Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+ scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+ auctor fringilla.
+ </p>
+ <p>
+ Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+ in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+ </p>
+ <p>
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+ lacus vel augue laoreet rutrum faucibus dolor auctor.
+ </p>
+ </CModalBody>
+ <CModalFooter>
+ <CButton color="secondary" onClick={() => setVisible(false)}>
+ Close
+ </CButton>
+ <CButton color="primary">Save changes</CButton>
+ </CModalFooter>
+ </CModal>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/modal/index.mdx b/packages/docs/content/components/modal/index.mdx
new file mode 100644
index 00000000..449ee1ff
--- /dev/null
+++ b/packages/docs/content/components/modal/index.mdx
@@ -0,0 +1,146 @@
+---
+title: React Modal Component
+name: Modal
+description: React Modal component offers a lightweight, multi-purpose popup to add dialogs to yours. Learn how to customize CoreUI React modal components easily. Multiple examples and tutorial.
+route: /components/modal/
+other_frameworks: modal
+---
+
+## How to use React Modal Component?
+
+### 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.
+
+<Example>
+ <div className="modal position-static d-block" tabIndex="-1">
+ <div className="modal-dialog">
+ <div className="modal-content">
+ <div className="modal-header">
+ <h5 className="modal-title">React Modal title</h5>
+ <button type="button" className="btn-close" aria-label="Close"></button>
+ </div>
+ <div className="modal-body">
+ <p>React Modal body text goes here.</p>
+ </div>
+ <div className="modal-footer">
+ <button type="button" className="btn btn-secondary">Close</button>
+ <button type="button" className="btn btn-primary">Save changes</button>
+ </div>
+ </div>
+ </div>
+ </div>
+</Example>
+```jsx
+<CModal>
+ <CModalHeader>
+ <CModalTitle>React Modal title</CModalTitle>
+ </CModalHeader>
+ <CModalBody>
+ <p>React Modal body text goes here.</p>
+ </CModalBody>
+ <CModalFooter>
+ <CButton color="secondary">Close</CButton>
+ <CButton color="primary">Save changes</CButton>
+ </CModalFooter>
+</CModal>
+```
+
+### Live demo
+
+Toggle a working React modal component demo by clicking the button below. It will slide down and fade in from the top of the page.
+
+<ExampleSnippet2 component="ModalLiveDemoExample" componentName="React Modal" />
+
+### Static backdrop
+
+If you set a `backdrop` to `static`, your React modal component will behave as though the backdrop is static, meaning it will not close when clicking outside it. Click the button below to try it.
+
+<ExampleSnippet2 component="ModalStaticBackdropExample" componentName="React Modal" />
+
+### Scrolling long content
+
+When modals become too long for the user's viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.
+
+<ExampleSnippet2 component="ModalScrollingLongContentExample" componentName="React Modal" />
+
+You can also create a scrollable react modal component that allows scroll the modal body by adding `scrollable` prop.
+
+<ExampleSnippet2 component="ModalScrollingLongContent2Example" componentName="React Modal" />
+
+### Vertically centered
+
+Add `alignment="center` to `<CModal>` to vertically center the React modal.
+
+<ExampleSnippet2 component="ModalVerticallyCenteredExample" componentName="React Modal" />
+
+<ExampleSnippet2 component="ModalVerticallyCenteredScrollableExample" componentName="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.
+
+<ExampleSnippet2 component="ModalTooltipsAndPopoversExample" componentName="React Modal" />
+
+### Toggle between modals
+
+Toggle between multiple modals with some clever placement of the `visible` props. **Please note multiple modals cannot be opened at the same time** — this method simply toggles between two separate modals.
+
+<ExampleSnippet2 component="ModalToggleBetweenModalsExample" componentName="React Modal" />
+
+### Change animation
+
+The variable `$modal-fade-transform` determines the transform state of React Modal component before the modal fade-in animation, whereas the variable `$modal-show-transform` determines the transform state of Modal component after the modal fade-in animation.
+
+If you want a zoom-in animation, for example, set `$modal-fade-transform: scale(.8)`.
+
+### Remove animation
+
+For modals that simply appear rather than fade into view, set `transition` to `false`.
+
+```jsx
+<CModal transition={false}>...</CModal>
+```
+
+### Accessibility
+
+Be sure to add `aria-labelledby="..."`, referencing the modal title, to `<CModal />` Additionally, you may give a description of your modal dialog with `aria-describedby` on `<CModal>`. Note that you don’t need to add `role="dialog`, `aria-hidden="true"`, and `aria-modal="true"` since we already add it.
+
+## Optional sizes
+
+Modals have three optional sizes, available via modifier classes to be placed on a `<CModal>`. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
+
+
+| Size | Property size | Modal max-width |
+| ----------- | ------------- | --------------- |
+| Small | `'sm'` | `300px` |
+| Default | None | `500px` |
+| Large | `'lg'` | `800px` |
+| Extra large | `'xl'` | `1140px` |
+
+<ExampleSnippet2 component="ModalOptionalSizesExample" componentName="React Modal" />
+
+## Fullscreen Modal
+
+Another override is the option to pop up a React modal component that covers the user viewport, available via property `fullscrean`.
+
+| Fullscrean | Availability |
+| ---------- | -------------- |
+| `true` | Always |
+| `'sm'` | Below `576px` |
+| `'md'` | Below `768px` |
+| `'lg'` | Below `992px` |
+| `'xl'` | Below `1200px` |
+| `'xxl'` | Below `1400px` |
+
+<ExampleSnippet2 component="ModalFullscreenExample" componentName="React Modal" />
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [<CModal />](./api/#cmodal)
+- [<CModalBody />](./api/#cmodalbody)
+- [<CModalFooter />](./api/#cmodalfooter)
+- [<CModalHeader />](./api/#cmodalheader)
+- [<CModalTitle />](./api/#cmodaltitle)
diff --git a/packages/docs/content/components/modal/styling.mdx b/packages/docs/content/components/modal/styling.mdx
new file mode 100644
index 00000000..b5efe465
--- /dev/null
+++ b/packages/docs/content/components/modal/styling.mdx
@@ -0,0 +1,45 @@
+---
+title: React Modal Component Styling
+name: Modal Styling
+description: Learn how to customize the React Modal component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/modal/
+---
+
+{/* ### CSS class names
+
+React Modal comes with built-in class names that make styling super simple. Here’s a quick rundown of what you can use:
+
+<ClassNamesDocs
+ files={[
+ 'components/modal/CModal.tsx',
+ ]}
+/> */}
+
+### CSS variables
+
+React Modal supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.
+
+<ScssDocs file="_modal.scss" capture="modal-css-vars" />
+
+<ScssDocs file="_modal.scss" capture="modal-backdrop-css-vars" />
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+ '--cui-modal-color': '#555',
+ '--cui-modal-bg': '#efefef',
+}
+
+return <CModal style={customVars}>{/* Modal content */}</CModal>
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="modal-variables" />
+
+### SASS loops
+
+[Responsive fullscreen modals](#fullscreen-modal) are generated via the `$breakpoints` map and a loop in `scss/_modal.scss`.
+
+<ScssDocs file="_modal.scss" capture="modal-fullscreen-loop" />
diff --git a/packages/docs/content/components/navbar.mdx b/packages/docs/content/components/navbar.mdx
deleted file mode 100644
index 3cf2d2cf..00000000
--- a/packages/docs/content/components/navbar.mdx
+++ /dev/null
@@ -1,1475 +0,0 @@
----
-title: React Navbar Component
-name: Navbar
-description: Documentation and examples for the React navbar powerful, responsive navigation header component. Includes support for branding, links, dropdowns, and more.
-menu: Components
-route: /components/navbar
-other_frameworks: navbar
----
-
-import { useState } from 'react'
-import {
- CButton,
- CContainer,
- CCloseButton,
- CCollapse,
- CDropdown,
- CDropdownDivider,
- CDropdownHeader,
- CDropdownItem,
- CDropdownItemPlain,
- CDropdownMenu,
- CDropdownToggle,
- CForm,
- CFormInput,
- CInputGroup,
- CInputGroupText,
- CNav,
- CNavItem,
- CNavLink,
- CNavbar,
- CNavbarBrand,
- CNavbarNav,
- CNavbarText,
- CNavbarToggler,
- COffcanvas,
- COffcanvasBody,
- COffcanvasHeader,
- COffcanvasTitle,
-} from '@coreui/react/src/index'
-
-import CoreUISignetImg from './../assets/images/brand/coreui-signet.svg'
-
-## Supported content
-
-`<CNavbar>` come with built-in support for a handful of sub-components. Choose from the following as needed:
-
-- `<CNavbarBrand>` for your company, product, or project name.
-- `<CNavbarNav>` for a full-height and lightweight navigation (including support for dropdowns).
-- `<CNavbarToggler>` for use with our collapse plugin and other [navigation toggling](#responsive-behaviors) behaviors.
-- Flex and spacing utilities for any form controls and actions.
-- `<CNavbarText>` for adding vertically centered strings of text.
-- `<CCollapse>` for grouping and hiding navbar contents by a parent breakpoint.
-
-Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the `lg` (large) breakpoint.
-
-## Basic usage
-
-export const BasicUsageExample = () => {
- const [visible, setVisible] = useState(false)
- return (
- <>
- <CNavbar expand="lg" className="bg-body-tertiary">
- <CContainer fluid>
- <CNavbarBrand href="#">Navbar</CNavbarBrand>
- <CNavbarToggler onClick={() => setVisible(!visible)} />
- <CCollapse className="navbar-collapse" visible={visible}>
- <CNavbarNav>
- <CNavItem>
- <CNavLink href="#" active>
- Home
- </CNavLink>
- </CNavItem>
- <CNavItem>
- <CNavLink href="#">Link</CNavLink>
- </CNavItem>
- <CDropdown variant="nav-item" popper={false}>
- <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownDivider />
- <CDropdownItem href="#">Something else here</CDropdownItem>
- </CDropdownMenu>
- </CDropdown>
- <CNavItem>
- <CNavLink href="#" disabled>
- Disabled
- </CNavLink>
- </CNavItem>
- </CNavbarNav>
- <CForm className="d-flex">
- <CFormInput type="search" className="me-2" placeholder="Search" />
- <CButton type="submit" color="success" variant="outline">
- Search
- </CButton>
- </CForm>
- </CCollapse>
- </CContainer>
- </CNavbar>
- </>
- )
-}
-
-<Example>
- <BasicUsageExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
- <>
- <CNavbar expand="lg" className="bg-body-tertiary">
- <CContainer fluid>
- <CNavbarBrand href="#">Navbar</CNavbarBrand>
- <CNavbarToggler onClick={() => setVisible(!visible)} />
- <CCollapse className="navbar-collapse" visible={visible}>
- <CNavbarNav>
- <CNavItem>
- <CNavLink href="#" active>
- Home
- </CNavLink>
- </CNavItem>
- <CNavItem>
- <CNavLink href="#">Link</CNavLink>
- </CNavItem>
- <CDropdown variant="nav-item" popper={false}>
- <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownDivider />
- <CDropdownItem href="#">Something else here</CDropdownItem>
- </CDropdownMenu>
- </CDropdown>
- <CNavItem>
- <CNavLink href="#" disabled>
- Disabled
- </CNavLink>
- </CNavItem>
- </CNavbarNav>
- <CForm className="d-flex">
- <CFormInput type="search" className="me-2" placeholder="Search" />
- <CButton type="submit" color="success" variant="outline">
- Search
- </CButton>
- </CForm>
- </CCollapse>
- </CContainer>
- </CNavbar>
- </>
-)
-```
-
-### Brand
-
-The `<CNavbarBrand>` can be applied to most elements, but an anchor works best, as some elements might require utility classes or custom styles.
-
-```jsx preview
-<CNavbar className="bg-body-tertiary">
- <CContainer fluid>
- <CNavbarBrand href="#">Navbar</CNavbarBrand>
- </CContainer>
-</CNavbar>
-<br/>
-<CNavbar className="bg-body-tertiary">
- <CContainer fluid>
- <CNavbarBrand className="mb-0 h1">Navbar</CNavbarBrand>
- </CContainer>
-</CNavbar>
-```
-
-Adding images to the `<CNavbarBrand>` will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate.
-
-```jsx preview
-<CNavbar className="bg-body-tertiary">
- <CContainer fluid>
- <CNavbarBrand href="#">
- <img src={CoreUISignetImg} alt="" width="22" height="24" />
- </CNavbarBrand>
- </CContainer>
-</CNavbar>
-```
-
-```jsx preview
-<CNavbar className="bg-body-tertiary">
- <CContainer fluid>
- <CNavbarBrand href="#">
- <img
- src={CoreUISignetImg}
- alt=""
- width="22"
- height="24"
- className="d-inline-block align-top"
- /> CoreUI
- </CNavbarBrand>
- </CContainer>
-</CNavbar>
-```
-
-### Nav
-
-`<CNavbar>` navigation is based on `<CNavbarNav>`. **Navigation in navbars will also grow to occupy as much horizontal space as possible** to keep your navbar contents securely aligned.
-
-export const NavExample = () => {
- const [visible, setVisible] = useState(false)
- return (
- <>
- <CNavbar expand="lg" className="bg-body-tertiary">
- <CContainer fluid>
- <CNavbarBrand href="#">Navbar</CNavbarBrand>
- <CNavbarToggler
- aria-label="Toggle navigation"
- aria-expanded={visible}
- onClick={() => setVisible(!visible)}
- />
- <CCollapse className="navbar-collapse" visible={visible}>
- <CNavbarNav>
- <CNavItem>
- <CNavLink href="#" active>
- Home
- </CNavLink>
- </CNavItem>
- <CNavItem>
- <CNavLink href="#">Features</CNavLink>
- </CNavItem>
- <CNavItem>
- <CNavLink href="#">Pricing</CNavLink>
- </CNavItem>
- <CNavItem>
- <CNavLink href="#" disabled>
- Disabled
- </CNavLink>
- </CNavItem>
- </CNavbarNav>
- </CCollapse>
- </CContainer>
- </CNavbar>
- </>
- )
-}
-
-<Example>
- <NavExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
- <>
- <CNavbar expand="lg" className="bg-body-tertiary">
- <CContainer fluid>
- <CNavbarBrand href="#">Navbar</CNavbarBrand>
- <CNavbarToggler
- aria-label="Toggle navigation"
- aria-expanded={visible}
- onClick={() => setVisible(!visible)}
- />
- <CCollapse className="navbar-collapse" visible={visible}>
- <CNavbarNav>
- <CNavItem>
- <CNavLink href="#" active>
- Home
- </CNavLink>
- </CNavItem>
- <CNavItem>
- <CNavLink href="#">Features</CNavLink>
- </CNavItem>
- <CNavItem>
- <CNavLink href="#">Pricing</CNavLink>
- </CNavItem>
- <CNavItem>
- <CNavLink href="#" disabled>
- Disabled
- </CNavLink>
- </CNavItem>
- </CNavbarNav>
- </CCollapse>
- </CContainer>
- </CNavbar>
- </>
-)
-```
-
-And because we use classes for our navs, you can avoid the list-based approach entirely if you like.
-
-export const NavExample2 = () => {
- const [visible, setVisible] = useState(false)
- return (
- <>
- <CNavbar expand="lg" className="bg-body-tertiary">
- <CContainer fluid>
- <CNavbarBrand href="#">Navbar</CNavbarBrand>
- <CNavbarToggler
- aria-label="Toggle navigation"
- aria-expanded={visible}
- onClick={() => setVisible(!visible)}
- />
- <CCollapse className="navbar-collapse" visible={visible}>
- <CNavbarNav as="nav">
- <CNavLink href="#" active>
- Home
- </CNavLink>
- <CNavLink href="#">Features</CNavLink>
- <CNavLink href="#">Pricing</CNavLink>
- <CNavLink href="#" disabled>
- Disabled
- </CNavLink>
- </CNavbarNav>
- </CCollapse>
- </CContainer>
- </CNavbar>
- </>
- )
-}
-
-<Example>
- <NavExample2 />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
- <>
- <CNavbar expand="lg" className="bg-body-tertiary">
- <CContainer fluid>
- <CNavbarBrand href="#">Navbar</CNavbarBrand>
- <CNavbarToggler
- aria-label="Toggle navigation"
- aria-expanded={visible}
- onClick={() => setVisible(!visible)}
- />
- <CCollapse className="navbar-collapse" visible={visible}>
- <CNavbarNav as="nav">
- <CNavLink href="#" active>
- Home
- </CNavLink>
- <CNavLink href="#">Features</CNavLink>
- <CNavLink href="#">Pricing</CNavLink>
- <CNavLink href="#" disabled>
- Disabled
- </CNavLink>
- </CNavbarNav>
- </CCollapse>
- </CContainer>
- </CNavbar>
- </>
-)
-```
-
-You can also use dropdowns in your navbar. Please note that `<CDropdown>` component requires `variant="nav-item"`.
-
-export const NavDropdownExample = () => {
- const [visible, setVisible] = useState(false)
- return (
- <>
- <CNavbar expand="lg" className="bg-body-tertiary">
- <CContainer fluid>
- <CNavbarBrand href="#">Navbar</CNavbarBrand>
- <CNavbarToggler
- aria-label="Toggle navigation"
- aria-expanded={visible}
- onClick={() => setVisible(!visible)}
- />
- <CCollapse className="navbar-collapse" visible={visible}>
- <CNavbarNav>
- <CNavItem>
- <CNavLink href="#" active>
- Home
- </CNavLink>
- </CNavItem>
- <CNavItem>
- <CNavLink href="#">Features</CNavLink>
- </CNavItem>
- <CNavItem>
- <CNavLink href="#">Pricing</CNavLink>
- </CNavItem>
- <CDropdown variant="nav-item" popper={false}>
- <CDropdownToggle>Dropdown link</CDropdownToggle>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownDivider />
- <CDropdownItem href="#">Something else here</CDropdownItem>
- </CDropdownMenu>
- </CDropdown>
- </CNavbarNav>
- </CCollapse>
- </CContainer>
- </CNavbar>
- </>
- )
-}
-
-<Example>
- <NavDropdownExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
- <>
- <CNavbar expand="lg" className="bg-body-tertiary">
- <CContainer fluid>
- <CNavbarBrand href="#">Navbar</CNavbarBrand>
- <CNavbarToggler
- aria-label="Toggle navigation"
- aria-expanded={visible}
- onClick={() => setVisible(!visible)}
- />
- <CCollapse className="navbar-collapse" visible={visible}>
- <CNavbarNav>
- <CNavItem>
- <CNavLink href="#" active>
- Home
- </CNavLink>
- </CNavItem>
- <CNavItem>
- <CNavLink href="#">Features</CNavLink>
- </CNavItem>
- <CNavItem>
- <CNavLink href="#">Pricing</CNavLink>
- </CNavItem>
- <CDropdown variant="nav-item" popper={false}>
- <CDropdownToggle>Dropdown link</CDropdownToggle>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownDivider />
- <CDropdownItem href="#">Something else here</CDropdownItem>
- </CDropdownMenu>
- </CDropdown>
- </CNavbarNav>
- </CCollapse>
- </CContainer>
- </CNavbar>
- </>
-)
-```
-
-### Forms
-
-Place various form controls and components within a navbar:
-
-```jsx preview
-<CNavbar className="bg-body-tertiary">
- <CContainer fluid>
- <CForm className="d-flex">
- <CFormInput type="search" className="me-2" placeholder="Search" />
- <CButton type="submit" color="success" variant="outline">
- Search
- </CButton>
- </CForm>
- </CContainer>
-</CNavbar>
-```
-
-Immediate child elements of `<CNavbar>` use flex layout and will default to `justify-content: space-between`. Use additional [flex utilities](https://coreui.io/docs/utilities/flex/) as needed to adjust this behavior.
-
-```jsx preview
-<CNavbar className="bg-body-tertiary">
- <CContainer fluid>
- <CNavbarBrand href="#">Navbar</CNavbarBrand>
- <CForm className="d-flex">
- <CFormInput type="search" className="me-2" placeholder="Search" />
- <CButton type="submit" color="success" variant="outline">
- Search
- </CButton>
- </CForm>
- </CContainer>
-</CNavbar>
-```
-
-Input groups work, too. If your navbar is an entire form, or mostly a form, you can use the `<CForm>` element as the container and save some HTML.
-
-```jsx preview
-<CNavbar className="bg-body-tertiary">
- <CForm className="container-fluid">
- <CInputGroup>
- <CInputGroupText id="basic-addon1">@</CInputGroupText>
- <CFormInput placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" />
- </CInputGroup>
- </CForm>
-</CNavbar>
-```
-
-Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements.
-
-```jsx preview
-<CNavbar className="bg-body-tertiary">
- <CForm className="container-fluid justify-content-start">
- <CButton type="button" color="success" variant="outline" className="me-2">
- Main button
- </CButton>
- <CButton type="button" color="secondary" variant="outline" size="sm">
- Smaller button
- </CButton>
- </CForm>
-</CNavbar>
-```
-
-### Text
-
-Navbars may contain bits of text with the help of `<CNavbarText>`. This class adjusts vertical alignment and horizontal spacing for strings of text.
-
-```jsx preview
-<CNavbar className="bg-body-tertiary">
- <CContainer fluid>
- <CNavbarText>Navbar text with an inline element</CNavbarText>
- </CContainer>
-</CNavbar>
-```
-
-## Color schemes
-
-Theming the navbar has never been easier thanks to the combination of theming classes and `background-color` utilities. Set `colorScheme="light"` for use with light background colors, or `colorScheme="dark"` for dark background colors. Then, customize with `.bg-*` utilities.
-
-export const ColorSchemesExample = () => {
- const [visible, setVisible] = useState(false)
- return (
- <>
- <CNavbar expand="lg" colorScheme="dark" className="bg-dark">
- <CContainer fluid>
- <CNavbarBrand href="#">Navbar</CNavbarBrand>
- <CNavbarToggler
- aria-label="Toggle navigation"
- aria-expanded={visible}
- onClick={() => setVisible(!visible)}
- />
- <CCollapse className="navbar-collapse" visible={visible}>
- <CNavbarNav>
- <CNavItem>
- <CNavLink href="#" active>
- Home
- </CNavLink>
- </CNavItem>
- <CNavItem>
- <CNavLink href="#">Link</CNavLink>
- </CNavItem>
- <CDropdown variant="nav-item" popper={false}>
- <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownDivider />
- <CDropdownItem href="#">Something else here</CDropdownItem>
- </CDropdownMenu>
- </CDropdown>
- <CNavItem>
- <CNavLink href="#" disabled>
- Disabled
- </CNavLink>
- </CNavItem>
- </CNavbarNav>
- <CForm className="d-flex">
- <CFormInput type="search" className="me-2" placeholder="Search" />
- <CButton type="submit" color="light" variant="outline">
- Search
- </CButton>
- </CForm>
- </CCollapse>
- </CContainer>
- </CNavbar>
- <br />
- <CNavbar expand="lg" colorScheme="dark" className="bg-primary">
- <CContainer fluid>
- <CNavbarBrand href="#">Navbar</CNavbarBrand>
- <CNavbarToggler
- aria-label="Toggle navigation"
- aria-expanded={visible}
- onClick={() => setVisible(!visible)}
- />
- <CCollapse className="navbar-collapse" visible={visible}>
- <CNavbarNav>
- <CNavItem>
- <CNavLink href="#" active>
- Home
- </CNavLink>
- </CNavItem>
- <CNavItem>
- <CNavLink href="#">Link</CNavLink>
- </CNavItem>
- <CDropdown variant="nav-item" popper={false}>
- <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownDivider />
- <CDropdownItem href="#">Something else here</CDropdownItem>
- </CDropdownMenu>
- </CDropdown>
- <CNavItem>
- <CNavLink href="#" disabled>
- Disabled
- </CNavLink>
- </CNavItem>
- </CNavbarNav>
- <CForm className="d-flex">
- <CFormInput type="search" className="me-2" placeholder="Search" />
- <CButton type="submit" color="light" variant="outline">
- Search
- </CButton>
- </CForm>
- </CCollapse>
- </CContainer>
- </CNavbar>
- <br />
- <CNavbar expand="lg" colorScheme="light" style={{ backgroundColor: '#e3f2fd' }}>
- <CContainer fluid>
- <CNavbarBrand href="#">Navbar</CNavbarBrand>
- <CNavbarToggler
- aria-label="Toggle navigation"
- aria-expanded={visible}
- onClick={() => setVisible(!visible)}
- />
- <CCollapse className="navbar-collapse" visible={visible}>
- <CNavbarNav>
- <CNavItem>
- <CNavLink href="#" active>
- Home
- </CNavLink>
- </CNavItem>
- <CNavItem>
- <CNavLink href="#">Link</CNavLink>
- </CNavItem>
- <CDropdown variant="nav-item" popper={false}>
- <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownDivider />
- <CDropdownItem href="#">Something else here</CDropdownItem>
- </CDropdownMenu>
- </CDropdown>
- <CNavItem>
- <CNavLink href="#" disabled>
- Disabled
- </CNavLink>
- </CNavItem>
- </CNavbarNav>
- <CForm className="d-flex">
- <CFormInput type="search" className="me-2" placeholder="Search" />
- <CButton type="submit" color="primary" variant="outline">
- Search
- </CButton>
- </CForm>
- </CCollapse>
- </CContainer>
- </CNavbar>
- </>
- )
-}
-
-<Example>
- <ColorSchemesExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
- <>
- <CNavbar expand="lg" colorScheme="dark" className="bg-dark">
- <CContainer fluid>
- <CNavbarBrand href="#">Navbar</CNavbarBrand>
- <CNavbarToggler
- aria-label="Toggle navigation"
- aria-expanded={visible}
- onClick={() => setVisible(!visible)}
- />
- <CCollapse className="navbar-collapse" visible={visible}>
- <CNavbarNav>
- <CNavItem>
- <CNavLink href="#" active>
- Home
- </CNavLink>
- </CNavItem>
- <CNavItem>
- <CNavLink href="#">Link</CNavLink>
- </CNavItem>
- <CDropdown variant="nav-item" popper={false}>
- <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownDivider />
- <CDropdownItem href="#">Something else here</CDropdownItem>
- </CDropdownMenu>
- </CDropdown>
- <CNavItem>
- <CNavLink href="#" disabled>
- Disabled
- </CNavLink>
- </CNavItem>
- </CNavbarNav>
- <CForm className="d-flex">
- <CFormInput type="search" className="me-2" placeholder="Search" />
- <CButton type="submit" color="light" variant="outline">
- Search
- </CButton>
- </CForm>
- </CCollapse>
- </CContainer>
- </CNavbar>
- <CNavbar expand="lg" colorScheme="dark" className="bg-primary">
- <CContainer fluid>
- <CNavbarBrand href="#">Navbar</CNavbarBrand>
- <CNavbarToggler
- aria-label="Toggle navigation"
- aria-expanded={visible}
- onClick={() => setVisible(!visible)}
- />
- <CCollapse className="navbar-collapse" visible={visible}>
- <CNavbarNav>
- <CNavItem>
- <CNavLink href="#" active>
- Home
- </CNavLink>
- </CNavItem>
- <CNavItem>
- <CNavLink href="#">Link</CNavLink>
- </CNavItem>
- <CDropdown variant="nav-item" popper={false}>
- <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownDivider />
- <CDropdownItem href="#">Something else here</CDropdownItem>
- </CDropdownMenu>
- </CDropdown>
- <CNavItem>
- <CNavLink href="#" disabled>
- Disabled
- </CNavLink>
- </CNavItem>
- </CNavbarNav>
- <CForm className="d-flex">
- <CFormInput type="search" className="me-2" placeholder="Search" />
- <CButton type="submit" color="light" variant="outline">
- Search
- </CButton>
- </CForm>
- </CCollapse>
- </CContainer>
- </CNavbar>
- <CNavbar expand="lg" colorScheme="light" style={{ backgroundColor: '#e3f2fd' }}>
- <CContainer fluid>
- <CNavbarBrand href="#">Navbar</CNavbarBrand>
- <CNavbarToggler
- aria-label="Toggle navigation"
- aria-expanded={visible}
- onClick={() => setVisible(!visible)}
- />
- <CCollapse className="navbar-collapse" visible={visible}>
- <CNavbarNav>
- <CNavItem>
- <CNavLink href="#" active>
- Home
- </CNavLink>
- </CNavItem>
- <CNavItem>
- <CNavLink href="#">Link</CNavLink>
- </CNavItem>
- <CDropdown variant="nav-item" popper={false}>
- <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownDivider />
- <CDropdownItem href="#">Something else here</CDropdownItem>
- </CDropdownMenu>
- </CDropdown>
- <CNavItem>
- <CNavLink href="#" disabled>
- Disabled
- </CNavLink>
- </CNavItem>
- </CNavbarNav>
- <CForm className="d-flex">
- <CFormInput type="search" className="me-2" placeholder="Search" />
- <CButton type="submit" color="primary" variant="outline">
- Search
- </CButton>
- </CForm>
- </CCollapse>
- </CContainer>
- </CNavbar>
- </>
-)
-```
-
-## Containers
-
-Although it's not required, you can wrap a `<CNavbar>` in a `<CContainer>` to center it on a page–though note that an inner container is still required. Or you can add a container inside the `<CNavbar>` to only center the contents of a [fixed or static top navbar](#placement).
-
-```jsx preview
-<CContainer>
- <CNavbar className="bg-body-tertiary">
- <CContainer fluid>
- <CNavbarBrand href="#">Navbar</CNavbarBrand>
- </CContainer>
- </CNavbar>
-</CContainer>
-```
-
-Use any of the responsive containers to change how wide the content in your navbar is presented.
-
-```jsx preview
-<CNavbar className="bg-body-tertiary">
- <CContainer breakpoint="md">
- <CNavbarBrand href="#">Navbar</CNavbarBrand>
- </CContainer>
-</CNavbar>
-```
-
-## Placement
-
-Use our `placement` properly to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow of the DOM and may require custom CSS (e.g., `padding-top` on the `<body>`) to prevent overlap with other elements.
-
-Also note that **`.sticky-top` uses `position: sticky`, which [isn't fully supported in every browser](https://caniuse.com/css-sticky)**.
-
-```jsx preview
-<CNavbar className="bg-body-tertiary">
- <CContainer fluid>
- <CNavbarBrand href="#">Default</CNavbarBrand>
- </CContainer>
-</CNavbar>
-```
-
-```jsx preview
-<CNavbar className="bg-body-tertiary" placement="fixed-top">
- <CContainer fluid>
- <CNavbarBrand href="#">Fixed top</CNavbarBrand>
- </CContainer>
-</CNavbar>
-```
-
-```jsx preview
-<CNavbar className="bg-body-tertiary" placement="fixed-bottom">
- <CContainer fluid>
- <CNavbarBrand href="#">Fixed bottom</CNavbarBrand>
- </CContainer>
-</CNavbar>
-```
-
-```jsx preview
-<CNavbar className="bg-body-tertiary" placement="sticky-top">
- <CContainer fluid>
- <CNavbarBrand href="#">Sticky top</CNavbarBrand>
- </CContainer>
-</CNavbar>
-```
-
-## Responsive behaviors
-
-Navbars can use `<CNavbarToggler>`, `<CCollapse>`, and `expand="{sm|md|lg|xl|xxl}"` property to determine when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.
-
-For navbars that never collapse, add the `expand` boolean property on the `<CNavbar>`. For navbars that always collapse, don't add any property.
-
-### Toggler
-
-Navbar togglers are left-aligned by default, but should they follow a sibling element like a `<CNavbarBrand>`, they'll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler. Below are examples of different toggle styles.
-
-With no `<CNavbarBrand>` shown at the smallest breakpoint:
-
-export const ResponsiveBehaviorsExample = () => {
- const [visible, setVisible] = useState(false)
- return (
- <>
- <CNavbar expand="lg" className="bg-body-tertiary">
- <CContainer fluid>
- <CNavbarToggler
- aria-label="Toggle navigation"
- aria-expanded={visible}
- onClick={() => setVisible(!visible)}
- />
- <CCollapse className="navbar-collapse" visible={visible}>
- <CNavbarBrand href="#">Hidden brand</CNavbarBrand>
- <CNavbarNav className="me-auto mb-2 mb-lg-0">
- <CNavItem>
- <CNavLink href="#" active>
- Home
- </CNavLink>
- </CNavItem>
- <CNavItem>
- <CNavLink href="#">Link</CNavLink>
- </CNavItem>
- <CNavItem>
- <CNavLink href="#" disabled>
- Disabled
- </CNavLink>
- </CNavItem>
- </CNavbarNav>
- <CForm className="d-flex">
- <CFormInput type="search" className="me-2" placeholder="Search" />
- <CButton type="submit" color="success" variant="outline">
- Search
- </CButton>
- </CForm>
- </CCollapse>
- </CContainer>
- </CNavbar>
- </>
- )
-}
-
-<Example>
- <ResponsiveBehaviorsExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
- <>
- <CNavbar expand="lg" className="bg-body-tertiary">
- <CContainer fluid>
- <CNavbarToggler
- aria-label="Toggle navigation"
- aria-expanded={visible}
- onClick={() => setVisible(!visible)}
- />
- <CCollapse className="navbar-collapse" visible={visible}>
- <CNavbarBrand href="#">Hidden brand</CNavbarBrand>
- <CNavbarNav className="me-auto mb-2 mb-lg-0">
- <CNavItem>
- <CNavLink href="#" active>
- Home
- </CNavLink>
- </CNavItem>
- <CNavItem>
- <CNavLink href="#">Link</CNavLink>
- </CNavItem>
- <CNavItem>
- <CNavLink href="#" disabled>
- Disabled
- </CNavLink>
- </CNavItem>
- </CNavbarNav>
- <CForm className="d-flex">
- <CFormInput type="search" className="me-2" placeholder="Search" />
- <CButton type="submit" color="success" variant="outline">
- Search
- </CButton>
- </CForm>
- </CCollapse>
- </CContainer>
- </CNavbar>
- </>
-)
-```
-
-With a brand name shown on the left and toggler on the right:
-
-export const ResponsiveBehaviorsExample2 = () => {
- const [visible, setVisible] = useState(false)
- return (
- <>
- <CNavbar expand="lg" className="bg-body-tertiary">
- <CContainer fluid>
- <CNavbarBrand href="#">Navbar</CNavbarBrand>
- <CNavbarToggler
- aria-label="Toggle navigation"
- aria-expanded={visible}
- onClick={() => setVisible(!visible)}
- />
- <CCollapse className="navbar-collapse" visible={visible}>
- <CNavbarNav className="me-auto mb-2 mb-lg-0">
- <CNavItem>
- <CNavLink href="#" active>
- Home
- </CNavLink>
- </CNavItem>
- <CNavItem>
- <CNavLink href="#">Link</CNavLink>
- </CNavItem>
- <CNavItem>
- <CNavLink href="#" disabled>
- Disabled
- </CNavLink>
- </CNavItem>
- </CNavbarNav>
- <CForm className="d-flex">
- <CFormInput type="search" className="me-2" placeholder="Search" />
- <CButton type="submit" color="success" variant="outline">
- Search
- </CButton>
- </CForm>
- </CCollapse>
- </CContainer>
- </CNavbar>
- </>
- )
-}
-
-<Example>
- <ResponsiveBehaviorsExample2 />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
- <>
- <CNavbar expand="lg" className="bg-body-tertiary">
- <CContainer fluid>
- <CNavbarBrand href="#">Navbar</CNavbarBrand>
- <CNavbarToggler
- aria-label="Toggle navigation"
- aria-expanded={visible}
- onClick={() => setVisible(!visible)}
- />
- <CCollapse className="navbar-collapse" visible={visible}>
- <CNavbarNav className="me-auto mb-2 mb-lg-0">
- <CNavItem>
- <CNavLink href="#" active>
- Home
- </CNavLink>
- </CNavItem>
- <CNavItem>
- <CNavLink href="#">Link</CNavLink>
- </CNavItem>
- <CNavItem>
- <CNavLink href="#" disabled>
- Disabled
- </CNavLink>
- </CNavItem>
- </CNavbarNav>
- <CForm className="d-flex">
- <CFormInput type="search" className="me-2" placeholder="Search" />
- <CButton type="submit" color="success" variant="outline">
- Search
- </CButton>
- </CForm>
- </CCollapse>
- </CContainer>
- </CNavbar>
- </>
-)
-```
-
-With a toggler on the left and brand name on the right:
-
-export const ResponsiveBehaviorsExample3 = () => {
- const [visible, setVisible] = useState(false)
- return (
- <>
- <CNavbar expand="lg" className="bg-body-tertiary">
- <CContainer fluid>
- <CNavbarToggler
- aria-label="Toggle navigation"
- aria-expanded={visible}
- onClick={() => setVisible(!visible)}
- />
- <CNavbarBrand href="#">Navbar</CNavbarBrand>
- <CCollapse className="navbar-collapse" visible={visible}>
- <CNavbarNav className="me-auto mb-2 mb-lg-0">
- <CNavItem>
- <CNavLink href="#" active>
- Home
- </CNavLink>
- </CNavItem>
- <CNavItem>
- <CNavLink href="#">Link</CNavLink>
- </CNavItem>
- <CNavItem>
- <CNavLink href="#" disabled>
- Disabled
- </CNavLink>
- </CNavItem>
- </CNavbarNav>
- <CForm className="d-flex">
- <CFormInput type="search" className="me-2" placeholder="Search" />
- <CButton type="submit" color="success" variant="outline">
- Search
- </CButton>
- </CForm>
- </CCollapse>
- </CContainer>
- </CNavbar>
- </>
- )
-}
-
-<Example>
- <ResponsiveBehaviorsExample3 />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
- <>
- <CNavbar expand="lg" className="bg-body-tertiary">
- <CContainer fluid>
- <CNavbarToggler
- aria-label="Toggle navigation"
- aria-expanded={visible}
- onClick={() => setVisible(!visible)}
- />
- <CNavbarBrand href="#">Navbar</CNavbarBrand>
- <CCollapse className="navbar-collapse" visible={visible}>
- <CNavbarNav className="me-auto mb-2 mb-lg-0">
- <CNavItem>
- <CNavLink href="#" active>
- Home
- </CNavLink>
- </CNavItem>
- <CNavItem>
- <CNavLink href="#">Link</CNavLink>
- </CNavItem>
- <CNavItem>
- <CNavLink href="#" disabled>
- Disabled
- </CNavLink>
- </CNavItem>
- </CNavbarNav>
- <CForm className="d-flex">
- <CFormInput type="search" className="me-2" placeholder="Search" />
- <CButton type="submit" color="success" variant="outline">
- Search
- </CButton>
- </CForm>
- </CCollapse>
- </CContainer>
- </CNavbar>
- </>
-)
-```
-
-### External content
-
-Sometimes you want to use the collapse plugin to trigger a container element for content that structurally sits outside of the `<CNavbar>`.
-
-export const ExternalContentExample = () => {
- const [visible, setVisible] = useState(false)
- return (
- <>
- <CCollapse id="navbarToggleExternalContent" visible={visible} data-coreui-theme="dark">
- <div className="bg-dark p-4">
- <h5 className="text-body-emphasis h4">Collapsed content</h5>
- <span className="text-body-secondary">Toggleable via the navbar brand.</span>
- </div>
- </CCollapse>
- <CNavbar colorScheme="dark" className="bg-dark">
- <CContainer fluid>
- <CNavbarToggler
- aria-controls="navbarToggleExternalContent"
- aria-label="Toggle navigation"
- onClick={() => setVisible(!visible)}
- />
- </CContainer>
- </CNavbar>
- </>
- )
-}
-
-<Example>
- <ExternalContentExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
- <>
- <CCollapse id="navbarToggleExternalContent" visible={visible} data-coreui-theme="dark">
- <div className="bg-dark p-4">
- <h5 className="text-body-emphasis h4">Collapsed content</h5>
- <span className="text-body-secondary">Toggleable via the navbar brand.</span>
- </div>
- </CCollapse>
- <CNavbar colorScheme="dark" className="bg-dark">
- <CContainer fluid>
- <CNavbarToggler
- aria-controls="navbarToggleExternalContent"
- aria-label="Toggle navigation"
- onClick={() => setVisible(!visible)}
- />
- </CContainer>
- </CNavbar>
- </>
-)
-```
-
-### Offcanvas
-
-Transform your expanding and collapsing navbar into an offcanvas drawer with the offcanvas plugin. We extend both the offcanvas default styles and use our `expand="*"` prop to create a dynamic and flexible navigation sidebar.
-
-In the example below, to create an offcanvas navbar that is always collapsed across all breakpoints, omit the `expand="*"` prop entirely.
-
-export const OffcanvasExample = () => {
- const [visible, setVisible] = useState(false)
- return (
- <CNavbar className="bg-body-tertiary">
- <CContainer fluid>
- <CNavbarBrand>Offcanvas navbar</CNavbarBrand>
- <CNavbarToggler
- aria-controls="offcanvasNavbar"
- aria-label="Toggle navigation"
- onClick={() => setVisible(!visible)}
- />
- <COffcanvas id="offcanvasNavbar" placement="end" portal={false} visible={visible} onHide={() => setVisible(false)}>
- <COffcanvasHeader>
- <COffcanvasTitle>Offcanvas</COffcanvasTitle>
- <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
- </COffcanvasHeader>
- <COffcanvasBody>
- <CNavbarNav>
- <CNavItem>
- <CNavLink href="#" active>
- Home
- </CNavLink>
- </CNavItem>
- <CNavItem>
- <CNavLink href="#">Link</CNavLink>
- </CNavItem>
- <CDropdown variant="nav-item" popper={false}>
- <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownDivider />
- <CDropdownItem href="#">Something else here</CDropdownItem>
- </CDropdownMenu>
- </CDropdown>
- <CNavItem>
- <CNavLink href="#" disabled>
- Disabled
- </CNavLink>
- </CNavItem>
- </CNavbarNav>
- <CForm className="d-flex">
- <CFormInput type="search" className="me-2" placeholder="Search" />
- <CButton type="submit" color="success" variant="outline">
- Search
- </CButton>
- </CForm>
- </COffcanvasBody>
- </COffcanvas>
- </CContainer>
- </CNavbar>
- )
-}
-
-<Example>
- <OffcanvasExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
- <CNavbar className="bg-body-tertiary">
- <CContainer fluid>
- <CNavbarBrand>Offcanvas navbar</CNavbarBrand>
- <CNavbarToggler
- aria-controls="offcanvasNavbar"
- aria-label="Toggle navigation"
- onClick={() => setVisible(!visible)}
- />
- <COffcanvas id="offcanvasNavbar" placement="end" portal={false} visible={visible} onHide={() => setVisible(false)}>
- <COffcanvasHeader>
- <COffcanvasTitle>Offcanvas</COffcanvasTitle>
- <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
- </COffcanvasHeader>
- <COffcanvasBody>
- <CNavbarNav>
- <CNavItem>
- <CNavLink href="#" active>
- Home
- </CNavLink>
- </CNavItem>
- <CNavItem>
- <CNavLink href="#">Link</CNavLink>
- </CNavItem>
- <CDropdown variant="nav-item" popper={false}>
- <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownDivider />
- <CDropdownItem href="#">Something else here</CDropdownItem>
- </CDropdownMenu>
- </CDropdown>
- <CNavItem>
- <CNavLink href="#" disabled>
- Disabled
- </CNavLink>
- </CNavItem>
- </CNavbarNav>
- <CForm className="d-flex">
- <CFormInput type="search" className="me-2" placeholder="Search" />
- <CButton type="submit" color="success" variant="outline">
- Search
- </CButton>
- </CForm>
- </COffcanvasBody>
- </COffcanvas>
- </CContainer>
- </CNavbar>
-)
-```
-
-To create an offcanvas navbar that expands into a normal navbar at a specific breakpoint like `xxl`, use `expand="xxl"` property.
-
-export const OffcanvasExample2 = () => {
- const [visible, setVisible] = useState(false)
- return (
- <CNavbar className="bg-body-tertiary" expand="xxl">
- <CContainer fluid>
- <CNavbarBrand>Offcanvas navbar</CNavbarBrand>
- <CNavbarToggler
- aria-controls="offcanvasNavbar2"
- aria-label="Toggle navigation"
- onClick={() => setVisible(!visible)}
- />
- <COffcanvas id="offcanvasNavbar2" placement="end" portal={false} visible={visible} onHide={() => setVisible(false)}>
- <COffcanvasHeader>
- <COffcanvasTitle>Offcanvas</COffcanvasTitle>
- <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
- </COffcanvasHeader>
- <COffcanvasBody>
- <CNavbarNav>
- <CNavItem>
- <CNavLink href="#" active>
- Home
- </CNavLink>
- </CNavItem>
- <CNavItem>
- <CNavLink href="#">Link</CNavLink>
- </CNavItem>
- <CDropdown variant="nav-item" popper={false}>
- <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownDivider />
- <CDropdownItem href="#">Something else here</CDropdownItem>
- </CDropdownMenu>
- </CDropdown>
- <CNavItem>
- <CNavLink href="#" disabled>
- Disabled
- </CNavLink>
- </CNavItem>
- </CNavbarNav>
- <CForm className="d-flex">
- <CFormInput type="search" className="me-2" placeholder="Search" />
- <CButton type="submit" color="success" variant="outline">
- Search
- </CButton>
- </CForm>
- </COffcanvasBody>
- </COffcanvas>
- </CContainer>
- </CNavbar>
- )
-}
-
-<Example>
- <OffcanvasExample2 />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
- <CNavbar className="bg-body-tertiary" expand="xxl">
- <CNavbarBrand>Offcanvas navbar</CNavbarBrand>
- <CContainer fluid>
- <CNavbarToggler
- aria-controls="offcanvasNavbar2"
- aria-label="Toggle navigation"
- onClick={() => setVisible(!visible)}
- />
- <COffcanvas id="offcanvasNavbar2" placement="end" portal={false} visible={visible} onHide={() => setVisible(false)}>
- <COffcanvasHeader>
- <COffcanvasTitle>Offcanvas</COffcanvasTitle>
- <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
- </COffcanvasHeader>
- <COffcanvasBody>
- <CNavbarNav>
- <CNavItem>
- <CNavLink href="#" active>
- Home
- </CNavLink>
- </CNavItem>
- <CNavItem>
- <CNavLink href="#">Link</CNavLink>
- </CNavItem>
- <CDropdown variant="nav-item" popper={false}>
- <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownDivider />
- <CDropdownItem href="#">Something else here</CDropdownItem>
- </CDropdownMenu>
- </CDropdown>
- <CNavItem>
- <CNavLink href="#" disabled>
- Disabled
- </CNavLink>
- </CNavItem>
- </CNavbarNav>
- <CForm className="d-flex">
- <CFormInput type="search" className="me-2" placeholder="Search" />
- <CButton type="submit" color="success" variant="outline">
- Search
- </CButton>
- </CForm>
- </COffcanvasBody>
- </COffcanvas>
- </CContainer>
- </CNavbar>
-)
-```
-
-## Customizing
-
-### CSS variables
-
-React navbars use local CSS variables on `.navbar` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
-
-<ScssDocs file="_navbar.scss" capture="navbar-css-vars"/>
-
-Some additional CSS variables are also present on `.navbar-nav`:
-
-<ScssDocs file="_navbar.scss" capture="navbar-nav-css-vars"/>
-
-Customization through CSS variables can be seen on the `.navbar-dark` class where we override specific values without adding duplicate CSS selectors.
-
-<ScssDocs file="_navbar.scss" capture="navbar-dark-css-vars"/>
-
-#### How to use CSS variables
-
-```jsx
-const vars = {
- '--my-css-var': 10,
- '--my-another-css-var': "red"
-}
-return <CNavbar style={vars}>...</CNavbar>
-```
-
-### SASS variables
-
-Variables for all navbars:
-
-<ScssDocs file="_variables.scss" capture="navbar-variables"/>
-
-Variables for the [dark navbar](#color-schemes):
-
-<ScssDocs file="_variables.scss" capture="navbar-dark-variables"/>
-
-### SASS loops
-
-[Responsive navbar expand/collapse classes](#responsive-behaviors) (e.g., `.navbar-expand-lg`) are combined with the `$breakpoints` map and generated through a loop in `scss/_navbar.scss`.
-
-<ScssDocs file="_navbar.scss" capture="navbar-expand-loop"/>
-
-## API
-
-### CNavbar
-
-`markdown:CNavbar.api.mdx`
-
-### CNavbarBrand
-
-`markdown:CNavbarBrand.api.mdx`
-
-### CNavbarNav
-
-`markdown:CNavbarNav.api.mdx`
-
-### CNavbarText
-
-`markdown:CNavbarText.api.mdx`
-
-### CNavbarToggler
-
-`markdown:CNavbarToggler.api.mdx`
diff --git a/packages/docs/content/components/navbar/api.mdx b/packages/docs/content/components/navbar/api.mdx
new file mode 100644
index 00000000..5170c089
--- /dev/null
+++ b/packages/docs/content/components/navbar/api.mdx
@@ -0,0 +1,32 @@
+---
+title: React Navbar Component API
+name: Navbar API
+description: Explore the API reference for the React Navbar component and discover how to effectively utilize its props for customization.
+route: /components/navbar/
+---
+
+import CNavbarAPI from '../../api/CNavbar.api.mdx'
+import CNavbarBrandAPI from '../../api/CNavbarBrand.api.mdx'
+import CNavbarNavAPI from '../../api/CNavbarNav.api.mdx'
+import CNavbarTextAPI from '../../api/CNavbarText.api.mdx'
+import CNavbarTogglerAPI from '../../api/CNavbarToggler.api.mdx'
+
+## CNavbar
+
+<CNavbarAPI />
+
+## CNavbarBrand
+
+<CNavbarBrandAPI />
+
+## CNavbarNav
+
+<CNavbarNavAPI />
+
+## CNavbarText
+
+<CNavbarTextAPI />
+
+## CNavbarToggler
+
+<CNavbarTogglerAPI />
diff --git a/packages/docs/content/components/navbar/examples/NavbarBrand2Example.tsx b/packages/docs/content/components/navbar/examples/NavbarBrand2Example.tsx
new file mode 100644
index 00000000..68b914e9
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarBrand2Example.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react'
+
+import CoreUISignetImg from './../../../assets/images/brand/coreui-signet.svg'
+
+export const NavbarBrand2Example = () => {
+ return (
+ <CNavbar className="bg-body-tertiary">
+ <CContainer fluid>
+ <CNavbarBrand href="#">
+ <img src={CoreUISignetImg} alt="" width="22" height="24" />
+ </CNavbarBrand>
+ </CContainer>
+ </CNavbar>
+ )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarBrand3Example.tsx b/packages/docs/content/components/navbar/examples/NavbarBrand3Example.tsx
new file mode 100644
index 00000000..6b362f56
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarBrand3Example.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react'
+
+import CoreUISignetImg from './../../../assets/images/brand/coreui-signet.svg'
+
+export const NavbarBrand3Example = () => {
+ return (
+ <CNavbar className="bg-body-tertiary">
+ <CContainer fluid>
+ <CNavbarBrand href="#">
+ <img
+ src={CoreUISignetImg}
+ alt=""
+ width="22"
+ height="24"
+ className="d-inline-block align-top"
+ />{' '}
+ CoreUI
+ </CNavbarBrand>
+ </CContainer>
+ </CNavbar>
+ )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarBrandExample.tsx b/packages/docs/content/components/navbar/examples/NavbarBrandExample.tsx
new file mode 100644
index 00000000..a351cf18
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarBrandExample.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react'
+
+export const NavbarBrandExample = () => {
+ return (
+ <>
+ {/* As a link */}
+ <CNavbar className="bg-body-tertiary">
+ <CContainer fluid>
+ <CNavbarBrand href="#">Navbar</CNavbarBrand>
+ </CContainer>
+ </CNavbar>
+
+ {/* As a heading */}
+ <CNavbar className="bg-body-tertiary">
+ <CContainer fluid>
+ <CNavbarBrand className="mb-0 h1">Navbar</CNavbarBrand>
+ </CContainer>
+ </CNavbar>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarColorSchemesExample.tsx b/packages/docs/content/components/navbar/examples/NavbarColorSchemesExample.tsx
new file mode 100644
index 00000000..6c53aca8
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarColorSchemesExample.tsx
@@ -0,0 +1,155 @@
+import React, { useState } from 'react'
+import {
+ CButton,
+ CCollapse,
+ CContainer,
+ CDropdown,
+ CDropdownDivider,
+ CDropdownItem,
+ CDropdownMenu,
+ CDropdownToggle,
+ CForm,
+ CFormInput,
+ CNavbar,
+ CNavbarBrand,
+ CNavbarNav,
+ CNavbarToggler,
+ CNavItem,
+ CNavLink,
+} from '@coreui/react'
+
+export const NavbarColorSchemesExample = () => {
+ const [visible, setVisible] = useState(false)
+ return (
+ <>
+ <CNavbar expand="lg" colorScheme="dark" className="bg-dark">
+ <CContainer fluid>
+ <CNavbarBrand href="#">Navbar</CNavbarBrand>
+ <CNavbarToggler
+ aria-label="Toggle navigation"
+ aria-expanded={visible}
+ onClick={() => setVisible(!visible)}
+ />
+ <CCollapse className="navbar-collapse" visible={visible}>
+ <CNavbarNav className="me-auto">
+ <CNavItem>
+ <CNavLink href="#" active>
+ Home
+ </CNavLink>
+ </CNavItem>
+ <CNavItem>
+ <CNavLink href="#">Link</CNavLink>
+ </CNavItem>
+ <CDropdown variant="nav-item" popper={false}>
+ <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ <CNavItem>
+ <CNavLink href="#" disabled>
+ Disabled
+ </CNavLink>
+ </CNavItem>
+ </CNavbarNav>
+ <CForm className="d-flex">
+ <CFormInput type="search" className="me-2" placeholder="Search" />
+ <CButton type="submit" color="light" variant="outline">
+ Search
+ </CButton>
+ </CForm>
+ </CCollapse>
+ </CContainer>
+ </CNavbar>
+ <br />
+ <CNavbar expand="lg" colorScheme="dark" className="bg-primary">
+ <CContainer fluid>
+ <CNavbarBrand href="#">Navbar</CNavbarBrand>
+ <CNavbarToggler
+ aria-label="Toggle navigation"
+ aria-expanded={visible}
+ onClick={() => setVisible(!visible)}
+ />
+ <CCollapse className="navbar-collapse" visible={visible}>
+ <CNavbarNav className="me-auto">
+ <CNavItem>
+ <CNavLink href="#" active>
+ Home
+ </CNavLink>
+ </CNavItem>
+ <CNavItem>
+ <CNavLink href="#">Link</CNavLink>
+ </CNavItem>
+ <CDropdown variant="nav-item" popper={false}>
+ <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ <CNavItem>
+ <CNavLink href="#" disabled>
+ Disabled
+ </CNavLink>
+ </CNavItem>
+ </CNavbarNav>
+ <CForm className="d-flex">
+ <CFormInput type="search" className="me-2" placeholder="Search" />
+ <CButton type="submit" color="light" variant="outline">
+ Search
+ </CButton>
+ </CForm>
+ </CCollapse>
+ </CContainer>
+ </CNavbar>
+ <br />
+ <CNavbar expand="lg" colorScheme="light" style={{ backgroundColor: '#e3f2fd' }}>
+ <CContainer fluid>
+ <CNavbarBrand href="#">Navbar</CNavbarBrand>
+ <CNavbarToggler
+ aria-label="Toggle navigation"
+ aria-expanded={visible}
+ onClick={() => setVisible(!visible)}
+ />
+ <CCollapse className="navbar-collapse" visible={visible}>
+ <CNavbarNav className="me-auto">
+ <CNavItem>
+ <CNavLink href="#" active>
+ Home
+ </CNavLink>
+ </CNavItem>
+ <CNavItem>
+ <CNavLink href="#">Link</CNavLink>
+ </CNavItem>
+ <CDropdown variant="nav-item" popper={false}>
+ <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ <CNavItem>
+ <CNavLink href="#" disabled>
+ Disabled
+ </CNavLink>
+ </CNavItem>
+ </CNavbarNav>
+ <CForm className="d-flex">
+ <CFormInput type="search" className="me-2" placeholder="Search" />
+ <CButton type="submit" color="primary" variant="outline">
+ Search
+ </CButton>
+ </CForm>
+ </CCollapse>
+ </CContainer>
+ </CNavbar>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarContainers2Example.tsx b/packages/docs/content/components/navbar/examples/NavbarContainers2Example.tsx
new file mode 100644
index 00000000..ed6e3978
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarContainers2Example.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react'
+
+export const NavbarContainers2Example = () => {
+ return (
+ <CNavbar className="bg-body-tertiary">
+ <CContainer md>
+ <CNavbarBrand href="#">Navbar</CNavbarBrand>
+ </CContainer>
+ </CNavbar>
+ )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarContainersExample.tsx b/packages/docs/content/components/navbar/examples/NavbarContainersExample.tsx
new file mode 100644
index 00000000..dbe22b98
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarContainersExample.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react'
+
+export const NavbarContainersExample = () => {
+ return (
+ <CContainer>
+ <CNavbar className="bg-body-tertiary">
+ <CContainer fluid>
+ <CNavbarBrand href="#">Navbar</CNavbarBrand>
+ </CContainer>
+ </CNavbar>
+ </CContainer>
+ )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarExample.tsx b/packages/docs/content/components/navbar/examples/NavbarExample.tsx
new file mode 100644
index 00000000..076b00d9
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarExample.tsx
@@ -0,0 +1,63 @@
+import React, { useState } from 'react'
+import {
+ CButton,
+ CCollapse,
+ CContainer,
+ CDropdown,
+ CDropdownDivider,
+ CDropdownItem,
+ CDropdownMenu,
+ CDropdownToggle,
+ CForm,
+ CFormInput,
+ CNavbar,
+ CNavbarBrand,
+ CNavbarNav,
+ CNavbarToggler,
+ CNavItem,
+ CNavLink,
+} from '@coreui/react'
+
+export const NavbarExample = () => {
+ const [visible, setVisible] = useState(false)
+ return (
+ <CNavbar expand="lg" className="bg-body-tertiary">
+ <CContainer fluid>
+ <CNavbarBrand href="#">Navbar</CNavbarBrand>
+ <CNavbarToggler onClick={() => setVisible(!visible)} />
+ <CCollapse className="navbar-collapse" visible={visible}>
+ <CNavbarNav>
+ <CNavItem>
+ <CNavLink href="#" active>
+ Home
+ </CNavLink>
+ </CNavItem>
+ <CNavItem>
+ <CNavLink href="#">Link</CNavLink>
+ </CNavItem>
+ <CDropdown variant="nav-item" popper={false}>
+ <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ <CNavItem>
+ <CNavLink href="#" disabled>
+ Disabled
+ </CNavLink>
+ </CNavItem>
+ </CNavbarNav>
+ <CForm className="d-flex">
+ <CFormInput type="search" className="me-2" placeholder="Search" />
+ <CButton type="submit" color="success" variant="outline">
+ Search
+ </CButton>
+ </CForm>
+ </CCollapse>
+ </CContainer>
+ </CNavbar>
+ )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarForms2Example.tsx b/packages/docs/content/components/navbar/examples/NavbarForms2Example.tsx
new file mode 100644
index 00000000..727ff2af
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarForms2Example.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { CButton, CContainer, CForm, CFormInput, CNavbar, CNavbarBrand } from '@coreui/react'
+
+export const NavbarForms2Example = () => {
+ return (
+ <CNavbar className="bg-body-tertiary">
+ <CContainer fluid>
+ <CNavbarBrand href="#">Navbar</CNavbarBrand>
+ <CForm className="d-flex">
+ <CFormInput type="search" className="me-2" placeholder="Search" />
+ <CButton type="submit" color="success" variant="outline">
+ Search
+ </CButton>
+ </CForm>
+ </CContainer>
+ </CNavbar>
+ )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarForms3Example.tsx b/packages/docs/content/components/navbar/examples/NavbarForms3Example.tsx
new file mode 100644
index 00000000..55bbf35f
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarForms3Example.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { CForm, CFormInput, CInputGroup, CInputGroupText, CNavbar } from '@coreui/react'
+
+export const NavbarForms3Example = () => {
+ return (
+ <CNavbar className="bg-body-tertiary">
+ <CForm className="container-fluid">
+ <CInputGroup>
+ <CInputGroupText id="basic-addon1">@</CInputGroupText>
+ <CFormInput placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" />
+ </CInputGroup>
+ </CForm>
+ </CNavbar>
+ )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarForms4Example.tsx b/packages/docs/content/components/navbar/examples/NavbarForms4Example.tsx
new file mode 100644
index 00000000..cf58e561
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarForms4Example.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { CButton, CForm, CNavbar } from '@coreui/react'
+
+export const NavbarForms4Example = () => {
+ return (
+ <CNavbar className="bg-body-tertiary">
+ <CForm className="container-fluid justify-content-start">
+ <CButton type="button" color="success" variant="outline" className="me-2">
+ Main button
+ </CButton>
+ <CButton type="button" color="secondary" variant="outline" size="sm">
+ Smaller button
+ </CButton>
+ </CForm>
+ </CNavbar>
+ )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarFormsExample.tsx b/packages/docs/content/components/navbar/examples/NavbarFormsExample.tsx
new file mode 100644
index 00000000..2b1e28c6
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarFormsExample.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { CButton, CContainer, CForm, CFormInput, CNavbar } from '@coreui/react'
+
+export const NavbarFormsExample = () => {
+ return (
+ <CNavbar className="bg-body-tertiary">
+ <CContainer fluid>
+ <CForm className="d-flex">
+ <CFormInput type="search" className="me-2" placeholder="Search" />
+ <CButton type="submit" color="success" variant="outline">
+ Search
+ </CButton>
+ </CForm>
+ </CContainer>
+ </CNavbar>
+ )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarNav2Example.tsx b/packages/docs/content/components/navbar/examples/NavbarNav2Example.tsx
new file mode 100644
index 00000000..55711a87
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarNav2Example.tsx
@@ -0,0 +1,40 @@
+import React, { useState } from 'react'
+import {
+ CCollapse,
+ CContainer,
+ CNavbar,
+ CNavbarBrand,
+ CNavbarNav,
+ CNavbarToggler,
+ CNavLink,
+} from '@coreui/react'
+
+export const NavbarNav2Example = () => {
+ const [visible, setVisible] = useState(false)
+ return (
+ <>
+ <CNavbar expand="lg" className="bg-body-tertiary">
+ <CContainer fluid>
+ <CNavbarBrand href="#">Navbar</CNavbarBrand>
+ <CNavbarToggler
+ aria-label="Toggle navigation"
+ aria-expanded={visible}
+ onClick={() => setVisible(!visible)}
+ />
+ <CCollapse className="navbar-collapse" visible={visible}>
+ <CNavbarNav as="nav">
+ <CNavLink href="#" active>
+ Home
+ </CNavLink>
+ <CNavLink href="#">Features</CNavLink>
+ <CNavLink href="#">Pricing</CNavLink>
+ <CNavLink href="#" disabled>
+ Disabled
+ </CNavLink>
+ </CNavbarNav>
+ </CCollapse>
+ </CContainer>
+ </CNavbar>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarNav3Example.tsx b/packages/docs/content/components/navbar/examples/NavbarNav3Example.tsx
new file mode 100644
index 00000000..680917b9
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarNav3Example.tsx
@@ -0,0 +1,58 @@
+import React, { useState } from 'react'
+import {
+ CCollapse,
+ CContainer,
+ CDropdown,
+ CDropdownDivider,
+ CDropdownItem,
+ CDropdownMenu,
+ CDropdownToggle,
+ CNavbar,
+ CNavbarBrand,
+ CNavbarNav,
+ CNavbarToggler,
+ CNavItem,
+ CNavLink,
+} from '@coreui/react'
+
+export const NavbarNav3Example = () => {
+ const [visible, setVisible] = useState(false)
+ return (
+ <>
+ <CNavbar expand="lg" className="bg-body-tertiary">
+ <CContainer fluid>
+ <CNavbarBrand href="#">Navbar</CNavbarBrand>
+ <CNavbarToggler
+ aria-label="Toggle navigation"
+ aria-expanded={visible}
+ onClick={() => setVisible(!visible)}
+ />
+ <CCollapse className="navbar-collapse" visible={visible}>
+ <CNavbarNav>
+ <CNavItem>
+ <CNavLink href="#" active>
+ Home
+ </CNavLink>
+ </CNavItem>
+ <CNavItem>
+ <CNavLink href="#">Features</CNavLink>
+ </CNavItem>
+ <CNavItem>
+ <CNavLink href="#">Pricing</CNavLink>
+ </CNavItem>
+ <CDropdown variant="nav-item" popper={false}>
+ <CDropdownToggle>Dropdown link</CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ </CNavbarNav>
+ </CCollapse>
+ </CContainer>
+ </CNavbar>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarNavExample.tsx b/packages/docs/content/components/navbar/examples/NavbarNavExample.tsx
new file mode 100644
index 00000000..2fecb2ae
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarNavExample.tsx
@@ -0,0 +1,49 @@
+import React, { useState } from 'react'
+import {
+ CCollapse,
+ CContainer,
+ CNavbar,
+ CNavbarBrand,
+ CNavbarNav,
+ CNavbarToggler,
+ CNavItem,
+ CNavLink,
+} from '@coreui/react'
+
+export const NavbarNavExample = () => {
+ const [visible, setVisible] = useState(false)
+ return (
+ <>
+ <CNavbar expand="lg" className="bg-body-tertiary">
+ <CContainer fluid>
+ <CNavbarBrand href="#">Navbar</CNavbarBrand>
+ <CNavbarToggler
+ aria-label="Toggle navigation"
+ aria-expanded={visible}
+ onClick={() => setVisible(!visible)}
+ />
+ <CCollapse className="navbar-collapse" visible={visible}>
+ <CNavbarNav>
+ <CNavItem>
+ <CNavLink href="#" active>
+ Home
+ </CNavLink>
+ </CNavItem>
+ <CNavItem>
+ <CNavLink href="#">Features</CNavLink>
+ </CNavItem>
+ <CNavItem>
+ <CNavLink href="#">Pricing</CNavLink>
+ </CNavItem>
+ <CNavItem>
+ <CNavLink href="#" disabled>
+ Disabled
+ </CNavLink>
+ </CNavItem>
+ </CNavbarNav>
+ </CCollapse>
+ </CContainer>
+ </CNavbar>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarPlacementExample.tsx b/packages/docs/content/components/navbar/examples/NavbarPlacementExample.tsx
new file mode 100644
index 00000000..7c40977e
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarPlacementExample.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react'
+
+export const NavbarPlacementExample = () => {
+ return (
+ <CNavbar className="bg-body-tertiary">
+ <CContainer fluid>
+ <CNavbarBrand href="#">Default</CNavbarBrand>
+ </CContainer>
+ </CNavbar>
+ )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarPlacementFixedBottomExample.tsx b/packages/docs/content/components/navbar/examples/NavbarPlacementFixedBottomExample.tsx
new file mode 100644
index 00000000..a7d302f1
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarPlacementFixedBottomExample.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react'
+
+export const NavbarPlacementFixedBottomExample = () => {
+ return (
+ <CNavbar className="bg-body-tertiary" placement="fixed-bottom">
+ <CContainer fluid>
+ <CNavbarBrand href="#">Fixed bottom</CNavbarBrand>
+ </CContainer>
+ </CNavbar>
+ )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarPlacementFixedTopExample.tsx b/packages/docs/content/components/navbar/examples/NavbarPlacementFixedTopExample.tsx
new file mode 100644
index 00000000..38ad1b61
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarPlacementFixedTopExample.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react'
+
+export const NavbarPlacementFixedTopExample = () => {
+ return (
+ <CNavbar className="bg-body-tertiary" placement="fixed-top">
+ <CContainer fluid>
+ <CNavbarBrand href="#">Fixed top</CNavbarBrand>
+ </CContainer>
+ </CNavbar>
+ )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarPlacementStickyTopExample.tsx b/packages/docs/content/components/navbar/examples/NavbarPlacementStickyTopExample.tsx
new file mode 100644
index 00000000..470ac1a2
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarPlacementStickyTopExample.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react'
+
+export const NavbarPlacementStickyTopExample = () => {
+ return (
+ <CNavbar className="bg-body-tertiary" placement="sticky-top">
+ <CContainer fluid>
+ <CNavbarBrand href="#">Sticky top</CNavbarBrand>
+ </CContainer>
+ </CNavbar>
+ )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarResponsiveExternalContentExample.tsx b/packages/docs/content/components/navbar/examples/NavbarResponsiveExternalContentExample.tsx
new file mode 100644
index 00000000..98e6b7eb
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarResponsiveExternalContentExample.tsx
@@ -0,0 +1,25 @@
+import React, { useState } from 'react'
+import { CCollapse, CContainer, CNavbar, CNavbarToggler } from '@coreui/react'
+
+export const NavbarResponsiveExternalContentExample = () => {
+ const [visible, setVisible] = useState(false)
+ return (
+ <>
+ <CCollapse id="navbarToggleExternalContent" visible={visible} data-coreui-theme="dark">
+ <div className="bg-dark p-4">
+ <h5 className="text-body-emphasis h4">Collapsed content</h5>
+ <span className="text-body-secondary">Toggleable via the navbar brand.</span>
+ </div>
+ </CCollapse>
+ <CNavbar colorScheme="dark" className="bg-dark">
+ <CContainer fluid>
+ <CNavbarToggler
+ aria-controls="navbarToggleExternalContent"
+ aria-label="Toggle navigation"
+ onClick={() => setVisible(!visible)}
+ />
+ </CContainer>
+ </CNavbar>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarResponsiveOffcanvas2Example.tsx b/packages/docs/content/components/navbar/examples/NavbarResponsiveOffcanvas2Example.tsx
new file mode 100644
index 00000000..89300d73
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarResponsiveOffcanvas2Example.tsx
@@ -0,0 +1,83 @@
+import React, { useState } from 'react'
+import {
+ CButton,
+ CCloseButton,
+ CContainer,
+ CDropdown,
+ CDropdownItem,
+ CDropdownDivider,
+ CDropdownMenu,
+ CDropdownToggle,
+ CForm,
+ CFormInput,
+ CNavbar,
+ CNavbarBrand,
+ CNavbarNav,
+ CNavbarToggler,
+ CNavItem,
+ CNavLink,
+ COffcanvas,
+ COffcanvasBody,
+ COffcanvasHeader,
+ COffcanvasTitle,
+} from '@coreui/react'
+
+export const NavbarResponsiveOffcanvas2Example = () => {
+ const [visible, setVisible] = useState(false)
+ return (
+ <CNavbar className="bg-body-tertiary" expand="xxl">
+ <CContainer fluid>
+ <CNavbarBrand>Offcanvas navbar</CNavbarBrand>
+ <CNavbarToggler
+ aria-controls="offcanvasNavbar2"
+ aria-label="Toggle navigation"
+ onClick={() => setVisible(!visible)}
+ />
+ <COffcanvas
+ id="offcanvasNavbar2"
+ placement="end"
+ portal={false}
+ visible={visible}
+ onHide={() => setVisible(false)}
+ >
+ <COffcanvasHeader>
+ <COffcanvasTitle>Offcanvas</COffcanvasTitle>
+ <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
+ </COffcanvasHeader>
+ <COffcanvasBody>
+ <CNavbarNav className="me-auto">
+ <CNavItem>
+ <CNavLink href="#" active>
+ Home
+ </CNavLink>
+ </CNavItem>
+ <CNavItem>
+ <CNavLink href="#">Link</CNavLink>
+ </CNavItem>
+ <CDropdown variant="nav-item" popper={false}>
+ <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ <CNavItem>
+ <CNavLink href="#" disabled>
+ Disabled
+ </CNavLink>
+ </CNavItem>
+ </CNavbarNav>
+ <CForm className="d-flex">
+ <CFormInput type="search" className="me-2" placeholder="Search" />
+ <CButton type="submit" color="success" variant="outline">
+ Search
+ </CButton>
+ </CForm>
+ </COffcanvasBody>
+ </COffcanvas>
+ </CContainer>
+ </CNavbar>
+ )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarResponsiveOffcanvasExample.tsx b/packages/docs/content/components/navbar/examples/NavbarResponsiveOffcanvasExample.tsx
new file mode 100644
index 00000000..5017ef5b
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarResponsiveOffcanvasExample.tsx
@@ -0,0 +1,83 @@
+import React, { useState } from 'react'
+import {
+ CButton,
+ CCloseButton,
+ CContainer,
+ CDropdown,
+ CDropdownItem,
+ CDropdownDivider,
+ CDropdownMenu,
+ CDropdownToggle,
+ CForm,
+ CFormInput,
+ CNavbar,
+ CNavbarBrand,
+ CNavbarNav,
+ CNavbarToggler,
+ CNavItem,
+ CNavLink,
+ COffcanvas,
+ COffcanvasBody,
+ COffcanvasHeader,
+ COffcanvasTitle,
+} from '@coreui/react'
+
+export const NavbarResponsiveOffcanvasExample = () => {
+ const [visible, setVisible] = useState(false)
+ return (
+ <CNavbar className="bg-body-tertiary">
+ <CContainer fluid>
+ <CNavbarBrand>Offcanvas navbar</CNavbarBrand>
+ <CNavbarToggler
+ aria-controls="offcanvasNavbar"
+ aria-label="Toggle navigation"
+ onClick={() => setVisible(!visible)}
+ />
+ <COffcanvas
+ id="offcanvasNavbar"
+ placement="end"
+ portal={false}
+ visible={visible}
+ onHide={() => setVisible(false)}
+ >
+ <COffcanvasHeader>
+ <COffcanvasTitle>Offcanvas</COffcanvasTitle>
+ <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
+ </COffcanvasHeader>
+ <COffcanvasBody>
+ <CNavbarNav>
+ <CNavItem>
+ <CNavLink href="#" active>
+ Home
+ </CNavLink>
+ </CNavItem>
+ <CNavItem>
+ <CNavLink href="#">Link</CNavLink>
+ </CNavItem>
+ <CDropdown variant="nav-item" popper={false}>
+ <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ <CNavItem>
+ <CNavLink href="#" disabled>
+ Disabled
+ </CNavLink>
+ </CNavItem>
+ </CNavbarNav>
+ <CForm className="d-flex">
+ <CFormInput type="search" className="me-2" placeholder="Search" />
+ <CButton type="submit" color="success" variant="outline">
+ Search
+ </CButton>
+ </CForm>
+ </COffcanvasBody>
+ </COffcanvas>
+ </CContainer>
+ </CNavbar>
+ )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarResponsiveToggler2Example.tsx b/packages/docs/content/components/navbar/examples/NavbarResponsiveToggler2Example.tsx
new file mode 100644
index 00000000..21d7c752
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarResponsiveToggler2Example.tsx
@@ -0,0 +1,55 @@
+import React, { useState } from 'react'
+import {
+ CButton,
+ CCollapse,
+ CContainer,
+ CForm,
+ CFormInput,
+ CNavbar,
+ CNavbarBrand,
+ CNavbarNav,
+ CNavbarToggler,
+ CNavItem,
+ CNavLink,
+} from '@coreui/react'
+
+export const NavbarResponsiveToggler2Example = () => {
+ const [visible, setVisible] = useState(false)
+ return (
+ <>
+ <CNavbar expand="lg" className="bg-body-tertiary">
+ <CContainer fluid>
+ <CNavbarBrand href="#">Navbar</CNavbarBrand>
+ <CNavbarToggler
+ aria-label="Toggle navigation"
+ aria-expanded={visible}
+ onClick={() => setVisible(!visible)}
+ />
+ <CCollapse className="navbar-collapse" visible={visible}>
+ <CNavbarNav className="me-auto mb-2 mb-lg-0">
+ <CNavItem>
+ <CNavLink href="#" active>
+ Home
+ </CNavLink>
+ </CNavItem>
+ <CNavItem>
+ <CNavLink href="#">Link</CNavLink>
+ </CNavItem>
+ <CNavItem>
+ <CNavLink href="#" disabled>
+ Disabled
+ </CNavLink>
+ </CNavItem>
+ </CNavbarNav>
+ <CForm className="d-flex">
+ <CFormInput type="search" className="me-2" placeholder="Search" />
+ <CButton type="submit" color="success" variant="outline">
+ Search
+ </CButton>
+ </CForm>
+ </CCollapse>
+ </CContainer>
+ </CNavbar>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarResponsiveToggler3Example.tsx b/packages/docs/content/components/navbar/examples/NavbarResponsiveToggler3Example.tsx
new file mode 100644
index 00000000..df353538
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarResponsiveToggler3Example.tsx
@@ -0,0 +1,55 @@
+import React, { useState } from 'react'
+import {
+ CButton,
+ CCollapse,
+ CContainer,
+ CForm,
+ CFormInput,
+ CNavbar,
+ CNavbarBrand,
+ CNavbarNav,
+ CNavbarToggler,
+ CNavItem,
+ CNavLink,
+} from '@coreui/react'
+
+export const NavbarResponsiveToggler3Example = () => {
+ const [visible, setVisible] = useState(false)
+ return (
+ <>
+ <CNavbar expand="lg" className="bg-body-tertiary">
+ <CContainer fluid>
+ <CNavbarToggler
+ aria-label="Toggle navigation"
+ aria-expanded={visible}
+ onClick={() => setVisible(!visible)}
+ />
+ <CNavbarBrand href="#">Navbar</CNavbarBrand>
+ <CCollapse className="navbar-collapse" visible={visible}>
+ <CNavbarNav className="me-auto mb-2 mb-lg-0">
+ <CNavItem>
+ <CNavLink href="#" active>
+ Home
+ </CNavLink>
+ </CNavItem>
+ <CNavItem>
+ <CNavLink href="#">Link</CNavLink>
+ </CNavItem>
+ <CNavItem>
+ <CNavLink href="#" disabled>
+ Disabled
+ </CNavLink>
+ </CNavItem>
+ </CNavbarNav>
+ <CForm className="d-flex">
+ <CFormInput type="search" className="me-2" placeholder="Search" />
+ <CButton type="submit" color="success" variant="outline">
+ Search
+ </CButton>
+ </CForm>
+ </CCollapse>
+ </CContainer>
+ </CNavbar>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarResponsiveTogglerExample.tsx b/packages/docs/content/components/navbar/examples/NavbarResponsiveTogglerExample.tsx
new file mode 100644
index 00000000..21abfd2a
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarResponsiveTogglerExample.tsx
@@ -0,0 +1,55 @@
+import React, { useState } from 'react'
+import {
+ CButton,
+ CCollapse,
+ CContainer,
+ CForm,
+ CFormInput,
+ CNavbar,
+ CNavbarBrand,
+ CNavbarNav,
+ CNavbarToggler,
+ CNavItem,
+ CNavLink,
+} from '@coreui/react'
+
+export const NavbarResponsiveTogglerExample = () => {
+ const [visible, setVisible] = useState(false)
+ return (
+ <>
+ <CNavbar expand="lg" className="bg-body-tertiary">
+ <CContainer fluid>
+ <CNavbarToggler
+ aria-label="Toggle navigation"
+ aria-expanded={visible}
+ onClick={() => setVisible(!visible)}
+ />
+ <CCollapse className="navbar-collapse" visible={visible}>
+ <CNavbarBrand href="#">Hidden brand</CNavbarBrand>
+ <CNavbarNav className="me-auto mb-2 mb-lg-0">
+ <CNavItem>
+ <CNavLink href="#" active>
+ Home
+ </CNavLink>
+ </CNavItem>
+ <CNavItem>
+ <CNavLink href="#">Link</CNavLink>
+ </CNavItem>
+ <CNavItem>
+ <CNavLink href="#" disabled>
+ Disabled
+ </CNavLink>
+ </CNavItem>
+ </CNavbarNav>
+ <CForm className="d-flex">
+ <CFormInput type="search" className="me-2" placeholder="Search" />
+ <CButton type="submit" color="success" variant="outline">
+ Search
+ </CButton>
+ </CForm>
+ </CCollapse>
+ </CContainer>
+ </CNavbar>
+ </>
+ )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarText.tsx b/packages/docs/content/components/navbar/examples/NavbarText.tsx
new file mode 100644
index 00000000..b015c47a
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarText.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CContainer, CNavbar, CNavbarText } from '@coreui/react'
+
+export const NavbarText = () => {
+ return (
+ <CNavbar className="bg-body-tertiary">
+ <CContainer fluid>
+ <CNavbarText>Navbar text with an inline element</CNavbarText>
+ </CContainer>
+ </CNavbar>
+ )
+}
diff --git a/packages/docs/content/components/navbar/index.mdx b/packages/docs/content/components/navbar/index.mdx
new file mode 100644
index 00000000..ec5b2792
--- /dev/null
+++ b/packages/docs/content/components/navbar/index.mdx
@@ -0,0 +1,187 @@
+---
+title: React Navbar Component
+name: Navbar
+description: Documentation and examples for the React navbar powerful, responsive navigation header component. Includes support for branding, links, dropdowns, and more.
+route: /components/navbar/
+other_frameworks: navbar
+---
+
+import { useState } from 'react'
+import {
+ CButton,
+ CContainer,
+ CCloseButton,
+ CCollapse,
+ CDropdown,
+ CDropdownDivider,
+ CDropdownHeader,
+ CDropdownItem,
+ CDropdownItemPlain,
+ CDropdownMenu,
+ CDropdownToggle,
+ CForm,
+ CFormInput,
+ CInputGroup,
+ CInputGroupText,
+ CNav,
+ CNavItem,
+ CNavLink,
+ CNavbar,
+ CNavbarBrand,
+ CNavbarNav,
+ CNavbarText,
+ CNavbarToggler,
+ COffcanvas,
+ COffcanvasBody,
+ COffcanvasHeader,
+ COffcanvasTitle,
+} from '@coreui/react/src/index'
+
+import CoreUISignetImg from './../../assets/images/brand/coreui-signet.svg'
+
+## Supported content
+
+`<CNavbar>` come with built-in support for a handful of sub-components. Choose from the following as needed:
+
+- `<CNavbarBrand>` for your company, product, or project name.
+- `<CNavbarNav>` for a full-height and lightweight navigation (including support for dropdowns).
+- `<CNavbarToggler>` for use with our collapse plugin and other [navigation toggling](#responsive-behaviors) behaviors.
+- Flex and spacing utilities for any form controls and actions.
+- `<CNavbarText>` for adding vertically centered strings of text.
+- `<CCollapse>` for grouping and hiding navbar contents by a parent breakpoint.
+
+Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the `lg` (large) breakpoint.
+
+## Basic usage
+
+<ExampleSnippet2 component="NavbarExample" componentName="React Navbar" />
+
+### Brand
+
+The `<CNavbarBrand>` can be applied to most elements, but an anchor works best, as some elements might require utility classes or custom styles.
+
+<ExampleSnippet2 component="NavbarBrandExample" componentName="React Navbar" />
+
+Adding images to the `<CNavbarBrand>` will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate.
+
+<ExampleSnippet2 component="NavbarBrand2Example" componentName="React Navbar" />
+
+<ExampleSnippet2 component="NavbarBrand3Example" componentName="React Navbar" />
+
+### Nav
+
+`<CNavbar>` navigation is based on `<CNavbarNav>`. **Navigation in navbars will also grow to occupy as much horizontal space as possible** to keep your navbar contents securely aligned.
+
+<ExampleSnippet2 component="NavbarNavExample" componentName="React Navbar" />
+
+And because we use classes for our navs, you can avoid the list-based approach entirely if you like.
+
+<ExampleSnippet2 component="NavbarNav2Example" componentName="React Navbar" />
+
+You can also use dropdowns in your navbar. Please note that `<CDropdown>` component requires `variant="nav-item"`.
+
+<ExampleSnippet2 component="NavbarNav3Example" componentName="React Navbar" />
+
+### Forms
+
+Place various form controls and components within a navbar:
+
+<ExampleSnippet2 component="NavbarFormsExample" componentName="React Navbar" />
+
+Immediate child elements of `<CNavbar>` use flex layout and will default to `justify-content: space-between`. Use additional [flex utilities](https://coreui.io/docs/utilities/flex/) as needed to adjust this behavior.
+
+<ExampleSnippet2 component="NavbarForms2Example" componentName="React Navbar" />
+
+Input groups work, too. If your navbar is an entire form, or mostly a form, you can use the `<CForm>` element as the container and save some HTML.
+
+<ExampleSnippet2 component="NavbarForms3Example" componentName="React Navbar" />
+
+Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements.
+
+<ExampleSnippet2 component="NavbarForms4Example" componentName="React Navbar" />
+
+### Text
+
+Navbars may contain bits of text with the help of `<CNavbarText>`. This class adjusts vertical alignment and horizontal spacing for strings of text.
+
+<ExampleSnippet2 component="NavbarText" componentName="React Navbar" />
+
+## Color schemes
+
+Theming the navbar has never been easier thanks to the combination of theming classes and `background-color` utilities. Set `colorScheme="light"` for use with light background colors, or `colorScheme="dark"` for dark background colors. Then, customize with `.bg-*` utilities.
+
+<ExampleSnippet2 component="NavbarColorSchemesExample" componentName="React Navbar" />
+
+## Containers
+
+Although it's not required, you can wrap a `<CNavbar>` in a `<CContainer>` to center it on a page–though note that an inner container is still required. Or you can add a container inside the `<CNavbar>` to only center the contents of a [fixed or static top navbar](#placement).
+
+<ExampleSnippet2 component="NavbarContainersExample" componentName="React Navbar" />
+
+Use any of the responsive containers to change how wide the content in your navbar is presented.
+
+<ExampleSnippet2 component="NavbarContainers2Example" componentName="React Navbar" />
+
+## Placement
+
+Use our `placement` properly to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow of the DOM and may require custom CSS (e.g., `padding-top` on the `<body>`) to prevent overlap with other elements.
+
+Also note that **`.sticky-top` uses `position: sticky`, which [isn't fully supported in every browser](https://caniuse.com/css-sticky)**.
+
+<ExampleSnippet2 component="NavbarPlacementExample" componentName="React Navbar" />
+
+<ExampleSnippet2 component="NavbarPlacementFixedTopExample" componentName="React Navbar" />
+
+<ExampleSnippet2 component="NavbarPlacementFixedBottomExample" componentName="React Navbar" />
+
+<ExampleSnippet2 component="NavbarPlacementStickyTopExample" componentName="React Navbar" />
+
+## Responsive behaviors
+
+Navbars can use `<CNavbarToggler>`, `<CCollapse>`, and `expand="{sm|md|lg|xl|xxl}"` property to determine when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.
+
+For navbars that never collapse, add the `expand` boolean property on the `<CNavbar>`. For navbars that always collapse, don't add any property.
+
+### Toggler
+
+Navbar togglers are left-aligned by default, but should they follow a sibling element like a `<CNavbarBrand>`, they'll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler. Below are examples of different toggle styles.
+
+With no `<CNavbarBrand>` shown at the smallest breakpoint:
+
+<ExampleSnippet2 component="NavbarResponsiveTogglerExample" componentName="React Navbar" />
+
+With a brand name shown on the left and toggler on the right:
+
+<ExampleSnippet2 component="NavbarResponsiveToggler2Example" componentName="React Navbar" />
+
+With a toggler on the left and brand name on the right:
+
+<ExampleSnippet2 component="NavbarResponsiveToggler3Example" componentName="React Navbar" />
+
+### External content
+
+Sometimes you want to use the collapse plugin to trigger a container element for content that structurally sits outside of the `<CNavbar>`.
+
+<ExampleSnippet2 component="NavbarResponsiveExternalContentExample" componentName="React Navbar" />
+
+### Offcanvas
+
+Transform your expanding and collapsing navbar into an offcanvas drawer with the offcanvas plugin. We extend both the offcanvas default styles and use our `expand="*"` prop to create a dynamic and flexible navigation sidebar.
+
+In the example below, to create an offcanvas navbar that is always collapsed across all breakpoints, omit the `expand="*"` prop entirely.
+
+<ExampleSnippet2 component="NavbarResponsiveOffcanvasExample" componentName="React Navbar" />
+
+To create an offcanvas navbar that expands into a normal navbar at a specific breakpoint like `xxl`, use `expand="xxl"` property.
+
+<ExampleSnippet2 component="NavbarResponsiveOffcanvas2Example" componentName="React Navbar" />
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [<CNavbar />](./api/#cnavbar)
+- [<CNavbarBrand />](./api/#cnavbarbrand)
+- [<CNavbarNav />](./api/#cnavbarnav)
+- [<CNavbarText />](./api/#cnavbartext)
+- [<CNavbarToggler />](./api/#cnavbartoggler)
\ No newline at end of file
diff --git a/packages/docs/content/components/navbar/styling.mdx b/packages/docs/content/components/navbar/styling.mdx
new file mode 100644
index 00000000..afcb447f
--- /dev/null
+++ b/packages/docs/content/components/navbar/styling.mdx
@@ -0,0 +1,57 @@
+---
+title: React Navbar Component Styling
+name: Navbar Styling
+description: Learn how to customize the React Navbar component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/navbar/
+---
+
+{/* ### CSS class names
+
+React Navbar comes with built-in class names that make styling super simple. Here’s a quick rundown of what you can use:
+
+<ClassNamesDocs
+ files={[
+ 'components/navbar/CNavbar.tsx',
+ ]}
+/> */}
+
+### CSS variables
+
+React navbars use local CSS variables on `.navbar` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+<ScssDocs file="_navbar.scss" capture="navbar-css-vars"/>
+
+Some additional CSS variables are also present on `.navbar-nav`:
+
+<ScssDocs file="_navbar.scss" capture="navbar-nav-css-vars"/>
+
+Customization through CSS variables can be seen on the `.navbar-dark` class where we override specific values without adding duplicate CSS selectors.
+
+<ScssDocs file="_navbar.scss" capture="navbar-dark-css-vars"/>
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+ '--cui-navbar-color': '#24e484',
+ '--cui-navbar-hover-color': '1a1a1a',
+}
+
+return <CNavbar style={customVars}>{/* Navbar content */}</CNavbar>
+```
+
+### SASS variables
+
+Variables for all navbars:
+
+<ScssDocs file="_variables.scss" capture="navbar-variables"/>
+
+Variables for the [dark navbar](#color-schemes):
+
+<ScssDocs file="_variables.scss" capture="navbar-dark-variables"/>
+
+### SASS loops
+
+[Responsive navbar expand/collapse classes](#responsive-behaviors) (e.g., `.navbar-expand-lg`) are combined with the `$breakpoints` map and generated through a loop in `scss/_navbar.scss`.
+
+<ScssDocs file="_navbar.scss" capture="navbar-expand-loop"/>
diff --git a/packages/docs/content/components/navs-tabs/api.mdx b/packages/docs/content/components/navs-tabs/api.mdx
new file mode 100644
index 00000000..4c78c048
--- /dev/null
+++ b/packages/docs/content/components/navs-tabs/api.mdx
@@ -0,0 +1,32 @@
+---
+title: React Navs & Tabs Components API
+name: Navs & Tabs API
+description: Explore the API reference for the React Navs & Tabs components and discover how to effectively utilize its props for customization.
+route: /components/navs-tabs/
+---
+
+import CNavAPI from '../../api/CNav.api.mdx'
+import CNavItemAPI from '../../api/CNavItem.api.mdx'
+import CNavLinkAPI from '../../api/CNavLink.api.mdx'
+import CTabContentAPI from '../../api/CTabContent.api.mdx'
+import CTabPaneAPI from '../../api/CTabPane.api.mdx'
+
+## CNav
+
+<CNavAPI />
+
+## CNavItem
+
+<CNavItemAPI />
+
+## CNavLink
+
+<CNavLinkAPI />
+
+## CTabContent
+
+<CTabContentAPI />
+
+## CTabPane
+
+<CTabPaneAPI />
diff --git a/packages/docs/content/components/navs-tabs.mdx b/packages/docs/content/components/navs-tabs/index.mdx
similarity index 93%
rename from packages/docs/content/components/navs-tabs.mdx
rename to packages/docs/content/components/navs-tabs/index.mdx
index 86f52b5c..45f64bb7 100644
--- a/packages/docs/content/components/navs-tabs.mdx
+++ b/packages/docs/content/components/navs-tabs/index.mdx
@@ -2,8 +2,7 @@
title: React Navs & Tabs Components
name: Navs & Tabs
description: Documentation and examples for how to use CoreUI's included React navigation components.
-menu: Components
-route: /components/navs-tabs
+route: /components/navs-tabs/
other_frameworks: navs-tabs
---
@@ -652,68 +651,12 @@ return (
)
```
-## Customizing
-
-### CSS variables
-
-React navs use local CSS variables on `.nav`, `.nav-tabs`, `.nav-pills`, `.nav-underline` and `.nav-underline-border` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
-
-On the `.nav` base class:
-
-<ScssDocs file="_nav.scss" capture="nav-css-vars"/>
-
-On the `.nav-tabs` modifier class:
-
-<ScssDocs file="_nav.scss" capture="nav-tabs-css-vars"/>
-
-On the `.nav-pills` modifier class:
-
-<ScssDocs file="_nav.scss" capture="nav-pills-css-vars"/>
-
-<small className="d-inline-flex mb-3 px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 border border-success border-opacity-10 rounded-2">Added in v5.0.0</small>
-
-On the `.nav-underline` modifier class:
-
-<ScssDocs file="_nav.scss" capture="nav-underline-css-vars"/>
-
-<small className="d-inline-flex mb-3 px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 border border-success border-opacity-10 rounded-2">Added in v5.0.0</small>
-
-On the `.nav-underline-border` modifier class:
-
-<ScssDocs file="_nav.scss" capture="nav-underline-border-css-vars"/>
-
-#### How to use CSS variables
-
-```jsx
-const vars = {
- '--my-css-var': 10,
- '--my-another-css-var': "red"
-}
-return <CNav style={vars}>...</CNav>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="nav-variables"/>
-
## API
-### CNav
-
-`markdown:CNav.api.mdx`
-
-### CNavItem
-
-`markdown:CNavItem.api.mdx`
-
-### CNavLink
-
-`markdown:CNavLink.api.mdx`
-
-### CTabContent
-
-`markdown:CTabContent.api.mdx`
-
-### CTabPane
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
-`markdown:CTabPane.api.mdx`
+- [<CNav />](./api/#cnav)
+- [<CNavItem />](./api/#cnavitem)
+- [<CNavLink />](./api/#cnavlink)
+- [<CTabContent />](./api/#ctabcontent)
+- [<CTabPane />](./api/#ctabpane)
\ No newline at end of file
diff --git a/packages/docs/content/components/navs-tabs/styling.mdx b/packages/docs/content/components/navs-tabs/styling.mdx
new file mode 100644
index 00000000..1452d67b
--- /dev/null
+++ b/packages/docs/content/components/navs-tabs/styling.mdx
@@ -0,0 +1,59 @@
+---
+title: React Navs & Tabs Components Styling
+name: Navs & Tabs Styling
+description: Learn how to customize the React Navs & Tabs components with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/navs-tabs/
+---
+
+{/* ### CSS class names
+
+React Navbar comes with built-in class names that make styling super simple. Here’s a quick rundown of what you can use:
+
+<ClassNamesDocs
+ files={[
+ 'components/navbar/CNavbar.tsx',
+ ]}
+/> */}
+
+### CSS variables
+
+React navs use local CSS variables on `.nav`, `.nav-tabs`, `.nav-pills`, `.nav-underline` and `.nav-underline-border` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+On the `.nav` base class:
+
+<ScssDocs file="_nav.scss" capture="nav-css-vars"/>
+
+On the `.nav-tabs` modifier class:
+
+<ScssDocs file="_nav.scss" capture="nav-tabs-css-vars"/>
+
+On the `.nav-pills` modifier class:
+
+<ScssDocs file="_nav.scss" capture="nav-pills-css-vars"/>
+
+<small className="d-inline-flex mb-3 px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 border border-success border-opacity-10 rounded-2">Added in v5.0.0</small>
+
+On the `.nav-underline` modifier class:
+
+<ScssDocs file="_nav.scss" capture="nav-underline-css-vars"/>
+
+<small className="d-inline-flex mb-3 px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 border border-success border-opacity-10 rounded-2">Added in v5.0.0</small>
+
+On the `.nav-underline-border` modifier class:
+
+<ScssDocs file="_nav.scss" capture="nav-underline-border-css-vars"/>
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+ '--cui-nav-link-color': '#555',
+ '--cui-nav-link-disabled-color': '#afaeef',
+}
+
+return <CNav style={customVars}>{/* Nav content */}</CNav>
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="nav-variables"/>
diff --git a/packages/docs/content/components/offcanvas/api.mdx b/packages/docs/content/components/offcanvas/api.mdx
new file mode 100644
index 00000000..28b85299
--- /dev/null
+++ b/packages/docs/content/components/offcanvas/api.mdx
@@ -0,0 +1,27 @@
+---
+title: React Offcanvas Component API
+name: Offcanvas API
+description: Explore the API reference for the React Offcanvas component and discover how to effectively utilize its props for customization.
+route: /components/offcanvas/
+---
+
+import COffcanvasAPI from '../../api/COffcanvas.api.mdx'
+import COffcanvasBodyAPI from '../../api/COffcanvasBody.api.mdx'
+import COffcanvasHeaderAPI from '../../api/COffcanvasHeader.api.mdx'
+import COffcanvasTitleAPI from '../../api/COffcanvasTitle.api.mdx'
+
+## COffcanvas
+
+<COffcanvasAPI />
+
+## COffcanvasBody
+
+<COffcanvasBodyAPI />
+
+## COffcanvasHeader
+
+<COffcanvasHeaderAPI />
+
+## COffcanvasTitle
+
+<COffcanvasTitleAPI />
diff --git a/packages/docs/content/components/offcanvas.mdx b/packages/docs/content/components/offcanvas/index.mdx
similarity index 97%
rename from packages/docs/content/components/offcanvas.mdx
rename to packages/docs/content/components/offcanvas/index.mdx
index 37ac21d0..c2811ace 100644
--- a/packages/docs/content/components/offcanvas.mdx
+++ b/packages/docs/content/components/offcanvas/index.mdx
@@ -2,8 +2,7 @@
title: React Offcanvas Component
name: Offcanvas
description: React alert component allows build hidden sidebars into your project for navigation, shopping carts.
-menu: Components
-route: /components/offcanvas
+route: /components/offcanvas/
other_frameworks: offcanvas
---
@@ -450,18 +449,9 @@ return <COffcanvas style={vars}>...</COffcanvas>
## API
-### COffcanvas
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
-`markdown:COffcanvas.api.mdx`
-
-### COffcanvasBody
-
-`markdown:COffcanvasBody.api.mdx`
-
-### COffcanvasHeader
-
-`markdown:COffcanvasHeader.api.mdx`
-
-### COffcanvasTitle
-
-`markdown:COffcanvasTitle.api.mdx`
+- [<COffcanvas />](./api/#coffcanvas)
+- [<COffcanvasBody />](./api/#coffcanvasbody)
+- [<COffcanvasHeader />](./api/#coffcanvasheader)
+- [<COffcanvasTitle />](./api/#coffcanvastitle)
\ No newline at end of file
diff --git a/packages/docs/content/components/offcanvas/styling.mdx b/packages/docs/content/components/offcanvas/styling.mdx
new file mode 100644
index 00000000..5f005a5f
--- /dev/null
+++ b/packages/docs/content/components/offcanvas/styling.mdx
@@ -0,0 +1,38 @@
+---
+title: React Offcanvas Component Styling
+name: Offcanvas Styling
+description: Learn how to customize the React Offcanvas component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/offcanvas/
+---
+
+{/* ### CSS class names
+
+React Offcanvas comes with built-in class names that make styling super simple. Here’s a quick rundown of what you can use:
+
+<ClassNamesDocs
+ files={[
+ 'components/offcanvas/COffcanvas.tsx',
+ ]}
+/> */}
+
+### CSS variables
+
+React offcanvas uses local CSS variables on `.offcanvas` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+<ScssDocs file="_offcanvas.scss" capture="offcanvas-css-vars"/>
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+ '--cui-offcanvas-color': '#555',
+ '--cui-offcanvas-bg': '#fff',
+}
+
+return <COffcanvas style={customVars}>{/* Offcanvas content */}</COffcanvas>
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="offcanvas-variables"/>
+
diff --git a/packages/docs/content/components/pagination/api.mdx b/packages/docs/content/components/pagination/api.mdx
new file mode 100644
index 00000000..8bc21ca8
--- /dev/null
+++ b/packages/docs/content/components/pagination/api.mdx
@@ -0,0 +1,17 @@
+---
+title: React Pagination Component API
+name: Pagination API
+description: Explore the API reference for the React Pagination component and discover how to effectively utilize its props for customization.
+route: /components/pagination/
+---
+
+import CPaginationAPI from '../../api/CPagination.api.mdx'
+import CPaginationItemAPI from '../../api/CPaginationItem.api.mdx'
+
+## CPagination
+
+<CPaginationAPI />
+
+## CPaginationItem
+
+<CPaginationItemAPI />
diff --git a/packages/docs/content/components/pagination.mdx b/packages/docs/content/components/pagination/index.mdx
similarity index 85%
rename from packages/docs/content/components/pagination.mdx
rename to packages/docs/content/components/pagination/index.mdx
index 4562715f..7c335981 100644
--- a/packages/docs/content/components/pagination.mdx
+++ b/packages/docs/content/components/pagination/index.mdx
@@ -2,8 +2,7 @@
title: React Pagination Component
name: Pagination
description: Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.
-menu: Components
-route: /components/pagination
+route: /components/pagination/
other_frameworks: pagination
---
@@ -111,34 +110,9 @@ Change the alignment of pagination components with `align` property.
</CPagination>
```
-## Customizing
-
-### CSS variables
-
-React pagination use local CSS variables on `.pagination` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
-
-<ScssDocs file="_pagination.scss" capture="pagination-css-vars"/>
-
-#### How to use CSS variables
-
-```jsx
-const vars = {
- '--my-css-var': 10,
- '--my-another-css-var': "red"
-}
-return <CPagination style={vars}>...</CCard>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="pagination-variables"/>
-
## API
-### CPagination
-
-`markdown:CPagination.api.mdx`
-
-### CPaginationItem
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
-`markdown:CPaginationItem.api.mdx`
+- [<CPagination />](./api/#coffcanvas)
+- [<CPaginationItem />](./api/#coffcanvasbody)
\ No newline at end of file
diff --git a/packages/docs/content/components/pagination/styling.mdx b/packages/docs/content/components/pagination/styling.mdx
new file mode 100644
index 00000000..61a52f76
--- /dev/null
+++ b/packages/docs/content/components/pagination/styling.mdx
@@ -0,0 +1,38 @@
+---
+title: React Pagination Component Styling
+name: Pagination Styling
+description: Learn how to customize the React Pagination component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/pagination/
+---
+
+{/* ### CSS class names
+
+React Pagination comes with built-in class names that make styling super simple. Here’s a quick rundown of what you can use:
+
+<ClassNamesDocs
+ files={[
+ 'components/pagination/CPagination.tsx',
+ ]}
+/> */}
+
+### CSS variables
+
+React pagination uses local CSS variables on `.pagination` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+<ScssDocs file="_pagination.scss" capture="pagination-css-vars"/>
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+ '--cui-pagination-color': '#555',
+ '--cui-pagination-bg': '#fff',
+}
+
+return <CPagination style={customVars}>{/* Pagination content */}</CPagination>
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="pagination-variables"/>
+
diff --git a/packages/docs/content/components/placeholder/api.mdx b/packages/docs/content/components/placeholder/api.mdx
new file mode 100644
index 00000000..eb237cd5
--- /dev/null
+++ b/packages/docs/content/components/placeholder/api.mdx
@@ -0,0 +1,12 @@
+---
+title: React Placeholder Component API
+name: Placeholder API
+description: Explore the API reference for the React Placeholder component and discover how to effectively utilize its props for customization.
+route: /components/placeholder/
+---
+
+import CPlaceholderAPI from '../../api/CPlaceholder.api.mdx'
+
+## CPlaceholder
+
+<CPlaceholderAPI />
diff --git a/packages/docs/content/components/placeholder.mdx b/packages/docs/content/components/placeholder/index.mdx
similarity index 94%
rename from packages/docs/content/components/placeholder.mdx
rename to packages/docs/content/components/placeholder/index.mdx
index b2debab1..644f3b3a 100644
--- a/packages/docs/content/components/placeholder.mdx
+++ b/packages/docs/content/components/placeholder/index.mdx
@@ -2,8 +2,7 @@
title: React Placeholder Component
name: Placeholder
description: Use loading react placeholders for your components or pages to indicate something may still be loading.
-menu: Components
-route: /components/placeholder
+route: /components/placeholder/
other_frameworks: placeholder
---
@@ -18,7 +17,7 @@ import {
CPlaceholder,
} from '@coreui/react/src/index'
-import ReactImg from './../assets/images/react.jpg'
+import ReactImg from './../../assets/images/react.jpg'
## About
@@ -132,14 +131,8 @@ Animate placeholders with `animation="glow"` or `animation="wave"` to better con
</CPlaceholder>
```
-## Customizing
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="placeholders"/>
-
## API
-### CPlaceholder
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
-`markdown:CPlaceholder.api.mdx`
+- [<CPlaceholder />](./api/#cplaceholder)
diff --git a/packages/docs/content/components/placeholder/styling.mdx b/packages/docs/content/components/placeholder/styling.mdx
new file mode 100644
index 00000000..1f1e84b8
--- /dev/null
+++ b/packages/docs/content/components/placeholder/styling.mdx
@@ -0,0 +1,20 @@
+---
+title: React Placeholder Component Styling
+name: Placeholder Styling
+description: Learn how to customize the React Placeholder component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/placeholder/
+---
+
+{/* ### CSS class names
+
+React Placeholder comes with built-in class names that make styling super simple. Here’s a quick rundown of what you can use:
+
+<ClassNamesDocs
+ files={[
+ 'components/placeholder/CPlaceholder.tsx',
+ ]}
+/> */}
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="placeholders"/>
diff --git a/packages/docs/content/components/popover/api.mdx b/packages/docs/content/components/popover/api.mdx
new file mode 100644
index 00000000..cff7ebe7
--- /dev/null
+++ b/packages/docs/content/components/popover/api.mdx
@@ -0,0 +1,12 @@
+---
+title: React Popover Component API
+name: Popover API
+description: Explore the API reference for the React Popover component and discover how to effectively utilize its props for customization.
+route: /components/popover/
+---
+
+import CPopoverAPI from '../../api/CPopover.api.mdx'
+
+## CPopover
+
+<CPopoverAPI />
diff --git a/packages/docs/content/components/popover.mdx b/packages/docs/content/components/popover/index.mdx
similarity index 89%
rename from packages/docs/content/components/popover.mdx
rename to packages/docs/content/components/popover/index.mdx
index ea2cdbc0..7db36c60 100644
--- a/packages/docs/content/components/popover.mdx
+++ b/packages/docs/content/components/popover/index.mdx
@@ -2,8 +2,7 @@
title: React Popover Component
name: Popover
description: Documentation and examples for adding React popovers, like those found in iOS, to any element on your site.
-menu: Components
-route: /components/popover
+route: /components/popover/
other_frameworks: popover
---
@@ -184,31 +183,8 @@ For disabled popover triggers, you may also prefer `trigger={['hover', 'focus']}
</CPopover>
```
-
-## Customizing
-
-### CSS variables
-
-React popovers use local CSS variables on `.popover` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
-
-<ScssDocs file="_popover.scss" capture="popover-css-vars"/>
-
-#### How to use CSS variables
-
-```jsx
-const vars = {
- '--my-css-var': 10,
- '--my-another-css-var': 'red',
-}
-return <CPopover style={vars}>...</CPopover>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="popover-variables"/>
-
## API
-### CPopover
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
-`markdown:CPopover.api.mdx`
+- [<CPopover />](./api/#cpopover)
\ No newline at end of file
diff --git a/packages/docs/content/components/popover/styling.mdx b/packages/docs/content/components/popover/styling.mdx
new file mode 100644
index 00000000..f0060be3
--- /dev/null
+++ b/packages/docs/content/components/popover/styling.mdx
@@ -0,0 +1,37 @@
+---
+title: React Popover Component Styling
+name: Popover Styling
+description: Learn how to customize the React Popover component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/popover/
+---
+
+{/* ### CSS class names
+
+React Popover comes with built-in class names that make styling super simple. Here’s a quick rundown of what you can use:
+
+<ClassNamesDocs
+ files={[
+ 'components/popover/CPopover.tsx',
+ ]}
+/> */}
+
+### CSS variables
+
+React Popover supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.
+
+<ScssDocs file="_popover.scss" capture="popover-css-vars"/>
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+ '--cui-popover-body-color': '#888',
+ '--cui-popover-bg': '#f2f4f6',
+}
+
+return <CPopover style={customVars}>{/* Popover content */}</CPopover>
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="popover-variables"/>
diff --git a/packages/docs/content/components/progress/api.mdx b/packages/docs/content/components/progress/api.mdx
new file mode 100644
index 00000000..6718ee10
--- /dev/null
+++ b/packages/docs/content/components/progress/api.mdx
@@ -0,0 +1,17 @@
+---
+title: React Progress Component API
+name: Progress API
+description: Explore the API reference for the React Progress component and discover how to effectively utilize its props for customization.
+route: /components/progress/
+---
+
+import CProgressAPI from '../../api/CProgress.api.mdx'
+import CProgressBarAPI from '../../api/CProgressBar.api.mdx'
+
+## CProgress
+
+<CProgressAPI />
+
+## CProgressBar
+
+<CProgressBarAPI />
diff --git a/packages/docs/content/components/progress.mdx b/packages/docs/content/components/progress/index.mdx
similarity index 88%
rename from packages/docs/content/components/progress.mdx
rename to packages/docs/content/components/progress/index.mdx
index 905b7cb8..331e0106 100644
--- a/packages/docs/content/components/progress.mdx
+++ b/packages/docs/content/components/progress/index.mdx
@@ -2,8 +2,7 @@
title: React Progress Component
name: Progress
description: Documentation and examples for using React progress bars featuring support for stacked bars, animated backgrounds, and text labels.
-menu: Components
-route: /components/progress
+route: /components/progress/
other_frameworks: progress
---
@@ -151,34 +150,9 @@ The striped gradient can also be animated. Add `animated` property to `<CProgres
<CProgress color="danger" variant="striped" animated value={100} />
```
-## Customizing
-
-### CSS variables
-
-React progress bars use local CSS variables on `.progress` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
-
-<ScssDocs file="_progress.scss" capture="progress-css-vars"/>
-
-#### How to use CSS variables
-
-```jsx
-const vars = {
- '--my-css-var': 10,
- '--my-another-css-var': "red"
-}
-return <CProgress style={vars}>...</CProgress>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="progress-variables"/>
-
## API
-### CProgress
-
-`markdown:CProgress.api.mdx`
-
-### CProgressBar
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
-`markdown:CProgressBar.api.mdx`
+- [<CProgress />](./api/#cprogress)
+- [<CProgressBar />](./api/#cprogressbar)
diff --git a/packages/docs/content/components/progress/styling.mdx b/packages/docs/content/components/progress/styling.mdx
new file mode 100644
index 00000000..c96613f8
--- /dev/null
+++ b/packages/docs/content/components/progress/styling.mdx
@@ -0,0 +1,37 @@
+---
+title: React Progress Component Styling
+name: Progress Styling
+description: Learn how to customize the React Progress component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/progress/
+---
+
+{/* ### CSS class names
+
+React Progress comes with built-in class names that make styling super simple. Here’s a quick rundown of what you can use:
+
+<ClassNamesDocs
+ files={[
+ 'components/progress/CProgress.tsx',
+ ]}
+/> */}
+
+### CSS variables
+
+React Progress supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.
+
+<ScssDocs file="_progress.scss" capture="progress-css-vars"/>
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+ '--cui-progress-bar-color': '#888',
+ '--cui-progress-bar-bg': '#f2f4f6',
+}
+
+return <CProgress style={customVars}>...</CProgress>
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="progress-variables"/>
diff --git a/packages/docs/content/components/sidebar/api.mdx b/packages/docs/content/components/sidebar/api.mdx
new file mode 100644
index 00000000..92b6b112
--- /dev/null
+++ b/packages/docs/content/components/sidebar/api.mdx
@@ -0,0 +1,38 @@
+---
+title: React Sidebar Component API
+name: Sidebar API
+description: Explore the API reference for the React Sidebar component and discover how to effectively utilize its props for customization.
+route: /components/widgets/
+---
+
+import CSidebarAPI from '../../api/CSidebar.api.mdx'
+import CSidebarBrandAPI from '../../api/CSidebarBrand.api.mdx'
+import CSidebarFooterAPI from '../../api/CSidebarFooter.api.mdx'
+import CSidebarHeaderAPI from '../../api/CSidebarHeader.api.mdx'
+import CSidebarNavAPI from '../../api/CSidebarNav.api.mdx'
+import CSidebarTogglerAPI from '../../api/CSidebarToggler.api.mdx'
+
+## CSidebar
+
+<CSidebarAPI />
+
+## CSidebarBrand
+
+<CSidebarBrandAPI />
+
+## CSidebarFooter
+
+<CSidebarFooterAPI />
+
+## CSidebarHeader
+
+<CSidebarHeaderAPI />
+
+## CSidebarNav
+
+<CSidebarNavAPI />
+
+## CSidebarToggler
+
+<CSidebarTogglerAPI />
+
diff --git a/packages/docs/content/components/sidebar.mdx b/packages/docs/content/components/sidebar/index.mdx
similarity index 96%
rename from packages/docs/content/components/sidebar.mdx
rename to packages/docs/content/components/sidebar/index.mdx
index a2367350..ce372eb8 100644
--- a/packages/docs/content/components/sidebar.mdx
+++ b/packages/docs/content/components/sidebar/index.mdx
@@ -2,8 +2,7 @@
title: React Sidebar Component
name: Sidebar
description:
-menu: Components
-route: /components/sidebar
+route: /components/sidebar/
other_frameworks: sidebar
---
@@ -278,28 +277,14 @@ return <CSidebar style={vars}>...</CSidebar>
<ScssDocs file="_variables.scss" capture="sidebar-toggler" />
-## API
-
-### CSidebar
-
-`markdown:CSidebar.api.mdx`
-
-### CSidebarBrand
-
-`markdown:CSidebarBrand.api.mdx`
-
-### CSidebarFooter
-`markdown:CSidebarFooter.api.mdx`
-
-### CSidebarHeader
-
-`markdown:CSidebarHeader.api.mdx`
-
-### CSidebarNav
-
-`markdown:CSidebarNav.api.mdx`
+## API
-### CSidebarToggler
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
-`markdown:CSidebarToggler.api.mdx`
+- [<CSidebar />](./api/#csidebar)
+- [<CSidebarBrand />](./api/#csidebarbrand)
+- [<CSidebarFooter />](./api/#csidebarfooter)
+- [<CSidebarHeader />](./api/#csidebarheader)
+- [<CSidebarNav />](./api/#csidebarnav)
+- [<CSidebarToggler />](./api/#csidebartoggler)
diff --git a/packages/docs/content/components/sidebar/styling.mdx b/packages/docs/content/components/sidebar/styling.mdx
new file mode 100644
index 00000000..0a5ab0bd
--- /dev/null
+++ b/packages/docs/content/components/sidebar/styling.mdx
@@ -0,0 +1,39 @@
+---
+title: React Sidebar Component Styling
+name: Sidebar Styling
+description: Learn how to customize the React Sidebar component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/sidebar/
+---
+
+### CSS variables
+
+React sidebars use local CSS variables on `.sidebar` and `.sidebar-backdrop` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+<ScssDocs file="sidebar/_sidebar.scss" capture="sidebar-css-vars" />
+
+<ScssDocs file="sidebar/_sidebar.scss" capture="sidebar-overlaid-css-vars" />
+
+<ScssDocs file="sidebar/_sidebar-narrow.scss" capture="sidebar-narrow-css-vars" />
+
+<ScssDocs file="sidebar/_sidebar-nav.scss" capture="sidebar-nav-css-vars" />
+
+<ScssDocs file="sidebar/_sidebar.scss" capture="sidebar-toggler-css-vars" />
+
+<ScssDocs file="sidebar/_sidebar.scss" capture="sidebar-backdrop-css-vars" />
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+ '--cui-sidebar-bg': '#121212',
+ '--cui-sidebar-color': '#eee',
+}
+
+return <CSidebar style={customVars}>{/* Sidebar content */}</CSidebar>
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="sidebar-variables" />
+
+<ScssDocs file="_variables.scss" capture="sidebar-toggler" />
diff --git a/packages/docs/content/components/spinner/api.mdx b/packages/docs/content/components/spinner/api.mdx
new file mode 100644
index 00000000..dd8cd57a
--- /dev/null
+++ b/packages/docs/content/components/spinner/api.mdx
@@ -0,0 +1,12 @@
+---
+title: React Spinner Component API
+name: Spinner API
+description: Explore the API reference for the React Spinner component and discover how to effectively utilize its props for customization.
+route: /components/spinner/
+---
+
+import CSpinnerAPI from '../../api/CSpinner.api.mdx'
+
+## CSpinner
+
+<CSpinnerAPI />
diff --git a/packages/docs/content/components/spinner.mdx b/packages/docs/content/components/spinner/index.mdx
similarity index 76%
rename from packages/docs/content/components/spinner.mdx
rename to packages/docs/content/components/spinner/index.mdx
index dc977bda..8a2e0698 100644
--- a/packages/docs/content/components/spinner.mdx
+++ b/packages/docs/content/components/spinner/index.mdx
@@ -2,8 +2,7 @@
title: React Spinner Component
name: Spinner
description: Indicate the loading state of a component or page with CoreUI spinners, built entirely with HTML, CSS, and no JavaScript.
-menu: Components
-route: /components/spinner
+route: /components/spinner/
other_frameworks: spinner
---
@@ -146,48 +145,8 @@ Use spinners within buttons to indicate an action is currently processing or tak
</CButton>
```
-## Customizing
-
-### CSS variables
-
-React spinners use local CSS variables on `.spinner-border` and `.spinner-grow` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
-
-Border spinner variables:
-
-<ScssDocs file="_spinners.scss" capture="spinner-border-css-vars" />
-
-Growing spinner variables:
-
-<ScssDocs file="_spinners.scss" capture="spinner-grow-css-vars" />
-
-For both spinners, small spinner modifier classes are used to update the values of these CSS variables as needed. For example, the `.spinner-border-sm` class does the following:
-
-<ScssDocs file="_spinners.scss" capture="spinner-border-sm-css-vars" />
-
-#### How to use CSS variables
-
-```jsx
-const vars = {
- '--my-css-var': 10,
- '--my-another-css-var': "red"
-}
-return <CSpinner style={vars}>...</CSpinner>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="spinner-variables" />
-
-### Keyframes
-
-Used for creating the CSS animations for our spinners. Included in `_spinners.scss`.
-
-<ScssDocs file="_spinners.scss" capture="spinner-border-keyframes" />
-
-<ScssDocs file="_spinners.scss" capture="spinner-grow-keyframes" />
-
## API
-### CSpinner
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
-`markdown:CSpinner.api.mdx`
\ No newline at end of file
+- [<CSpinner />](./api/#cspinner)
\ No newline at end of file
diff --git a/packages/docs/content/components/spinner/styling.mdx b/packages/docs/content/components/spinner/styling.mdx
new file mode 100644
index 00000000..237b8817
--- /dev/null
+++ b/packages/docs/content/components/spinner/styling.mdx
@@ -0,0 +1,55 @@
+---
+title: React Spinner Component Styling
+name: Spinner Styling
+description: Learn how to customize the React Spinner component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/spinner/
+---
+
+{/* ### CSS class names
+
+React Spinner comes with built-in class names that make styling super simple. Here’s a quick rundown of what you can use:
+
+<ClassNamesDocs
+ files={[
+ 'components/spinner/CSpinner.tsx',
+ ]}
+/> */}
+
+### CSS variables
+
+React spinners use local CSS variables on `.spinner-border` and `.spinner-grow` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+Border spinner variables:
+
+<ScssDocs file="_spinners.scss" capture="spinner-border-css-vars" />
+
+Growing spinner variables:
+
+<ScssDocs file="_spinners.scss" capture="spinner-grow-css-vars" />
+
+For both spinners, small spinner modifier classes are used to update the values of these CSS variables as needed. For example, the `.spinner-border-sm` class does the following:
+
+<ScssDocs file="_spinners.scss" capture="spinner-border-sm-css-vars" />
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+ '--cui-spinner-width': '3rem',
+ '--cui-spinner-height': '3rem',
+}
+
+return <CCallout style={customVars}>...</CCallout>
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="spinner-variables" />
+
+### Keyframes
+
+Used for creating the CSS animations for our spinners. Included in `_spinners.scss`.
+
+<ScssDocs file="_spinners.scss" capture="spinner-border-keyframes" />
+
+<ScssDocs file="_spinners.scss" capture="spinner-grow-keyframes" />
diff --git a/packages/docs/content/components/table/api.mdx b/packages/docs/content/components/table/api.mdx
new file mode 100644
index 00000000..12670487
--- /dev/null
+++ b/packages/docs/content/components/table/api.mdx
@@ -0,0 +1,42 @@
+---
+title: React Table Component API
+name: Table API
+description: Explore the API reference for the React Table component and discover how to effectively utilize its props for customization.
+route: /components/table/
+---
+
+import CTableAPI from '../../api/CTable.api.mdx'
+import CTableBodyAPI from '../../api/CTableBody.api.mdx'
+import CTableDataCellAPI from '../../api/CTableDataCell.api.mdx'
+import CTableFootAPI from '../../api/CTableFoot.api.mdx'
+import CTableHeadAPI from '../../api/CTableHead.api.mdx'
+import CTableHeaderCellAPI from '../../api/CTableHeaderCell.api.mdx'
+import CTableRowAPI from '../../api/CTableRow.api.mdx'
+
+## CTable
+
+<CTableAPI />
+
+## CTableBody
+
+<CTableBodyAPI />
+
+## CTableDataCell
+
+<CTableDataCellAPI />
+
+## CTableFoot
+
+<CTableFootAPI />
+
+## CTableHead
+
+<CTableHeadAPI />
+
+## CTableHeaderCell
+
+<CTableHeaderCellAPI />
+
+## CTableRow
+
+<CTableRowAPI />
diff --git a/packages/docs/content/components/table.mdx b/packages/docs/content/components/table/index.mdx
similarity index 98%
rename from packages/docs/content/components/table.mdx
rename to packages/docs/content/components/table/index.mdx
index a62cb451..2458d0d3 100644
--- a/packages/docs/content/components/table.mdx
+++ b/packages/docs/content/components/table/index.mdx
@@ -2,8 +2,7 @@
title: React Table Component
name: Table
description: Documentation and examples for opt-in styling of tables.
-menu: Components
-route: /components/table
+route: /components/table/
other_frameworks: table
---
@@ -1634,30 +1633,12 @@ Responsive tables allow tables to be scrolled horizontally with ease. Make any t
## API
-### CTable
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
-`markdown:CTable.api.mdx`
-
-### CTableBody
-
-`markdown:CTableBody.api.mdx`
-
-### CTableDataCell
-
-`markdown:CTableDataCell.api.mdx`
-
-### CTableFoot
-
-`markdown:CTableFoot.api.mdx`
-
-### CTableHead
-
-`markdown:CTableHead.api.mdx`
-
-### CTableHeaderCell
-
-`markdown:CTableHeaderCell.api.mdx`
-
-### CTableRow
-
-`markdown:CTableRow.api.mdx`
+- [<CTable />](./api/#ctable)
+- [<CTableBody />](./api/#ctablebody)
+- [<CTableDataCell />](./api/#ctabledatacell)
+- [<CTableFoot />](./api/#ctablefoot)
+- [<CTableHead />](./api/#ctablehead)
+- [<CTableHeaderCell />](./api/#ctableheadercell)
+- [<CTableRow />](./api/#ctablerow)
diff --git a/packages/docs/content/components/table/styling.mdx b/packages/docs/content/components/table/styling.mdx
new file mode 100644
index 00000000..bb6cc2e7
--- /dev/null
+++ b/packages/docs/content/components/table/styling.mdx
@@ -0,0 +1,24 @@
+---
+title: React Table Component Styling
+name: Table Styling
+description: Learn how to customize the React Table component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/table/
+---
+
+{/* ### CSS class names
+
+React Table comes with built-in class names that make styling super simple. Here’s a quick rundown of what you can use:
+
+<ClassNamesDocs
+ files={[
+ 'components/table/CTable.tsx',
+ ]}
+/> */}
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="table-variables"/>
+
+### SASS loops
+
+<ScssDocs file="_variables.scss" capture="table-loop" />
diff --git a/packages/docs/content/components/tabs/api.mdx b/packages/docs/content/components/tabs/api.mdx
new file mode 100644
index 00000000..6618ca60
--- /dev/null
+++ b/packages/docs/content/components/tabs/api.mdx
@@ -0,0 +1,32 @@
+---
+title: React Tabs Component API
+name: Tabs API
+description: Explore the API reference for the React Tabs component and discover how to effectively utilize its props for customization.
+route: /components/tabs/
+---
+
+import CTabAPI from '../../api/CTab.api.mdx'
+import CTabContentAPI from '../../api/CTabContent.api.mdx'
+import CTabListAPI from '../../api/CTabList.api.mdx'
+import CTabPanelAPI from '../../api/CTabPanel.api.mdx'
+import CTabsAPI from '../../api/CTabs.api.mdx'
+
+## CTab
+
+<CTabAPI />
+
+## CTabContent
+
+<CTabContentAPI />
+
+## CTabList
+
+<CTabListAPI />
+
+## CTabPanel
+
+<CTabPanelAPI />
+
+## CTabs
+
+<CTabsAPI />
diff --git a/packages/docs/content/components/tabs.mdx b/packages/docs/content/components/tabs/index.mdx
similarity index 89%
rename from packages/docs/content/components/tabs.mdx
rename to packages/docs/content/components/tabs/index.mdx
index 03fd7a76..f55f7341 100644
--- a/packages/docs/content/components/tabs.mdx
+++ b/packages/docs/content/components/tabs/index.mdx
@@ -2,8 +2,7 @@
title: React Tabs Components
name: Tabs
description: The CoreUI React Tabs component provides a flexible and accessible way to create tabbed navigation in your application. It supports various styles and configurations to meet different design requirements.
-menu: Components
-route: /components/tabs
+route: /components/tabs/
since: 5.1.0
---
@@ -283,65 +282,12 @@ This example demonstrates how to manually set `aria-selected`, `aria-controls`,
<kbd>End</kbd>: Moves focus to the last tab.
-## Customizing
-
-### CSS variables
-
-React tabs use local CSS variables on `.nav`, `.nav-tabs`, `.nav-pills`, `.nav-underline` and `.nav-underline-border` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
-
-On the `.nav` base class:
-
-<ScssDocs file="_nav.scss" capture="nav-css-vars"/>
-
-On the `.nav-tabs` modifier class:
-
-<ScssDocs file="_nav.scss" capture="nav-tabs-css-vars"/>
-
-On the `.nav-pills` modifier class:
-
-<ScssDocs file="_nav.scss" capture="nav-pills-css-vars"/>
-
-On the `.nav-underline` modifier class:
-
-<ScssDocs file="_nav.scss" capture="nav-underline-css-vars"/>
-
-On the `.nav-underline-border` modifier class:
-
-<ScssDocs file="_nav.scss" capture="nav-underline-border-css-vars"/>
-
-#### How to use CSS variables
-
-```jsx
-const vars = {
- '--my-css-var': 10,
- '--my-another-css-var': "red"
-}
-return <CTabs style={vars}>...</CTabs>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="nav-variables"/>
-
## API
-### CTab
-
-`markdown:CTab.api.mdx`
-
-### CTabContent
-
-`markdown:CTabContent.api.mdx`
-
-### CTabList
-
-`markdown:CTabList.api.mdx`
-
-### CTabPanel
-
-`markdown:CTabPanel.api.mdx`
-
-### CTabs
-
-`markdown:CTabs.api.mdx`
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+- [<CTab />](./api/#ctab)
+- [<CTabContent />](./api/#ctabcontent)
+- [<CTabList />](./api/#ctablist)
+- [<CTabPanel />](./api/#ctabpanel)
+- [<CTabs />](./api/#ctabs)
diff --git a/packages/docs/content/components/tabs/styling.mdx b/packages/docs/content/components/tabs/styling.mdx
new file mode 100644
index 00000000..f07a85fc
--- /dev/null
+++ b/packages/docs/content/components/tabs/styling.mdx
@@ -0,0 +1,49 @@
+---
+title: React Tabs Component Styling
+name: Tabs Styling
+description: Learn how to customize the React Tabs component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/tabs/
+---
+
+### CSS variables
+
+React navs use local CSS variables on `.nav`, `.nav-tabs`, `.nav-pills`, `.nav-underline` and `.nav-underline-border` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+On the `.nav` base class:
+
+<ScssDocs file="_nav.scss" capture="nav-css-vars"/>
+
+On the `.nav-tabs` modifier class:
+
+<ScssDocs file="_nav.scss" capture="nav-tabs-css-vars"/>
+
+On the `.nav-pills` modifier class:
+
+<ScssDocs file="_nav.scss" capture="nav-pills-css-vars"/>
+
+<small className="d-inline-flex mb-3 px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 border border-success border-opacity-10 rounded-2">Added in v5.0.0</small>
+
+On the `.nav-underline` modifier class:
+
+<ScssDocs file="_nav.scss" capture="nav-underline-css-vars"/>
+
+<small className="d-inline-flex mb-3 px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 border border-success border-opacity-10 rounded-2">Added in v5.0.0</small>
+
+On the `.nav-underline-border` modifier class:
+
+<ScssDocs file="_nav.scss" capture="nav-underline-border-css-vars"/>
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+ '--cui-nav-link-color': '#555',
+ '--cui-nav-link-disabled-color': '#afaeef',
+}
+
+return <CTabs style={customVars}>{/* Tabs content */}</CTabs>
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="nav-variables"/>
diff --git a/packages/docs/content/components/toast/api.mdx b/packages/docs/content/components/toast/api.mdx
new file mode 100644
index 00000000..c6543960
--- /dev/null
+++ b/packages/docs/content/components/toast/api.mdx
@@ -0,0 +1,32 @@
+---
+title: React Toast Component API
+name: Toast API
+description: Explore the API reference for the React Toast component and discover how to effectively utilize its props for customization.
+route: /components/toast/
+---
+
+import CToastAPI from '../../api/CToast.api.mdx'
+import CToastHeaderAPI from '../../api/CToastHeader.api.mdx'
+import CToastBodyAPI from '../../api/CToastBody.api.mdx'
+import CToastCloseAPI from '../../api/CToastClose.api.mdx'
+import CToasterAPI from '../../api/CToaster.api.mdx'
+
+## CToast
+
+<CToastAPI />
+
+## CToastHeader
+
+<CToastHeaderAPI />
+
+## CToastBody
+
+<CToastBodyAPI />
+
+## CToastClose
+
+<CToastCloseAPI />
+
+## CToaster
+
+<CToasterAPI />
diff --git a/packages/docs/content/components/toast.mdx b/packages/docs/content/components/toast/index.mdx
similarity index 90%
rename from packages/docs/content/components/toast.mdx
rename to packages/docs/content/components/toast/index.mdx
index dae24a37..1a33ce89 100644
--- a/packages/docs/content/components/toast.mdx
+++ b/packages/docs/content/components/toast/index.mdx
@@ -2,8 +2,7 @@
title: React Toast Component
name: Toast
description: Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
-menu: Components
-route: /components/toast
+route: /components/toast/
other_frameworks: toast
---
@@ -236,46 +235,12 @@ Building on the above example, you can create different toast color schemes with
</CToast>
```
-## Customizing
-
-### CSS variables
-
-React toasts use local CSS variables on `.toast` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
-
-<ScssDocs file="_toasts.scss" capture="toast-css-vars"/>
-
-#### How to use CSS variables
-
-```jsx
-const vars = {
- '--my-css-var': 10,
- '--my-another-css-var': "red"
-}
-return <CToast style={vars}>...</CToast>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="toast-variables"/>
-
## API
-### CToast
-
-`markdown:CToast.api.mdx`
-
-### CToastHeader
-
-`markdown:CToastHeader.api.mdx`
-
-### CToastBody
-
-`markdown:CToastBody.api.mdx`
-
-### CToastClose
-
-`markdown:CToastClose.api.mdx`
-
-### CToaster
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
-`markdown:CToaster.api.mdx`
+- [<CToast />](./api/#ctoast)
+- [<CToastHeader />](./api/#ctoastheader)
+- [<CToastBody />](./api/#ctoastbody)
+- [<CToastClose />](./api/#ctoastclose)
+- [<CToaster />](./api/#ctoaster)
diff --git a/packages/docs/content/components/toast/styling.mdx b/packages/docs/content/components/toast/styling.mdx
new file mode 100644
index 00000000..75babf3e
--- /dev/null
+++ b/packages/docs/content/components/toast/styling.mdx
@@ -0,0 +1,27 @@
+---
+title: React Toast Component Styling
+name: Toast Styling
+description: Learn how to customize the React Toast component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/toast/
+---
+
+### CSS variables
+
+React Toast supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.
+
+<ScssDocs file="_toasts.scss" capture="toast-css-vars"/>
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+ '--cui-toast-spacing': '2rem',
+ '--cui-toast-color': '#f2f3f4',
+}
+
+return <CToast style={customVars}>{/* Toast content */}</CToast>
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="toast-variables"/>
diff --git a/packages/docs/content/components/tooltip/api.mdx b/packages/docs/content/components/tooltip/api.mdx
new file mode 100644
index 00000000..edfa37ac
--- /dev/null
+++ b/packages/docs/content/components/tooltip/api.mdx
@@ -0,0 +1,12 @@
+---
+title: React Tooltip Component API
+name: Tooltip API
+description: Explore the API reference for the React Tooltip component and discover how to effectively utilize its props for customization.
+route: /components/tooltip/
+---
+
+import CTooltipAPI from '../../api/CTooltip.api.mdx'
+
+## CTooltip
+
+<CTooltipAPI />
diff --git a/packages/docs/content/components/tooltip.mdx b/packages/docs/content/components/tooltip/index.mdx
similarity index 96%
rename from packages/docs/content/components/tooltip.mdx
rename to packages/docs/content/components/tooltip/index.mdx
index 6c148a82..05e13361 100644
--- a/packages/docs/content/components/tooltip.mdx
+++ b/packages/docs/content/components/tooltip/index.mdx
@@ -2,8 +2,7 @@
title: React Tooltip Component
name: Tooltip
description: Documentation and examples for adding React Tooltips.
-menu: Components
-route: /components/tooltip
+route: /components/tooltip/
other_frameworks: tooltip
---
@@ -186,6 +185,6 @@ return <CTooltip style={vars}>...</CTooltip>
## API
-### CTooltip
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
-`markdown:CTooltip.api.mdx`
+- [<CTooltip />](./api/#ctooltip)
diff --git a/packages/docs/content/components/tooltip/styling.mdx b/packages/docs/content/components/tooltip/styling.mdx
new file mode 100644
index 00000000..92798da2
--- /dev/null
+++ b/packages/docs/content/components/tooltip/styling.mdx
@@ -0,0 +1,27 @@
+---
+title: React Tooltip Component Styling
+name: Tooltip Styling
+description: Learn how to customize the React Tooltip component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/tooltip/
+---
+
+### CSS variables
+
+React Tooltip supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.
+
+<ScssDocs file="_tooltip.scss" capture="tooltip-css-vars"/>
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+ '--cui-tooltip-color': '#888',
+ '--cui-tooltip-bg': '#f2f4f6',
+}
+
+return <CTooltip style={customVars}>{/* Tooltip content */}</CTooltip>
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="tooltip-variables"/>
diff --git a/packages/docs/content/components/widgets/api.mdx b/packages/docs/content/components/widgets/api.mdx
new file mode 100644
index 00000000..86fe7fa8
--- /dev/null
+++ b/packages/docs/content/components/widgets/api.mdx
@@ -0,0 +1,38 @@
+---
+title: React Widgets Component API
+name: Widgets API
+description: Explore the API reference for the React Widget and discover how to effectively utilize its props for customization.
+route: /components/widgets/
+---
+
+import CWidgetStatsAAPI from '../../api/CWidgetStatsA.api.mdx'
+import CWidgetStatsBAPI from '../../api/CWidgetStatsB.api.mdx'
+import CWidgetStatsCAPI from '../../api/CWidgetStatsC.api.mdx'
+import CWidgetStatsDAPI from '../../api/CWidgetStatsD.api.mdx'
+import CWidgetStatsEAPI from '../../api/CWidgetStatsE.api.mdx'
+import CWidgetStatsFAPI from '../../api/CWidgetStatsF.api.mdx'
+
+## CWidgetStatsA
+
+<CWidgetStatsAAPI />
+
+## CWidgetStatsB
+
+<CWidgetStatsBAPI />
+
+## CWidgetStatsC
+
+<CWidgetStatsCAPI />
+
+## CWidgetStatsD
+
+<CWidgetStatsDAPI />
+
+## CWidgetStatsE
+
+<CWidgetStatsEAPI />
+
+## CWidgetStatsF
+
+<CWidgetStatsFAPI />
+
diff --git a/packages/docs/content/components/widgets.mdx b/packages/docs/content/components/widgets/index.mdx
similarity index 98%
rename from packages/docs/content/components/widgets.mdx
rename to packages/docs/content/components/widgets/index.mdx
index 6c08ef69..2fd39781 100644
--- a/packages/docs/content/components/widgets.mdx
+++ b/packages/docs/content/components/widgets/index.mdx
@@ -2,8 +2,7 @@
title: React Widgets
name: Widgets
description: React widget components give information about the app statistics.
-menu: Components
-route: /components/widgets
+route: /components/widgets/
---
import CIcon from '@coreui/icons-react'
@@ -1443,26 +1442,11 @@ import {
## API
-### CWidgetStatsA
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
-`markdown:CWidgetStatsA.api.mdx`
-
-### CWidgetStatsB
-
-`markdown:CWidgetStatsB.api.mdx`
-
-### CWidgetStatsC
-
-`markdown:CWidgetStatsC.api.mdx`
-
-### CWidgetStatsD
-
-`markdown:CWidgetStatsD.api.mdx`
-
-### CWidgetStatsE
-
-`markdown:CWidgetStatsE.api.mdx`
-
-### CWidgetStatsF
-
-`markdown:CWidgetStatsF.api.mdx`
+- [<CWidgetStatsA />](./api/#cwidgetstatsa)
+- [<CWidgetStatsB />](./api/#cwidgetstatsb)
+- [<CWidgetStatsC />](./api/#cwidgetstatsc)
+- [<CWidgetStatsD />](./api/#cwidgetstatsd)
+- [<CWidgetStatsE />](./api/#cwidgetstatse)
+- [<CWidgetStatsF />](./api/#cwidgetstatsf)
diff --git a/packages/docs/content/forms/checkbox.mdx b/packages/docs/content/forms/checkbox.mdx
deleted file mode 100644
index 70b87ac8..00000000
--- a/packages/docs/content/forms/checkbox.mdx
+++ /dev/null
@@ -1,127 +0,0 @@
----
-title: React Checkbox Components
-name: Checkbox
-description: Create consistent cross-browser and cross-device checkboxes with our React checkbox components.
-menu: Forms
-route: /forms/checkbox
-other_frameworks: checkbox
----
-
-import { useEffect, useRef } from 'react'
-import {
- CButton,
- CFormCheck,
-} from '@coreui/react/src/index'
-
-## Approach
-
-Browser default checkboxes and radios are replaced with the help of `<CFormCheck>`. Checkboxes are for selecting one or several options in a list.
-
-## Checkboxes
-
-```jsx preview
-<CFormCheck id="flexCheckDefault" label="Default checkbox"/>
-<CFormCheck id="flexCheckChecked" label="Checked checkbox" defaultChecked />
-```
-
-### Indeterminate
-
-Checkboxes can utilize the `:indeterminate` pseudo-class when manually set via `indeterminate` property.
-
-```jsx preview
-<CFormCheck id="flexCheckIndeterminate" label="Indeterminate checkbox" indeterminate />
-```
-
-### Disabled
-
-Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input's state.
-
-```jsx preview
-<CFormCheck label="Disabled checkbox" disabled/>
-<CFormCheck label="Disabled checked checkbox" defaultChecked disabled/>
-```
-
-## Default (stacked)
-
-By default, any number of checkboxes that are immediate sibling will be vertically stacked and appropriately spaced.
-
-```jsx preview
-<CFormCheck id="defaultCheck1" label="Default checkbox"/>
-<CFormCheck id="defaultCheck2" label="Disabled checkbox" disabled/>
-```
-
-## Inline
-
-Group checkboxes on the same horizontal row by adding `inline` boolean property to any `<CFormCheck>`.
-
-```jsx preview
-<CFormCheck inline id="inlineCheckbox1" value="option1" label="1"/>
-<CFormCheck inline id="inlineCheckbox2" value="option2" label="2"/>
-<CFormCheck inline id="inlineCheckbox3" value="option3" label="3 (disabled)" disabled/>
-```
-
-## Reverse
-
-Put your checkboxes on the opposite side by adding `reverse` boolean property.
-
-```jsx preview
-<CFormCheck reverse id="reverseCheckbox1" value="option1" label="Reverse checkbox"/>
-<CFormCheck reverse id="reverseCheckbox2" value="option2" label="Disabled reverse checkbox" disabled/>
-```
-
-## Without labels
-
-Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-label`).
-
-```jsx preview
-<CFormCheck id="checkboxNoLabel" value="" aria-label="..."/>
-```
-
-## Checkbox toggle buttons
-
-Create button-like checkboxes and radio buttons by using `button` boolean property on the `<CFormCheck>` component. These toggle buttons can further be grouped in a button group if needed.
-
-```jsx preview
-<CFormCheck button={{ color: 'primary' }} id="btn-check" autoComplete="off" label="Single toggle" />
-```
-
-```jsx preview
-<CFormCheck
- button={{ color: 'primary' }}
- id="btn-check-2"
- autoComplete="off"
- label="Checked"
- defaultChecked
-/>
-```
-
-```jsx preview
-<CFormCheck
- button={{ color: 'primary' }}
- id="btn-check-3"
- autoComplete="off"
- label="Disabled"
- disabled
-/>
-```
-
-### Outlined styles
-
-Different variants of button, such at the various outlined styles, are supported.
-
-```jsx preview
-<CFormCheck button={{ color: 'primary', variant: 'outline' }} id="btn-check-outlined" autoComplete="off" label="Single toggle"/>
-<CFormCheck button={{ color: 'secondary', variant: 'outline' }} id="btn-check-2-outlined" autoComplete="off" label="Checked" defaultChecked/>
-```
-
-## Customizing
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="form-check-variables" />
-
-## API
-
-### CFormCheck
-
-`markdown:CFormCheck.api.mdx`
diff --git a/packages/docs/content/forms/checkbox/api.mdx b/packages/docs/content/forms/checkbox/api.mdx
new file mode 100644
index 00000000..aa2717d5
--- /dev/null
+++ b/packages/docs/content/forms/checkbox/api.mdx
@@ -0,0 +1,12 @@
+---
+title: React Form Checkbox Component API
+name: Form Checkbox API
+description: Explore the API reference for the React Form Checkbox component and discover how to effectively utilize its props for customization.
+route: /forms/checkbox/
+---
+
+import CFormCheckAPI from '../../api/CFormCheck.api.mdx'
+
+## CFormCheck
+
+<CFormCheckAPI />
\ No newline at end of file
diff --git a/packages/docs/content/forms/checkbox/examples/CheckboxDisabledExample.tsx b/packages/docs/content/forms/checkbox/examples/CheckboxDisabledExample.tsx
new file mode 100644
index 00000000..4c987a09
--- /dev/null
+++ b/packages/docs/content/forms/checkbox/examples/CheckboxDisabledExample.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { CFormCheck } from '@coreui/react'
+
+export const CheckboxDisabledExample = () => {
+ return (
+ <>
+ <CFormCheck label="Disabled checkbox" disabled />
+ <CFormCheck label="Disabled checked checkbox" defaultChecked disabled />
+ </>
+ )
+}
diff --git a/packages/docs/content/forms/checkbox/examples/CheckboxExample.tsx b/packages/docs/content/forms/checkbox/examples/CheckboxExample.tsx
new file mode 100644
index 00000000..db1592f2
--- /dev/null
+++ b/packages/docs/content/forms/checkbox/examples/CheckboxExample.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { CFormCheck } from '@coreui/react'
+
+export const CheckboxExample = () => {
+ return (
+ <>
+ <CFormCheck id="flexCheckDefault" label="Default checkbox" />
+ <CFormCheck id="flexCheckChecked" label="Checked checkbox" defaultChecked />
+ </>
+ )
+}
diff --git a/packages/docs/content/forms/checkbox/examples/CheckboxIndeterminateExample.tsx b/packages/docs/content/forms/checkbox/examples/CheckboxIndeterminateExample.tsx
new file mode 100644
index 00000000..f0010d6f
--- /dev/null
+++ b/packages/docs/content/forms/checkbox/examples/CheckboxIndeterminateExample.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import { CFormCheck } from '@coreui/react'
+
+export const CheckboxIndeterminateExample = () => {
+ return <CFormCheck id="flexCheckIndeterminate" label="Indeterminate checkbox" indeterminate />
+}
diff --git a/packages/docs/content/forms/checkbox/examples/CheckboxInlineExample.tsx b/packages/docs/content/forms/checkbox/examples/CheckboxInlineExample.tsx
new file mode 100644
index 00000000..31aeaef8
--- /dev/null
+++ b/packages/docs/content/forms/checkbox/examples/CheckboxInlineExample.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CFormCheck } from '@coreui/react'
+
+export const CheckboxInlineExample = () => {
+ return (
+ <>
+ <CFormCheck inline id="inlineCheckbox1" value="option1" label="1" />
+ <CFormCheck inline id="inlineCheckbox2" value="option2" label="2" />
+ <CFormCheck inline id="inlineCheckbox3" value="option3" label="3 (disabled)" disabled />
+ </>
+ )
+}
diff --git a/packages/docs/content/forms/checkbox/examples/CheckboxReverseExample.tsx b/packages/docs/content/forms/checkbox/examples/CheckboxReverseExample.tsx
new file mode 100644
index 00000000..687e89a3
--- /dev/null
+++ b/packages/docs/content/forms/checkbox/examples/CheckboxReverseExample.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { CFormCheck } from '@coreui/react'
+
+export const CheckboxReverseExample = () => {
+ return (
+ <>
+ <CFormCheck reverse id="reverseCheckbox1" value="option1" label="Reverse checkbox" />
+ <CFormCheck
+ reverse
+ id="reverseCheckbox2"
+ value="option2"
+ label="Disabled reverse checkbox"
+ disabled
+ />
+ </>
+ )
+}
diff --git a/packages/docs/content/forms/checkbox/examples/CheckboxStackedExample.tsx b/packages/docs/content/forms/checkbox/examples/CheckboxStackedExample.tsx
new file mode 100644
index 00000000..086a1dd5
--- /dev/null
+++ b/packages/docs/content/forms/checkbox/examples/CheckboxStackedExample.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { CFormCheck } from '@coreui/react'
+
+export const CheckboxStackedExample = () => {
+ return (
+ <>
+ <CFormCheck id="defaultCheck1" label="Default checkbox" />
+ <CFormCheck id="defaultCheck2" label="Disabled checkbox" disabled />
+ </>
+ )
+}
diff --git a/packages/docs/content/forms/checkbox/examples/CheckboxToggleButtonsExample.tsx b/packages/docs/content/forms/checkbox/examples/CheckboxToggleButtonsExample.tsx
new file mode 100644
index 00000000..dbe8fd64
--- /dev/null
+++ b/packages/docs/content/forms/checkbox/examples/CheckboxToggleButtonsExample.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { CFormCheck } from '@coreui/react'
+
+export const CheckboxToggleButtonsExample = () => {
+ return (
+ <>
+ <CFormCheck
+ button={{ color: 'primary' }}
+ id="btn-check"
+ autoComplete="off"
+ label="Single toggle"
+ />
+ <CFormCheck
+ button={{ color: 'primary' }}
+ id="btn-check-2"
+ autoComplete="off"
+ label="Checked"
+ defaultChecked
+ />
+ <CFormCheck
+ button={{ color: 'primary' }}
+ id="btn-check-3"
+ autoComplete="off"
+ label="Disabled"
+ disabled
+ />
+ </>
+ )
+}
diff --git a/packages/docs/content/forms/checkbox/examples/CheckboxToggleButtonsOutlinedStylesExample.tsx b/packages/docs/content/forms/checkbox/examples/CheckboxToggleButtonsOutlinedStylesExample.tsx
new file mode 100644
index 00000000..47d3f3a8
--- /dev/null
+++ b/packages/docs/content/forms/checkbox/examples/CheckboxToggleButtonsOutlinedStylesExample.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { CFormCheck } from '@coreui/react'
+
+export const CheckboxToggleButtonsOutlinedStylesExample = () => {
+ return (
+ <>
+ <CFormCheck
+ button={{ color: 'primary', variant: 'outline' }}
+ id="btn-check-outlined"
+ autoComplete="off"
+ label="Single toggle"
+ />
+ <CFormCheck
+ button={{ color: 'secondary', variant: 'outline' }}
+ id="btn-check-2-outlined"
+ autoComplete="off"
+ label="Checked"
+ defaultChecked
+ />
+ <CFormCheck
+ button={{ color: 'success', variant: 'outline' }}
+ id="btn-check-3-outlined"
+ autoComplete="off"
+ label="Checked success"
+ defaultChecked
+ />
+ </>
+ )
+}
diff --git a/packages/docs/content/forms/checkbox/examples/CheckboxWithoutLabelsExample.tsx b/packages/docs/content/forms/checkbox/examples/CheckboxWithoutLabelsExample.tsx
new file mode 100644
index 00000000..0a9c5610
--- /dev/null
+++ b/packages/docs/content/forms/checkbox/examples/CheckboxWithoutLabelsExample.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import { CFormCheck } from '@coreui/react'
+
+export const CheckboxWithoutLabelsExample = () => {
+ return <CFormCheck id="checkboxNoLabel" value="" aria-label="..." />
+}
diff --git a/packages/docs/content/forms/checkbox/index.mdx b/packages/docs/content/forms/checkbox/index.mdx
new file mode 100644
index 00000000..c20b34eb
--- /dev/null
+++ b/packages/docs/content/forms/checkbox/index.mdx
@@ -0,0 +1,114 @@
+---
+title: React Checkbox Components
+name: Checkbox
+description: Create consistent cross-browser and cross-device checkboxes with our React checkbox components.
+route: /forms/checkbox/
+other_frameworks: checkbox
+---
+
+## Approach
+
+Browser default checkboxes and radios are replaced with the help of `<CFormCheck>`. Checkboxes are for selecting one or several options in a list.
+
+## Checkboxes
+
+import { CheckboxExample } from './examples/CheckboxExample.tsx'
+import CheckboxExampleTS from '!!raw-loader!./examples/CheckboxExample.tsx'
+
+<ExampleSnippet code={CheckboxExampleTS} componentName="React Form Checkbox">
+ <CheckboxExample />
+</ExampleSnippet>
+
+### Indeterminate
+
+Checkboxes can utilize the `:indeterminate` pseudo-class when manually set via `indeterminate` property.
+
+import { CheckboxIndeterminateExample } from './examples/CheckboxIndeterminateExample.tsx'
+import CheckboxIndeterminateExampleTS from '!!raw-loader!./examples/CheckboxIndeterminateExample.tsx'
+
+<ExampleSnippet code={CheckboxIndeterminateExampleTS} componentName="React Form Checkbox">
+ <CheckboxIndeterminateExample />
+</ExampleSnippet>
+
+### Disabled
+
+Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input's state.
+
+import { CheckboxDisabledExample } from './examples/CheckboxDisabledExample.tsx'
+import CheckboxDisabledExampleTS from '!!raw-loader!./examples/CheckboxDisabledExample.tsx'
+
+<ExampleSnippet code={CheckboxDisabledExampleTS} componentName="React Form Checkbox">
+ <CheckboxDisabledExample />
+</ExampleSnippet>
+
+## Default (stacked)
+
+By default, any number of checkboxes that are immediate sibling will be vertically stacked and appropriately spaced.
+
+import { CheckboxStackedExample } from './examples/CheckboxStackedExample.tsx'
+import CheckboxStackedExampleTS from '!!raw-loader!./examples/CheckboxStackedExample.tsx'
+
+<ExampleSnippet code={CheckboxStackedExampleTS} componentName="React Form Checkbox">
+ <CheckboxStackedExample />
+</ExampleSnippet>
+
+## Inline
+
+Group checkboxes on the same horizontal row by adding `inline` boolean property to any `<CFormCheck>`.
+
+import { CheckboxInlineExample } from './examples/CheckboxInlineExample.tsx'
+import CheckboxInlineExampleTS from '!!raw-loader!./examples/CheckboxInlineExample.tsx'
+
+<ExampleSnippet code={CheckboxInlineExampleTS} componentName="React Form Checkbox">
+ <CheckboxInlineExample />
+</ExampleSnippet>
+
+## Reverse
+
+Put your checkboxes on the opposite side by adding `reverse` boolean property.
+
+import { CheckboxReverseExample } from './examples/CheckboxReverseExample.tsx'
+import CheckboxReverseExampleTS from '!!raw-loader!./examples/CheckboxReverseExample.tsx'
+
+<ExampleSnippet code={CheckboxReverseExampleTS} componentName="React Form Checkbox">
+ <CheckboxReverseExample />
+</ExampleSnippet>
+
+## Without labels
+
+Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-label`).
+
+import { CheckboxWithoutLabelsExample } from './examples/CheckboxWithoutLabelsExample.tsx'
+import CheckboxWithoutLabelsExampleTS from '!!raw-loader!./examples/CheckboxWithoutLabelsExample.tsx'
+
+<ExampleSnippet code={CheckboxWithoutLabelsExampleTS} componentName="React Form Checkbox">
+ <CheckboxWithoutLabelsExample />
+</ExampleSnippet>
+
+## Checkbox toggle buttons
+
+Create button-like checkboxes and radio buttons by using `button` boolean property on the `<CFormCheck>` component. These toggle buttons can further be grouped in a button group if needed.
+
+import { CheckboxToggleButtonsExample } from './examples/CheckboxToggleButtonsExample.tsx'
+import CheckboxToggleButtonsExampleTS from '!!raw-loader!./examples/CheckboxToggleButtonsExample.tsx'
+
+<ExampleSnippet code={CheckboxToggleButtonsExampleTS} componentName="React Form Checkbox">
+ <CheckboxToggleButtonsExample />
+</ExampleSnippet>
+
+### Outlined styles
+
+Different variants of button, such at the various outlined styles, are supported.
+
+import { CheckboxToggleButtonsOutlinedStylesExample } from './examples/CheckboxToggleButtonsOutlinedStylesExample.tsx'
+import CheckboxToggleButtonsOutlinedStylesExampleTS from '!!raw-loader!./examples/CheckboxToggleButtonsOutlinedStylesExample.tsx'
+
+<ExampleSnippet code={CheckboxToggleButtonsOutlinedStylesExampleTS} componentName="React Form Checkbox">
+ <CheckboxToggleButtonsOutlinedStylesExample />
+</ExampleSnippet>
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [<CFormCheck />](./api/#cformcheck)
diff --git a/packages/docs/content/forms/checkbox/styling.mdx b/packages/docs/content/forms/checkbox/styling.mdx
new file mode 100644
index 00000000..1a352a80
--- /dev/null
+++ b/packages/docs/content/forms/checkbox/styling.mdx
@@ -0,0 +1,16 @@
+---
+title: React Checkbox Component Styling
+name: Checkbox Styling
+description: Learn how to customize the React Checkbox component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /forms/checkbox/
+---
+
+### CSS class names
+
+React Checkbox component comes with built-in class names that make styling super simple. Here’s a quick rundown of what you can use:
+
+<ClassNamesDocs files={['components/form/CFormCheck.tsx']} />
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="form-check-variables" />
diff --git a/packages/docs/content/forms/floating-labels.mdx b/packages/docs/content/forms/floating-labels.mdx
deleted file mode 100644
index 5b4470e1..00000000
--- a/packages/docs/content/forms/floating-labels.mdx
+++ /dev/null
@@ -1,159 +0,0 @@
----
-title: React Floating labels
-name: Floating labels
-description: React floating label component. Create beautifully simple form labels that float over your input fields.
-menu: Forms
-route: /forms/floating-labels
-other_frameworks: floating-labels
----
-
-import {
- CButton,
- CForm,
- CFormFloating,
- CFormInput,
- CFormLabel,
- CFormSelect,
- CFormTextarea,
- CCol,
- CRow,
-} from '@coreui/react/src/index'
-
-## Example
-
-Use `floatingLabel` property on `<CFormInput>`, `<CFormSelect>` or `<CFormTextarea>` to enable floating labels with textual form fields. A `placeholder` is required on each `<CFormInput>`, `<CFormSelect>` and `<CFormTextarea>` as our method of CSS-only floating labels uses the `:placeholder-shown` pseudo-element.
-
-```jsx preview
-<CFormInput type="email" id="floatingInput" floatingClassName="mb-3" floatingLabel="Email address" placeholder="name@example.com" />
-<CFormInput type="password" id="floatingPassword" floatingLabel="Password" placeholder="Password" />
-```
-
-You can create the same form control by wrapping a pair of `<CFormInput>` and `<CFormLabel>` elements in `<CFormFloating>` to enable floating labels with textual form fields. A `placeholder` is required on each `<CFormInput>` as our method of CSS-only floating labels uses the `:placeholder-shown` pseudo-element. Also, note that the `<CFormInput>` must come first so we can utilize a sibling selector (e.g., `~`).
-
-```jsx
-<CFormFloating className="mb-3">
- <CFormInput type="email" id="floatingInput" placeholder="name@example.com" />
- <CFormLabel htmlFor="floatingInput">Email address</CFormLabel>
-</CFormFloating>
-<CFormFloating>
- <CFormInput type="password" id="floatingPassword" placeholder="Password" />
- <CFormLabel htmlFor="exampleFormControlTextarea1">Password</CFormLabel>
-</CFormFloating>
-```
-
-When there's a `value` already defined, `<CFormLabel>`s will automatically adjust to their floated position.
-
-```jsx preview
-<CFormInput
- type="email"
- id="floatingInputValue"
- floatingLabel="Input with value"
- placeholder="name@example.com"
- defaultValue="test@example.com"
-/>
-```
-
-
-Form validation styles also work as expected.
-
-```jsx preview
-<CFormInput
- type="email"
- id="floatingInputValid"
- floatingClassName="mb-3"
- floatingLabel="Email addresss"
- placeholder="name@example.com"
- defaultValue="test@example.com"
- valid
-/>
-<CFormInput
- type="email"
- id="floatingInputInvalid"
- floatingLabel="Email addresss"
- placeholder="name@example.com"
- defaultValue="test@example.com"
- invalid
-/>
-```
-
-## Textareas
-
-By default, `<CFormTextarea>`s will be the same height as `<CFormInput>`s.
-
-```jsx preview
-<CFormTextarea
- id="floatingTextarea"
- floatingLabel="Comments"
- placeholder="Leave a comment here"
-></CFormTextarea>
-```
-
-To set a custom height on your `<CFormTextarea>`, do not use the `rows` attribute. Instead, set an explicit `height` (either inline or via custom CSS).
-
-```jsx preview
-<CFormTextarea
- placeholder="Leave a comment here"
- id="floatingTextarea2"
- floatingLabel="Comments"
- style={{ height: '100px' }}
-></CFormTextarea>
-```
-
-## Selects
-
-Other than `<CFormInput>`, floating labels are only available on `<CFormSelect>`s. They work in the same way, but unlike `<CFormInput>`s, they'll always show the `<CFormLabel>` in its floated state. **Selects with `size` and `multiple` are not supported.**
-
-```jsx preview
-<CFormSelect
- id="floatingSelect"
- floatingLabel="Works with selects"
- aria-label="Floating label select example"
->
- <option>Open this select menu</option>
- <option value="1">One</option>
- <option value="2">Two</option>
- <option value="3">Three</option>
-</CFormSelect>
-```
-
-## Layout
-
-When working with the CoreUI for Bootstrap grid system, be sure to place form elements within column classes.
-
-```jsx preview
-<CRow xs={{ gutter: 2 }}>
- <CCol md>
- <CFormInput
- type="email"
- id="floatingInputGrid"
- floatingLabel="Email address"
- placeholder="name@example.com"
- defaultValue="email@example.com"
- />
- </CCol>
- <CCol md>
- <CFormSelect
- id="floatingSelectGrid"
- floatingLabel="Email address"
- aria-label="Works with selects"
- >
- <option>Open this select menu</option>
- <option value="1">One</option>
- <option value="2">Two</option>
- <option value="3">Three</option>
- </CFormSelect>
- </CCol>
-</CRow>
-```
-
-## Customizing
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="form-floating-variables" />
-
-## API
-
-### CFormFloating
-
-`markdown:CFormFloating.api.mdx`
diff --git a/packages/docs/content/forms/floating-labels/api.mdx b/packages/docs/content/forms/floating-labels/api.mdx
new file mode 100644
index 00000000..23ae298c
--- /dev/null
+++ b/packages/docs/content/forms/floating-labels/api.mdx
@@ -0,0 +1,12 @@
+---
+title: React Form Floating Labels Component API
+name: Form Floating Labels API
+description: Explore the API reference for the React Form Floating Labels component and discover how to effectively utilize its props for customization.
+route: /forms/floating-labels/
+---
+
+import CFormFloatingAPI from '../../api/CFormFloating.api.mdx'
+
+## CFormFloating
+
+<CFormFloatingAPI />
\ No newline at end of file
diff --git a/packages/docs/content/forms/floating-labels/examples/FloatingLabels2Example.tsx b/packages/docs/content/forms/floating-labels/examples/FloatingLabels2Example.tsx
new file mode 100644
index 00000000..6f2b6ce2
--- /dev/null
+++ b/packages/docs/content/forms/floating-labels/examples/FloatingLabels2Example.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { CFormInput } from '@coreui/react'
+
+export const FloatingLabels2Example = () => {
+ return (
+ <CFormInput
+ type="email"
+ id="floatingInputValue"
+ floatingLabel="Input with value"
+ placeholder="name@example.com"
+ defaultValue="test@example.com"
+ />
+ )
+}
diff --git a/packages/docs/content/forms/floating-labels/examples/FloatingLabelsExample.tsx b/packages/docs/content/forms/floating-labels/examples/FloatingLabelsExample.tsx
new file mode 100644
index 00000000..3c6a9533
--- /dev/null
+++ b/packages/docs/content/forms/floating-labels/examples/FloatingLabelsExample.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { CFormInput } from '@coreui/react'
+
+export const FloatingLabelsExample = () => {
+ return (
+ <>
+ <CFormInput
+ type="email"
+ id="floatingInput"
+ floatingClassName="mb-3"
+ floatingLabel="Email address"
+ placeholder="name@example.com"
+ />
+ <CFormInput
+ type="password"
+ id="floatingPassword"
+ floatingLabel="Password"
+ placeholder="Password"
+ />
+ </>
+ )
+}
diff --git a/packages/docs/content/forms/floating-labels/examples/FloatingLabelsLayoutExample.tsx b/packages/docs/content/forms/floating-labels/examples/FloatingLabelsLayoutExample.tsx
new file mode 100644
index 00000000..b7baba01
--- /dev/null
+++ b/packages/docs/content/forms/floating-labels/examples/FloatingLabelsLayoutExample.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import { CCol, CFormInput, CFormSelect, CRow } from '@coreui/react'
+
+export const FloatingLabelsLayoutExample = () => {
+ return (
+ <CRow xs={{ gutter: 2 }}>
+ <CCol md>
+ <CFormInput
+ type="email"
+ id="floatingInputGrid"
+ floatingLabel="Email address"
+ placeholder="name@example.com"
+ defaultValue="email@example.com"
+ />
+ </CCol>
+ <CCol md>
+ <CFormSelect
+ id="floatingSelectGrid"
+ floatingLabel="Email address"
+ aria-label="Works with selects"
+ >
+ <option>Open this select menu</option>
+ <option value="1">One</option>
+ <option value="2">Two</option>
+ <option value="3">Three</option>
+ </CFormSelect>
+ </CCol>
+ </CRow>
+ )
+}
diff --git a/packages/docs/content/forms/floating-labels/examples/FloatingLabelsSelectExample.tsx b/packages/docs/content/forms/floating-labels/examples/FloatingLabelsSelectExample.tsx
new file mode 100644
index 00000000..a6286b7b
--- /dev/null
+++ b/packages/docs/content/forms/floating-labels/examples/FloatingLabelsSelectExample.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { CFormSelect } from '@coreui/react'
+
+export const FloatingLabelsSelectExample = () => {
+ return (
+ <CFormSelect
+ id="floatingSelect"
+ floatingLabel="Works with selects"
+ aria-label="Floating label select example"
+ >
+ <option>Open this select menu</option>
+ <option value="1">One</option>
+ <option value="2">Two</option>
+ <option value="3">Three</option>
+ </CFormSelect>
+ )
+}
diff --git a/packages/docs/content/forms/floating-labels/examples/FloatingLabelsTextarea2Example.tsx b/packages/docs/content/forms/floating-labels/examples/FloatingLabelsTextarea2Example.tsx
new file mode 100644
index 00000000..3fd18152
--- /dev/null
+++ b/packages/docs/content/forms/floating-labels/examples/FloatingLabelsTextarea2Example.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { CFormTextarea } from '@coreui/react'
+
+export const FloatingLabelsTextarea2Example = () => {
+ return (
+ <CFormTextarea
+ placeholder="Leave a comment here"
+ id="floatingTextarea2"
+ floatingLabel="Comments"
+ style={{ height: '100px' }}
+ ></CFormTextarea>
+ )
+}
diff --git a/packages/docs/content/forms/floating-labels/examples/FloatingLabelsTextareaExample.tsx b/packages/docs/content/forms/floating-labels/examples/FloatingLabelsTextareaExample.tsx
new file mode 100644
index 00000000..799dd31a
--- /dev/null
+++ b/packages/docs/content/forms/floating-labels/examples/FloatingLabelsTextareaExample.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CFormTextarea } from '@coreui/react'
+
+export const FloatingLabelsTextareaExample = () => {
+ return (
+ <CFormTextarea
+ id="floatingTextarea"
+ floatingLabel="Comments"
+ placeholder="Leave a comment here"
+ ></CFormTextarea>
+ )
+}
diff --git a/packages/docs/content/forms/floating-labels/examples/FloatingLabelsValidationExample.tsx b/packages/docs/content/forms/floating-labels/examples/FloatingLabelsValidationExample.tsx
new file mode 100644
index 00000000..bead6d13
--- /dev/null
+++ b/packages/docs/content/forms/floating-labels/examples/FloatingLabelsValidationExample.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import { CFormInput } from '@coreui/react'
+
+export const FloatingLabelsValidationExample = () => {
+ return (
+ <>
+ <CFormInput
+ type="email"
+ id="floatingInputValid"
+ floatingClassName="mb-3"
+ floatingLabel="Email addresss"
+ placeholder="name@example.com"
+ defaultValue="test@example.com"
+ valid
+ />
+ <CFormInput
+ type="email"
+ id="floatingInputInvalid"
+ floatingLabel="Email addresss"
+ placeholder="name@example.com"
+ defaultValue="test@example.com"
+ invalid
+ />
+ </>
+ )
+}
diff --git a/packages/docs/content/forms/floating-labels/index.mdx b/packages/docs/content/forms/floating-labels/index.mdx
new file mode 100644
index 00000000..7ff7c74f
--- /dev/null
+++ b/packages/docs/content/forms/floating-labels/index.mdx
@@ -0,0 +1,98 @@
+---
+title: React Floating labels
+name: Floating labels
+description: React floating label component. Create beautifully simple form labels that float over your input fields.
+route: /forms/floating-labels/
+other_frameworks: floating-labels
+---
+
+## Example
+
+Use `floatingLabel` property on `<CFormInput>`, `<CFormSelect>` or `<CFormTextarea>` to enable floating labels with textual form fields. A `placeholder` is required on each `<CFormInput>`, `<CFormSelect>` and `<CFormTextarea>` as our method of CSS-only floating labels uses the `:placeholder-shown` pseudo-element.
+
+import { FloatingLabelsExample } from './examples/FloatingLabelsExample.tsx'
+import FloatingLabelsExampleTS from '!!raw-loader!./examples/FloatingLabelsExample.tsx'
+
+<ExampleSnippet code={FloatingLabelsExampleTS} componentName="React Form Floating Labels">
+ <FloatingLabelsExample />
+</ExampleSnippet>
+
+You can create the same form control by wrapping a pair of `<CFormInput>` and `<CFormLabel>` elements in `<CFormFloating>` to enable floating labels with textual form fields. A `placeholder` is required on each `<CFormInput>` as our method of CSS-only floating labels uses the `:placeholder-shown` pseudo-element. Also, note that the `<CFormInput>` must come first so we can utilize a sibling selector (e.g., `~`).
+
+```jsx
+<CFormFloating className="mb-3">
+ <CFormInput type="email" id="floatingInput" placeholder="name@example.com" />
+ <CFormLabel htmlFor="floatingInput">Email address</CFormLabel>
+</CFormFloating>
+<CFormFloating>
+ <CFormInput type="password" id="floatingPassword" placeholder="Password" />
+ <CFormLabel htmlFor="exampleFormControlTextarea1">Password</CFormLabel>
+</CFormFloating>
+```
+
+When there's a `value` already defined, `<CFormLabel>`s will automatically adjust to their floated position.
+
+import { FloatingLabels2Example } from './examples/FloatingLabels2Example.tsx'
+import FloatingLabels2ExampleTS from '!!raw-loader!./examples/FloatingLabels2Example.tsx'
+
+<ExampleSnippet code={FloatingLabels2ExampleTS} componentName="React Form Floating Labels">
+ <FloatingLabels2Example />
+</ExampleSnippet>
+
+
+Form validation styles also work as expected.
+
+import { FloatingLabelsValidationExample } from './examples/FloatingLabelsValidationExample.tsx'
+import FloatingLabelsValidationExampleTS from '!!raw-loader!./examples/FloatingLabelsValidationExample.tsx'
+
+<ExampleSnippet code={FloatingLabelsValidationExampleTS} componentName="React Form Floating Labels">
+ <FloatingLabelsValidationExample />
+</ExampleSnippet>
+
+## Textareas
+
+By default, `<CFormTextarea>`s will be the same height as `<CFormInput>`s.
+
+import { FloatingLabelsTextareaExample } from './examples/FloatingLabelsTextareaExample.tsx'
+import FloatingLabelsTextareaExampleTS from '!!raw-loader!./examples/FloatingLabelsTextareaExample.tsx'
+
+<ExampleSnippet code={FloatingLabelsTextareaExampleTS} componentName="React Form Floating Labels">
+ <FloatingLabelsTextareaExample />
+</ExampleSnippet>
+
+To set a custom height on your `<CFormTextarea>`, do not use the `rows` attribute. Instead, set an explicit `height` (either inline or via custom CSS).
+
+import { FloatingLabelsTextarea2Example } from './examples/FloatingLabelsTextarea2Example.tsx'
+import FloatingLabelsTextarea2ExampleTS from '!!raw-loader!./examples/FloatingLabelsTextarea2Example.tsx'
+
+<ExampleSnippet code={FloatingLabelsTextarea2ExampleTS} componentName="React Form Floating Labels">
+ <FloatingLabelsTextarea2Example />
+</ExampleSnippet>
+
+## Selects
+
+Other than `<CFormInput>`, floating labels are only available on `<CFormSelect>`s. They work in the same way, but unlike `<CFormInput>`s, they'll always show the `<CFormLabel>` in its floated state. **Selects with `size` and `multiple` are not supported.**
+
+import { FloatingLabelsSelectExample } from './examples/FloatingLabelsSelectExample.tsx'
+import FloatingLabelsSelectExampleTS from '!!raw-loader!./examples/FloatingLabelsSelectExample.tsx'
+
+<ExampleSnippet code={FloatingLabelsSelectExampleTS} componentName="React Form Floating Labels">
+ <FloatingLabelsSelectExample />
+</ExampleSnippet>
+
+## Layout
+
+When working with the CoreUI for Bootstrap grid system, be sure to place form elements within column classes.
+
+import { FloatingLabelsLayoutExample } from './examples/FloatingLabelsLayoutExample.tsx'
+import FloatingLabelsLayoutExampleTS from '!!raw-loader!./examples/FloatingLabelsLayoutExample.tsx'
+
+<ExampleSnippet code={FloatingLabelsLayoutExampleTS} componentName="React Form Floating Labels">
+ <FloatingLabelsLayoutExample />
+</ExampleSnippet>
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [<CFormFloating />](./api/#cformfloating)
diff --git a/packages/docs/content/forms/floating-labels/styling.mdx b/packages/docs/content/forms/floating-labels/styling.mdx
new file mode 100644
index 00000000..98075be4
--- /dev/null
+++ b/packages/docs/content/forms/floating-labels/styling.mdx
@@ -0,0 +1,16 @@
+---
+title: React Floating Labels Component Styling
+name: Floating Labels Styling
+description: Learn how to customize the React Floating Labels component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /forms/floating-labels/
+---
+
+### CSS class names
+
+React Floating Labels component comes with built-in class names that make styling super simple. Here’s a quick rundown of what you can use:
+
+<ClassNamesDocs files={['components/form/CFormFloating.tsx']} />
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="form-floating-variables" />
diff --git a/packages/docs/content/forms/input-group.mdx b/packages/docs/content/forms/input-group.mdx
deleted file mode 100644
index e9a7bb83..00000000
--- a/packages/docs/content/forms/input-group.mdx
+++ /dev/null
@@ -1,356 +0,0 @@
----
-title: React Input Group Component
-name: Input group
-description: Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
-menu: Forms
-route: /forms/input-group
-other_frameworks: input-group
----
-
-import {
- CButton,
- CDropdown,
- CDropdownDivider,
- CDropdownHeader,
- CDropdownItem,
- CDropdownItemPlain,
- CDropdownMenu,
- CDropdownToggle,
- CForm,
- CFormInput,
- CFormCheck,
- CFormLabel,
- CFormSelect,
- CFormTextarea,
- CInputGroup,
- CInputGroupText,
- CCol,
- CRow,
-} from '@coreui/react/src/index'
-
-## Basic example
-
-Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place `<CFormLabel>`s outside the input group.
-
-```jsx preview
-<CInputGroup className="mb-3">
- <CInputGroupText id="basic-addon1">@</CInputGroupText>
- <CFormInput placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"/>
-</CInputGroup>
-
-<CInputGroup className="mb-3">
- <CFormInput placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2"/>
- <CInputGroupText id="basic-addon2">@example.com</CInputGroupText>
-</CInputGroup>
-
-<CFormLabel htmlFor="basic-url">Your vanity URL</CFormLabel>
-<CInputGroup className="mb-3">
- <CInputGroupText id="basic-addon3">https://example.com/users/</CInputGroupText>
- <CFormInput id="basic-url" aria-describedby="basic-addon3"/>
-</CInputGroup>
-
-<CInputGroup className="mb-3">
- <CInputGroupText>$</CInputGroupText>
- <CFormInput aria-label="Amount (to the nearest dollar)"/>
- <CInputGroupText>.00</CInputGroupText>
-</CInputGroup>
-
-<CInputGroup className="mb-3">
- <CFormInput placeholder="Username" aria-label="Username"/>
- <CInputGroupText>@</CInputGroupText>
- <CFormInput placeholder="Server" aria-label="Server"/>
-</CInputGroup>
-
-<CInputGroup>
- <CInputGroupText>With textarea</CInputGroupText>
- <CFormTextarea aria-label="With textarea"></CFormTextarea>
-</CInputGroup>
-```
-
-## Wrapping
-
-Input groups wrap by default via `flex-wrap: wrap` in order to accommodate custom form field validation within an input group. You may disable this with `.flex-nowrap`.
-
-```jsx preview
-<CInputGroup className="flex-nowrap">
- <CInputGroupText id="addon-wrapping">@</CInputGroupText>
- <CFormInput placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping" />
-</CInputGroup>
-```
-
-## Sizing
-
-Add the relative form sizing classes to the `<CInputGroup>` itself and contents within will automatically resize—no need for repeating the form control size classes on each element.
-
-**Sizing on the individual input group elements isn't supported.**
-
-```jsx preview
-<CInputGroup size="sm" className="mb-3">
- <CInputGroupText id="inputGroup-sizing-sm">Small</CInputGroupText>
- <CFormInput aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm"/>
-</CInputGroup>
-
-<CInputGroup className="mb-3">
- <CInputGroupText id="inputGroup-sizing-default">Default</CInputGroupText>
- <CFormInput aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default"/>
-</CInputGroup>
-
-<CInputGroup size="lg">
- <CInputGroupText id="inputGroup-sizing-lg">Large</CInputGroupText>
- <CFormInput aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg"/>
-</CInputGroup>
-```
-
-## Checkboxes and radios
-
-Place any checkbox or radio option within an input group's addon instead of text.
-
-```jsx preview
-<CInputGroup className="mb-3">
- <CInputGroupText>
- <CFormCheck type="checkbox" value="" aria-label="Checkbox for following text input"/>
- </CInputGroupText>
- <CFormInput aria-label="Text input with checkbox"/>
-</CInputGroup>
-
-<CInputGroup>
- <CInputGroupText>
- <CFormCheck type="radio" value="" aria-label="Radio button for following text input"/>
- </CInputGroupText>
- <CFormInput aria-label="Text input with radio button"/>
-</CInputGroup>
-```
-
-## Multiple inputs
-
-While multiple `<CFormInput>`s are supported visually, validation styles are only available for input groups with a single `<CFormInput>`.
-
-```jsx preview
-<CInputGroup>
- <CInputGroupText>First and last name</CInputGroupText>
- <CFormInput aria-label="First name" />
- <CFormInput aria-label="Last name" />
-</CInputGroup>
-```
-
-## Multiple addons
-
-Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
-
-```jsx preview
-<CInputGroup className="mb-3">
- <CInputGroupText>$</CInputGroupText>
- <CInputGroupText>0.00</CInputGroupText>
- <CFormInput aria-label="Dollar amount (with dot and two decimal places)"/>
-</CInputGroup>
-
-<CInputGroup>
- <CFormInput aria-label="Dollar amount (with dot and two decimal places)"/>
- <CInputGroupText>$</CInputGroupText>
- <CInputGroupText>0.00</CInputGroupText>
-</CInputGroup>
-```
-
-## Button addons
-
-```jsx preview
-<CInputGroup className="mb-3">
- <CButton type="button" color="secondary" variant="outline" id="button-addon1">Button</CButton>
- <CFormInput placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1"/>
-</CInputGroup>
-
-<CInputGroup className="mb-3">
- <CFormInput placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2"/>
- <CButton type="button" color="secondary" variant="outline" id="button-addon2">Button</CButton>
-</CInputGroup>
-
-<CInputGroup className="mb-3">
- <CButton type="button" color="secondary" variant="outline">Button</CButton>
- <CButton type="button" color="secondary" variant="outline">Button</CButton>
- <CFormInput placeholder="" aria-label="Example text with two button addons"/>
-</CInputGroup>
-
-<CInputGroup>
- <CFormInput placeholder="Recipient's username" aria-label="Recipient's username with two button addons"/>
- <CButton type="button" color="secondary" variant="outline">Button</CButton>
- <CButton type="button" color="secondary" variant="outline">Button</CButton>
-</CInputGroup>
-```
-
-## Buttons with dropdowns
-
-```jsx preview
-<CInputGroup className="mb-3">
- <CDropdown variant="input-group">
- <CDropdownToggle color="secondary" variant="outline">Dropdown</CDropdownToggle>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownItem href="#">Something else here</CDropdownItem>
- <CDropdownDivider/>
- <CDropdownItem href="#">Separated link</CDropdownItem>
- </CDropdownMenu>
- </CDropdown>
- <CFormInput aria-label="Text input with dropdown button"/>
-</CInputGroup>
-
-<CInputGroup className="mb-3">
- <CFormInput aria-label="Text input with dropdown button"/>
- <CDropdown alignment="end" variant="input-group">
- <CDropdownToggle color="secondary" variant="outline">Dropdown</CDropdownToggle>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownItem href="#">Something else here</CDropdownItem>
- <CDropdownDivider/>
- <CDropdownItem href="#">Separated link</CDropdownItem>
- </CDropdownMenu>
- </CDropdown>
-</CInputGroup>
-
-<CInputGroup>
- <CDropdown variant="input-group">
- <CDropdownToggle color="secondary" variant="outline">Dropdown</CDropdownToggle>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownItem href="#">Something else here</CDropdownItem>
- <CDropdownDivider/>
- <CDropdownItem href="#">Separated link</CDropdownItem>
- </CDropdownMenu>
- </CDropdown>
- <CFormInput aria-label="Text input with 2 dropdown buttons"/>
- <CDropdown alignment="end" variant="input-group">
- <CDropdownToggle color="secondary" variant="outline">Dropdown</CDropdownToggle>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownItem href="#">Something else here</CDropdownItem>
- <CDropdownDivider/>
- <CDropdownItem href="#">Separated link</CDropdownItem>
- </CDropdownMenu>
- </CDropdown>
-</CInputGroup>
-```
-
-## Segmented buttons
-
-```jsx preview
-<CInputGroup className="mb-3">
- <CDropdown variant="input-group">
- <CButton type="button" color="secondary" variant="outline">Action</CButton>
- <CDropdownToggle color="secondary" variant="outline" split/>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownItem href="#">Something else here</CDropdownItem>
- <CDropdownDivider/>
- <CDropdownItem href="#">Separated link</CDropdownItem>
- </CDropdownMenu>
- </CDropdown>
- <CFormInput aria-label="Text input with segmented dropdown button"/>
-</CInputGroup>
-
-<CInputGroup>
- <CFormInput aria-label="Text input with segmented dropdown button"/>
- <CDropdown alignment="end" variant="input-group">
- <CButton type="button" color="secondary" variant="outline">Action</CButton>
- <CDropdownToggle color="secondary" variant="outline" split/>
- <CDropdownMenu>
- <CDropdownItem href="#">Action</CDropdownItem>
- <CDropdownItem href="#">Another action</CDropdownItem>
- <CDropdownItem href="#">Something else here</CDropdownItem>
- <CDropdownDivider/>
- <CDropdownItem href="#">Separated link</CDropdownItem>
- </CDropdownMenu>
- </CDropdown>
-</CInputGroup>
-```
-
-## Custom forms
-
-Input groups include support for custom selects and custom file inputs. Browser default versions of these are not supported.
-
-### Custom select
-
-```jsx preview
-<CInputGroup className="mb-3">
- <CInputGroupText as="label" htmlFor="inputGroupSelect01">Options</CInputGroupText>
- <CFormSelect id="inputGroupSelect01">
- <option>Choose...</option>
- <option value="1">One</option>
- <option value="2">Two</option>
- <option value="3">Three</option>
- </CFormSelect>
-</CInputGroup>
-
-<CInputGroup className="mb-3">
- <CFormSelect id="inputGroupSelect02">
- <option>Choose...</option>
- <option value="1">One</option>
- <option value="2">Two</option>
- <option value="3">Three</option>
- </CFormSelect>
- <CInputGroupText as="label" htmlFor="inputGroupSelect02">Options</CInputGroupText>
-</CInputGroup>
-
-<CInputGroup className="mb-3">
- <CButton type="button" color="secondary" variant="outline">Button</CButton>
- <CFormSelect id="inputGroupSelect03" aria-label="Example select with button addon">
- <option>Choose...</option>
- <option value="1">One</option>
- <option value="2">Two</option>
- <option value="3">Three</option>
- </CFormSelect>
-</CInputGroup>
-
-<CInputGroup>
- <CFormSelect id="inputGroupSelect04" aria-label="Example select with button addon">
- <option>Choose...</option>
- <option value="1">One</option>
- <option value="2">Two</option>
- <option value="3">Three</option>
- </CFormSelect>
- <CButton type="button" color="secondary" variant="outline">Button</CButton>
-</CInputGroup>
-```
-
-### Custom file input
-
-```jsx preview
-<CInputGroup className="mb-3">
- <CInputGroupText as="label" htmlFor="inputGroupFile01">Upload</CInputGroupText>
- <CFormInput type="file" id="inputGroupFile01"/>
-</CInputGroup>
-
-<CInputGroup className="mb-3">
- <CFormInput type="file" id="inputGroupFile02"/>
- <CInputGroupText as="label" htmlFor="inputGroupFile02">Upload</CInputGroupText>
-</CInputGroup>
-
-<CInputGroup className="mb-3">
- <CButton type="button" color="secondary" variant="outline" id="inputGroupFileAddon03">Button</CButton>
- <CFormInput type="file" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03" aria-label="Upload"/>
-</CInputGroup>
-
-<CInputGroup>
- <CFormInput type="file" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04" aria-label="Upload"/>
- <CButton type="button" color="secondary" variant="outline" id="inputGroupFileAddon04">Button</CButton>
-</CInputGroup>
-```
-
-## Customizing
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="input-group-variables" />
-
-## API
-
-### CInputGroup
-
-`markdown:CInputGroup.api.mdx`
-
-### CInputGroupText
-
-`markdown:CInputGroupText.api.mdx`
diff --git a/packages/docs/content/forms/input-group/api.mdx b/packages/docs/content/forms/input-group/api.mdx
new file mode 100644
index 00000000..64cc01bb
--- /dev/null
+++ b/packages/docs/content/forms/input-group/api.mdx
@@ -0,0 +1,17 @@
+---
+title: React Form Input Group Component API
+name: Form Input Group API
+description: Explore the API reference for the React Form Input Group component and discover how to effectively utilize its props for customization.
+route: /forms/input-group/
+---
+
+import CInputGroupAPI from '../../api/CInputGroup.api.mdx'
+import CInputGroupTextAPI from '../../api/CInputGroupText.api.mdx'
+
+## CInputGroup
+
+<CInputGroupAPI />
+
+## CInputGroupText
+
+<CInputGroupTextAPI />
diff --git a/packages/docs/content/forms/input-group/examples/InputGroupButtonAddonsExample.tsx b/packages/docs/content/forms/input-group/examples/InputGroupButtonAddonsExample.tsx
new file mode 100644
index 00000000..a2ad05ee
--- /dev/null
+++ b/packages/docs/content/forms/input-group/examples/InputGroupButtonAddonsExample.tsx
@@ -0,0 +1,53 @@
+import React from 'react'
+import { CButton, CFormInput, CInputGroup } from '@coreui/react'
+
+export const InputGroupButtonAddonsExample = () => {
+ return (
+ <>
+ <CInputGroup className="mb-3">
+ <CButton type="button" color="secondary" variant="outline" id="button-addon1">
+ Button
+ </CButton>
+ <CFormInput
+ placeholder=""
+ aria-label="Example text with button addon"
+ aria-describedby="button-addon1"
+ />
+ </CInputGroup>
+
+ <CInputGroup className="mb-3">
+ <CFormInput
+ placeholder="Recipient's username"
+ aria-label="Recipient's username"
+ aria-describedby="button-addon2"
+ />
+ <CButton type="button" color="secondary" variant="outline" id="button-addon2">
+ Button
+ </CButton>
+ </CInputGroup>
+
+ <CInputGroup className="mb-3">
+ <CButton type="button" color="secondary" variant="outline">
+ Button
+ </CButton>
+ <CButton type="button" color="secondary" variant="outline">
+ Button
+ </CButton>
+ <CFormInput placeholder="" aria-label="Example text with two button addons" />
+ </CInputGroup>
+
+ <CInputGroup>
+ <CFormInput
+ placeholder="Recipient's username"
+ aria-label="Recipient's username with two button addons"
+ />
+ <CButton type="button" color="secondary" variant="outline">
+ Button
+ </CButton>
+ <CButton type="button" color="secondary" variant="outline">
+ Button
+ </CButton>
+ </CInputGroup>
+ </>
+ )
+}
diff --git a/packages/docs/content/forms/input-group/examples/InputGroupButtonsWithDropdownsExample.tsx b/packages/docs/content/forms/input-group/examples/InputGroupButtonsWithDropdownsExample.tsx
new file mode 100644
index 00000000..e31b638c
--- /dev/null
+++ b/packages/docs/content/forms/input-group/examples/InputGroupButtonsWithDropdownsExample.tsx
@@ -0,0 +1,76 @@
+import React from 'react'
+import {
+ CDropdown,
+ CDropdownDivider,
+ CDropdownItem,
+ CDropdownMenu,
+ CDropdownToggle,
+ CFormInput,
+ CInputGroup,
+} from '@coreui/react'
+
+export const InputGroupButtonsWithDropdownsExample = () => {
+ return (
+ <>
+ <CInputGroup className="mb-3">
+ <CDropdown variant="input-group">
+ <CDropdownToggle color="secondary" variant="outline">
+ Dropdown
+ </CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ <CFormInput aria-label="Text input with dropdown button" />
+ </CInputGroup>
+
+ <CInputGroup className="mb-3">
+ <CFormInput aria-label="Text input with dropdown button" />
+ <CDropdown alignment="end" variant="input-group">
+ <CDropdownToggle color="secondary" variant="outline">
+ Dropdown
+ </CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ </CInputGroup>
+
+ <CInputGroup>
+ <CDropdown variant="input-group">
+ <CDropdownToggle color="secondary" variant="outline">
+ Dropdown
+ </CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ <CFormInput aria-label="Text input with 2 dropdown buttons" />
+ <CDropdown alignment="end" variant="input-group">
+ <CDropdownToggle color="secondary" variant="outline">
+ Dropdown
+ </CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ </CInputGroup>
+ </>
+ )
+}
diff --git a/packages/docs/content/forms/input-group/examples/InputGroupCheckboxesAndRadiosExample.tsx b/packages/docs/content/forms/input-group/examples/InputGroupCheckboxesAndRadiosExample.tsx
new file mode 100644
index 00000000..7c211fbd
--- /dev/null
+++ b/packages/docs/content/forms/input-group/examples/InputGroupCheckboxesAndRadiosExample.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { CFormCheck, CFormInput, CInputGroup, CInputGroupText } from '@coreui/react'
+
+export const InputGroupCheckboxesAndRadiosExample = () => {
+ return (
+ <>
+ <CInputGroup className="mb-3">
+ <CInputGroupText>
+ <CFormCheck type="checkbox" value="" aria-label="Checkbox for following text input" />
+ </CInputGroupText>
+ <CFormInput aria-label="Text input with checkbox" />
+ </CInputGroup>
+
+ <CInputGroup>
+ <CInputGroupText>
+ <CFormCheck type="radio" value="" aria-label="Radio button for following text input" />
+ </CInputGroupText>
+ <CFormInput aria-label="Text input with radio button" />
+ </CInputGroup>
+ </>
+ )
+}
diff --git a/packages/docs/content/forms/input-group/examples/InputGroupCustomFileInputExample.tsx b/packages/docs/content/forms/input-group/examples/InputGroupCustomFileInputExample.tsx
new file mode 100644
index 00000000..00a51012
--- /dev/null
+++ b/packages/docs/content/forms/input-group/examples/InputGroupCustomFileInputExample.tsx
@@ -0,0 +1,46 @@
+import React from 'react'
+import { CButton, CFormInput, CInputGroup, CInputGroupText } from '@coreui/react'
+
+export const InputGroupCustomFileInputExample = () => {
+ return (
+ <>
+ <CInputGroup className="mb-3">
+ <CInputGroupText as="label" htmlFor="inputGroupFile01">
+ Upload
+ </CInputGroupText>
+ <CFormInput type="file" id="inputGroupFile01" />
+ </CInputGroup>
+
+ <CInputGroup className="mb-3">
+ <CFormInput type="file" id="inputGroupFile02" />
+ <CInputGroupText as="label" htmlFor="inputGroupFile02">
+ Upload
+ </CInputGroupText>
+ </CInputGroup>
+
+ <CInputGroup className="mb-3">
+ <CButton type="button" color="secondary" variant="outline" id="inputGroupFileAddon03">
+ Button
+ </CButton>
+ <CFormInput
+ type="file"
+ id="inputGroupFile03"
+ aria-describedby="inputGroupFileAddon03"
+ aria-label="Upload"
+ />
+ </CInputGroup>
+
+ <CInputGroup>
+ <CFormInput
+ type="file"
+ id="inputGroupFile04"
+ aria-describedby="inputGroupFileAddon04"
+ aria-label="Upload"
+ />
+ <CButton type="button" color="secondary" variant="outline" id="inputGroupFileAddon04">
+ Button
+ </CButton>
+ </CInputGroup>
+ </>
+ )
+}
diff --git a/packages/docs/content/forms/input-group/examples/InputGroupCustomSelectExample.tsx b/packages/docs/content/forms/input-group/examples/InputGroupCustomSelectExample.tsx
new file mode 100644
index 00000000..9dcc9d9c
--- /dev/null
+++ b/packages/docs/content/forms/input-group/examples/InputGroupCustomSelectExample.tsx
@@ -0,0 +1,54 @@
+import React from 'react'
+import { CButton, CFormSelect, CInputGroup, CInputGroupText } from '@coreui/react'
+
+export const InputGroupCustomSelectExample = () => {
+ return (
+ <>
+ <CInputGroup className="mb-3">
+ <CInputGroupText as="label" htmlFor="inputGroupSelect01">
+ Options
+ </CInputGroupText>
+ <CFormSelect id="inputGroupSelect01">
+ <option>Choose...</option>
+ <option value="1">One</option>
+ <option value="2">Two</option>
+ <option value="3">Three</option>
+ </CFormSelect>
+ </CInputGroup>
+ <CInputGroup className="mb-3">
+ <CFormSelect id="inputGroupSelect02">
+ <option>Choose...</option>
+ <option value="1">One</option>
+ <option value="2">Two</option>
+ <option value="3">Three</option>
+ </CFormSelect>
+ <CInputGroupText as="label" htmlFor="inputGroupSelect02">
+ Options
+ </CInputGroupText>
+ </CInputGroup>
+ <CInputGroup className="mb-3">
+ <CButton type="button" color="secondary" variant="outline">
+ Button
+ </CButton>
+ <CFormSelect id="inputGroupSelect03" aria-label="Example select with button addon">
+ <option>Choose...</option>
+ <option value="1">One</option>
+ <option value="2">Two</option>
+ <option value="3">Three</option>
+ </CFormSelect>
+ </CInputGroup>
+ <CInputGroup>
+ <CFormSelect id="inputGroupSelect04" aria-label="Example select with button addon">
+ <option>Choose...</option>
+ <option value="1">One</option>
+ <option value="2">Two</option>
+ <option value="3">Three</option>
+ </CFormSelect>
+ <CButton type="button" color="secondary" variant="outline">
+ Button
+ </CButton>
+ </CInputGroup>
+ Custom file input# Upload
+ </>
+ )
+}
diff --git a/packages/docs/content/forms/input-group/examples/InputGroupExample.tsx b/packages/docs/content/forms/input-group/examples/InputGroupExample.tsx
new file mode 100644
index 00000000..6f66ac1c
--- /dev/null
+++ b/packages/docs/content/forms/input-group/examples/InputGroupExample.tsx
@@ -0,0 +1,45 @@
+import React from 'react'
+import { CFormInput, CFormLabel, CFormTextarea, CInputGroup, CInputGroupText } from '@coreui/react'
+
+export const InputGroupExample = () => {
+ return (
+ <>
+ <CInputGroup className="mb-3">
+ <CInputGroupText id="basic-addon1">@</CInputGroupText>
+ <CFormInput placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" />
+ </CInputGroup>
+
+ <CInputGroup className="mb-3">
+ <CFormInput
+ placeholder="Recipient's username"
+ aria-label="Recipient's username"
+ aria-describedby="basic-addon2"
+ />
+ <CInputGroupText id="basic-addon2">@example.com</CInputGroupText>
+ </CInputGroup>
+
+ <CFormLabel htmlFor="basic-url">Your vanity URL</CFormLabel>
+ <CInputGroup className="mb-3">
+ <CInputGroupText id="basic-addon3">https://example.com/users/</CInputGroupText>
+ <CFormInput id="basic-url" aria-describedby="basic-addon3" />
+ </CInputGroup>
+
+ <CInputGroup className="mb-3">
+ <CInputGroupText>$</CInputGroupText>
+ <CFormInput aria-label="Amount (to the nearest dollar)" />
+ <CInputGroupText>.00</CInputGroupText>
+ </CInputGroup>
+
+ <CInputGroup className="mb-3">
+ <CFormInput placeholder="Username" aria-label="Username" />
+ <CInputGroupText>@</CInputGroupText>
+ <CFormInput placeholder="Server" aria-label="Server" />
+ </CInputGroup>
+
+ <CInputGroup>
+ <CInputGroupText>With textarea</CInputGroupText>
+ <CFormTextarea aria-label="With textarea"></CFormTextarea>
+ </CInputGroup>
+ </>
+ )
+}
diff --git a/packages/docs/content/forms/input-group/examples/InputGroupMultipleAddonsExample.tsx b/packages/docs/content/forms/input-group/examples/InputGroupMultipleAddonsExample.tsx
new file mode 100644
index 00000000..e16114be
--- /dev/null
+++ b/packages/docs/content/forms/input-group/examples/InputGroupMultipleAddonsExample.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import { CFormInput, CInputGroup, CInputGroupText } from '@coreui/react'
+
+export const InputGroupMultipleAddonsExample = () => {
+ return (
+ <>
+ <CInputGroup className="mb-3">
+ <CInputGroupText>$</CInputGroupText>
+ <CInputGroupText>0.00</CInputGroupText>
+ <CFormInput aria-label="Dollar amount (with dot and two decimal places)" />
+ </CInputGroup>
+
+ <CInputGroup>
+ <CFormInput aria-label="Dollar amount (with dot and two decimal places)" />
+ <CInputGroupText>$</CInputGroupText>
+ <CInputGroupText>0.00</CInputGroupText>
+ </CInputGroup>
+ </>
+ )
+}
diff --git a/packages/docs/content/forms/input-group/examples/InputGroupMultipleInputsExample.tsx b/packages/docs/content/forms/input-group/examples/InputGroupMultipleInputsExample.tsx
new file mode 100644
index 00000000..3b5d6da1
--- /dev/null
+++ b/packages/docs/content/forms/input-group/examples/InputGroupMultipleInputsExample.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CFormInput, CInputGroup, CInputGroupText } from '@coreui/react'
+
+export const InputGroupMultipleInputsExample = () => {
+ return (
+ <CInputGroup>
+ <CInputGroupText>First and last name</CInputGroupText>
+ <CFormInput aria-label="First name" />
+ <CFormInput aria-label="Last name" />
+ </CInputGroup>
+ )
+}
diff --git a/packages/docs/content/forms/input-group/examples/InputGroupSegmentedButtonsExample.tsx b/packages/docs/content/forms/input-group/examples/InputGroupSegmentedButtonsExample.tsx
new file mode 100644
index 00000000..911fc5b0
--- /dev/null
+++ b/packages/docs/content/forms/input-group/examples/InputGroupSegmentedButtonsExample.tsx
@@ -0,0 +1,51 @@
+import React from 'react'
+import {
+ CButton,
+ CDropdown,
+ CDropdownDivider,
+ CDropdownItem,
+ CDropdownMenu,
+ CDropdownToggle,
+ CFormInput,
+ CInputGroup,
+} from '@coreui/react'
+
+export const InputGroupSegmentedButtonsExample = () => {
+ return (
+ <>
+ <CInputGroup className="mb-3">
+ <CDropdown variant="input-group">
+ <CButton type="button" color="secondary" variant="outline">
+ Action
+ </CButton>
+ <CDropdownToggle color="secondary" variant="outline" split />
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ <CFormInput aria-label="Text input with segmented dropdown button" />
+ </CInputGroup>
+
+ <CInputGroup>
+ <CFormInput aria-label="Text input with segmented dropdown button" />
+ <CDropdown alignment="end" variant="input-group">
+ <CButton type="button" color="secondary" variant="outline">
+ Action
+ </CButton>
+ <CDropdownToggle color="secondary" variant="outline" split />
+ <CDropdownMenu>
+ <CDropdownItem href="#">Action</CDropdownItem>
+ <CDropdownItem href="#">Another action</CDropdownItem>
+ <CDropdownItem href="#">Something else here</CDropdownItem>
+ <CDropdownDivider />
+ <CDropdownItem href="#">Separated link</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ </CInputGroup>
+ </>
+ )
+}
diff --git a/packages/docs/content/forms/input-group/examples/InputGroupSizingExample.tsx b/packages/docs/content/forms/input-group/examples/InputGroupSizingExample.tsx
new file mode 100644
index 00000000..8e8155f2
--- /dev/null
+++ b/packages/docs/content/forms/input-group/examples/InputGroupSizingExample.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import { CFormInput, CInputGroup, CInputGroupText } from '@coreui/react'
+
+export const InputGroupSizingExample = () => {
+ return (
+ <>
+ <CInputGroup size="sm" className="mb-3">
+ <CInputGroupText id="inputGroup-sizing-sm">Small</CInputGroupText>
+ <CFormInput aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm" />
+ </CInputGroup>
+
+ <CInputGroup className="mb-3">
+ <CInputGroupText id="inputGroup-sizing-default">Default</CInputGroupText>
+ <CFormInput
+ aria-label="Sizing example input"
+ aria-describedby="inputGroup-sizing-default"
+ />
+ </CInputGroup>
+
+ <CInputGroup size="lg">
+ <CInputGroupText id="inputGroup-sizing-lg">Large</CInputGroupText>
+ <CFormInput aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg" />
+ </CInputGroup>
+ </>
+ )
+}
diff --git a/packages/docs/content/forms/input-group/examples/InputGroupWrappingExample.tsx b/packages/docs/content/forms/input-group/examples/InputGroupWrappingExample.tsx
new file mode 100644
index 00000000..aaf8fb77
--- /dev/null
+++ b/packages/docs/content/forms/input-group/examples/InputGroupWrappingExample.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { CFormInput, CInputGroup, CInputGroupText } from '@coreui/react'
+
+export const InputGroupWrappingExample = () => {
+ return (
+ <CInputGroup className="flex-nowrap">
+ <CInputGroupText id="addon-wrapping">@</CInputGroupText>
+ <CFormInput placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping" />
+ </CInputGroup>
+ )
+}
diff --git a/packages/docs/content/forms/input-group/index.mdx b/packages/docs/content/forms/input-group/index.mdx
new file mode 100644
index 00000000..d79c867a
--- /dev/null
+++ b/packages/docs/content/forms/input-group/index.mdx
@@ -0,0 +1,131 @@
+---
+title: React Input Group Component
+name: Input group
+description: Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
+route: /forms/input-group/
+other_frameworks: input-group
+---
+
+## Basic example
+
+Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place `<CFormLabel>`s outside the input group.
+
+import { InputGroupExample } from './examples/InputGroupExample.tsx'
+import InputGroupExampleTS from '!!raw-loader!./examples/InputGroupExample.tsx'
+
+<ExampleSnippet code={InputGroupExampleTS} componentName="React Form Input Group">
+ <InputGroupExample />
+</ExampleSnippet>
+
+## Wrapping
+
+Input groups wrap by default via `flex-wrap: wrap` in order to accommodate custom form field validation within an input group. You may disable this with `.flex-nowrap`.
+
+import { InputGroupWrappingExample } from './examples/InputGroupWrappingExample.tsx'
+import InputGroupWrappingExampleTS from '!!raw-loader!./examples/InputGroupWrappingExample.tsx'
+
+<ExampleSnippet code={InputGroupWrappingExampleTS} componentName="React Form Input Group">
+ <InputGroupWrappingExample />
+</ExampleSnippet>
+
+## Sizing
+
+Add the relative form sizing classes to the `<CInputGroup>` itself and contents within will automatically resize—no need for repeating the form control size classes on each element.
+
+**Sizing on the individual input group elements isn't supported.**
+
+import { InputGroupSizingExample } from './examples/InputGroupSizingExample.tsx'
+import InputGroupSizingExampleTS from '!!raw-loader!./examples/InputGroupSizingExample.tsx'
+
+<ExampleSnippet code={InputGroupSizingExampleTS} componentName="React Form Input Group">
+ <InputGroupSizingExample />
+</ExampleSnippet>
+
+## Checkboxes and radios
+
+Place any checkbox or radio option within an input group's addon instead of text.
+
+import { InputGroupCheckboxesAndRadiosExample } from './examples/InputGroupCheckboxesAndRadiosExample.tsx'
+import InputGroupCheckboxesAndRadiosExampleTS from '!!raw-loader!./examples/InputGroupCheckboxesAndRadiosExample.tsx'
+
+<ExampleSnippet code={InputGroupCheckboxesAndRadiosExampleTS} componentName="React Form Input Group">
+ <InputGroupCheckboxesAndRadiosExample />
+</ExampleSnippet>
+
+## Multiple inputs
+
+While multiple `<CFormInput>`s are supported visually, validation styles are only available for input groups with a single `<CFormInput>`.
+
+import { InputGroupMultipleInputsExample } from './examples/InputGroupMultipleInputsExample.tsx'
+import InputGroupMultipleInputsExampleTS from '!!raw-loader!./examples/InputGroupMultipleInputsExample.tsx'
+
+<ExampleSnippet code={InputGroupMultipleInputsExampleTS} componentName="React Form Input Group">
+ <InputGroupMultipleInputsExample />
+</ExampleSnippet>
+
+## Multiple addons
+
+Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
+
+import { InputGroupMultipleAddonsExample } from './examples/InputGroupMultipleAddonsExample.tsx'
+import InputGroupMultipleAddonsExampleTS from '!!raw-loader!./examples/InputGroupMultipleAddonsExample.tsx'
+
+<ExampleSnippet code={InputGroupMultipleAddonsExampleTS} componentName="React Form Input Group">
+ <InputGroupMultipleAddonsExample />
+</ExampleSnippet>
+
+## Button addons
+
+import { InputGroupButtonAddonsExample } from './examples/InputGroupButtonAddonsExample.tsx'
+import InputGroupButtonAddonsExampleTS from '!!raw-loader!./examples/InputGroupButtonAddonsExample.tsx'
+
+<ExampleSnippet code={InputGroupButtonAddonsExampleTS} componentName="React Form Input Group">
+ <InputGroupButtonAddonsExample />
+</ExampleSnippet>
+
+## Buttons with dropdowns
+
+import { InputGroupButtonsWithDropdownsExample } from './examples/InputGroupButtonsWithDropdownsExample.tsx'
+import InputGroupButtonsWithDropdownsExampleTS from '!!raw-loader!./examples/InputGroupButtonsWithDropdownsExample.tsx'
+
+<ExampleSnippet code={InputGroupButtonsWithDropdownsExampleTS} componentName="React Form Input Group">
+ <InputGroupButtonsWithDropdownsExample />
+</ExampleSnippet>
+
+## Segmented buttons
+
+import { InputGroupSegmentedButtonsExample } from './examples/InputGroupSegmentedButtonsExample.tsx'
+import InputGroupSegmentedButtonsExampleTS from '!!raw-loader!./examples/InputGroupSegmentedButtonsExample.tsx'
+
+<ExampleSnippet code={InputGroupSegmentedButtonsExampleTS} componentName="React Form Input Group">
+ <InputGroupSegmentedButtonsExample />
+</ExampleSnippet>
+
+## Custom forms
+
+Input groups include support for custom selects and custom file inputs. Browser default versions of these are not supported.
+
+### Custom select
+
+import { InputGroupCustomSelectExample } from './examples/InputGroupCustomSelectExample.tsx'
+import InputGroupCustomSelectExampleTS from '!!raw-loader!./examples/InputGroupCustomSelectExample.tsx'
+
+<ExampleSnippet code={InputGroupCustomSelectExampleTS} componentName="React Form Input Group">
+ <InputGroupCustomSelectExample />
+</ExampleSnippet>
+
+### Custom file input
+
+import { InputGroupCustomFileInputExample } from './examples/InputGroupCustomFileInputExample.tsx'
+import InputGroupCustomFileInputExampleTS from '!!raw-loader!./examples/InputGroupCustomFileInputExample.tsx'
+
+<ExampleSnippet code={InputGroupCustomFileInputExampleTS} componentName="React Form Input Group">
+ <InputGroupCustomFileInputExample />
+</ExampleSnippet>
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [<CInputGroup />](./api/#cinputgroup)
+- [<CInputGroupText />](./api/#cinputgrouptext)
diff --git a/packages/docs/content/forms/input-group/styling.mdx b/packages/docs/content/forms/input-group/styling.mdx
new file mode 100644
index 00000000..01c06cc4
--- /dev/null
+++ b/packages/docs/content/forms/input-group/styling.mdx
@@ -0,0 +1,22 @@
+---
+title: React Input Group Component Styling
+name: Input Group Styling
+description: Learn how to customize the React Input Group component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /forms/input-group/
+---
+
+### CSS class names
+
+React Input Group component comes with built-in class names that make styling super simple. Here’s a quick rundown of what you can use:
+
+#### CInputGroup
+
+<ClassNamesDocs files={['components/form/CInputGroup.tsx']} />
+
+#### CInputGroupText
+
+<ClassNamesDocs files={['components/form/CInputGroupText.tsx']} />
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="input-group-variables" />
diff --git a/packages/docs/content/forms/input-mask/examples/InputMaskCreditCardExample.tsx b/packages/docs/content/forms/input-mask/examples/InputMaskCreditCardExample.tsx
new file mode 100644
index 00000000..737e3ec2
--- /dev/null
+++ b/packages/docs/content/forms/input-mask/examples/InputMaskCreditCardExample.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import { CFormInput } from '@coreui/react'
+import { IMaskMixin } from 'react-imask'
+
+export const InputMaskCreditCardExample = () => {
+ const CFormInputWithMask = IMaskMixin(({ inputRef, ...props }) => (
+ <CFormInput {...props} ref={inputRef} />
+ ))
+ return <CFormInputWithMask mask="0000 0000 0000 0000" />
+}
diff --git a/packages/docs/content/forms/input-mask/examples/InputMaskExample.tsx b/packages/docs/content/forms/input-mask/examples/InputMaskExample.tsx
new file mode 100644
index 00000000..c3c2e8ec
--- /dev/null
+++ b/packages/docs/content/forms/input-mask/examples/InputMaskExample.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { CFormInput } from '@coreui/react'
+import { IMaskMixin } from 'react-imask'
+
+export const InputMaskExample = () => {
+ const CFormInputWithMask = IMaskMixin(({ inputRef, ...props }) => (
+ <CFormInput {...props} ref={inputRef} />
+ ))
+
+ return (
+ <CFormInputWithMask
+ mask={Date}
+ min={new Date(1990, 0, 1)}
+ max={new Date(2020, 0, 1)}
+ lazy={false}
+ />
+ )
+}
diff --git a/packages/docs/content/forms/input-mask/examples/InputMaskPhoneExample.tsx b/packages/docs/content/forms/input-mask/examples/InputMaskPhoneExample.tsx
new file mode 100644
index 00000000..473ef8fc
--- /dev/null
+++ b/packages/docs/content/forms/input-mask/examples/InputMaskPhoneExample.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import { CFormInput } from '@coreui/react'
+import { IMaskMixin } from 'react-imask'
+
+export const InputMaskPhoneExample = () => {
+ const CFormInputWithMask = IMaskMixin(({ inputRef, ...props }) => (
+ <CFormInput {...props} ref={inputRef} />
+ ))
+ return <CFormInputWithMask mask="+{1}(000)000-00-00" />
+}
diff --git a/packages/docs/content/forms/input-mask.mdx b/packages/docs/content/forms/input-mask/index.mdx
similarity index 57%
rename from packages/docs/content/forms/input-mask.mdx
rename to packages/docs/content/forms/input-mask/index.mdx
index 5f005cd6..6ff83ccb 100644
--- a/packages/docs/content/forms/input-mask.mdx
+++ b/packages/docs/content/forms/input-mask/index.mdx
@@ -2,14 +2,9 @@
title: React Input Mask
name: Input mask
description: React input masks allow you to regulate the format of data entered. You can enhance data entry accuracy by implementing react input masks for fields with consistent formatting requirements. This ensures that users input data correctly, such as accurately formatted phone numbers in a designated phone number field.
-menu: Forms
-route: /forms/input-mask
+route: /forms/input-mask/
---
-import { CFormInput } from '@coreui/react/src/index'
-
-import { IMaskMixin } from 'react-imask'
-
## Usage
While CoreUI for React does not currently include a 'mask' feature, it can be enhanced by leveraging existing libraries like `react-imask` to extend the functionality of our components.
@@ -43,37 +38,12 @@ const CFormInputWithMask = IMaskMixin(({ inputRef, ...props }) => (
Here is an example of a date mask for reference.
-export const MaskExample = () => {
- const CFormInputWithMask = IMaskMixin(({ inputRef, ...props }) => (
- <CFormInput {...props} ref={inputRef} />
- ))
- return (
- <CFormInputWithMask
- mask={Date}
- min={new Date(1990, 0, 1)}
- max={new Date(2020, 0, 1)}
- lazy={false}
- />
- )
-}
-
-<Example>
- <MaskExample />
-</Example>
+import { InputMaskExample } from './examples/InputMaskExample.tsx'
+import InputMaskExampleTS from '!!raw-loader!./examples/InputMaskExample.tsx'
-```jsx
-const CFormInputWithMask = IMaskMixin(({ inputRef, ...props }) => (
- <CFormInput {...props} ref={inputRef} />
-))
-return (
- <CFormInputWithMask
- mask={Date}
- min={new Date(1990, 0, 1)}
- max={new Date(2020, 0, 1)}
- lazy={false}
- />
-)
-```
+<ExampleSnippet code={InputMaskExampleTS} componentName="React Form Input Mask">
+ <InputMaskExample />
+</ExampleSnippet>
## Example masks
@@ -83,44 +53,22 @@ Please take a moment to review some example masks you can use for reference. The
This example react input mask for a phone number follows the format commonly used in North America. It consists of three groups of numbers: the area code enclosed in parentheses, followed by a space, and then the seven-digit phone number separated by a hyphen.
-export const PhoneMaskExample = () => {
- const CFormInputWithMask = IMaskMixin(({ inputRef, ...props }) => (
- <CFormInput {...props} ref={inputRef} />
- ))
- return <CFormInputWithMask mask="+{1}(000)000-00-00" />
-}
-
-<Example>
- <PhoneMaskExample />
-</Example>
+import { InputMaskPhoneExample } from './examples/InputMaskPhoneExample.tsx'
+import InputMaskPhoneExampleTS from '!!raw-loader!./examples/InputMaskPhoneExample.tsx'
-```jsx
-const CFormInputWithMask = IMaskMixin(({ inputRef, ...props }) => (
- <CFormInput {...props} ref={inputRef} />
-))
-return <CFormInputWithMask mask="+{1}(000)000-00-00" />
-```
+<ExampleSnippet code={InputMaskPhoneExampleTS} componentName="React Form Input Mask">
+ <InputMaskPhoneExample />
+</ExampleSnippet>
### Credit Card
The provided code snippet demonstrates an implementation of an react input mask for a credit card number using the IMask library in JavaScript. The mask is set to "0000 0000 0000 0000", indicating that the input should consist of a 16-digit credit card number with spaces separating every four digits. The component renders an input field with the specified mask, allowing users to enter credit card numbers in the desired format.
-export const CreditCardMaskExample = () => {
- const CFormInputWithMask = IMaskMixin(({ inputRef, ...props }) => (
- <CFormInput {...props} ref={inputRef} />
- ))
- return <CFormInputWithMask mask="0000 0000 0000 0000" />
-}
-
-<Example>
- <CreditCardMaskExample />
-</Example>
+import { InputMaskCreditCardExample } from './examples/InputMaskCreditCardExample.tsx'
+import InputMaskCreditCardExampleTS from '!!raw-loader!./examples/InputMaskCreditCardExample.tsx'
-```jsx
-const CFormInputWithMask = IMaskMixin(({ inputRef, ...props }) => (
- <CFormInput {...props} ref={inputRef} />
-))
-return <CFormInputWithMask mask="0000 0000 0000 0000" />
-```
+<ExampleSnippet code={InputMaskCreditCardExampleTS} componentName="React Form Input Mask">
+ <InputMaskCreditCardExample />
+</ExampleSnippet>
For more information on how to use the input mask, you can refer to the following resource: https://imask.js.org/
diff --git a/packages/docs/content/forms/input.mdx b/packages/docs/content/forms/input.mdx
deleted file mode 100644
index 5dd1aaac..00000000
--- a/packages/docs/content/forms/input.mdx
+++ /dev/null
@@ -1,192 +0,0 @@
----
-title: React Form Input Component
-name: Form control
-description: React input components. Give textual form `<input>`s an upgrade with custom styles, sizing, focus states, validation, and more.
-menu: Forms
-route: /forms/input
-other_frameworks: input
----
-
-import {
- CButton,
- CForm,
- CFormFloating,
- CFormInput,
- CFormLabel,
- CFormText,
- CFormTextarea,
- CCol,
- CRow,
-} from '@coreui/react/src/index'
-
-## Example
-
-```jsx preview
-<CForm>
- <CFormInput
- type="email"
- id="exampleFormControlInput1"
- label="Email address"
- placeholder="name@example.com"
- text="Must be 8-20 characters long."
- aria-describedby="exampleFormControlInputHelpInline"
- />
-</CForm>
-```
-
-If you need to add custom classNames to form's components, or need to add some custom elements you can add each form component separately. Please check the example below.
-
-```jsx
-<CForm>
- <CFormLabel htmlFor="exampleFormControlInput1">Email address</CFormLabel>
- <CFormInput type="email" id="exampleFormControlInput1" placeholder="name@example.com" aria-describedby="exampleFormControlInputHelpInline" />
- <CFormText as="span" id="exampleFormControlInputHelpInline">
- Must be 8-20 characters long.
- </CFormText>
-</CForm>
-```
-
-## Sizing
-
-Set heights using `size` property like `size="lg"` and `size="sm"`.
-
-```jsx preview
-<CFormInput type="text" size="lg" placeholder="Large input" aria-label="lg input example"/>
-<CFormInput type="text" placeholder="Default input" aria-label="default input example"/>
-<CFormInput type="text" size="sm" placeholder="Small input" aria-label="sm input example"/>
-```
-
-## Disabled
-
-Add the `disabled` boolean attribute on an input to give it a grayed out appearance and remove pointer events.
-
-```jsx preview
-<CFormInput type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled/>
-<CFormInput type="text" placeholder="Disabled readonly input" aria-label="Disabled input example" disabled readOnly/>
-```
-
-## Readonly
-
-Add the `readOnly` boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.
-
-```jsx preview
-<CFormInput
- type="text"
- placeholder="Readonly input here..."
- aria-label="readonly input example"
- readOnly
-/>
-```
-
-## Readonly plain text
-
-If you want to have `<input readonly>` elements in your form styled as plain text, use the `plainText` boolean property to remove the default form field styling and preserve the correct margin and padding.
-
-```jsx preview
-<CRow className="mb-3">
- <CFormLabel htmlFor="staticEmail" className="col-sm-2 col-form-label">Email</CFormLabel>
- <CCol sm={10}>
- <CFormInput type="text" id="staticEmail" defaultValue="email@example.com" readOnly plainText/>
- </CCol>
-</CRow>
-<CRow className="mb-3">
- <CFormLabel htmlFor="inputPassword" className="col-sm-2 col-form-label">Password</CFormLabel>
- <CCol sm={10}>
- <CFormInput type="password" id="inputPassword"/>
- </CCol>
-</CRow>
-```
-
-```jsx preview
-<CForm className="row g-3">
- <CCol xs="auto">
- <CFormLabel htmlFor="staticEmail2" className="visually-hidden">
- Email
- </CFormLabel>
- <CFormInput type="text" id="staticEmail2" defaultValue="email@example.com" readOnly plainText />
- </CCol>
- <CCol xs="auto">
- <CFormLabel htmlFor="inputPassword2" className="visually-hidden">
- Password
- </CFormLabel>
- <CFormInput type="password" id="inputPassword2" placeholder="Password" />
- </CCol>
- <CCol xs="auto">
- <CButton color="primary" type="submit" className="mb-3">
- Confirm identity
- </CButton>
- </CCol>
-</CForm>
-```
-
-## File input
-
-<Example>
-
-</Example>
-
-```jsx preview
-<div className="mb-3">
- <CFormInput type="file" id="formFile" label="Default file input example" />
-</div>
-<div className="mb-3">
- <CFormInput type="file" id="formFileMultiple" label="Multiple files input example" multiple />
-</div>
-<div className="mb-3">
- <CFormInput type="file" id="formFileDisabled" label="Disabled file input example" disabled />
-</div>
-<div className="mb-3">
- <CFormInput type="file" size="sm" id="formFileSm" label="Small file input example" />
-</div>
-<div>
- <CFormInput type="file" size="lg" id="formFileLg" label="Large file input example" />
-</div>
-```
-
-## Color
-
-```jsx preview
-<CFormInput
- type="color"
- id="exampleColorInput"
- defaultValue="#563d7c"
- label="Color picker"
- title="Choose your color"
-/>
-```
-
-## Customizing
-
-### SASS variables
-
-`$input-*` are shared across most of our form controls (and not buttons).
-
-<ScssDocs file="_variables.scss" capture="form-input-variables" />
-
-`$form-label-*` and `$form-text-*` are for our `<CFormLabel />`s and `<CFormText />` component.
-
-<ScssDocs file="_variables.scss" capture="form-label-variables" />
-
-<ScssDocs file="_variables.scss" capture="form-text-variables" />
-
-`$form-file-*` are for file input.
-
-<ScssDocs file="_variables.scss" capture="form-file-variables" />
-
-## API
-
-### CFormInput
-
-`markdown:CFormInput.api.mdx`
-
-### CFormFeedback
-
-`markdown:CFormFeedback.api.mdx`
-
-### CFormLabel
-
-`markdown:CFormLabel.api.mdx`
-
-### CFormText
-
-`markdown:CFormText.api.mdx`
diff --git a/packages/docs/content/forms/input/api.mdx b/packages/docs/content/forms/input/api.mdx
new file mode 100644
index 00000000..e8641ef8
--- /dev/null
+++ b/packages/docs/content/forms/input/api.mdx
@@ -0,0 +1,27 @@
+---
+title: React Form Input Component API
+name: Form Input API
+description: Explore the API reference for the React Form Input component and discover how to effectively utilize its props for customization.
+route: /forms/input/
+---
+
+import CFormInputAPI from '../../api/CFormInput.api.mdx'
+import CFormFeedbackAPI from '../../api/CFormFeedback.api.mdx'
+import CFormLabelAPI from '../../api/CFormLabel.api.mdx'
+import CFormTextAPI from '../../api/CFormText.api.mdx'
+
+## CFormInput
+
+<CFormInputAPI />
+
+## CFormFeedback
+
+<CFormFeedbackAPI />
+
+## CFormLabel
+
+<CFormLabelAPI />
+
+## CFormText
+
+<CFormTextAPI />
diff --git a/packages/docs/content/forms/input/examples/FormInputColorExample.tsx b/packages/docs/content/forms/input/examples/FormInputColorExample.tsx
new file mode 100644
index 00000000..5e483d9f
--- /dev/null
+++ b/packages/docs/content/forms/input/examples/FormInputColorExample.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { CFormInput } from '@coreui/react'
+
+export const FormInputColorExample = () => {
+ return (
+ <CFormInput
+ type="color"
+ id="exampleColorInput"
+ defaultValue="#563d7c"
+ label="Color picker"
+ title="Choose your color"
+ />
+ )
+}
diff --git a/packages/docs/content/forms/input/examples/FormInputCustomClassNamesExample.tsx b/packages/docs/content/forms/input/examples/FormInputCustomClassNamesExample.tsx
new file mode 100644
index 00000000..fa886255
--- /dev/null
+++ b/packages/docs/content/forms/input/examples/FormInputCustomClassNamesExample.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { CForm, CFormInput } from '@coreui/react'
+
+export const FormInputCustomClassNamesExample = () => {
+ return (
+ <CForm>
+ <CFormInput
+ type="email"
+ id="exampleFormControlInput1"
+ label="Email address"
+ placeholder="name@example.com"
+ text="Must be 8-20 characters long."
+ aria-describedby="exampleFormControlInputHelpInline"
+ customClassNames={{
+ FORM_CONTROL: 'border-3',
+ FORM_LABEL: 'fw-semibold text-primary',
+ FORM_TEXT: 'text-success',
+ }}
+ />
+ </CForm>
+ )
+}
diff --git a/packages/docs/content/forms/input/examples/FormInputDisabledExample.tsx b/packages/docs/content/forms/input/examples/FormInputDisabledExample.tsx
new file mode 100644
index 00000000..825f977a
--- /dev/null
+++ b/packages/docs/content/forms/input/examples/FormInputDisabledExample.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { CFormInput } from '@coreui/react'
+
+export const FormInputDisabledExample = () => {
+ return (
+ <>
+ <CFormInput
+ type="text"
+ placeholder="Disabled input"
+ aria-label="Disabled input example"
+ disabled
+ />
+ <CFormInput
+ type="text"
+ placeholder="Disabled readonly input"
+ aria-label="Disabled input example"
+ disabled
+ readOnly
+ />
+ </>
+ )
+}
diff --git a/packages/docs/content/forms/input/examples/FormInputExample.tsx b/packages/docs/content/forms/input/examples/FormInputExample.tsx
new file mode 100644
index 00000000..f549a22e
--- /dev/null
+++ b/packages/docs/content/forms/input/examples/FormInputExample.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { CForm, CFormInput } from '@coreui/react'
+
+export const FormInputExample = () => {
+ return (
+ <CForm>
+ <CFormInput
+ type="email"
+ id="exampleFormControlInput1"
+ label="Email address"
+ placeholder="name@example.com"
+ text="Must be 8-20 characters long."
+ aria-describedby="exampleFormControlInputHelpInline"
+ />
+ </CForm>
+ )
+}
diff --git a/packages/docs/content/forms/input/examples/FormInputFileExample.tsx b/packages/docs/content/forms/input/examples/FormInputFileExample.tsx
new file mode 100644
index 00000000..19894a2f
--- /dev/null
+++ b/packages/docs/content/forms/input/examples/FormInputFileExample.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import { CFormInput } from '@coreui/react'
+
+export const FormInputFileExample = () => {
+ return (
+ <>
+ <div className="mb-3">
+ <CFormInput type="file" id="formFile" label="Default file input example" />
+ </div>
+ <div className="mb-3">
+ <CFormInput
+ type="file"
+ id="formFileMultiple"
+ label="Multiple files input example"
+ multiple
+ />
+ </div>
+ <div className="mb-3">
+ <CFormInput
+ type="file"
+ id="formFileDisabled"
+ label="Disabled file input example"
+ disabled
+ />
+ </div>
+ <div className="mb-3">
+ <CFormInput type="file" size="sm" id="formFileSm" label="Small file input example" />
+ </div>
+ <div>
+ <CFormInput type="file" size="lg" id="formFileLg" label="Large file input example" />
+ </div>
+ </>
+ )
+}
diff --git a/packages/docs/content/forms/input/examples/FormInputReadonlyExample.tsx b/packages/docs/content/forms/input/examples/FormInputReadonlyExample.tsx
new file mode 100644
index 00000000..beb0fa42
--- /dev/null
+++ b/packages/docs/content/forms/input/examples/FormInputReadonlyExample.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import { CCol, CFormInput, CFormLabel, CRow } from '@coreui/react'
+
+export const FormInputReadonlyExample = () => {
+ return (
+ <>
+ <CRow className="mb-3">
+ <CFormLabel htmlFor="staticEmail" className="col-sm-2 col-form-label">
+ Email
+ </CFormLabel>
+ <CCol sm={10}>
+ <CFormInput
+ type="text"
+ id="staticEmail"
+ defaultValue="email@example.com"
+ readOnly
+ plainText
+ />
+ </CCol>
+ </CRow>
+ <CRow className="mb-3">
+ <CFormLabel htmlFor="inputPassword" className="col-sm-2 col-form-label">
+ Password
+ </CFormLabel>
+ <CCol sm={10}>
+ <CFormInput type="password" id="inputPassword" />
+ </CCol>
+ </CRow>
+ </>
+ )
+}
diff --git a/packages/docs/content/forms/input/examples/FormInputReadonlyPlainText2Example.tsx b/packages/docs/content/forms/input/examples/FormInputReadonlyPlainText2Example.tsx
new file mode 100644
index 00000000..1f35597d
--- /dev/null
+++ b/packages/docs/content/forms/input/examples/FormInputReadonlyPlainText2Example.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import { CButton, CCol, CForm, CFormInput, CFormLabel } from '@coreui/react'
+
+export const FormInputReadonlyPlainText2Example = () => {
+ return (
+ <CForm className="row g-3">
+ <CCol xs="auto">
+ <CFormLabel htmlFor="staticEmail3" className="visually-hidden">
+ Email
+ </CFormLabel>
+ <CFormInput
+ type="text"
+ id="staticEmail3"
+ defaultValue="email@example.com"
+ readOnly
+ plainText
+ />
+ </CCol>
+ <CCol xs="auto">
+ <CFormLabel htmlFor="inputPassword3" className="visually-hidden">
+ Password
+ </CFormLabel>
+ <CFormInput type="password" id="inputPassword3" placeholder="Password" />
+ </CCol>
+ <CCol xs="auto">
+ <CButton color="primary" type="submit" className="mb-3">
+ Confirm identity
+ </CButton>
+ </CCol>
+ </CForm>
+ )
+}
diff --git a/packages/docs/content/forms/input/examples/FormInputReadonlyPlainTextExample.tsx b/packages/docs/content/forms/input/examples/FormInputReadonlyPlainTextExample.tsx
new file mode 100644
index 00000000..03ecb43c
--- /dev/null
+++ b/packages/docs/content/forms/input/examples/FormInputReadonlyPlainTextExample.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import { CCol, CFormInput, CFormLabel, CRow } from '@coreui/react'
+
+export const FormInputReadonlyPlainTextExample = () => {
+ return (
+ <>
+ <CRow className="mb-3">
+ <CFormLabel htmlFor="staticEmail2" className="col-sm-2 col-form-label">
+ Email
+ </CFormLabel>
+ <CCol sm={10}>
+ <CFormInput
+ type="text"
+ id="staticEmail2"
+ defaultValue="email@example.com"
+ readOnly
+ plainText
+ />
+ </CCol>
+ </CRow>
+ <CRow className="mb-3">
+ <CFormLabel htmlFor="inputPassword2" className="col-sm-2 col-form-label">
+ Password
+ </CFormLabel>
+ <CCol sm={10}>
+ <CFormInput type="password" id="inputPassword2" />
+ </CCol>
+ </CRow>
+ </>
+ )
+}
diff --git a/packages/docs/content/forms/input/examples/FormInputSizingExample.tsx b/packages/docs/content/forms/input/examples/FormInputSizingExample.tsx
new file mode 100644
index 00000000..41233653
--- /dev/null
+++ b/packages/docs/content/forms/input/examples/FormInputSizingExample.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CFormInput } from '@coreui/react'
+
+export const FormInputSizingExample = () => {
+ return (
+ <>
+ <CFormInput type="text" size="lg" placeholder="Large input" aria-label="lg input example" />
+ <CFormInput type="text" placeholder="Default input" aria-label="default input example" />
+ <CFormInput type="text" size="sm" placeholder="Small input" aria-label="sm input example" />
+ </>
+ )
+}
diff --git a/packages/docs/content/forms/input/index.mdx b/packages/docs/content/forms/input/index.mdx
new file mode 100644
index 00000000..1af3a297
--- /dev/null
+++ b/packages/docs/content/forms/input/index.mdx
@@ -0,0 +1,108 @@
+---
+title: React Form Input Component
+name: Form control
+description: React input components. Give textual form `<input>`s an upgrade with custom styles, sizing, focus states, validation, and more.
+menu: Forms
+route: /forms/input
+other_frameworks: input
+---
+
+## Example
+
+import { FormInputExample } from './examples/FormInputExample.tsx'
+import FormInputExampleTS from '!!raw-loader!./examples/FormInputExample.tsx'
+
+<ExampleSnippet code={FormInputExampleTS} componentName="React Form Input">
+ <FormInputExample />
+</ExampleSnippet>
+
+If you need to add custom classNames to form's components, or need to add some custom elements you can add each form component separately. Please check the example below.
+
+```jsx
+<CForm>
+ <CFormLabel htmlFor="exampleFormControlInput1">Email address</CFormLabel>
+ <CFormInput type="email" id="exampleFormControlInput1" placeholder="name@example.com" aria-describedby="exampleFormControlInputHelpInline" />
+ <CFormText as="span" id="exampleFormControlInputHelpInline">
+ Must be 8-20 characters long.
+ </CFormText>
+</CForm>
+```
+
+## Sizing
+
+Set heights using `size` property like `size="lg"` and `size="sm"`.
+
+import { FormInputSizingExample } from './examples/FormInputSizingExample.tsx'
+import FormInputSizingExampleTS from '!!raw-loader!./examples/FormInputSizingExample.tsx'
+
+<ExampleSnippet code={FormInputSizingExampleTS} componentName="React Form Input">
+ <FormInputSizingExample />
+</ExampleSnippet>
+
+## Disabled
+
+Add the `disabled` boolean attribute on an input to give it a grayed out appearance and remove pointer events.
+
+import { FormInputDisabledExample } from './examples/FormInputDisabledExample.tsx'
+import FormInputDisabledExampleTS from '!!raw-loader!./examples/FormInputDisabledExample.tsx'
+
+<ExampleSnippet code={FormInputDisabledExampleTS} componentName="React Form Input">
+ <FormInputDisabledExample />
+</ExampleSnippet>
+
+## Readonly
+
+Add the `readOnly` boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.
+
+import { FormInputReadonlyExample } from './examples/FormInputReadonlyExample.tsx'
+import FormInputReadonlyExampleTS from '!!raw-loader!./examples/FormInputReadonlyExample.tsx'
+
+<ExampleSnippet code={FormInputReadonlyExampleTS} componentName="React Form Input">
+ <FormInputReadonlyExample />
+</ExampleSnippet>
+
+## Readonly plain text
+
+If you want to have `<input readonly>` elements in your form styled as plain text, use the `plainText` boolean property to remove the default form field styling and preserve the correct margin and padding.
+
+import { FormInputReadonlyPlainTextExample } from './examples/FormInputReadonlyPlainTextExample.tsx'
+import FormInputReadonlyPlainTextExampleTS from '!!raw-loader!./examples/FormInputReadonlyPlainTextExample.tsx'
+
+<ExampleSnippet code={FormInputReadonlyPlainTextExampleTS} componentName="React Form Input">
+ <FormInputReadonlyPlainTextExample />
+</ExampleSnippet>
+
+import { FormInputReadonlyPlainText2Example } from './examples/FormInputReadonlyPlainText2Example.tsx'
+import FormInputReadonlyPlainText2ExampleTS from '!!raw-loader!./examples/FormInputReadonlyPlainText2Example.tsx'
+
+<ExampleSnippet code={FormInputReadonlyPlainText2ExampleTS} componentName="React Form Input">
+ <FormInputReadonlyPlainText2Example />
+</ExampleSnippet>
+
+## File input
+
+import { FormInputFileExample } from './examples/FormInputFileExample.tsx'
+import FormInputFileExampleTS from '!!raw-loader!./examples/FormInputFileExample.tsx'
+
+<ExampleSnippet code={FormInputFileExampleTS} componentName="React Form Input">
+ <FormInputFileExample />
+</ExampleSnippet>
+
+## Color
+
+import { FormInputColorExample } from './examples/FormInputColorExample.tsx'
+import FormInputColorExampleTS from '!!raw-loader!./examples/FormInputColorExample.tsx'
+
+<ExampleSnippet code={FormInputColorExampleTS} componentName="React Form Input">
+ <FormInputColorExample />
+</ExampleSnippet>
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [<CFormInput />](./api/#cforminput)
+- [<CFormFeedback />](./api/#cformfeedback)
+- [<CFormLabel />](./api/#cformlabel)
+- [<CFormText />](./api/#cformtext)
+
diff --git a/packages/docs/content/forms/input/styling.mdx b/packages/docs/content/forms/input/styling.mdx
new file mode 100644
index 00000000..b75b8eb4
--- /dev/null
+++ b/packages/docs/content/forms/input/styling.mdx
@@ -0,0 +1,58 @@
+---
+title: React Input Component Styling
+name: Input Styling
+description: Learn how to customize the React Input component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /forms/input/
+---
+
+### Customize using customClassNames
+
+import { FormInputCustomClassNamesExample } from './examples/FormInputCustomClassNamesExample.tsx'
+import FormInputCustomClassNamesExampleTS from '!!raw-loader!./examples/FormInputCustomClassNamesExample.tsx'
+
+<ExampleSnippet code={FormInputCustomClassNamesExampleTS} componentName="React Form Input Customization">
+ <FormInputCustomClassNamesExample />
+</ExampleSnippet>
+
+### CSS class names
+
+React Input component comes with built-in class names that make styling super simple. Here’s a quick rundown of what you can use:
+
+#### CFormInput
+
+<ClassNamesDocs
+ files={[
+ 'components/form/CFormFeedback.tsx',
+ 'components/form/CFormInput.tsx',
+ 'components/form/CFormLabel.tsx',
+ 'components/form/CFormText.tsx',
+ ]}
+/>
+
+#### CFormLabel
+
+<ClassNamesDocs files={['components/form/CFormLabel.tsx']} />
+
+#### CFormText
+
+<ClassNamesDocs files={['components/form/CFormText.tsx']} />
+
+#### CFormFeedback
+
+<ClassNamesDocs files={['components/form/CFormFeedback.tsx']} />
+
+### SASS variables
+
+`$input-*` are shared across most of our form controls (and not buttons).
+
+<ScssDocs file="_variables.scss" capture="form-input-variables" />
+
+`$form-label-*` and `$form-text-*` are for our `<CFormLabel />`s and `<CFormText />` component.
+
+<ScssDocs file="_variables.scss" capture="form-label-variables" />
+
+<ScssDocs file="_variables.scss" capture="form-text-variables" />
+
+`$form-file-*` are for file input.
+
+<ScssDocs file="_variables.scss" capture="form-file-variables" />
diff --git a/packages/docs/content/forms/layout.mdx b/packages/docs/content/forms/layout.mdx
deleted file mode 100644
index 91c6c988..00000000
--- a/packages/docs/content/forms/layout.mdx
+++ /dev/null
@@ -1,290 +0,0 @@
----
-title: React Form Layout
-name: Layout
-description: Give your forms some structure—from inline to horizontal to custom grid implementations—with our form layout options.
-menu: Forms
-route: /forms/layout
----
-
-import {
- CButton,
- CDropdown,
- CDropdownDivider,
- CDropdownHeader,
- CDropdownItem,
- CDropdownItemPlain,
- CDropdownMenu,
- CDropdownToggle,
- CForm,
- CFormCheck,
- CFormInput,
- CFormLabel,
- CFormSelect,
- CInputGroup,
- CInputGroupText,
- CCol,
- CRow
-} from '@coreui/react/src/index'
-
-## Forms
-
-Every group of form fields should reside in a `<CForm>` element. CoreUI provides no default styling for the `<CForm>` element, but there are some powerful browser features that are provided by default.
-
-- New to browser forms? Consider reviewing [the MDN form docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) for an overview and complete list of available attributes.
-- `<CButton>`s within a `<CForm>` default to `type="submit"`, so strive to be specific and always include a `type`.
-- You can disable every form element within a form with the `disabled` attribute on the `<CForm>`.
-
-Since CoreUI applies `display: block` and `width: 100%` to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.
-
-## Utilities
-
-[Margin utilities](https://coreui.io/docs/utilities/spacing/) are the easiest way to add some structure to forms. They provide basic grouping of labels, controls, optional form text, and form validation messaging. We recommend sticking to `margin-bottom` utilities, and using a single direction throughout the form for consistency.
-
-## Form grid
-
-More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.
-
-```jsx preview
-<CRow>
- <CCol xs>
- <CFormInput placeholder="First name" aria-label="First name"/>
- </CCol>
- <CCol xs>
- <CFormInput placeholder="Last name" aria-label="Last name"/>
- </CCol>
-</CRow>
-```
-
-## Gutters
-
-By adding [gutter modifier classes](https://coreui.io/docs/layout/gutters/), you can have control over the gutter width in as well the inline as block direction.
-
-```jsx preview
-<CRow className="g-3">
- <CCol xs>
- <CFormInput placeholder="First name" aria-label="First name"/>
- </CCol>
- <CCol xs>
- <CFormInput placeholder="Last name" aria-label="Last name"/>
- </CCol>
-</CRow>
-```
-
-More complex layouts can also be created with the grid system.
-
-```jsx preview
-<CForm className="row g-3">
- <CCol md={6}>
- <CFormInput type="email" id="inputEmail4" label="Email" />
- </CCol>
- <CCol md={6}>
- <CFormInput type="password" id="inputPassword4" label="Password" />
- </CCol>
- <CCol xs={12}>
- <CFormInput id="inputAddress" label="Address" placeholder="1234 Main St"/>
- </CCol>
- <CCol xs={12}>
- <CFormInput id="inputAddress2" label="Address 2" placeholder="Apartment, studio, or floor"/>
- </CCol>
- <CCol md={6}>
- <CFormInput id="inputCity" label="City"/>
- </CCol>
- <CCol md={4}>
- <CFormSelect id="inputState" label="State">
- <option>Choose...</option>
- <option>...</option>
- </CFormSelect>
- </CCol>
- <CCol md={2}>
- <CFormInput id="inputZip" label="Zip" />
- </CCol>
- <CCol xs={12}>
- <CFormCheck type="checkbox" id="gridCheck" label="Check me out"/>
- </CCol>
- <CCol xs={12}>
- <CButton color="primary" type="submit">Sign in</CButton>
- </CCol>
-</CForm>
-```
-
-## Horizontal form
-
-Create horizontal forms with the grid by adding the `.row` class to form groups and using the `.col-*-*` classes to specify the width of your labels and controls. Be sure to add `.col-form-label` to your `<CFormLabel>`s as well so they're vertically centered with their associated form controls.
-
-At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we've removed the `padding-top` on our stacked radio inputs label to better align the text baseline.
-
-```jsx preview
-<CForm>
- <CRow className="mb-3">
- <CFormLabel htmlFor="inputEmail3" className="col-sm-2 col-form-label">Email</CFormLabel>
- <CCol sm={10} >
- <CFormInput type="email" id="inputEmail3"/>
- </CCol>
- </CRow>
- <CRow className="mb-3">
- <CFormLabel htmlFor="inputPassword3" className="col-sm-2 col-form-label">Password</CFormLabel>
- <CCol sm={10} >
- <CFormInput type="password" id="inputPassword3"/>
- </CCol>
- </CRow>
- <fieldset className="row mb-3">
- <legend className="col-form-label col-sm-2 pt-0">Radios</legend>
- <CCol sm={10} >
- <CFormCheck type="radio" name="gridRadios" id="gridRadios1" value="option1" label="First radio" defaultChecked/>
- <CFormCheck type="radio" name="gridRadios" id="gridRadios2" value="option2" label="Second radio"/>
- <CFormCheck type="radio" name="gridRadios" id="gridRadios3" value="option3" label="Third disabled radio" disabled/>
- </CCol>
- </fieldset>
- <CRow className="mb-3">
- <div className="col-sm-10 offset-sm-2">
- <CFormCheck type="checkbox" id="gridCheck1" label="Example checkbox"/>
- </div>
- </CRow>
- <CButton color="primary" type="submit">Sign in</CButton>
-</CForm>
-```
-
-### Horizontal form label sizing
-
-Be sure to use `.col-form-label-sm` or `.col-form-label-lg` to your `<CFormLabel>`s or `<legend>`s to correctly follow the size of `.form-control-lg` and `.form-control-sm`.
-
-```jsx preview
-<CRow className="mb-3">
- <CFormLabel htmlFor="colFormLabelSm" className="col-sm-2 col-form-label col-form-label-sm">Email</CFormLabel>
- <CCol sm={10} >
- <CFormInput type="email" className="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm"/>
- </CCol>
-</CRow>
-<CRow className="mb-3">
- <CFormLabel htmlFor="colFormLabel" className="col-sm-2 col-form-label">Email</CFormLabel>
- <CCol sm={10} >
- <CFormInput type="email" id="colFormLabel" placeholder="col-form-label"/>
- </CCol>
-</CRow>
-<CRow>
- <CFormLabel htmlFor="colFormLabelLg" className="col-sm-2 col-form-label col-form-label-lg">Email</CFormLabel>
- <CCol sm={10} >
- <CFormInput type="email" className="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg"/>
- </CCol>
-</CRow>
-```
-
-## Column sizing
-
-As shown in the previous examples, our grid system allows you to place any number of `<CCol>`s within a `<CRow>`. They'll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining `<CCol>`s equally split the rest, with specific column classes like `<CCol sm={7} >`.
-
-```jsx preview
-<CRow className="g-3">
- <CCol sm={7} >
- <CFormInput placeholder="City" aria-label="City"/>
- </CCol>
- <CCol sm>
- <CFormInput placeholder="State" aria-label="State"/>
- </CCol>
- <CCol sm>
- <CFormInput placeholder="Zip" aria-label="Zip"/>
- </CCol>
-</CRow>
-```
-
-## Auto-sizing
-
-The example below uses a flexbox utility to vertically center the contents and changes `<CCol>` to `<CCol xs="auto">` so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents.
-
-```jsx preview
-<CForm className="row gy-2 gx-3 align-items-center">
- <CCol xs="auto">
- <CFormLabel className="visually-hidden" htmlFor="autoSizingInput">Name</CFormLabel>
- <CFormInput id="autoSizingInput" placeholder="Jane Doe"/>
- </CCol>
- <CCol xs="auto">
- <CFormLabel className="visually-hidden" htmlFor="autoSizingInputGroup">Username</CFormLabel>
- <CInputGroup>
- <CInputGroupText>@</CInputGroupText>
- <CFormInput id="autoSizingInputGroup" placeholder="Username"/>
- </CInputGroup>
- </CCol>
- <CCol xs="auto">
- <CFormLabel className="visually-hidden" htmlFor="autoSizingSelect">Preference</CFormLabel>
- <CFormSelect id="autoSizingSelect">
- <option>Choose...</option>
- <option value="1">One</option>
- <option value="2">Two</option>
- <option value="3">Three</option>
- </CFormSelect>
- </CCol>
- <CCol xs="auto">
- <CFormCheck type="checkbox" id="autoSizingCheck" label="Remember me"/>
- </CCol>
- <CCol xs="auto">
- <CButton color="primary" type="submit">Submit</CButton>
- </CCol>
-</CForm>
-```
-
-You can then remix that once again with size-specific column classes.
-
-```jsx preview
-<CForm className="row gx-3 gy-2 align-items-center">
- <CCol sm={3} >
- <CFormLabel className="visually-hidden" htmlFor="specificSizeInputName">Name</CFormLabel>
- <CFormInput id="specificSizeInputName" placeholder="Jane Doe"/>
- </CCol>
- <CCol sm={3} >
- <CFormLabel className="visually-hidden" htmlFor="specificSizeInputGroupUsername">Username</CFormLabel>
- <CInputGroup>
- <CInputGroupText>@</CInputGroupText>
- <CFormInput id="specificSizeInputGroupUsername" placeholder="Username"/>
- </CInputGroup>
- </CCol>
- <CCol sm={3} >
- <CFormLabel className="visually-hidden" htmlFor="specificSizeSelect">Preference</CFormLabel>
- <CFormSelect id="specificSizeSelect">
- <option>Choose...</option>
- <option value="1">One</option>
- <option value="2">Two</option>
- <option value="3">Three</option>
- </CFormSelect>
- </CCol>
- <CCol xs="auto">
- <CFormCheck type="checkbox" id="autoSizingCheck2" label="Remember me"/>
- </CCol>
- <CCol xs="auto">
- <CButton color="primary" type="submit">Submit</CButton>
- </CCol>
-</CForm>
-```
-
-## Inline forms
-
-Use the `<CCol xs="auto">` class to create horizontal layouts. By adding [gutter modifier classes](https://coreui.io/docs/layout/gutters/), we will have gutters in horizontal and vertical directions. The `.align-items-center` aligns the form elements to the middle, making the `<CFormCheck>` align properly.
-
-```jsx preview
-<CForm className="row row-cols-lg-auto g-3 align-items-center">
- <CCol xs={12}>
- <CFormLabel className="visually-hidden" htmlFor="inlineFormInputGroupUsername">Username</CFormLabel>
- <CInputGroup>
- <CInputGroupText>@</CInputGroupText>
- <CFormInput id="inlineFormInputGroupUsername" placeholder="Username"/>
- </CInputGroup>
- </CCol>
-
- <CCol xs={12}>
- <CFormLabel className="visually-hidden" htmlFor="inlineFormSelectPref">Preference</CFormLabel>
- <CFormSelect id="inlineFormSelectPref">
- <option>Choose...</option>
- <option value="1">One</option>
- <option value="2">Two</option>
- <option value="3">Three</option>
- </CFormSelect>
- </CCol>
-
- <CCol xs={12}>
- <CFormCheck type="checkbox" id="inlineFormCheck" label="Remember me"/>
- </CCol>
-
- <CCol xs={12}>
- <CButton color="primary" type="submit">Submit</CButton>
- </CCol>
-</CForm>
-```
diff --git a/packages/docs/content/forms/layout/examples/LayoutAutoSizing2Example.tsx b/packages/docs/content/forms/layout/examples/LayoutAutoSizing2Example.tsx
new file mode 100644
index 00000000..981793af
--- /dev/null
+++ b/packages/docs/content/forms/layout/examples/LayoutAutoSizing2Example.tsx
@@ -0,0 +1,53 @@
+import React from 'react'
+import {
+ CButton,
+ CCol,
+ CForm,
+ CFormCheck,
+ CFormInput,
+ CFormLabel,
+ CFormSelect,
+ CInputGroup,
+ CInputGroupText,
+} from '@coreui/react'
+
+export const LayoutAutoSizing2Example = () => {
+ return (
+ <CForm className="row gx-3 gy-2 align-items-center">
+ <CCol sm={3}>
+ <CFormLabel className="visually-hidden" htmlFor="specificSizeInputName">
+ Name
+ </CFormLabel>
+ <CFormInput id="specificSizeInputName" placeholder="Jane Doe" />
+ </CCol>
+ <CCol sm={3}>
+ <CFormLabel className="visually-hidden" htmlFor="specificSizeInputGroupUsername">
+ Username
+ </CFormLabel>
+ <CInputGroup>
+ <CInputGroupText>@</CInputGroupText>
+ <CFormInput id="specificSizeInputGroupUsername" placeholder="Username" />
+ </CInputGroup>
+ </CCol>
+ <CCol sm={3}>
+ <CFormLabel className="visually-hidden" htmlFor="specificSizeSelect">
+ Preference
+ </CFormLabel>
+ <CFormSelect id="specificSizeSelect">
+ <option>Choose...</option>
+ <option value="1">One</option>
+ <option value="2">Two</option>
+ <option value="3">Three</option>
+ </CFormSelect>
+ </CCol>
+ <CCol xs="auto">
+ <CFormCheck type="checkbox" id="autoSizingCheck2" label="Remember me" />
+ </CCol>
+ <CCol xs="auto">
+ <CButton color="primary" type="submit">
+ Submit
+ </CButton>
+ </CCol>
+ </CForm>
+ )
+}
diff --git a/packages/docs/content/forms/layout/examples/LayoutAutoSizingExample.tsx b/packages/docs/content/forms/layout/examples/LayoutAutoSizingExample.tsx
new file mode 100644
index 00000000..e36b04cd
--- /dev/null
+++ b/packages/docs/content/forms/layout/examples/LayoutAutoSizingExample.tsx
@@ -0,0 +1,53 @@
+import React from 'react'
+import {
+ CButton,
+ CCol,
+ CForm,
+ CFormCheck,
+ CFormInput,
+ CFormLabel,
+ CFormSelect,
+ CInputGroup,
+ CInputGroupText,
+} from '@coreui/react'
+
+export const LayoutAutoSizingExample = () => {
+ return (
+ <CForm className="row gy-2 gx-3 align-items-center">
+ <CCol xs="auto">
+ <CFormLabel className="visually-hidden" htmlFor="autoSizingInput">
+ Name
+ </CFormLabel>
+ <CFormInput id="autoSizingInput" placeholder="Jane Doe" />
+ </CCol>
+ <CCol xs="auto">
+ <CFormLabel className="visually-hidden" htmlFor="autoSizingInputGroup">
+ Username
+ </CFormLabel>
+ <CInputGroup>
+ <CInputGroupText>@</CInputGroupText>
+ <CFormInput id="autoSizingInputGroup" placeholder="Username" />
+ </CInputGroup>
+ </CCol>
+ <CCol xs="auto">
+ <CFormLabel className="visually-hidden" htmlFor="autoSizingSelect">
+ Preference
+ </CFormLabel>
+ <CFormSelect id="autoSizingSelect">
+ <option>Choose...</option>
+ <option value="1">One</option>
+ <option value="2">Two</option>
+ <option value="3">Three</option>
+ </CFormSelect>
+ </CCol>
+ <CCol xs="auto">
+ <CFormCheck type="checkbox" id="autoSizingCheck" label="Remember me" />
+ </CCol>
+ <CCol xs="auto">
+ <CButton color="primary" type="submit">
+ Submit
+ </CButton>
+ </CCol>
+ </CForm>
+ )
+}
diff --git a/packages/docs/content/forms/layout/examples/LayoutColumnSizingExample.tsx b/packages/docs/content/forms/layout/examples/LayoutColumnSizingExample.tsx
new file mode 100644
index 00000000..8f61f594
--- /dev/null
+++ b/packages/docs/content/forms/layout/examples/LayoutColumnSizingExample.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { CCol, CFormInput, CRow } from '@coreui/react'
+
+export const LayoutColumnSizingExample = () => {
+ return (
+ <CRow className="g-3">
+ <CCol sm={7}>
+ <CFormInput placeholder="City" aria-label="City" />
+ </CCol>
+ <CCol sm>
+ <CFormInput placeholder="State" aria-label="State" />
+ </CCol>
+ <CCol sm>
+ <CFormInput placeholder="Zip" aria-label="Zip" />
+ </CCol>
+ </CRow>
+ )
+}
diff --git a/packages/docs/content/forms/layout/examples/LayoutFormGridExample.tsx b/packages/docs/content/forms/layout/examples/LayoutFormGridExample.tsx
new file mode 100644
index 00000000..5a91967c
--- /dev/null
+++ b/packages/docs/content/forms/layout/examples/LayoutFormGridExample.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { CCol, CFormInput, CRow } from '@coreui/react'
+
+export const LayoutFormGridExample = () => {
+ return (
+ <CRow>
+ <CCol xs>
+ <CFormInput placeholder="First name" aria-label="First name" />
+ </CCol>
+ <CCol xs>
+ <CFormInput placeholder="Last name" aria-label="Last name" />
+ </CCol>
+ </CRow>
+ )
+}
diff --git a/packages/docs/content/forms/layout/examples/LayoutGutters2Example.tsx b/packages/docs/content/forms/layout/examples/LayoutGutters2Example.tsx
new file mode 100644
index 00000000..34d07b46
--- /dev/null
+++ b/packages/docs/content/forms/layout/examples/LayoutGutters2Example.tsx
@@ -0,0 +1,45 @@
+import React from 'react'
+import { CButton, CCol, CForm, CFormCheck, CFormInput, CFormSelect } from '@coreui/react'
+
+export const LayoutGutters2Example = () => {
+ return (
+ <CForm className="row g-3">
+ <CCol md={6}>
+ <CFormInput type="email" id="inputEmail4" label="Email" />
+ </CCol>
+ <CCol md={6}>
+ <CFormInput type="password" id="inputPassword4" label="Password" />
+ </CCol>
+ <CCol xs={12}>
+ <CFormInput id="inputAddress" label="Address" placeholder="1234 Main St" />
+ </CCol>
+ <CCol xs={12}>
+ <CFormInput
+ id="inputAddress2"
+ label="Address 2"
+ placeholder="Apartment, studio, or floor"
+ />
+ </CCol>
+ <CCol md={6}>
+ <CFormInput id="inputCity" label="City" />
+ </CCol>
+ <CCol md={4}>
+ <CFormSelect id="inputState" label="State">
+ <option>Choose...</option>
+ <option>...</option>
+ </CFormSelect>
+ </CCol>
+ <CCol md={2}>
+ <CFormInput id="inputZip" label="Zip" />
+ </CCol>
+ <CCol xs={12}>
+ <CFormCheck type="checkbox" id="gridCheck" label="Check me out" />
+ </CCol>
+ <CCol xs={12}>
+ <CButton color="primary" type="submit">
+ Sign in
+ </CButton>
+ </CCol>
+ </CForm>
+ )
+}
diff --git a/packages/docs/content/forms/layout/examples/LayoutGuttersExample.tsx b/packages/docs/content/forms/layout/examples/LayoutGuttersExample.tsx
new file mode 100644
index 00000000..e5954236
--- /dev/null
+++ b/packages/docs/content/forms/layout/examples/LayoutGuttersExample.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { CCol, CFormInput, CRow } from '@coreui/react'
+
+export const LayoutGuttersExample = () => {
+ return (
+ <CRow className="g-3">
+ <CCol xs>
+ <CFormInput placeholder="First name" aria-label="First name" />
+ </CCol>
+ <CCol xs>
+ <CFormInput placeholder="Last name" aria-label="Last name" />
+ </CCol>
+ </CRow>
+ )
+}
diff --git a/packages/docs/content/forms/layout/examples/LayoutHorizontalFormExample.tsx b/packages/docs/content/forms/layout/examples/LayoutHorizontalFormExample.tsx
new file mode 100644
index 00000000..0d994967
--- /dev/null
+++ b/packages/docs/content/forms/layout/examples/LayoutHorizontalFormExample.tsx
@@ -0,0 +1,61 @@
+import React from 'react'
+import { CButton, CCol, CForm, CFormCheck, CFormInput, CFormLabel, CRow } from '@coreui/react'
+
+export const LayoutHorizontalFormExample = () => {
+ return (
+ <CForm>
+ <CRow className="mb-3">
+ <CFormLabel htmlFor="inputEmail3" className="col-sm-2 col-form-label">
+ Email
+ </CFormLabel>
+ <CCol sm={10}>
+ <CFormInput type="email" id="inputEmail3" />
+ </CCol>
+ </CRow>
+ <CRow className="mb-3">
+ <CFormLabel htmlFor="inputPassword3" className="col-sm-2 col-form-label">
+ Password
+ </CFormLabel>
+ <CCol sm={10}>
+ <CFormInput type="password" id="inputPassword3" />
+ </CCol>
+ </CRow>
+ <fieldset className="row mb-3">
+ <legend className="col-form-label col-sm-2 pt-0">Radios</legend>
+ <CCol sm={10}>
+ <CFormCheck
+ type="radio"
+ name="gridRadios"
+ id="gridRadios1"
+ value="option1"
+ label="First radio"
+ defaultChecked
+ />
+ <CFormCheck
+ type="radio"
+ name="gridRadios"
+ id="gridRadios2"
+ value="option2"
+ label="Second radio"
+ />
+ <CFormCheck
+ type="radio"
+ name="gridRadios"
+ id="gridRadios3"
+ value="option3"
+ label="Third disabled radio"
+ disabled
+ />
+ </CCol>
+ </fieldset>
+ <CRow className="mb-3">
+ <div className="col-sm-10 offset-sm-2">
+ <CFormCheck type="checkbox" id="gridCheck1" label="Example checkbox" />
+ </div>
+ </CRow>
+ <CButton color="primary" type="submit">
+ Sign in
+ </CButton>
+ </CForm>
+ )
+}
diff --git a/packages/docs/content/forms/layout/examples/LayoutHorizontalFormLabelSizingExample.tsx b/packages/docs/content/forms/layout/examples/LayoutHorizontalFormLabelSizingExample.tsx
new file mode 100644
index 00000000..ef9d25f3
--- /dev/null
+++ b/packages/docs/content/forms/layout/examples/LayoutHorizontalFormLabelSizingExample.tsx
@@ -0,0 +1,43 @@
+import React from 'react'
+import { CCol, CFormInput, CFormLabel, CRow } from '@coreui/react'
+
+export const LayoutHorizontalFormLabelSizingExample = () => {
+ return (
+ <>
+ <CRow className="mb-3">
+ <CFormLabel htmlFor="colFormLabelSm" className="col-sm-2 col-form-label col-form-label-sm">
+ Email
+ </CFormLabel>
+ <CCol sm={10}>
+ <CFormInput
+ type="email"
+ className="form-control form-control-sm"
+ id="colFormLabelSm"
+ placeholder="col-form-label-sm"
+ />
+ </CCol>
+ </CRow>
+ <CRow className="mb-3">
+ <CFormLabel htmlFor="colFormLabel" className="col-sm-2 col-form-label">
+ Email
+ </CFormLabel>
+ <CCol sm={10}>
+ <CFormInput type="email" id="colFormLabel" placeholder="col-form-label" />
+ </CCol>
+ </CRow>
+ <CRow>
+ <CFormLabel htmlFor="colFormLabelLg" className="col-sm-2 col-form-label col-form-label-lg">
+ Email
+ </CFormLabel>
+ <CCol sm={10}>
+ <CFormInput
+ type="email"
+ className="form-control form-control-lg"
+ id="colFormLabelLg"
+ placeholder="col-form-label-lg"
+ />
+ </CCol>
+ </CRow>
+ </>
+ )
+}
diff --git a/packages/docs/content/forms/layout/examples/LayoutInlineFormsExample.tsx b/packages/docs/content/forms/layout/examples/LayoutInlineFormsExample.tsx
new file mode 100644
index 00000000..c379da40
--- /dev/null
+++ b/packages/docs/content/forms/layout/examples/LayoutInlineFormsExample.tsx
@@ -0,0 +1,50 @@
+import React from 'react'
+import {
+ CButton,
+ CCol,
+ CForm,
+ CFormCheck,
+ CFormInput,
+ CFormLabel,
+ CFormSelect,
+ CInputGroup,
+ CInputGroupText,
+} from '@coreui/react'
+
+export const LayoutInlineFormsExample = () => {
+ return (
+ <CForm className="row row-cols-lg-auto g-3 align-items-center">
+ <CCol xs={12}>
+ <CFormLabel className="visually-hidden" htmlFor="inlineFormInputGroupUsername">
+ Username
+ </CFormLabel>
+ <CInputGroup>
+ <CInputGroupText>@</CInputGroupText>
+ <CFormInput id="inlineFormInputGroupUsername" placeholder="Username" />
+ </CInputGroup>
+ </CCol>
+
+ <CCol xs={12}>
+ <CFormLabel className="visually-hidden" htmlFor="inlineFormSelectPref">
+ Preference
+ </CFormLabel>
+ <CFormSelect id="inlineFormSelectPref">
+ <option>Choose...</option>
+ <option value="1">One</option>
+ <option value="2">Two</option>
+ <option value="3">Three</option>
+ </CFormSelect>
+ </CCol>
+
+ <CCol xs={12}>
+ <CFormCheck type="checkbox" id="inlineFormCheck" label="Remember me" />
+ </CCol>
+
+ <CCol xs={12}>
+ <CButton color="primary" type="submit">
+ Submit
+ </CButton>
+ </CCol>
+ </CForm>
+ )
+}
diff --git a/packages/docs/content/forms/layout/index.mdx b/packages/docs/content/forms/layout/index.mdx
new file mode 100644
index 00000000..a05587b8
--- /dev/null
+++ b/packages/docs/content/forms/layout/index.mdx
@@ -0,0 +1,139 @@
+---
+title: React Form Layout
+name: Layout
+description: Give your forms some structure—from inline to horizontal to custom grid implementations—with our form layout options.
+menu: Forms
+route: /forms/layout/
+---
+
+import {
+ CButton,
+ CDropdown,
+ CDropdownDivider,
+ CDropdownHeader,
+ CDropdownItem,
+ CDropdownItemPlain,
+ CDropdownMenu,
+ CDropdownToggle,
+ CForm,
+ CFormCheck,
+ CFormInput,
+ CFormLabel,
+ CFormSelect,
+ CInputGroup,
+ CInputGroupText,
+ CCol,
+ CRow
+} from '@coreui/react/src/index'
+
+## Forms
+
+Every group of form fields should reside in a `<CForm>` element. CoreUI provides no default styling for the `<CForm>` element, but there are some powerful browser features that are provided by default.
+
+- New to browser forms? Consider reviewing [the MDN form docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) for an overview and complete list of available attributes.
+- `<CButton>`s within a `<CForm>` default to `type="submit"`, so strive to be specific and always include a `type`.
+- You can disable every form element within a form with the `disabled` attribute on the `<CForm>`.
+
+Since CoreUI applies `display: block` and `width: 100%` to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.
+
+## Utilities
+
+[Margin utilities](https://coreui.io/docs/utilities/spacing/) are the easiest way to add some structure to forms. They provide basic grouping of labels, controls, optional form text, and form validation messaging. We recommend sticking to `margin-bottom` utilities, and using a single direction throughout the form for consistency.
+
+## Form grid
+
+More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.
+
+import { LayoutFormGridExample } from './examples/LayoutFormGridExample.tsx'
+import LayoutFormGridExampleTS from '!!raw-loader!./examples/LayoutFormGridExample.tsx'
+
+<ExampleSnippet code={LayoutFormGridExampleTS} componentName="React Form Layout">
+ <LayoutFormGridExample />
+</ExampleSnippet>
+
+
+## Gutters
+
+By adding [gutter modifier classes](https://coreui.io/docs/layout/gutters/), you can have control over the gutter width in as well the inline as block direction.
+
+import { LayoutGuttersExample } from './examples/LayoutGuttersExample.tsx'
+import LayoutGuttersExampleTS from '!!raw-loader!./examples/LayoutGuttersExample.tsx'
+
+<ExampleSnippet code={LayoutGuttersExampleTS} componentName="React Form Layout">
+ <LayoutGuttersExample />
+</ExampleSnippet>
+
+More complex layouts can also be created with the grid system.
+
+import { LayoutGutters2Example } from './examples/LayoutGutters2Example.tsx'
+import LayoutGutters2ExampleTS from '!!raw-loader!./examples/LayoutGutters2Example.tsx'
+
+<ExampleSnippet code={LayoutGutters2ExampleTS} componentName="React Form Layout">
+ <LayoutGutters2Example />
+</ExampleSnippet>
+
+## Horizontal form
+
+Create horizontal forms with the grid by adding the `.row` class to form groups and using the `.col-*-*` classes to specify the width of your labels and controls. Be sure to add `.col-form-label` to your `<CFormLabel>`s as well so they're vertically centered with their associated form controls.
+
+At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we've removed the `padding-top` on our stacked radio inputs label to better align the text baseline.
+
+import { LayoutHorizontalFormExample } from './examples/LayoutHorizontalFormExample.tsx'
+import LayoutHorizontalFormExampleTS from '!!raw-loader!./examples/LayoutHorizontalFormExample.tsx'
+
+<ExampleSnippet code={LayoutHorizontalFormExampleTS} componentName="React Form Layout">
+ <LayoutHorizontalFormExample />
+</ExampleSnippet>
+
+### Horizontal form label sizing
+
+Be sure to use `.col-form-label-sm` or `.col-form-label-lg` to your `<CFormLabel>`s or `<legend>`s to correctly follow the size of `.form-control-lg` and `.form-control-sm`.
+
+import { LayoutHorizontalFormLabelSizingExample } from './examples/LayoutHorizontalFormLabelSizingExample.tsx'
+import LayoutHorizontalFormLabelSizingExampleTS from '!!raw-loader!./examples/LayoutHorizontalFormLabelSizingExample.tsx'
+
+<ExampleSnippet code={LayoutHorizontalFormLabelSizingExampleTS} componentName="React Form Layout">
+ <LayoutHorizontalFormLabelSizingExample />
+</ExampleSnippet>
+
+## Column sizing
+
+As shown in the previous examples, our grid system allows you to place any number of `<CCol>`s within a `<CRow>`. They'll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining `<CCol>`s equally split the rest, with specific column classes like `<CCol sm={7} >`.
+
+import { LayoutColumnSizingExample } from './examples/LayoutColumnSizingExample.tsx'
+import LayoutColumnSizingExampleTS from '!!raw-loader!./examples/LayoutColumnSizingExample.tsx'
+
+<ExampleSnippet code={LayoutColumnSizingExampleTS} componentName="React Form Layout">
+ <LayoutColumnSizingExample />
+</ExampleSnippet>
+
+## Auto-sizing
+
+The example below uses a flexbox utility to vertically center the contents and changes `<CCol>` to `<CCol xs="auto">` so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents.
+
+import { LayoutAutoSizingExample } from './examples/LayoutAutoSizingExample.tsx'
+import LayoutAutoSizingExampleTS from '!!raw-loader!./examples/LayoutAutoSizingExample.tsx'
+
+<ExampleSnippet code={LayoutAutoSizingExampleTS} componentName="React Form Layout">
+ <LayoutAutoSizingExample />
+</ExampleSnippet>
+
+You can then remix that once again with size-specific column classes.
+
+import { LayoutAutoSizing2Example } from './examples/LayoutAutoSizing2Example.tsx'
+import LayoutAutoSizing2ExampleTS from '!!raw-loader!./examples/LayoutAutoSizing2Example.tsx'
+
+<ExampleSnippet code={LayoutAutoSizing2ExampleTS} componentName="React Form Layout">
+ <LayoutAutoSizing2Example />
+</ExampleSnippet>
+
+## Inline forms
+
+Use the `<CCol xs="auto">` class to create horizontal layouts. By adding [gutter modifier classes](https://coreui.io/docs/layout/gutters/), we will have gutters in horizontal and vertical directions. The `.align-items-center` aligns the form elements to the middle, making the `<CFormCheck>` align properly.
+
+import { LayoutInlineFormsExample } from './examples/LayoutInlineFormsExample.tsx'
+import LayoutInlineFormsExampleTS from '!!raw-loader!./examples/LayoutInlineFormsExample.tsx'
+
+<ExampleSnippet code={LayoutInlineFormsExampleTS} componentName="React Form Layout">
+ <LayoutInlineFormsExample />
+</ExampleSnippet>
diff --git a/packages/docs/content/forms/radio.mdx b/packages/docs/content/forms/radio.mdx
deleted file mode 100644
index ee4d3ba0..00000000
--- a/packages/docs/content/forms/radio.mdx
+++ /dev/null
@@ -1,103 +0,0 @@
----
-title: React Radio Components
-name: Radio
-description: Create consistent cross-browser and cross-device radios with our React radio component.
-menu: Forms
-route: /forms/radio
-other_frameworks: radio
----
-
-import { useEffect, useRef } from 'react'
-import {
- CButton,
- CFormCheck,
-} from '@coreui/react/src/index'
-
-## Approach
-
-Browser default radios are replaced with the help of `<CFormCheck radio>`. Radios are for selecting one option from many.
-
-## Radios
-
-Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input's state.
-
-```jsx preview
-<CFormCheck type="radio" name="flexRadioDefault" id="flexRadioDefault1" label="Default radio"/>
-<CFormCheck type="radio" name="flexRadioDefault" id="flexRadioDefault2" label="Checked radio" defaultChecked/>
-```
-
-### Disabled
-
-```jsx preview
-<CFormCheck type="radio" name="flexRadioDisabled" id="flexRadioDisabled" label="Disabled radio" disabled/>
-<CFormCheck type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" label="Disabled checked radio" defaultChecked disabled/>
-```
-
-## Default (stacked)
-
-By default, any number of radios that are immediate sibling will be vertically stacked and appropriately spaced.
-
-```jsx preview
-<CFormCheck type="radio" name="exampleRadios" id="exampleRadios1" value="option1" label="Default radio" defaultChecked/>
-<CFormCheck type="radio" name="exampleRadios" id="exampleRadios2" value="option2" label="Second default radio"/>
-<CFormCheck type="radio" name="exampleRadios" id="exampleRadios3" value="option3" label="Disabled radio" disabled/>
-```
-
-## Inline
-
-Group radios on the same horizontal row by adding `inline` boolean property to any `<CFormCheck radio>`.
-
-```jsx preview
-<CFormCheck inline type="radio" name="inlineRadioOptions" id="inlineCheckbox1" value="option1" label="1"/>
-<CFormCheck inline type="radio" name="inlineRadioOptions" id="inlineCheckbox2" value="option2" label="2"/>
-<CFormCheck inline type="radio" name="inlineRadioOptions" id="inlineCheckbox3" value="option3" label="3 (disabled)" disabled/>
-```
-
-## Reverse
-
-Put your radios on the opposite side by adding `reverse` boolean property.
-
-```jsx preview
-<CFormCheck reverse type="radio" id="reverseOption1" value="option1" label="Reverse radio"/>
-<CFormCheck reverse type="radio" id="reverseOption2" value="option2" label="Disabled reverse radio" disabled/>
-```
-
-## Without labels
-
-Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-label`).
-
-```jsx preview
-<CFormCheck type="radio" name="radioNoLabel" id="radioNoLabel" value="" aria-label="..."/>
-```
-
-## Radio toggle buttons
-
-Create button-like radio buttons by using `button` boolean property on the `<CFormCheck radio>` component. These toggle buttons can further be grouped in a button group if needed.
-
-```jsx preview
-<CFormCheck button={{ color: 'secondary' }} type="radio" name="options" id="option1" autoComplete="off" label="Checked" defaultChecked/>
-<CFormCheck button={{ color: 'secondary' }} type="radio" name="options" id="option2" autoComplete="off" label="Radio"/>
-<CFormCheck button={{ color: 'secondary' }} type="radio" name="options" id="option3" autoComplete="off" label="Radio" disabled/>
-<CFormCheck button={{ color: 'secondary' }} type="radio" name="options" id="option4" autoComplete="off" label="Radio"/>
-```
-
-### Outlined styles
-
-Different variants of button, such at the various outlined styles, are supported.
-
-```jsx preview
-<CFormCheck button={{ color: 'success', variant: 'outline' }} type="radio" name="options-outlined" id="success-outlined" autoComplete="off" label="Radio" defaultChecked/>
-<CFormCheck button={{ color: 'danger', variant: 'outline' }} type="radio" name="options-outlined" id="danger-outlined" autoComplete="off" label="Radio"/>
-```
-
-## Customizing
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="form-check-variables" />
-
-## API
-
-### CFormCheck
-
-`markdown:CFormCheck.api.mdx`
diff --git a/packages/docs/content/forms/radio/api.mdx b/packages/docs/content/forms/radio/api.mdx
new file mode 100644
index 00000000..62bf3a61
--- /dev/null
+++ b/packages/docs/content/forms/radio/api.mdx
@@ -0,0 +1,12 @@
+---
+title: React Form Radio Component API
+name: Form Radio API
+description: Explore the API reference for the React Form Radio component and discover how to effectively utilize its props for customization.
+route: /forms/radio/
+---
+
+import CFormCheckAPI from '../../api/CFormCheck.api.mdx'
+
+## CFormCheck
+
+<CFormCheckAPI />
\ No newline at end of file
diff --git a/packages/docs/content/forms/radio/examples/RadioDisabledExample.tsx b/packages/docs/content/forms/radio/examples/RadioDisabledExample.tsx
new file mode 100644
index 00000000..3a662127
--- /dev/null
+++ b/packages/docs/content/forms/radio/examples/RadioDisabledExample.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import { CFormCheck } from '@coreui/react'
+
+export const RadioDisabledExample = () => {
+ return (
+ <>
+ <CFormCheck
+ type="radio"
+ name="flexRadioDisabled"
+ id="flexRadioDisabled"
+ label="Disabled radio"
+ disabled
+ />
+ <CFormCheck
+ type="radio"
+ name="flexRadioDisabled"
+ id="flexRadioCheckedDisabled"
+ label="Disabled checked radio"
+ defaultChecked
+ disabled
+ />
+ </>
+ )
+}
diff --git a/packages/docs/content/forms/radio/examples/RadioExample.tsx b/packages/docs/content/forms/radio/examples/RadioExample.tsx
new file mode 100644
index 00000000..293b329d
--- /dev/null
+++ b/packages/docs/content/forms/radio/examples/RadioExample.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { CFormCheck } from '@coreui/react'
+
+export const RadioExample = () => {
+ return (
+ <>
+ <CFormCheck
+ type="radio"
+ name="flexRadioDefault"
+ id="flexRadioDefault1"
+ label="Default radio"
+ />
+ <CFormCheck
+ type="radio"
+ name="flexRadioDefault"
+ id="flexRadioDefault2"
+ label="Checked radio"
+ defaultChecked
+ />
+ </>
+ )
+}
diff --git a/packages/docs/content/forms/radio/examples/RadioInlineExample.tsx b/packages/docs/content/forms/radio/examples/RadioInlineExample.tsx
new file mode 100644
index 00000000..30524b10
--- /dev/null
+++ b/packages/docs/content/forms/radio/examples/RadioInlineExample.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import { CFormCheck } from '@coreui/react'
+
+export const RadioInlineExample = () => {
+ return (
+ <>
+ <CFormCheck
+ inline
+ type="radio"
+ name="inlineRadioOptions"
+ id="inlineCheckbox1"
+ value="option1"
+ label="1"
+ />
+ <CFormCheck
+ inline
+ type="radio"
+ name="inlineRadioOptions"
+ id="inlineCheckbox2"
+ value="option2"
+ label="2"
+ />
+ <CFormCheck
+ inline
+ type="radio"
+ name="inlineRadioOptions"
+ id="inlineCheckbox3"
+ value="option3"
+ label="3 (disabled)"
+ disabled
+ />
+ </>
+ )
+}
diff --git a/packages/docs/content/forms/radio/examples/RadioReverseExample.tsx b/packages/docs/content/forms/radio/examples/RadioReverseExample.tsx
new file mode 100644
index 00000000..330b626c
--- /dev/null
+++ b/packages/docs/content/forms/radio/examples/RadioReverseExample.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { CFormCheck } from '@coreui/react'
+
+export const RadioReverseExample = () => {
+ return (
+ <>
+ <CFormCheck reverse type="radio" id="reverseOption1" value="option1" label="Reverse radio" />
+ <CFormCheck
+ reverse
+ type="radio"
+ id="reverseOption2"
+ value="option2"
+ label="Disabled reverse radio"
+ disabled
+ />
+ </>
+ )
+}
diff --git a/packages/docs/content/forms/radio/examples/RadioStackedExample.tsx b/packages/docs/content/forms/radio/examples/RadioStackedExample.tsx
new file mode 100644
index 00000000..42a5aba2
--- /dev/null
+++ b/packages/docs/content/forms/radio/examples/RadioStackedExample.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import { CFormCheck } from '@coreui/react'
+
+export const RadioStackedExample = () => {
+ return (
+ <>
+ <CFormCheck
+ type="radio"
+ name="exampleRadios"
+ id="exampleRadios1"
+ value="option1"
+ label="Default radio"
+ defaultChecked
+ />
+ <CFormCheck
+ type="radio"
+ name="exampleRadios"
+ id="exampleRadios2"
+ value="option2"
+ label="Second default radio"
+ />
+ <CFormCheck
+ type="radio"
+ name="exampleRadios"
+ id="exampleRadios3"
+ value="option3"
+ label="Disabled radio"
+ disabled
+ />
+ </>
+ )
+}
diff --git a/packages/docs/content/forms/radio/examples/RadioToggleButtonsExample.tsx b/packages/docs/content/forms/radio/examples/RadioToggleButtonsExample.tsx
new file mode 100644
index 00000000..a96c0eec
--- /dev/null
+++ b/packages/docs/content/forms/radio/examples/RadioToggleButtonsExample.tsx
@@ -0,0 +1,43 @@
+import React from 'react'
+import { CFormCheck } from '@coreui/react'
+
+export const RadioToggleButtonsExample = () => {
+ return (
+ <>
+ <CFormCheck
+ button={{ color: 'secondary' }}
+ type="radio"
+ name="options"
+ id="option1"
+ autoComplete="off"
+ label="Checked"
+ defaultChecked
+ />
+ <CFormCheck
+ button={{ color: 'secondary' }}
+ type="radio"
+ name="options"
+ id="option2"
+ autoComplete="off"
+ label="Radio"
+ />
+ <CFormCheck
+ button={{ color: 'secondary' }}
+ type="radio"
+ name="options"
+ id="option3"
+ autoComplete="off"
+ label="Radio"
+ disabled
+ />
+ <CFormCheck
+ button={{ color: 'secondary' }}
+ type="radio"
+ name="options"
+ id="option4"
+ autoComplete="off"
+ label="Radio"
+ />
+ </>
+ )
+}
diff --git a/packages/docs/content/forms/radio/examples/RadioToggleButtonsOutlinedStylesExample.tsx b/packages/docs/content/forms/radio/examples/RadioToggleButtonsOutlinedStylesExample.tsx
new file mode 100644
index 00000000..5b14b855
--- /dev/null
+++ b/packages/docs/content/forms/radio/examples/RadioToggleButtonsOutlinedStylesExample.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import { CFormCheck } from '@coreui/react'
+
+export const RadioToggleButtonsOutlinedStylesExample = () => {
+ return (
+ <>
+ <CFormCheck
+ button={{ color: 'success', variant: 'outline' }}
+ type="radio"
+ name="options-outlined"
+ id="success-outlined"
+ autoComplete="off"
+ label="Radio"
+ defaultChecked
+ />
+ <CFormCheck
+ button={{ color: 'danger', variant: 'outline' }}
+ type="radio"
+ name="options-outlined"
+ id="danger-outlined"
+ autoComplete="off"
+ label="Radio"
+ />
+ </>
+ )
+}
diff --git a/packages/docs/content/forms/radio/examples/RadioWithoutLabelsExample.tsx b/packages/docs/content/forms/radio/examples/RadioWithoutLabelsExample.tsx
new file mode 100644
index 00000000..6621550e
--- /dev/null
+++ b/packages/docs/content/forms/radio/examples/RadioWithoutLabelsExample.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import { CFormCheck } from '@coreui/react'
+
+export const RadioWithoutLabelsExample = () => {
+ return <CFormCheck type="radio" name="radioNoLabel" id="radioNoLabel" value="" aria-label="..." />
+}
diff --git a/packages/docs/content/forms/radio/index.mdx b/packages/docs/content/forms/radio/index.mdx
new file mode 100644
index 00000000..6c86d45b
--- /dev/null
+++ b/packages/docs/content/forms/radio/index.mdx
@@ -0,0 +1,105 @@
+---
+title: React Radio Components
+name: Radio
+description: Create consistent cross-browser and cross-device radios with our React radio component.
+menu: Forms
+route: /forms/radio
+other_frameworks: radio
+---
+
+## Approach
+
+Browser default radios are replaced with the help of `<CFormCheck type="radio">`. Radios are for selecting one option from many.
+
+## Radios
+
+import { RadioExample } from './examples/RadioExample.tsx'
+import RadioExampleTS from '!!raw-loader!./examples/RadioExample.tsx'
+
+<ExampleSnippet code={RadioExampleTS} componentName="React Form Radio">
+ <RadioExample />
+</ExampleSnippet>
+
+### Disabled
+
+Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input's state.
+
+import { RadioDisabledExample } from './examples/RadioDisabledExample.tsx'
+import RadioDisabledExampleTS from '!!raw-loader!./examples/RadioDisabledExample.tsx'
+
+<ExampleSnippet code={RadioDisabledExampleTS} componentName="React Form Radio">
+ <RadioDisabledExample />
+</ExampleSnippet>
+
+## Default (stacked)
+
+By default, any number of radios that are immediate sibling will be vertically stacked and appropriately spaced.
+
+import { RadioStackedExample } from './examples/RadioStackedExample.tsx'
+import RadioStackedExampleTS from '!!raw-loader!./examples/RadioStackedExample.tsx'
+
+<ExampleSnippet code={RadioStackedExampleTS} componentName="React Form Radio">
+ <RadioStackedExample />
+</ExampleSnippet>
+
+
+## Inline
+
+Group radios on the same horizontal row by adding `inline` boolean property to any `<CFormCheck radio>`.
+
+import { RadioInlineExample } from './examples/RadioInlineExample.tsx'
+import RadioInlineExampleTS from '!!raw-loader!./examples/RadioInlineExample.tsx'
+
+<ExampleSnippet code={RadioInlineExampleTS} componentName="React Form Radio">
+ <RadioInlineExample />
+</ExampleSnippet>
+
+## Reverse
+
+Put your radios on the opposite side by adding `reverse` boolean property.
+
+import { RadioReverseExample } from './examples/RadioReverseExample.tsx'
+import RadioReverseExampleTS from '!!raw-loader!./examples/RadioReverseExample.tsx'
+
+<ExampleSnippet code={RadioReverseExampleTS} componentName="React Form Radio">
+ <RadioReverseExample />
+</ExampleSnippet>
+
+## Without labels
+
+Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-label`).
+
+import { RadioWithoutLabelsExample } from './examples/RadioWithoutLabelsExample.tsx'
+import RadioWithoutLabelsExampleTS from '!!raw-loader!./examples/RadioWithoutLabelsExample.tsx'
+
+<ExampleSnippet code={RadioWithoutLabelsExampleTS} componentName="React Form Radio">
+ <RadioWithoutLabelsExample />
+</ExampleSnippet>
+
+## Radio toggle buttons
+
+Create button-like radio buttons by using `button` boolean property on the `<CFormCheck radio>` component. These toggle buttons can further be grouped in a button group if needed.
+
+import { RadioToggleButtonsExample } from './examples/RadioToggleButtonsExample.tsx'
+import RadioToggleButtonsExampleTS from '!!raw-loader!./examples/RadioToggleButtonsExample.tsx'
+
+<ExampleSnippet code={RadioToggleButtonsExampleTS} componentName="React Form Radio">
+ <RadioToggleButtonsExample />
+</ExampleSnippet>
+
+### Outlined styles
+
+Different variants of button, such at the various outlined styles, are supported.
+
+import { RadioToggleButtonsOutlinedStylesExample } from './examples/RadioToggleButtonsOutlinedStylesExample.tsx'
+import RadioToggleButtonsOutlinedStylesExampleTS from '!!raw-loader!./examples/RadioToggleButtonsOutlinedStylesExample.tsx'
+
+<ExampleSnippet code={RadioToggleButtonsOutlinedStylesExampleTS} componentName="React Form Radio">
+ <RadioToggleButtonsOutlinedStylesExample />
+</ExampleSnippet>
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [<CFormCheck />](./api/#cformcheck)
diff --git a/packages/docs/content/forms/radio/styling.mdx b/packages/docs/content/forms/radio/styling.mdx
new file mode 100644
index 00000000..9b1d8e82
--- /dev/null
+++ b/packages/docs/content/forms/radio/styling.mdx
@@ -0,0 +1,16 @@
+---
+title: React Radio Component Styling
+name: Radio Styling
+description: Learn how to customize the React Radio component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /forms/radio/
+---
+
+### CSS class names
+
+React Radio component comes with built-in class names that make styling super simple. Here’s a quick rundown of what you can use:
+
+<ClassNamesDocs files={['components/form/CFormCheck.tsx']} />
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="form-check-variables" />
diff --git a/packages/docs/content/forms/range.mdx b/packages/docs/content/forms/range.mdx
deleted file mode 100644
index e5370095..00000000
--- a/packages/docs/content/forms/range.mdx
+++ /dev/null
@@ -1,54 +0,0 @@
----
-title: React Range Component
-name: Range
-description: React range component. Use our custom range inputs for consistent cross-browser styling and built-in customization.
-menu: Forms
-route: /forms/range
-other_frameworks: range
----
-
-import { CForm, CFormLabel, CFormRange } from '@coreui/react/src/index'
-
-## Overview
-
-Create custom `<input type="range">` controls with `<CFormRange>`. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Edge Legacy and Firefox supports "filling" their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.
-
-```jsx preview
-<CFormRange id="customRange1" label="Example range" />
-```
-
-## Disabled
-
-Add the `disabled` boolean attribute on an input to give it a grayed out appearance and remove pointer events.
-
-```jsx preview
-<CFormRange id="disabledRange" label="Disabled range" disabled />
-```
-
-## Min and max
-
-Range inputs have implicit values for `min` and `max`—`0` and `100`, respectively. You may specify new values for those using the `min` and `max` attributes.
-
-```jsx preview
-<CFormRange min={0} max={5} label="Example range" defaultValue="3" id="customRange2" />
-```
-
-## Steps
-
-By default, range inputs "snap" to integer values. To change this, you can specify a `step` value. In the example below, we double the number of steps by using `step={0.5}`.
-
-```jsx preview
-<CFormRange min={0} max={5} step={0.5} label="Example range" defaultValue="3" id="customRange3" />
-```
-
-## Customizing
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="form-range-variables" />
-
-## API
-
-### CFormRange
-
-`markdown:CFormRange.api.mdx`
diff --git a/packages/docs/content/forms/range/api.mdx b/packages/docs/content/forms/range/api.mdx
new file mode 100644
index 00000000..522a6c51
--- /dev/null
+++ b/packages/docs/content/forms/range/api.mdx
@@ -0,0 +1,12 @@
+---
+title: React Form Range Component API
+name: Form Range API
+description: Explore the API reference for the React Form Range component and discover how to effectively utilize its props for customization.
+route: /forms/range/
+---
+
+import CFormRangeAPI from '../../api/CFormRange.api.mdx'
+
+## CFormRange
+
+<CFormRangeAPI />
diff --git a/packages/docs/content/forms/range/examples/FormRangeDisabledExample.tsx b/packages/docs/content/forms/range/examples/FormRangeDisabledExample.tsx
new file mode 100644
index 00000000..60e0fed4
--- /dev/null
+++ b/packages/docs/content/forms/range/examples/FormRangeDisabledExample.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import { CFormRange } from '@coreui/react'
+
+export const FormRangeDisabledExample = () => {
+ return <CFormRange id="disabledRange" label="Disabled range" disabled />
+}
diff --git a/packages/docs/content/forms/range/examples/FormRangeExample.tsx b/packages/docs/content/forms/range/examples/FormRangeExample.tsx
new file mode 100644
index 00000000..5e5ccf6b
--- /dev/null
+++ b/packages/docs/content/forms/range/examples/FormRangeExample.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import { CFormRange } from '@coreui/react'
+
+export const FormRangeExample = () => {
+ return <CFormRange id="customRange1" label="Example range" />
+}
diff --git a/packages/docs/content/forms/range/examples/FormRangeMinAndMaxExample.tsx b/packages/docs/content/forms/range/examples/FormRangeMinAndMaxExample.tsx
new file mode 100644
index 00000000..d31ad1b7
--- /dev/null
+++ b/packages/docs/content/forms/range/examples/FormRangeMinAndMaxExample.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import { CFormRange } from '@coreui/react'
+
+export const FormRangeMinAndMaxExample = () => {
+ return <CFormRange min={0} max={5} label="Example range" defaultValue="3" />
+}
diff --git a/packages/docs/content/forms/range/examples/FormRangeStepsExample.tsx b/packages/docs/content/forms/range/examples/FormRangeStepsExample.tsx
new file mode 100644
index 00000000..c91a5e21
--- /dev/null
+++ b/packages/docs/content/forms/range/examples/FormRangeStepsExample.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import { CFormRange } from '@coreui/react'
+
+export const FormRangeStepsExample = () => {
+ return <CFormRange min={0} max={5} step={0.5} label="Example range" defaultValue="3" />
+}
diff --git a/packages/docs/content/forms/range/index.mdx b/packages/docs/content/forms/range/index.mdx
new file mode 100644
index 00000000..36b4880a
--- /dev/null
+++ b/packages/docs/content/forms/range/index.mdx
@@ -0,0 +1,59 @@
+---
+title: React Range Component
+name: Range
+description: React range component. Use our custom range inputs for consistent cross-browser styling and built-in customization.
+route: /forms/range/
+other_frameworks: range
+---
+
+import { CForm, CFormLabel, CFormRange } from '@coreui/react/src/index'
+
+## Overview
+
+Create custom `<input type="range">` controls with `<CFormRange>`. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Edge Legacy and Firefox supports "filling" their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.
+
+import { FormRangeExample } from './examples/FormRangeExample.tsx'
+import FormRangeExampleTS from '!!raw-loader!./examples/FormRangeExample.tsx'
+
+<ExampleSnippet code={FormRangeExampleTS} componentName="React Form Range">
+ <FormRangeExample />
+</ExampleSnippet>
+
+## Disabled
+
+Add the `disabled` boolean attribute on an input to give it a grayed out appearance and remove pointer events.
+
+import { FormRangeDisabledExample } from './examples/FormRangeDisabledExample.tsx'
+import FormRangeDisabledExampleTS from '!!raw-loader!./examples/FormRangeDisabledExample.tsx'
+
+<ExampleSnippet code={FormRangeDisabledExampleTS} componentName="React Form Range">
+ <FormRangeDisabledExample />
+</ExampleSnippet>
+
+## Min and max
+
+Range inputs have implicit values for `min` and `max`—`0` and `100`, respectively. You may specify new values for those using the `min` and `max` attributes.
+
+import { FormRangeMinAndMaxExample } from './examples/FormRangeMinAndMaxExample.tsx'
+import FormRangeMinAndMaxExampleTS from '!!raw-loader!./examples/FormRangeMinAndMaxExample.tsx'
+
+<ExampleSnippet code={FormRangeMinAndMaxExampleTS} componentName="React Form Range">
+ <FormRangeMinAndMaxExample />
+</ExampleSnippet>
+
+## Steps
+
+By default, range inputs "snap" to integer values. To change this, you can specify a `step` value. In the example below, we double the number of steps by using `step={0.5}`.
+
+import { FormRangeStepsExample } from './examples/FormRangeStepsExample.tsx'
+import FormRangeStepsExampleTS from '!!raw-loader!./examples/FormRangeStepsExample.tsx'
+
+<ExampleSnippet code={FormRangeStepsExampleTS} componentName="React Form Range">
+ <FormRangeStepsExample />
+</ExampleSnippet>
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [<CFormRange />](./api/#cformrange)
diff --git a/packages/docs/content/forms/range/styling.mdx b/packages/docs/content/forms/range/styling.mdx
new file mode 100644
index 00000000..0abd74be
--- /dev/null
+++ b/packages/docs/content/forms/range/styling.mdx
@@ -0,0 +1,16 @@
+---
+title: React Range Component Styling
+name: Range Styling
+description: Learn how to customize the React Range component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /forms/range/
+---
+
+### CSS class names
+
+React Range component comes with built-in class names that make styling super simple. Here’s a quick rundown of what you can use:
+
+<ClassNamesDocs files={['components/form/CFormRange.tsx', 'components/form/CFormLabel.tsx']} />
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="form-range-variables" />
diff --git a/packages/docs/content/forms/select.mdx b/packages/docs/content/forms/select.mdx
deleted file mode 100644
index 40613cc8..00000000
--- a/packages/docs/content/forms/select.mdx
+++ /dev/null
@@ -1,109 +0,0 @@
----
-title: React Select Component
-name: Select
-description: React select component. Customize the native `<select>`s with custom CSS that changes the element's initial appearance.
-menu: Forms
-route: /forms/select
-other_frameworks: select
----
-
-import {
- CButton,
- CForm,
- CFormCheck,
- CFormLabel,
- CFormSelect,
- CFormText,
- CCol,
- CRow,
-} from '@coreui/react/src/index'
-
-## Default
-
-```jsx preview
-<CFormSelect
- aria-label="Default select example"
- options={[
- 'Open this select menu',
- { label: 'One', value: '1' },
- { label: 'Two', value: '2' },
- { label: 'Three', value: '3', disabled: true }
- ]}
-/>
-```
-You can also add options manually
-
-```jsx
-<CFormSelect aria-label="Default select example">
- <option>Open this select menu</option>
- <option value="1">One</option>
- <option value="2">Two</option>
- <option value="3" disabled>Three</option>
-</CFormSelect>
-```
-
-## Sizing
-
-You may also choose from small and large custom selects to match our similarly sized text inputs.
-
-```jsx preview
-<CFormSelect size="lg" className="mb-3" aria-label="Large select example">
- <option>Open this select menu</option>
- <option value="1">One</option>
- <option value="2">Two</option>
- <option value="3">Three</option>
-</CFormSelect>
-<CFormSelect size="sm" className="mb-3" aria-label="Small select example">
- <option>Open this select menu</option>
- <option value="1">One</option>
- <option value="2">Two</option>
- <option value="3">Three</option>
-</CFormSelect>
-```
-
-The `multiple` attribute is also supported:
-
-```jsx preview
-<CFormSelect size="lg" multiple aria-label="Multiple select example">
- <option>Open this select menu</option>
- <option value="1">One</option>
- <option value="2">Two</option>
- <option value="3">Three</option>
-</CFormSelect>
-```
-
-As is the `htmlSize` property:
-
-```jsx preview
-<CFormSelect htmlSize={3} multiple aria-label="size 3 select example">
- <option>Open this select menu</option>
- <option value="1">One</option>
- <option value="2">Two</option>
- <option value="3">Three</option>
-</CFormSelect>
-```
-
-## Disabled
-
-Add the `disabled` boolean attribute on a select to give it a grayed out appearance and remove pointer events.
-
-```jsx preview
-<CFormSelect aria-label="Disabled select example" disabled>
- <option>Open this select menu</option>
- <option value="1">One</option>
- <option value="2">Two</option>
- <option value="3">Three</option>
-</CFormSelect>
-```
-
-## Customizing
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="form-select-variables" />
-
-## API
-
-### CFormSelect
-
-`markdown:CFormSelect.api.mdx`
diff --git a/packages/docs/content/forms/select/api.mdx b/packages/docs/content/forms/select/api.mdx
new file mode 100644
index 00000000..ef612feb
--- /dev/null
+++ b/packages/docs/content/forms/select/api.mdx
@@ -0,0 +1,27 @@
+---
+title: React Form Select Component API
+name: Form Select API
+description: Explore the API reference for the React Form Select component and discover how to effectively utilize its props for customization.
+route: /forms/select/
+---
+
+import CFormSelectAPI from '../../api/CFormSelect.api.mdx'
+import CFormFeedbackAPI from '../../api/CFormFeedback.api.mdx'
+import CFormLabelAPI from '../../api/CFormLabel.api.mdx'
+import CFormTextAPI from '../../api/CFormText.api.mdx'
+
+## CFormSelect
+
+<CFormSelectAPI />
+
+## CFormFeedback
+
+<CFormFeedbackAPI />
+
+## CFormLabel
+
+<CFormLabelAPI />
+
+## CFormText
+
+<CFormTextAPI />
diff --git a/packages/docs/content/forms/select/examples/FormSelectDisabledExample.tsx b/packages/docs/content/forms/select/examples/FormSelectDisabledExample.tsx
new file mode 100644
index 00000000..c1596b4b
--- /dev/null
+++ b/packages/docs/content/forms/select/examples/FormSelectDisabledExample.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { CFormSelect } from '@coreui/react'
+
+export const FormSelectDisabledExample = () => {
+ return (
+ <CFormSelect
+ aria-label="Default select example"
+ options={[
+ 'Open this select menu',
+ { label: 'One', value: '1' },
+ { label: 'Two', value: '2' },
+ { label: 'Three', value: '3', disabled: true },
+ ]}
+ />
+ )
+}
diff --git a/packages/docs/content/forms/select/examples/FormSelectExample.tsx b/packages/docs/content/forms/select/examples/FormSelectExample.tsx
new file mode 100644
index 00000000..105be25e
--- /dev/null
+++ b/packages/docs/content/forms/select/examples/FormSelectExample.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { CFormSelect } from '@coreui/react'
+
+export const FormSelectExample = () => {
+ return (
+ <CFormSelect
+ aria-label="Default select example"
+ options={[
+ 'Open this select menu',
+ { label: 'One', value: '1' },
+ { label: 'Two', value: '2' },
+ { label: 'Three', value: '3', disabled: true },
+ ]}
+ />
+ )
+}
diff --git a/packages/docs/content/forms/select/examples/FormSelectSizing2Example.tsx b/packages/docs/content/forms/select/examples/FormSelectSizing2Example.tsx
new file mode 100644
index 00000000..cb273285
--- /dev/null
+++ b/packages/docs/content/forms/select/examples/FormSelectSizing2Example.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { CFormSelect } from '@coreui/react'
+
+export const FormSelectSizing2Example = () => {
+ return (
+ <CFormSelect size="lg" multiple aria-label="Multiple select example">
+ <option>Open this select menu</option>
+ <option value="1">One</option>
+ <option value="2">Two</option>
+ <option value="3">Three</option>
+ </CFormSelect>
+ )
+}
diff --git a/packages/docs/content/forms/select/examples/FormSelectSizing3Example.tsx b/packages/docs/content/forms/select/examples/FormSelectSizing3Example.tsx
new file mode 100644
index 00000000..68038524
--- /dev/null
+++ b/packages/docs/content/forms/select/examples/FormSelectSizing3Example.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { CFormSelect } from '@coreui/react'
+
+export const FormSelectSizing3Example = () => {
+ return (
+ <CFormSelect htmlSize={3} multiple aria-label="size 3 select example">
+ <option>Open this select menu</option>
+ <option value="1">One</option>
+ <option value="2">Two</option>
+ <option value="3">Three</option>
+ </CFormSelect>
+ )
+}
diff --git a/packages/docs/content/forms/select/examples/FormSelectSizingExample.tsx b/packages/docs/content/forms/select/examples/FormSelectSizingExample.tsx
new file mode 100644
index 00000000..95bce395
--- /dev/null
+++ b/packages/docs/content/forms/select/examples/FormSelectSizingExample.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { CFormSelect } from '@coreui/react'
+
+export const FormSelectSizingExample = () => {
+ return (
+ <>
+ <CFormSelect size="lg" className="mb-3" aria-label="Large select example">
+ <option>Open this select menu</option>
+ <option value="1">One</option>
+ <option value="2">Two</option>
+ <option value="3">Three</option>
+ </CFormSelect>
+ <CFormSelect size="sm" className="mb-3" aria-label="Small select example">
+ <option>Open this select menu</option>
+ <option value="1">One</option>
+ <option value="2">Two</option>
+ <option value="3">Three</option>
+ </CFormSelect>
+ </>
+ )
+}
diff --git a/packages/docs/content/forms/select/index.mdx b/packages/docs/content/forms/select/index.mdx
new file mode 100644
index 00000000..6302c15b
--- /dev/null
+++ b/packages/docs/content/forms/select/index.mdx
@@ -0,0 +1,100 @@
+---
+title: React Select Component
+name: Select
+description: React select component. Customize the native `<select>`s with custom CSS that changes the element's initial appearance.
+menu: Forms
+route: /forms/select
+other_frameworks: select
+---
+
+import {
+ CButton,
+ CForm,
+ CFormCheck,
+ CFormLabel,
+ CFormSelect,
+ CFormText,
+ CCol,
+ CRow,
+} from '@coreui/react/src/index'
+
+## Default
+
+import { FormSelectExample } from './examples/FormSelectExample.tsx'
+import FormSelectExampleTS from '!!raw-loader!./examples/FormSelectExample.tsx'
+
+<ExampleSnippet code={FormSelectExampleTS} componentName="React Form Select">
+ <FormSelectExample />
+</ExampleSnippet>
+
+```jsx preview
+<CFormSelect
+ aria-label="Default select example"
+ options={[
+ 'Open this select menu',
+ { label: 'One', value: '1' },
+ { label: 'Two', value: '2' },
+ { label: 'Three', value: '3', disabled: true }
+ ]}
+/>
+```
+You can also add options manually
+
+```jsx
+<CFormSelect aria-label="Default select example">
+ <option>Open this select menu</option>
+ <option value="1">One</option>
+ <option value="2">Two</option>
+ <option value="3" disabled>Three</option>
+</CFormSelect>
+```
+
+## Sizing
+
+You may also choose from small and large custom selects to match our similarly sized text inputs.
+
+import { FormSelectSizingExample } from './examples/FormSelectSizingExample.tsx'
+import FormSelectSizingExampleTS from '!!raw-loader!./examples/FormSelectSizingExample.tsx'
+
+<ExampleSnippet code={FormSelectSizingExampleTS} componentName="React Form Select">
+ <FormSelectSizingExample />
+</ExampleSnippet>
+
+The `multiple` attribute is also supported:
+
+import { FormSelectSizing2Example } from './examples/FormSelectSizing2Example.tsx'
+import FormSelectSizing2ExampleTS from '!!raw-loader!./examples/FormSelectSizing2Example.tsx'
+
+<ExampleSnippet code={FormSelectSizing2ExampleTS} componentName="React Form Select">
+ <FormSelectSizing2Example />
+</ExampleSnippet>
+
+As is the `htmlSize` property:
+
+import { FormSelectSizing3Example } from './examples/FormSelectSizing3Example.tsx'
+import FormSelectSizing3ExampleTS from '!!raw-loader!./examples/FormSelectSizing3Example.tsx'
+
+<ExampleSnippet code={FormSelectSizing3ExampleTS} componentName="React Form Select">
+ <FormSelectSizing3Example />
+</ExampleSnippet>
+
+## Disabled
+
+Add the `disabled` boolean attribute on a select to give it a grayed out appearance and remove pointer events.
+
+import { FormSelectDisabledExample } from './examples/FormSelectDisabledExample.tsx'
+import FormSelectDisabledExampleTS from '!!raw-loader!./examples/FormSelectDisabledExample.tsx'
+
+<ExampleSnippet code={FormSelectDisabledExampleTS} componentName="React Form Select">
+ <FormSelectDisabledExample />
+</ExampleSnippet>
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [<CFormSelect />](./api/#cformselect)
+- [<CFormFeedback />](./api/#cformfeedback)
+- [<CFormLabel />](./api/#cformlabel)
+- [<CFormText />](./api/#cformtext)
+
diff --git a/packages/docs/content/forms/select/styling.mdx b/packages/docs/content/forms/select/styling.mdx
new file mode 100644
index 00000000..921971cd
--- /dev/null
+++ b/packages/docs/content/forms/select/styling.mdx
@@ -0,0 +1,37 @@
+---
+title: React Select Component Styling
+name: Select Styling
+description: Learn how to customize the React Select component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /forms/input/
+---
+
+### CSS class names
+
+React Select component comes with built-in class names that make styling super simple. Here’s a quick rundown of what you can use:
+
+#### CFormSelect
+
+<ClassNamesDocs
+ files={[
+ 'components/form/CFormFeedback.tsx',
+ 'components/form/CFormLabel.tsx',
+ 'components/form/CFormSelect.tsx',
+ 'components/form/CFormText.tsx',
+ ]}
+/>
+
+#### CFormLabel
+
+<ClassNamesDocs files={['components/form/CFormLabel.tsx']} />
+
+#### CFormText
+
+<ClassNamesDocs files={['components/form/CFormText.tsx']} />
+
+#### CFormFeedback
+
+<ClassNamesDocs files={['components/form/CFormFeedback.tsx']} />
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="form-select-variables" />
diff --git a/packages/docs/content/forms/switch.mdx b/packages/docs/content/forms/switch.mdx
deleted file mode 100644
index 4dd94510..00000000
--- a/packages/docs/content/forms/switch.mdx
+++ /dev/null
@@ -1,59 +0,0 @@
----
-title: React Switch Components
-name: Switch
-description: Create consistent cross-browser and cross-device switch component.
-menu: Forms
-route: /forms/checks-radios
-other_frameworks: switch
----
-
-import { useEffect, useRef } from 'react'
-import {
- CFormSwitch,
-} from '@coreui/react/src/index'
-
-## About
-
-React Switch Components are a type of UI component that allows users to toggle between two states, usually represented as "on" or "off", "enabled" or "disabled", or "checked" or "unchecked".
-
-When a user interacts with the component by clicking or tapping on it, the switch toggles its state, triggering an action or changing the appearance of the component. This type of component is often used in forms, settings panels, and other places where users need to turn something on or off or choose between two options.
-
-## Example
-
-```jsx preview
-<CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault"/>
-<CFormSwitch label="Checked switch checkbox input" id="formSwitchCheckChecked" defaultChecked/>
-<CFormSwitch label="Disabled switch checkbox input" id="formSwitchCheckDisabled" disabled/>
-<CFormSwitch label="Disabled checked switch checkbox input" id="formSwitchCheckCheckedDisabled" defaultChecked disabled/>
-```
-
-## Sizing
-
-Larger or smaller react switches? Add `size="lg"` or `size="xl"` for additional sizes.
-
-```jsx preview
-<CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefaultNormal"/>
-<CFormSwitch size="lg" label="Large switch checkbox input" id="formSwitchCheckDefaultLg"/>
-<CFormSwitch size="xl" label="Extra large switch checkbox input" id="formSwitchCheckDefaultXL"/>
-```
-
-## Reverse
-
-Put your switches on the opposite side by adding `reverse` boolean property.
-
-```jsx preview
-<CFormSwitch reverse type="radio" id="reverseFormSwitch1" label="Reverse switch"/>
-<CFormSwitch reverse type="radio" id="reverseFormSwitch2" label="Disabled reverse switch" disabled/>
-```
-
-## Customizing
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="form-switch-variables" />
-
-## API
-
-### CFormSwitch
-
-`markdown:CFormSwitch.api.mdx`
diff --git a/packages/docs/content/forms/switch/api.mdx b/packages/docs/content/forms/switch/api.mdx
new file mode 100644
index 00000000..7c2bb692
--- /dev/null
+++ b/packages/docs/content/forms/switch/api.mdx
@@ -0,0 +1,12 @@
+---
+title: React Form Switch Component API
+name: Form Switch API
+description: Explore the API reference for the React Form Switch component and discover how to effectively utilize its props for customization.
+route: /forms/switch/
+---
+
+import CFormSwitchAPI from '../../api/CFormSwitch.api.mdx'
+
+## CFormSwitch
+
+<CFormSwitchAPI />
\ No newline at end of file
diff --git a/packages/docs/content/forms/switch/examples/FormSwitchExample.tsx b/packages/docs/content/forms/switch/examples/FormSwitchExample.tsx
new file mode 100644
index 00000000..560faaf8
--- /dev/null
+++ b/packages/docs/content/forms/switch/examples/FormSwitchExample.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { CFormSwitch } from '@coreui/react'
+
+export const FormSwitchExample = () => {
+ return (
+ <>
+ <CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault" />
+ <CFormSwitch
+ label="Checked switch checkbox input"
+ id="formSwitchCheckChecked"
+ defaultChecked
+ />
+ <CFormSwitch label="Disabled switch checkbox input" id="formSwitchCheckDisabled" disabled />
+ <CFormSwitch
+ label="Disabled checked switch checkbox input"
+ id="formSwitchCheckCheckedDisabled"
+ defaultChecked
+ disabled
+ />
+ </>
+ )
+}
diff --git a/packages/docs/content/forms/switch/examples/FormSwitchReverseExample.tsx b/packages/docs/content/forms/switch/examples/FormSwitchReverseExample.tsx
new file mode 100644
index 00000000..c65883fc
--- /dev/null
+++ b/packages/docs/content/forms/switch/examples/FormSwitchReverseExample.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { CFormSwitch } from '@coreui/react'
+
+export const FormSwitchReverseExample = () => {
+ return (
+ <>
+ <CFormSwitch reverse type="radio" id="reverseFormSwitch1" label="Reverse switch" />
+ <CFormSwitch
+ reverse
+ type="radio"
+ id="reverseFormSwitch2"
+ label="Disabled reverse switch"
+ disabled
+ />
+ </>
+ )
+}
diff --git a/packages/docs/content/forms/switch/examples/FormSwitchSizingExample.tsx b/packages/docs/content/forms/switch/examples/FormSwitchSizingExample.tsx
new file mode 100644
index 00000000..b1dc4955
--- /dev/null
+++ b/packages/docs/content/forms/switch/examples/FormSwitchSizingExample.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { CFormSwitch } from '@coreui/react'
+
+export const FormSwitchSizingExample = () => {
+ return (
+ <>
+ <CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefaultNormal" />
+ <CFormSwitch size="lg" label="Large switch checkbox input" id="formSwitchCheckDefaultLg" />
+ <CFormSwitch
+ size="xl"
+ label="Extra large switch checkbox input"
+ id="formSwitchCheckDefaultXL"
+ />
+ </>
+ )
+}
diff --git a/packages/docs/content/forms/switch/index.mdx b/packages/docs/content/forms/switch/index.mdx
new file mode 100644
index 00000000..a249dcf1
--- /dev/null
+++ b/packages/docs/content/forms/switch/index.mdx
@@ -0,0 +1,50 @@
+---
+title: React Switch Components
+name: Switch
+description: Create consistent cross-browser and cross-device switch component.
+route: /forms/switch/
+other_frameworks: switch
+---
+
+## About
+
+React Switch Components are a type of UI component that allows users to toggle between two states, usually represented as "on" or "off", "enabled" or "disabled", or "checked" or "unchecked".
+
+When a user interacts with the component by clicking or tapping on it, the switch toggles its state, triggering an action or changing the appearance of the component. This type of component is often used in forms, settings panels, and other places where users need to turn something on or off or choose between two options.
+
+## Example
+
+import { FormSwitchExample } from './examples/FormSwitchExample.tsx'
+import FormSwitchExampleTS from '!!raw-loader!./examples/FormSwitchExample.tsx'
+
+<ExampleSnippet code={FormSwitchExampleTS} componentName="React Switch Input">
+ <FormSwitchExample />
+</ExampleSnippet>
+
+## Sizing
+
+Larger or smaller react switches? Add `size="lg"` or `size="xl"` for additional sizes.
+
+import { FormSwitchSizingExample } from './examples/FormSwitchSizingExample.tsx'
+import FormSwitchSizingExampleTS from '!!raw-loader!./examples/FormSwitchSizingExample.tsx'
+
+<ExampleSnippet code={FormSwitchSizingExampleTS} componentName="React Switch Input">
+ <FormSwitchSizingExample />
+</ExampleSnippet>
+
+## Reverse
+
+Put your switches on the opposite side by adding `reverse` boolean property.
+
+import { FormSwitchReverseExample } from './examples/FormSwitchReverseExample.tsx'
+import FormSwitchReverseExampleTS from '!!raw-loader!./examples/FormSwitchReverseExample.tsx'
+
+<ExampleSnippet code={FormSwitchReverseExampleTS} componentName="React Switch Input">
+ <FormSwitchReverseExample />
+</ExampleSnippet>
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [<CFormSwitch />](./api/#cformswitch)
diff --git a/packages/docs/content/forms/switch/styling.mdx b/packages/docs/content/forms/switch/styling.mdx
new file mode 100644
index 00000000..acdee288
--- /dev/null
+++ b/packages/docs/content/forms/switch/styling.mdx
@@ -0,0 +1,16 @@
+---
+title: React Switch Component Styling
+name: Switch Styling
+description: Learn how to customize the React Switch component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /forms/switch/
+---
+
+### CSS class names
+
+React Switch component comes with built-in class names that make styling super simple. Here’s a quick rundown of what you can use:
+
+<ClassNamesDocs files={['components/form/CFormSwitch.tsx']} />
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="form-switch-variables" />
diff --git a/packages/docs/content/forms/textarea.mdx b/packages/docs/content/forms/textarea.mdx
deleted file mode 100644
index 8af0c457..00000000
--- a/packages/docs/content/forms/textarea.mdx
+++ /dev/null
@@ -1,99 +0,0 @@
----
-title: React Form Text Component
-name: Form control
-description: React textarea components. Give textual form `<textarea>`s an upgrade with custom styles, sizing, focus states, validation, and more.
-menu: Forms
-route: /forms/textarea
-other_frameworks: textarea
----
-
-import {
- CButton,
- CForm,
- CFormFloating,
- CFormInput,
- CFormLabel,
- CFormText,
- CFormTextarea,
- CCol,
- CRow,
-} from '@coreui/react/src/index'
-
-## Example
-
-```jsx preview
-<CForm>
- <CFormTextarea
- id="exampleFormControlTextarea1"
- label="Example textarea"
- rows={3}
- text="Must be 8-20 words long."
- ></CFormTextarea>
-</CForm>
-```
-
-If you need to add custom classNames to form's components, or need to add some custom elements you can add each form component separately. Please check the example below.
-
-```jsx
-<CFormLabel htmlFor="exampleFormControlTextarea1">Example textarea</CFormLabel>
-<CFormTextarea id="exampleFormControlTextarea1" rows={3}></CFormTextarea>
-<CFormText as="span" id="passwordHelpInline">Must be 8-20 words long.</CFormText>
-```
-
-## Disabled
-
-Add the `disabled` boolean attribute on an textarea to give it a grayed out appearance and remove pointer events.
-
-```jsx preview
-<CFormTextarea
- className="mb-3"
- placeholder="Disabled textarea"
- aria-label="Disabled textarea example"
- disabled
-></CFormTextarea>
-```
-
-## Readonly
-
-Add the `readOnly` boolean attribute on an textarea to prevent modification of the textarea's value. Read-only textareas appear lighter (just like disabled textareas), but retain the standard cursor.
-
-```jsx preview
-<CFormTextarea
- placeholder="Readonly textarea"
- aria-label="Readonly textarea example"
- disabled
- readOnly
-></CFormTextarea>
-```
-
-## Customizing
-
-### SASS variables
-
-`$input-*` are shared across most of our form controls (and not buttons).
-
-<ScssDocs file="_variables.scss" capture="form-input-variables" />
-
-`$form-label-*` and `$form-text-*` are for our `<CFormLabel />`s and `<CFormText />` component.
-
-<ScssDocs file="_variables.scss" capture="form-label-variables" />
-
-<ScssDocs file="_variables.scss" capture="form-text-variables" />
-
-## API
-
-### CFormTextarea
-
-`markdown:CFormTextarea.api.mdx`
-
-### CFormFeedback
-
-`markdown:CFormFeedback.api.mdx`
-
-### CFormLabel
-
-`markdown:CFormLabel.api.mdx`
-
-### CFormText
-
-`markdown:CFormText.api.mdx`
diff --git a/packages/docs/content/forms/textarea/api.mdx b/packages/docs/content/forms/textarea/api.mdx
new file mode 100644
index 00000000..733f0a55
--- /dev/null
+++ b/packages/docs/content/forms/textarea/api.mdx
@@ -0,0 +1,27 @@
+---
+title: React Form Textarea Component API
+name: Form Textarea API
+description: Explore the API reference for the React Form Textarea component and discover how to effectively utilize its props for customization.
+route: /forms/textarea/
+---
+
+import CFormTextareaAPI from '../../api/CFormTextarea.api.mdx'
+import CFormFeedbackAPI from '../../api/CFormFeedback.api.mdx'
+import CFormLabelAPI from '../../api/CFormLabel.api.mdx'
+import CFormTextAPI from '../../api/CFormText.api.mdx'
+
+## CFormTextarea
+
+<CFormTextareaAPI />
+
+## CFormFeedback
+
+<CFormFeedbackAPI />
+
+## CFormLabel
+
+<CFormLabelAPI />
+
+## CFormText
+
+<CFormTextAPI />
diff --git a/packages/docs/content/forms/textarea/examples/FormTextareaDisabledExample.tsx b/packages/docs/content/forms/textarea/examples/FormTextareaDisabledExample.tsx
new file mode 100644
index 00000000..abc7ab18
--- /dev/null
+++ b/packages/docs/content/forms/textarea/examples/FormTextareaDisabledExample.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { CFormTextarea } from '@coreui/react'
+
+export const FormTextareaDisabledExample = () => {
+ return (
+ <CFormTextarea
+ className="mb-3"
+ placeholder="Disabled textarea"
+ aria-label="Disabled textarea example"
+ disabled
+ ></CFormTextarea>
+ )
+}
diff --git a/packages/docs/content/forms/textarea/examples/FormTextareaExample.tsx b/packages/docs/content/forms/textarea/examples/FormTextareaExample.tsx
new file mode 100644
index 00000000..369a6a3f
--- /dev/null
+++ b/packages/docs/content/forms/textarea/examples/FormTextareaExample.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { CForm, CFormTextarea } from '@coreui/react'
+
+export const FormTextareaExample = () => {
+ return (
+ <CForm>
+ <CFormTextarea
+ id="exampleFormControlTextarea1"
+ label="Example textarea"
+ rows={3}
+ text="Must be 8-20 words long."
+ ></CFormTextarea>
+ </CForm>
+ )
+}
diff --git a/packages/docs/content/forms/textarea/examples/FormTextareaReadonlyExample.tsx b/packages/docs/content/forms/textarea/examples/FormTextareaReadonlyExample.tsx
new file mode 100644
index 00000000..41ae2daf
--- /dev/null
+++ b/packages/docs/content/forms/textarea/examples/FormTextareaReadonlyExample.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { CFormTextarea } from '@coreui/react'
+
+export const FormTextareaReadonlyExample = () => {
+ return (
+ <CFormTextarea
+ placeholder="Readonly textarea"
+ aria-label="Readonly textarea example"
+ disabled
+ readOnly
+ ></CFormTextarea>
+ )
+}
diff --git a/packages/docs/content/forms/textarea/index.mdx b/packages/docs/content/forms/textarea/index.mdx
new file mode 100644
index 00000000..0ff3d5e7
--- /dev/null
+++ b/packages/docs/content/forms/textarea/index.mdx
@@ -0,0 +1,70 @@
+---
+title: React Form Textarea Component
+name: Form Textarea
+description: React textarea components. Give textual form `<textarea>`s an upgrade with custom styles, sizing, focus states, validation, and more.
+menu: Forms
+route: /forms/textarea
+other_frameworks: textarea
+---
+
+import {
+ CButton,
+ CForm,
+ CFormFloating,
+ CFormInput,
+ CFormLabel,
+ CFormText,
+ CFormTextarea,
+ CCol,
+ CRow,
+} from '@coreui/react/src/index'
+
+## Example
+
+import { FormTextareaExample } from './examples/FormTextareaExample.tsx'
+import FormTextareaExampleTS from '!!raw-loader!./examples/FormTextareaExample.tsx'
+
+<ExampleSnippet code={FormTextareaExampleTS} componentName="React Form Textarea">
+ <FormTextareaExample />
+</ExampleSnippet>
+
+If you need to add custom classNames to form's components, or need to add some custom elements you can add each form component separately. Please check the example below.
+
+```jsx
+<CFormLabel htmlFor="exampleFormControlTextarea1">Example textarea</CFormLabel>
+<CFormTextarea id="exampleFormControlTextarea1" rows={3}></CFormTextarea>
+<CFormText as="span" id="passwordHelpInline">Must be 8-20 words long.</CFormText>
+```
+
+## Disabled
+
+Add the `disabled` boolean attribute on an textarea to give it a grayed out appearance and remove pointer events.
+
+import { FormTextareaDisabledExample } from './examples/FormTextareaDisabledExample.tsx'
+import FormTextareaDisabledExampleTS from '!!raw-loader!./examples/FormTextareaDisabledExample.tsx'
+
+<ExampleSnippet code={FormTextareaDisabledExampleTS} componentName="React Form Textarea">
+ <FormTextareaDisabledExample />
+</ExampleSnippet>
+
+
+## Readonly
+
+Add the `readOnly` boolean attribute on an textarea to prevent modification of the textarea's value. Read-only textareas appear lighter (just like disabled textareas), but retain the standard cursor.
+
+import { FormTextareaReadonlyExample } from './examples/FormTextareaReadonlyExample.tsx'
+import FormTextareaReadonlyExampleTS from '!!raw-loader!./examples/FormTextareaReadonlyExample.tsx'
+
+<ExampleSnippet code={FormTextareaReadonlyExampleTS} componentName="React Form Textarea">
+ <FormTextareaReadonlyExample />
+</ExampleSnippet>
+
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [<CFormTextarea />](./api/#cformtextarea)
+- [<CFormFeedback />](./api/#cformfeedback)
+- [<CFormLabel />](./api/#cformlabel)
+- [<CFormText />](./api/#cformtext)
diff --git a/packages/docs/content/forms/textarea/styling.mdx b/packages/docs/content/forms/textarea/styling.mdx
new file mode 100644
index 00000000..53c440ba
--- /dev/null
+++ b/packages/docs/content/forms/textarea/styling.mdx
@@ -0,0 +1,38 @@
+---
+title: React Textarea Component Styling
+name: Textarea Styling
+description: Learn how to customize the React Textarea component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /forms/input/
+---
+
+### CSS class names
+
+React Textarea component comes with built-in class names that make styling super simple. Here’s a quick rundown of what you can use:
+
+#### CFormTextarea
+
+<ClassNamesDocs files={['components/form/CFormTextarea.tsx']} />
+
+#### CFormLabel
+
+<ClassNamesDocs files={['components/form/CFormLabel.tsx']} />
+
+#### CFormText
+
+<ClassNamesDocs files={['components/form/CFormText.tsx']} />
+
+#### CFormFeedback
+
+<ClassNamesDocs files={['components/form/CFormFeedback.tsx']} />
+
+### SASS variables
+
+`$input-*` are shared across most of our form controls (and not buttons).
+
+<ScssDocs file="_variables.scss" capture="form-input-variables" />
+
+`$form-label-*` and `$form-text-*` are for our `<CFormLabel />`s and `<CFormText />` component.
+
+<ScssDocs file="_variables.scss" capture="form-label-variables" />
+
+<ScssDocs file="_variables.scss" capture="form-text-variables" />
diff --git a/packages/docs/content/forms/validation.mdx b/packages/docs/content/forms/validation.mdx
deleted file mode 100644
index 17020582..00000000
--- a/packages/docs/content/forms/validation.mdx
+++ /dev/null
@@ -1,697 +0,0 @@
----
-title: React Form Validation
-name: Validation
-description: Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.
-menu: Forms
-route: /forms/validation
----
-
-import { useState } from 'react'
-
-import {
- CButton,
- CDropdown,
- CDropdownDivider,
- CDropdownHeader,
- CDropdownItem,
- CDropdownItemPlain,
- CDropdownMenu,
- CDropdownToggle,
- CForm,
- CFormCheck,
- CFormInput,
- CFormFeedback,
- CFormLabel,
- CFormSelect,
- CFormTextarea,
- CInputGroup,
- CInputGroupText,
- CCol,
- CRow,
-} from '@coreui/react/src/index'
-
-## Example
-
-For custom CoreUI form validation messages, you'll need to add the `noValidate` boolean property to your `<CForm>`. This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript. Try to submit the form below; our JavaScript will intercept the submit button and relay feedback to you. When attempting to submit, you'll see the `:invalid` and `:valid` styles applied to your form controls.
-
-Custom feedback styles apply custom colors, borders, focus styles, and background icons to better communicate feedback.
-
-export const CustomStylesExample = () => {
- const [validated, setValidated] = useState(false)
- const handleSubmit = (event) => {
- const form = event.currentTarget
- if (form.checkValidity() === false) {
- event.preventDefault()
- event.stopPropagation()
- }
- setValidated(true)
- }
- return (
- <CForm
- className="row g-3 needs-validation"
- noValidate
- validated={validated}
- onSubmit={handleSubmit}
- >
- <CCol md={4}>
- <CFormInput
- type="text"
- defaultValue="Mark"
- feedbackValid="Looks good!"
- id="validationCustom01"
- label="First name"
- required
- />
- </CCol>
- <CCol md={4}>
- <CFormInput
- type="text"
- defaultValue="Otto"
- feedbackValid="Looks good!"
- id="validationCustom02"
- label="First name"
- required
- />
- </CCol>
- <CCol md={4}>
- <CFormLabel htmlFor="validationCustomUsername">Username</CFormLabel>
- <CInputGroup className="has-validation">
- <CInputGroupText>@</CInputGroupText>
- <CFormInput
- type="text"
- aria-describedby="inputGroupPrependFeedback"
- feedbackValid="Please choose a username."
- id="validationCustomUsername"
- required
- />
- </CInputGroup>
- </CCol>
- <CCol md={6}>
- <CFormInput
- type="text"
- aria-describedby="validationCustom03Feedback"
- feedbackInvalid="Please provide a valid city."
- id="validationCustom03"
- label="City"
- required
- />
- </CCol>
- <CCol md={3}>
- <CFormSelect
- aria-describedby="validationCustom04Feedback"
- feedbackInvalid="Please select a valid state."
- id="validationCustom04"
- label="State"
- required
- >
- <option selected="" disabled="" value="">
- Choose...
- </option>
- <option>...</option>
- </CFormSelect>
- </CCol>
- <CCol md={3}>
- <CFormInput
- type="text"
- aria-describedby="validationCustom05Feedback"
- feedbackInvalid="Please provide a valid zip."
- id="validationCustom05"
- label="Zip"
- required
- />
- </CCol>
- <CCol xs={12}>
- <CFormCheck
- type="checkbox"
- id="invalidCheck"
- label="Agree to terms and conditions"
- required
- />
- <CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
- </CCol>
- <CCol xs={12}>
- <CButton color="primary" type="submit">
- Submit form
- </CButton>
- </CCol>
- </CForm>
- )
-}
-
-<Example>
- <CustomStylesExample />
-</Example>
-
-```jsx
-const [validated, setValidated] = useState(false)
-const handleSubmit = (event) => {
- const form = event.currentTarget
- if (form.checkValidity() === false) {
- event.preventDefault()
- event.stopPropagation()
- }
- setValidated(true)
-}
-return (
- <CForm
- className="row g-3 needs-validation"
- noValidate
- validated={validated}
- onSubmit={handleSubmit}
- >
- <CCol md={4}>
- <CFormInput
- type="text"
- defaultValue="Mark"
- feedbackValid="Looks good!"
- id="validationCustom01"
- label="First name"
- required
- />
- </CCol>
- <CCol md={4}>
- <CFormInput
- type="text"
- defaultValue="Otto"
- feedbackValid="Looks good!"
- id="validationCustom02"
- label="First name"
- required
- />
- </CCol>
- <CCol md={4}>
- <CFormLabel htmlFor="validationCustomUsername">Username</CFormLabel>
- <CInputGroup className="has-validation">
- <CInputGroupText>@</CInputGroupText>
- <CFormInput
- type="text"
- aria-describedby="inputGroupPrependFeedback"
- feedbackValid="Please choose a username."
- id="validationCustomUsername"
- required
- />
- </CInputGroup>
- </CCol>
- <CCol md={6}>
- <CFormInput
- type="text"
- aria-describedby="validationCustom03Feedback"
- feedbackInvalid="Please provide a valid city."
- id="validationCustom03"
- label="City"
- required
- />
- </CCol>
- <CCol md={3}>
- <CFormSelect
- aria-describedby="validationCustom04Feedback"
- feedbackInvalid="Please select a valid state."
- id="validationCustom04"
- label="State"
- required
- >
- <option disabled>Choose...</option>
- <option>...</option>
- </CFormSelect>
- </CCol>
- <CCol md={3}>
- <CFormInput
- type="text"
- aria-describedby="validationCustom05Feedback"
- feedbackInvalid="Please provide a valid zip."
- id="validationCustom05"
- label="Zip"
- required
- />
- </CCol>
- <CCol xs={12}>
- <CFormCheck
- type="checkbox"
- id="invalidCheck"
- label="Agree to terms and conditions"
- required
- />
- <CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
- </CCol>
- <CCol xs={12}>
- <CButton color="primary" type="submit">
- Submit form
- </CButton>
- </CCol>
- </CForm>
-)
-```
-
-## Browser defaults
-
-Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? All good, you can use the browser defaults. Try submitting the form below. Depending on your browser and OS, you'll see a slightly different style of feedback.
-
-While these feedback styles cannot be styled with CSS, you can still customize the feedback text through JavaScript.
-
-```jsx preview
-<CForm className="row g-3">
- <CCol md={4}>
- <CFormInput
- type="text"
- id="validationDefault01"
- label="First name"
- defaultValue="Mark"
- required
- />
- </CCol>
- <CCol md={4}>
- <CFormInput
- type="text"
- id="validationDefault02"
- label="Last name"
- defaultValue="Otto"
- required
- />
- </CCol>
- <CCol md={4}>
- <CFormLabel htmlFor="validationDefaultUsername">Username</CFormLabel>
- <CInputGroup>
- <CInputGroupText id="inputGroupPrepend02">@</CInputGroupText>
- <CFormInput
- type="text"
- id="validationDefaultUsername"
- defaultValue=""
- aria-describedby="inputGroupPrepend02"
- required
- />
- </CInputGroup>
- </CCol>
- <CCol md={6}>
- <CFormInput type="text" id="validationDefault03" label="City" required />
- </CCol>
- <CCol md={3}>
- <CFormSelect id="validationDefault04" label="State">
- <option disabled>Choose...</option>
- <option>...</option>
- </CFormSelect>
- </CCol>
- <CCol md={3}>
- <CFormInput type="text" id="validationDefault05" label="Zip" required />
- </CCol>
- <CCol xs={12}>
- <CFormCheck type="checkbox" id="invalidCheck" label="Agree to terms and conditions" required />
- </CCol>
- <CCol xs={12}>
- <CButton color="primary" type="submit">
- Submit form
- </CButton>
- </CCol>
-</CForm>
-```
-
-## Custom validation
-
-In case you require custom or server-side validation, you can indicate invalid and valid form fields with `invalid` and `valid` boolean properties.
-
-For invalid fields, ensure that the invalid feedback/error message is associated with the relevant form field using `aria-describedby` (noting that this attribute allows more than one `id` to be referenced, in case the field already points to additional form text).
-
-```jsx preview
-<CForm className="row g-3">
- <CCol md={4}>
- <CFormInput
- type="text"
- id="validationServer01"
- label="Email"
- feedback="Looks good!"
- defaultValue="name@surname.com"
- valid
- required
- />
- </CCol>
- <CCol md={4}>
- <CFormInput
- type="text"
- id="validationServer02"
- label="Repeat email"
- feedback="Looks good!"
- defaultValue="name@surname.com"
- valid
- required
- />
- </CCol>
- <CCol md={4}>
- <CFormLabel htmlFor="validationServerUsername">Username</CFormLabel>
- <CInputGroup className="has-validation">
- <CInputGroupText id="inputGroupPrepend03">@</CInputGroupText>
- <CFormInput
- type="text"
- id="validationServerUsername"
- feedback="Please choose a username."
- defaultValue=""
- aria-describedby="inputGroupPrepend03"
- invalid
- required
- />
- </CInputGroup>
- </CCol>
- <CCol md={6}>
- <CFormInput
- type="text"
- id="validationServer03"
- label="City"
- feedback="Please provide a valid city."
- invalid
- required
- />
- </CCol>
- <CCol md={3}>
- <CFormSelect
- id="validationServer04"
- label="State"
- feedback="Please provide a valid city."
- invalid
- >
- <option disabled>Choose...</option>
- <option>...</option>
- </CFormSelect>
- </CCol>
- <CCol md={3}>
- <CFormInput
- type="text"
- id="validationServer05"
- label="zip"
- feedback="Please provide a valid zip."
- invalid
- required
- />
- </CCol>
- <CCol xs={12}>
- <CFormCheck
- type="checkbox"
- id="invalidCheck"
- label="Agree to terms and conditions"
- invalid
- required
- />
- <CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
- </CCol>
- <CCol xs={12}>
- <CButton color="primary" type="submit">
- Submit form
- </CButton>
- </CCol>
-</CForm>
-```
-
-## Supported elements
-
-Validation styles are available for the following form controls and components:
-
-- `<CFormCheck>`s
-- `<CFormInput>`s
-- `<CFormSelect>`s
-- `<CFormTextarea>`s
-
-```jsx preview
-<CForm validated={true}>
- <div className="mb-3">
- <CFormTextarea
- feedbackInvalid="Please enter a message in the textarea."
- id="validationTextarea"
- label="Textarea"
- placeholder="Required example textarea"
- required
- ></CFormTextarea>
- </div>
- <CFormCheck
- className="mb-3"
- id="validationFormCheck1"
- label="Check this checkbox"
- feedbackInvalid="Example invalid feedback text"
- required
- />
- <CFormCheck
- type="radio"
- name="radio-stacked"
- id="validationFormCheck2"
- label="Check this checkbox"
- required
- />
- <CFormCheck
- className="mb-3"
- type="radio"
- name="radio-stacked"
- id="validationFormCheck3"
- label="Or toggle this other radio"
- feedbackInvalid="More example invalid feedback text"
- required
- />
- <div className="mb-3">
- <CFormSelect
- feedbackInvalid="Example invalid select feedback"
- aria-label="select example"
- required
- >
- <option selected="" value="">
- Open this select menu
- </option>
- <option value="1">One</option>
- <option value="2">Two</option>
- <option value="3">Three</option>
- </CFormSelect>
- </div>
- <div className="mb-3">
- <CFormInput
- type="file"
- id="validationTextarea"
- feedbackInvalid="Example invalid form file feedback"
- aria-label="file example"
- required
- />
- </div>
- <div className="mb-3">
- <CButton type="submit" color="primary" disabled>
- Submit form
- </CButton>
- </div>
-</CForm>
-```
-
-## Tooltips
-
-If your form layout allows it, you can swap the text for the tooltip to display validation feedback in a styled tooltip. Be sure to have a parent with `position: relative` on it for tooltip positioning. In the example below, our column classes have this already, but your project may require an alternative setup.
-
-export const TooltipsExample = () => {
- const [validated, setValidated] = useState(false)
- const handleSubmit = (event) => {
- const form = event.currentTarget
- if (form.checkValidity() === false) {
- event.preventDefault()
- event.stopPropagation()
- }
- setValidated(true)
- }
- return (
- <CForm
- className="row g-3 needs-validation"
- noValidate
- validated={validated}
- onSubmit={handleSubmit}
- >
- <CCol md={4} className="position-relative">
- <CFormInput
- type="text"
- defaultValue="Mark"
- feedbackValid="Looks good!"
- id="validationTooltip01"
- label="First name"
- required
- tooltipFeedback
- />
- </CCol>
- <CCol md={4} className="position-relative">
- <CFormInput
- type="text"
- defaultValue="Otto"
- feedbackValid="Looks good!"
- id="validationTooltip02"
- label="First name"
- required
- tooltipFeedback
- />
- </CCol>
- <CCol md={4} className="position-relative">
- <CFormLabel htmlFor="validationTooltipUsername">Username</CFormLabel>
- <CInputGroup className="has-validation">
- <CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
- <CFormInput
- type="text"
- aria-describedby="inputGroupPrependFeedback"
- feedbackInvalid="Please choose a username."
- id="validationTooltipUsername"
- required
- tooltipFeedback
- />
- </CInputGroup>
- </CCol>
- <CCol md={6} className="position-relative">
- <CFormInput
- type="text"
- aria-describedby="validationTooltip03Feedback"
- feedbackInvalid="Please provide a valid city."
- id="validationTooltip03"
- label="City"
- required
- tooltipFeedback
- />
- </CCol>
- <CCol md={3} className="position-relative">
- <CFormSelect
- aria-describedby="validationTooltip04Feedback"
- feedbackInvalid="Please select a valid state."
- id="validationTooltip04"
- label="State"
- required
- tooltipFeedback
- >
- <option selected="" disabled="" value="">
- Choose...
- </option>
- <option>...</option>
- </CFormSelect>
- </CCol>
- <CCol md={3} className="position-relative">
- <CFormInput
- type="text"
- aria-describedby="validationTooltip05Feedback"
- feedbackInvalid="Please provide a valid zip."
- id="validationTooltip05"
- label="Zip"
- required
- tooltipFeedback
- />
- </CCol>
- <CCol xs={12} className="position-relative">
- <CButton color="primary" type="submit">
- Submit form
- </CButton>
- </CCol>
- </CForm>
- )
-}
-
-<Example>
- <TooltipsExample />
-</Example>
-
-```jsx
-const [validated, setValidated] = useState(false)
-const handleSubmit = (event) => {
- const form = event.currentTarget
- if (form.checkValidity() === false) {
- event.preventDefault()
- event.stopPropagation()
- }
- setValidated(true)
-}
-return (
- <CForm
- className="row g-3 needs-validation"
- noValidate
- validated={validated}
- onSubmit={handleSubmit}
->
- <CCol md={4} className="position-relative">
- <CFormInput
- type="text"
- defaultValue="Mark"
- feedbackValid="Looks good!"
- id="validationTooltip01"
- label="First name"
- required
- tooltipFeedback
- />
- </CCol>
- <CCol md={4} className="position-relative">
- <CFormInput
- type="text"
- defaultValue="Otto"
- feedbackValid="Looks good!"
- id="validationTooltip02"
- label="First name"
- required
- tooltipFeedback
- />
- </CCol>
- <CCol md={4} className="position-relative">
- <CFormLabel htmlFor="validationTooltipUsername">Username</CFormLabel>
- <CInputGroup className="has-validation">
- <CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
- <CFormInput
- type="text"
- aria-describedby="inputGroupPrependFeedback"
- feedbackInvalid="Please choose a username."
- id="validationTooltipUsername"
- required
- tooltipFeedback
- />
- </CInputGroup>
- </CCol>
- <CCol md={6} className="position-relative">
- <CFormInput
- type="text"
- aria-describedby="validationTooltip03Feedback"
- feedbackInvalid="Please provide a valid city."
- id="validationTooltip03"
- label="City"
- required
- tooltipFeedback
- />
- </CCol>
- <CCol md={3} className="position-relative">
- <CFormSelect
- aria-describedby="validationTooltip04Feedback"
- feedbackInvalid="Please select a valid state."
- id="validationTooltip04"
- label="State"
- required
- tooltipFeedback
- >
- <option selected="" disabled="" value="">
- Choose...
- </option>
- <option>...</option>
- </CFormSelect>
- </CCol>
- <CCol md={3} className="position-relative">
- <CFormInput
- type="text"
- aria-describedby="validationTooltip05Feedback"
- feedbackInvalid="Please provide a valid zip."
- id="validationTooltip05"
- label="Zip"
- required
- tooltipFeedback
- />
- </CCol>
- <CCol xs={12} className="position-relative">
- <CButton color="primary" type="submit">
- Submit form
- </CButton>
- </CCol>
-</CForm>
-)
-```
-
-## Customizing
-
-### CSS variables
-
-CoreUI for React components use local CSS variables for validation for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
-
-<ScssDocs file="_root.scss" capture="root-form-validation-variables"/>
-
-These variables are also color mode adaptive, meaning they change color while in dark mode.
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="form-feedback-variables" />
-
-<ScssDocs file="_variables.scss" capture="form-validation-colors" />
-
-<ScssDocs file="_variables-dark.scss" capture="form-validation-colors-dark" />
diff --git a/packages/docs/content/forms/validation/examples/ValidationBrowserDefaultsExample.tsx b/packages/docs/content/forms/validation/examples/ValidationBrowserDefaultsExample.tsx
new file mode 100644
index 00000000..0ac49071
--- /dev/null
+++ b/packages/docs/content/forms/validation/examples/ValidationBrowserDefaultsExample.tsx
@@ -0,0 +1,75 @@
+import React from 'react'
+import {
+ CCol,
+ CButton,
+ CForm,
+ CFormCheck,
+ CFormInput,
+ CFormLabel,
+ CInputGroup,
+ CInputGroupText,
+ CFormSelect,
+} from '@coreui/react'
+
+export const ValidationBrowserDefaultsExample = () => {
+ return (
+ <CForm className="row g-3">
+ <CCol md={4}>
+ <CFormInput
+ type="text"
+ id="validationDefault01"
+ label="First name"
+ defaultValue="Mark"
+ required
+ />
+ </CCol>
+ <CCol md={4}>
+ <CFormInput
+ type="text"
+ id="validationDefault02"
+ label="Last name"
+ defaultValue="Otto"
+ required
+ />
+ </CCol>
+ <CCol md={4}>
+ <CFormLabel htmlFor="validationDefaultUsername">Username</CFormLabel>
+ <CInputGroup>
+ <CInputGroupText id="inputGroupPrepend02">@</CInputGroupText>
+ <CFormInput
+ type="text"
+ id="validationDefaultUsername"
+ defaultValue=""
+ aria-describedby="inputGroupPrepend02"
+ required
+ />
+ </CInputGroup>
+ </CCol>
+ <CCol md={6}>
+ <CFormInput type="text" id="validationDefault03" label="City" required />
+ </CCol>
+ <CCol md={3}>
+ <CFormSelect id="validationDefault04" label="State">
+ <option disabled>Choose...</option>
+ <option>...</option>
+ </CFormSelect>
+ </CCol>
+ <CCol md={3}>
+ <CFormInput type="text" id="validationDefault05" label="Zip" required />
+ </CCol>
+ <CCol xs={12}>
+ <CFormCheck
+ type="checkbox"
+ id="invalidCheck"
+ label="Agree to terms and conditions"
+ required
+ />
+ </CCol>
+ <CCol xs={12}>
+ <CButton color="primary" type="submit">
+ Submit form
+ </CButton>
+ </CCol>
+ </CForm>
+ )
+}
diff --git a/packages/docs/content/forms/validation/examples/ValidationCustomExample.tsx b/packages/docs/content/forms/validation/examples/ValidationCustomExample.tsx
new file mode 100644
index 00000000..9a5c979e
--- /dev/null
+++ b/packages/docs/content/forms/validation/examples/ValidationCustomExample.tsx
@@ -0,0 +1,103 @@
+import React from 'react'
+import {
+ CCol,
+ CButton,
+ CForm,
+ CFormCheck,
+ CFormFeedback,
+ CFormInput,
+ CFormLabel,
+ CInputGroup,
+ CInputGroupText,
+ CFormSelect,
+} from '@coreui/react'
+
+export const ValidationCustomExample = () => {
+ return (
+ <CForm className="row g-3">
+ <CCol md={4}>
+ <CFormInput
+ type="text"
+ id="validationServer01"
+ label="Email"
+ feedback="Looks good!"
+ defaultValue="name@surname.com"
+ valid
+ required
+ />
+ </CCol>
+ <CCol md={4}>
+ <CFormInput
+ type="text"
+ id="validationServer02"
+ label="Repeat email"
+ feedback="Looks good!"
+ defaultValue="name@surname.com"
+ valid
+ required
+ />
+ </CCol>
+ <CCol md={4}>
+ <CFormLabel htmlFor="validationServerUsername">Username</CFormLabel>
+ <CInputGroup className="has-validation">
+ <CInputGroupText id="inputGroupPrepend03">@</CInputGroupText>
+ <CFormInput
+ type="text"
+ id="validationServerUsername"
+ feedback="Please choose a username."
+ defaultValue=""
+ aria-describedby="inputGroupPrepend03"
+ invalid
+ required
+ />
+ </CInputGroup>
+ </CCol>
+ <CCol md={6}>
+ <CFormInput
+ type="text"
+ id="validationServer03"
+ label="City"
+ feedback="Please provide a valid city."
+ invalid
+ required
+ />
+ </CCol>
+ <CCol md={3}>
+ <CFormSelect
+ id="validationServer04"
+ label="State"
+ feedback="Please provide a valid city."
+ invalid
+ >
+ <option disabled>Choose...</option>
+ <option>...</option>
+ </CFormSelect>
+ </CCol>
+ <CCol md={3}>
+ <CFormInput
+ type="text"
+ id="validationServer05"
+ label="zip"
+ feedback="Please provide a valid zip."
+ invalid
+ required
+ />
+ </CCol>
+ <CCol xs={12}>
+ <CFormCheck
+ type="checkbox"
+ id="invalidCheck"
+ label="Agree to terms and conditions"
+ invalid
+ required
+ />
+ <CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
+ </CCol>
+ <CCol xs={12}>
+ <CButton color="primary" type="submit">
+ Submit form
+ </CButton>
+ </CCol>
+ </CForm>
+ )
+}
diff --git a/packages/docs/content/forms/validation/examples/ValidationExample.jsx b/packages/docs/content/forms/validation/examples/ValidationExample.jsx
new file mode 100644
index 00000000..903851b1
--- /dev/null
+++ b/packages/docs/content/forms/validation/examples/ValidationExample.jsx
@@ -0,0 +1,115 @@
+import React, { useState } from 'react'
+import {
+ CCol,
+ CButton,
+ CForm,
+ CFormCheck,
+ CFormFeedback,
+ CFormInput,
+ CFormLabel,
+ CInputGroup,
+ CInputGroupText,
+ CFormSelect,
+} from '@coreui/react'
+
+export const ValidationExample = () => {
+ const [validated, setValidated] = useState(false)
+ const handleSubmit = (event) => {
+ const form = event.currentTarget
+ if (form.checkValidity() === false) {
+ event.preventDefault()
+ event.stopPropagation()
+ }
+
+ setValidated(true)
+ }
+
+ return (
+ <CForm
+ className="row g-3 needs-validation"
+ noValidate
+ validated={validated}
+ onSubmit={handleSubmit}
+ >
+ <CCol md={4}>
+ <CFormInput
+ type="text"
+ defaultValue="Mark"
+ feedbackValid="Looks good!"
+ id="validationCustom01"
+ label="First name"
+ required
+ />
+ </CCol>
+ <CCol md={4}>
+ <CFormInput
+ type="text"
+ defaultValue="Otto"
+ feedbackValid="Looks good!"
+ id="validationCustom02"
+ label="First name"
+ required
+ />
+ </CCol>
+ <CCol md={4}>
+ <CFormLabel htmlFor="validationCustomUsername">Username</CFormLabel>
+ <CInputGroup className="has-validation">
+ <CInputGroupText>@</CInputGroupText>
+ <CFormInput
+ type="text"
+ aria-describedby="inputGroupPrependFeedback"
+ feedbackValid="Please choose a username."
+ id="validationCustomUsername"
+ required
+ />
+ </CInputGroup>
+ </CCol>
+ <CCol md={6}>
+ <CFormInput
+ type="text"
+ aria-describedby="validationCustom03Feedback"
+ feedbackInvalid="Please provide a valid city."
+ id="validationCustom03"
+ label="City"
+ required
+ />
+ </CCol>
+ <CCol md={3}>
+ <CFormSelect
+ aria-describedby="validationCustom04Feedback"
+ feedbackInvalid="Please select a valid state."
+ id="validationCustom04"
+ label="State"
+ required
+ >
+ <option disabled>Choose...</option>
+ <option>...</option>
+ </CFormSelect>
+ </CCol>
+ <CCol md={3}>
+ <CFormInput
+ type="text"
+ aria-describedby="validationCustom05Feedback"
+ feedbackInvalid="Please provide a valid zip."
+ id="validationCustom05"
+ label="Zip"
+ required
+ />
+ </CCol>
+ <CCol xs={12}>
+ <CFormCheck
+ type="checkbox"
+ id="invalidCheck"
+ label="Agree to terms and conditions"
+ required
+ />
+ <CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
+ </CCol>
+ <CCol xs={12}>
+ <CButton color="primary" type="submit">
+ Submit form
+ </CButton>
+ </CCol>
+ </CForm>
+ )
+}
diff --git a/packages/docs/content/forms/validation/examples/ValidationExample.tsx b/packages/docs/content/forms/validation/examples/ValidationExample.tsx
new file mode 100644
index 00000000..8ab9ce35
--- /dev/null
+++ b/packages/docs/content/forms/validation/examples/ValidationExample.tsx
@@ -0,0 +1,115 @@
+import React, { FormEvent, useState } from 'react'
+import {
+ CCol,
+ CButton,
+ CForm,
+ CFormCheck,
+ CFormFeedback,
+ CFormInput,
+ CFormLabel,
+ CInputGroup,
+ CInputGroupText,
+ CFormSelect,
+} from '@coreui/react'
+
+export const ValidationExample = () => {
+ const [validated, setValidated] = useState(false)
+ const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+ const form = event.currentTarget
+ if (form.checkValidity() === false) {
+ event.preventDefault()
+ event.stopPropagation()
+ }
+
+ setValidated(true)
+ }
+
+ return (
+ <CForm
+ className="row g-3 needs-validation"
+ noValidate
+ validated={validated}
+ onSubmit={handleSubmit}
+ >
+ <CCol md={4}>
+ <CFormInput
+ type="text"
+ defaultValue="Mark"
+ feedbackValid="Looks good!"
+ id="validationCustom01"
+ label="First name"
+ required
+ />
+ </CCol>
+ <CCol md={4}>
+ <CFormInput
+ type="text"
+ defaultValue="Otto"
+ feedbackValid="Looks good!"
+ id="validationCustom02"
+ label="First name"
+ required
+ />
+ </CCol>
+ <CCol md={4}>
+ <CFormLabel htmlFor="validationCustomUsername">Username</CFormLabel>
+ <CInputGroup className="has-validation">
+ <CInputGroupText>@</CInputGroupText>
+ <CFormInput
+ type="text"
+ aria-describedby="inputGroupPrependFeedback"
+ feedbackValid="Please choose a username."
+ id="validationCustomUsername"
+ required
+ />
+ </CInputGroup>
+ </CCol>
+ <CCol md={6}>
+ <CFormInput
+ type="text"
+ aria-describedby="validationCustom03Feedback"
+ feedbackInvalid="Please provide a valid city."
+ id="validationCustom03"
+ label="City"
+ required
+ />
+ </CCol>
+ <CCol md={3}>
+ <CFormSelect
+ aria-describedby="validationCustom04Feedback"
+ feedbackInvalid="Please select a valid state."
+ id="validationCustom04"
+ label="State"
+ required
+ >
+ <option disabled>Choose...</option>
+ <option>...</option>
+ </CFormSelect>
+ </CCol>
+ <CCol md={3}>
+ <CFormInput
+ type="text"
+ aria-describedby="validationCustom05Feedback"
+ feedbackInvalid="Please provide a valid zip."
+ id="validationCustom05"
+ label="Zip"
+ required
+ />
+ </CCol>
+ <CCol xs={12}>
+ <CFormCheck
+ type="checkbox"
+ id="invalidCheck"
+ label="Agree to terms and conditions"
+ required
+ />
+ <CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
+ </CCol>
+ <CCol xs={12}>
+ <CButton color="primary" type="submit">
+ Submit form
+ </CButton>
+ </CCol>
+ </CForm>
+ )
+}
diff --git a/packages/docs/content/forms/validation/examples/ValidationSupportedElementsExample.tsx b/packages/docs/content/forms/validation/examples/ValidationSupportedElementsExample.tsx
new file mode 100644
index 00000000..5d688f21
--- /dev/null
+++ b/packages/docs/content/forms/validation/examples/ValidationSupportedElementsExample.tsx
@@ -0,0 +1,69 @@
+import React from 'react'
+import { CButton, CForm, CFormCheck, CFormInput, CFormSelect, CFormTextarea } from '@coreui/react'
+
+export const ValidationSupportedElementsExample = () => {
+ return (
+ <CForm validated={true}>
+ <div className="mb-3">
+ <CFormTextarea
+ feedbackInvalid="Please enter a message in the textarea."
+ id="validationTextarea"
+ label="Textarea"
+ placeholder="Required example textarea"
+ required
+ ></CFormTextarea>
+ </div>
+ <CFormCheck
+ className="mb-3"
+ id="validationFormCheck1"
+ label="Check this checkbox"
+ feedbackInvalid="Example invalid feedback text"
+ required
+ />
+ <CFormCheck
+ type="radio"
+ name="radio-stacked"
+ id="validationFormCheck2"
+ label="Check this checkbox"
+ required
+ />
+ <CFormCheck
+ className="mb-3"
+ type="radio"
+ name="radio-stacked"
+ id="validationFormCheck3"
+ label="Or toggle this other radio"
+ feedbackInvalid="More example invalid feedback text"
+ required
+ />
+ <div className="mb-3">
+ <CFormSelect
+ feedbackInvalid="Example invalid select feedback"
+ aria-label="select example"
+ required
+ >
+ <option selected value="">
+ Open this select menu
+ </option>
+ <option value="1">One</option>
+ <option value="2">Two</option>
+ <option value="3">Three</option>
+ </CFormSelect>
+ </div>
+ <div className="mb-3">
+ <CFormInput
+ type="file"
+ id="validationTextarea"
+ feedbackInvalid="Example invalid form file feedback"
+ aria-label="file example"
+ required
+ />
+ </div>
+ <div className="mb-3">
+ <CButton type="submit" color="primary" disabled>
+ Submit form
+ </CButton>
+ </div>
+ </CForm>
+ )
+}
diff --git a/packages/docs/content/forms/validation/examples/ValidationTooltipsExample.jsx b/packages/docs/content/forms/validation/examples/ValidationTooltipsExample.jsx
new file mode 100644
index 00000000..d4a6d40a
--- /dev/null
+++ b/packages/docs/content/forms/validation/examples/ValidationTooltipsExample.jsx
@@ -0,0 +1,112 @@
+import React, { useState } from 'react'
+import {
+ CCol,
+ CButton,
+ CForm,
+ CFormInput,
+ CFormLabel,
+ CInputGroup,
+ CInputGroupText,
+ CFormSelect,
+} from '@coreui/react'
+
+export const ValidationTooltipsExample = () => {
+ const [validated, setValidated] = useState(false)
+ const handleSubmit = (event) => {
+ const form = event.currentTarget
+ if (form.checkValidity() === false) {
+ event.preventDefault()
+ event.stopPropagation()
+ }
+
+ setValidated(true)
+ }
+
+ return (
+ <CForm
+ className="row g-3 needs-validation"
+ noValidate
+ validated={validated}
+ onSubmit={handleSubmit}
+ >
+ <CCol md={4} className="position-relative">
+ <CFormInput
+ type="text"
+ defaultValue="Mark"
+ feedbackValid="Looks good!"
+ id="validationTooltip01"
+ label="First name"
+ required
+ tooltipFeedback
+ />
+ </CCol>
+ <CCol md={4} className="position-relative">
+ <CFormInput
+ type="text"
+ defaultValue="Otto"
+ feedbackValid="Looks good!"
+ id="validationTooltip02"
+ label="First name"
+ required
+ tooltipFeedback
+ />
+ </CCol>
+ <CCol md={4} className="position-relative">
+ <CFormLabel htmlFor="validationTooltipUsername">Username</CFormLabel>
+ <CInputGroup className="has-validation">
+ <CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
+ <CFormInput
+ type="text"
+ aria-describedby="inputGroupPrependFeedback"
+ feedbackInvalid="Please choose a username."
+ id="validationTooltipUsername"
+ required
+ tooltipFeedback
+ />
+ </CInputGroup>
+ </CCol>
+ <CCol md={6} className="position-relative">
+ <CFormInput
+ type="text"
+ aria-describedby="validationTooltip03Feedback"
+ feedbackInvalid="Please provide a valid city."
+ id="validationTooltip03"
+ label="City"
+ required
+ tooltipFeedback
+ />
+ </CCol>
+ <CCol md={3} className="position-relative">
+ <CFormSelect
+ aria-describedby="validationTooltip04Feedback"
+ feedbackInvalid="Please select a valid state."
+ id="validationTooltip04"
+ label="State"
+ required
+ tooltipFeedback
+ >
+ <option selected disabled value="">
+ Choose...
+ </option>
+ <option>...</option>
+ </CFormSelect>
+ </CCol>
+ <CCol md={3} className="position-relative">
+ <CFormInput
+ type="text"
+ aria-describedby="validationTooltip05Feedback"
+ feedbackInvalid="Please provide a valid zip."
+ id="validationTooltip05"
+ label="Zip"
+ required
+ tooltipFeedback
+ />
+ </CCol>
+ <CCol xs={12} className="position-relative">
+ <CButton color="primary" type="submit">
+ Submit form
+ </CButton>
+ </CCol>
+ </CForm>
+ )
+}
diff --git a/packages/docs/content/forms/validation/examples/ValidationTooltipsExample.tsx b/packages/docs/content/forms/validation/examples/ValidationTooltipsExample.tsx
new file mode 100644
index 00000000..b50e5f58
--- /dev/null
+++ b/packages/docs/content/forms/validation/examples/ValidationTooltipsExample.tsx
@@ -0,0 +1,112 @@
+import React, { FormEvent, useState } from 'react'
+import {
+ CCol,
+ CButton,
+ CForm,
+ CFormInput,
+ CFormLabel,
+ CInputGroup,
+ CInputGroupText,
+ CFormSelect,
+} from '@coreui/react'
+
+export const ValidationTooltipsExample = () => {
+ const [validated, setValidated] = useState(false)
+ const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+ const form = event.currentTarget
+ if (form.checkValidity() === false) {
+ event.preventDefault()
+ event.stopPropagation()
+ }
+
+ setValidated(true)
+ }
+
+ return (
+ <CForm
+ className="row g-3 needs-validation"
+ noValidate
+ validated={validated}
+ onSubmit={handleSubmit}
+ >
+ <CCol md={4} className="position-relative">
+ <CFormInput
+ type="text"
+ defaultValue="Mark"
+ feedbackValid="Looks good!"
+ id="validationTooltip01"
+ label="First name"
+ required
+ tooltipFeedback
+ />
+ </CCol>
+ <CCol md={4} className="position-relative">
+ <CFormInput
+ type="text"
+ defaultValue="Otto"
+ feedbackValid="Looks good!"
+ id="validationTooltip02"
+ label="First name"
+ required
+ tooltipFeedback
+ />
+ </CCol>
+ <CCol md={4} className="position-relative">
+ <CFormLabel htmlFor="validationTooltipUsername">Username</CFormLabel>
+ <CInputGroup className="has-validation">
+ <CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
+ <CFormInput
+ type="text"
+ aria-describedby="inputGroupPrependFeedback"
+ feedbackInvalid="Please choose a username."
+ id="validationTooltipUsername"
+ required
+ tooltipFeedback
+ />
+ </CInputGroup>
+ </CCol>
+ <CCol md={6} className="position-relative">
+ <CFormInput
+ type="text"
+ aria-describedby="validationTooltip03Feedback"
+ feedbackInvalid="Please provide a valid city."
+ id="validationTooltip03"
+ label="City"
+ required
+ tooltipFeedback
+ />
+ </CCol>
+ <CCol md={3} className="position-relative">
+ <CFormSelect
+ aria-describedby="validationTooltip04Feedback"
+ feedbackInvalid="Please select a valid state."
+ id="validationTooltip04"
+ label="State"
+ required
+ tooltipFeedback
+ >
+ <option selected disabled value="">
+ Choose...
+ </option>
+ <option>...</option>
+ </CFormSelect>
+ </CCol>
+ <CCol md={3} className="position-relative">
+ <CFormInput
+ type="text"
+ aria-describedby="validationTooltip05Feedback"
+ feedbackInvalid="Please provide a valid zip."
+ id="validationTooltip05"
+ label="Zip"
+ required
+ tooltipFeedback
+ />
+ </CCol>
+ <CCol xs={12} className="position-relative">
+ <CButton color="primary" type="submit">
+ Submit form
+ </CButton>
+ </CCol>
+ </CForm>
+ )
+}
diff --git a/packages/docs/content/forms/validation/index.mdx b/packages/docs/content/forms/validation/index.mdx
new file mode 100644
index 00000000..8a84a4de
--- /dev/null
+++ b/packages/docs/content/forms/validation/index.mdx
@@ -0,0 +1,80 @@
+---
+title: React Form Validation
+name: Validation
+description: Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.
+route: /forms/validation/
+---
+
+## Example
+
+For custom CoreUI form validation messages, you'll need to add the `noValidate` boolean property to your `<CForm>`. This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript. Try to submit the form below; our JavaScript will intercept the submit button and relay feedback to you. When attempting to submit, you'll see the `:invalid` and `:valid` styles applied to your form controls.
+
+Custom feedback styles apply custom colors, borders, focus styles, and background icons to better communicate feedback.
+
+import { ValidationExample } from './examples/ValidationExample.tsx'
+import ValidationExampleJS from '!!raw-loader!./examples/ValidationExample.jsx'
+import ValidationExampleTS from '!!raw-loader!./examples/ValidationExample.tsx'
+
+<ExampleSnippet
+ code={{ js: ValidationExampleJS, ts: ValidationExampleTS }}
+ componentName="React Form Validation"
+>
+ <ValidationExample />
+</ExampleSnippet>
+
+## Browser defaults
+
+Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? All good, you can use the browser defaults. Try submitting the form below. Depending on your browser and OS, you'll see a slightly different style of feedback.
+
+While these feedback styles cannot be styled with CSS, you can still customize the feedback text through JavaScript.
+
+import { ValidationBrowserDefaultsExample } from './examples/ValidationBrowserDefaultsExample.tsx'
+import ValidationBrowserDefaultsExampleTS from '!!raw-loader!./examples/ValidationBrowserDefaultsExample.tsx'
+
+<ExampleSnippet code={ValidationBrowserDefaultsExampleTS} componentName="React Form Validation">
+ <ValidationBrowserDefaultsExample />
+</ExampleSnippet>
+
+## Custom validation
+
+In case you require custom or server-side validation, you can indicate invalid and valid form fields with `invalid` and `valid` boolean properties.
+
+For invalid fields, ensure that the invalid feedback/error message is associated with the relevant form field using `aria-describedby` (noting that this attribute allows more than one `id` to be referenced, in case the field already points to additional form text).
+
+import { ValidationCustomExample } from './examples/ValidationCustomExample.tsx'
+import ValidationCustomExampleTS from '!!raw-loader!./examples/ValidationCustomExample.tsx'
+
+<ExampleSnippet code={ValidationCustomExampleTS} componentName="React Form Validation">
+ <ValidationCustomExample />
+</ExampleSnippet>
+
+## Supported elements
+
+Validation styles are available for the following form controls and components:
+
+- `<CFormCheck>`s
+- `<CFormInput>`s
+- `<CFormSelect>`s
+- `<CFormTextarea>`s
+
+import { ValidationSupportedElementsExample } from './examples/ValidationSupportedElementsExample.tsx'
+import ValidationSupportedElementsExampleTS from '!!raw-loader!./examples/ValidationSupportedElementsExample.tsx'
+
+<ExampleSnippet code={ValidationSupportedElementsExampleTS} componentName="React Form Validation">
+ <ValidationSupportedElementsExample />
+</ExampleSnippet>
+
+## Tooltips
+
+If your form layout allows it, you can swap the text for the tooltip to display validation feedback in a styled tooltip. Be sure to have a parent with `position: relative` on it for tooltip positioning. In the example below, our column classes have this already, but your project may require an alternative setup.
+
+import { ValidationTooltipsExample } from './examples/ValidationTooltipsExample.tsx'
+import ValidationTooltipsExampleJS from '!!raw-loader!./examples/ValidationTooltipsExample.jsx'
+import ValidationTooltipsExampleTS from '!!raw-loader!./examples/ValidationTooltipsExample.tsx'
+
+<ExampleSnippet
+ code={{ js: ValidationTooltipsExampleJS, ts: ValidationTooltipsExampleTS }}
+ componentName="React Form Validation"
+>
+ <ValidationTooltipsExample />
+</ExampleSnippet>
diff --git a/packages/docs/content/forms/validation/styling.mdx b/packages/docs/content/forms/validation/styling.mdx
new file mode 100644
index 00000000..4370de0b
--- /dev/null
+++ b/packages/docs/content/forms/validation/styling.mdx
@@ -0,0 +1,22 @@
+---
+title: React Form Validation Styling
+name: Form Validation Styling
+description: Learn how to customize the React form validation with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /forms/validation/
+---
+
+### CSS variables
+
+CoreUI for React components use local CSS variables for validation for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+<ScssDocs file="_root.scss" capture="root-form-validation-variables" />
+
+These variables are also color mode adaptive, meaning they change color while in dark mode.
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="form-feedback-variables" />
+
+<ScssDocs file="_variables.scss" capture="form-validation-colors" />
+
+<ScssDocs file="_variables-dark.scss" capture="form-validation-colors-dark" />
diff --git a/packages/docs/src/components/Sidebar.tsx b/packages/docs/src/components/Sidebar.tsx
index 647470f6..61684bf4 100644
--- a/packages/docs/src/components/Sidebar.tsx
+++ b/packages/docs/src/components/Sidebar.tsx
@@ -24,7 +24,7 @@ const Sidebar: FC = () => {
size="lg"
visible={context.sidebarVisible}
onVisibleChange={(value: boolean) => {
- context.setSidebarVisible && context.setSidebarVisible(value)
+ context.setSidebarVisible?.(value)
}}
>
<CSidebarBrand className="justify-content-start ps-3">
diff --git a/packages/docs/src/templates/DocsLayout.tsx b/packages/docs/src/templates/DocsLayout.tsx
index 99b256f2..d633af5b 100644
--- a/packages/docs/src/templates/DocsLayout.tsx
+++ b/packages/docs/src/templates/DocsLayout.tsx
@@ -49,6 +49,36 @@ interface OtherFrameworks {
}
}
+interface Fields {
+ slug: string
+}
+
+interface Node {
+ id: string
+ fields: Fields
+}
+
+interface Item {
+ node: Node
+}
+
+const findShortestSlug = (items: Item[]): string | undefined => {
+ if (items.length === 0) {
+ return undefined
+ }
+
+ let shortestSlug = items[0].node.fields.slug
+
+ for (const item of items) {
+ const currentSlug = item.node.fields.slug
+ if (currentSlug.length < shortestSlug.length) {
+ shortestSlug = currentSlug
+ }
+ }
+
+ return shortestSlug
+}
+
const humanize = (text: string): string => {
return text
.split('-')
@@ -57,44 +87,62 @@ const humanize = (text: string): string => {
}
const DocsNav: FC<{
- route: string
locationPathname: string
- hasNavAPI: boolean
- hasNavStyling: boolean
- hasNavAccessibility: boolean
-}> = ({ route, locationPathname, hasNavAPI, hasNavStyling, hasNavAccessibility }) => (
- <CNav className="ms-lg-4 docs-nav bg-body" variant="underline-border">
- <CNavItem>
- <CNavLink href={route} active={route === locationPathname}>
- Features
- </CNavLink>
- </CNavItem>
- {hasNavAPI && (
- <CNavItem>
- <CNavLink href={`${route}api/`} active={`${route}api/` === locationPathname}>
- API
- </CNavLink>
- </CNavItem>
- )}
- {hasNavStyling && (
- <CNavItem>
- <CNavLink href={`${route}styling/`} active={`${route}styling/` === locationPathname}>
- Styling
- </CNavLink>
- </CNavItem>
- )}
- {hasNavAccessibility && (
+ nodes: Item[]
+}> = ({ locationPathname, nodes }) => {
+ const parentPathname = findShortestSlug(nodes)
+ const hasNavAccessibility = useMemo(
+ () => nodes.some((edge) => edge.node.fields.slug.includes('accessibility')),
+ [nodes],
+ )
+ const hasNavAPI = useMemo(
+ () => nodes.some((edge) => edge.node.fields.slug.includes('api')),
+ [nodes],
+ )
+ const hasNavStyling = useMemo(
+ () => nodes.some((edge) => edge.node.fields.slug.includes('styling')),
+ [nodes],
+ )
+ return (
+ <CNav className="ms-lg-4 docs-nav bg-body" variant="underline-border">
<CNavItem>
- <CNavLink
- href={`${route}accessibility/`}
- active={`${route}accessibility/` === locationPathname}
- >
- Accessibility
+ <CNavLink href={parentPathname} active={parentPathname === locationPathname}>
+ Features
</CNavLink>
</CNavItem>
- )}
- </CNav>
-)
+ {hasNavAPI && (
+ <CNavItem>
+ <CNavLink
+ href={`${parentPathname}api/`}
+ active={`${parentPathname}api/` === locationPathname}
+ >
+ API
+ </CNavLink>
+ </CNavItem>
+ )}
+ {hasNavStyling && (
+ <CNavItem>
+ <CNavLink
+ href={`${parentPathname}styling/`}
+ active={`${parentPathname}styling/` === locationPathname}
+ >
+ Styling
+ </CNavLink>
+ </CNavItem>
+ )}
+ {hasNavAccessibility && (
+ <CNavItem>
+ <CNavLink
+ href={`${parentPathname}accessibility/`}
+ active={`${parentPathname}accessibility/` === locationPathname}
+ >
+ Accessibility
+ </CNavLink>
+ </CNavItem>
+ )}
+ </CNav>
+ )
+}
const DocsLayout: FC<DocsLayoutProps> = ({ children, data, location, pageContext }) => {
const frontmatter = pageContext.frontmatter || {}
@@ -113,19 +161,6 @@ const DocsLayout: FC<DocsLayoutProps> = ({ children, data, location, pageContext
)
const otherFrameworks: OtherFrameworks = useMemo(() => ({ ...jsonData }), [])
const hasNav = useMemo(() => data?.allMdx?.edges.length > 1, [data])
- const hasNavAccessibility = useMemo(
- () =>
- hasNav && data.allMdx.edges.some((edge) => edge.node.fields.slug.includes('accessibility')),
- [hasNav, data],
- )
- const hasNavAPI = useMemo(
- () => hasNav && data.allMdx.edges.some((edge) => edge.node.fields.slug.includes('api')),
- [hasNav, data],
- )
- const hasNavStyling = useMemo(
- () => hasNav && data.allMdx.edges.some((edge) => edge.node.fields.slug.includes('styling')),
- [hasNav, data],
- )
return (
<>
@@ -133,13 +168,7 @@ const DocsLayout: FC<DocsLayoutProps> = ({ children, data, location, pageContext
<CContainer lg className="my-md-4 flex-grow-1">
<main className="docs-main order-1">
{hasNav && (
- <DocsNav
- route={route}
- locationPathname={location.pathname}
- hasNavAPI={hasNavAPI}
- hasNavStyling={hasNavStyling}
- hasNavAccessibility={hasNavAccessibility}
- />
+ <DocsNav locationPathname={location.pathname} nodes={data?.allMdx?.edges as Item[]} />
)}
<div className="docs-intro ps-lg-4">
{name && name !== title ? (
diff --git a/packages/docs/src/utils/projectUtils.ts b/packages/docs/src/utils/projectUtils.ts
index be6041fd..1f6282b2 100644
--- a/packages/docs/src/utils/projectUtils.ts
+++ b/packages/docs/src/utils/projectUtils.ts
@@ -62,16 +62,16 @@ export const getScripts = (): Record<string, string> => {
// Function to generate index.html content
export const generateIndexHTML = (title: string): string => {
return `<!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>${title}</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- </head>
- <body>
- <div id="root"></div>
- </body>
- </html>`
+ <html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <title>${title}</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ </head>
+ <body>
+ <div id="root"></div>
+ </body>
+ </html>`
}
// Function to generate index.js or index.tsx content
@@ -89,27 +89,27 @@ export const generateIndexJS = (
const renderMethod =
templateType === 'codesandbox'
? `ReactDOM.render(
- <React.StrictMode>
- <div className="p-3">
- <${name} />
- </div>
- </React.StrictMode>,
- document.getElementById('root')
- );`
+ <React.StrictMode>
+ <div className="p-3">
+ <${name} />
+ </div>
+ </React.StrictMode>,
+ document.getElementById('root')
+);`
: `ReactDOM.createRoot(document.querySelector("#root")).render(
- <React.StrictMode>
- <div className="p-3">
- <${name} />
- </div>
- </React.StrictMode>
- );`
+ <React.StrictMode>
+ <div className="p-3">
+ <${name} />
+ </div>
+ </React.StrictMode>
+);`
return `import React from 'react';
- ${importReactDOM}
- import '@coreui/${pro ? 'coreui-pro' : 'coreui'}/dist/css/coreui.min.css';
- import { ${name} } from './${name}.${language}x';
-
- ${renderMethod}`
+${importReactDOM}
+import '@coreui/${pro ? 'coreui-pro' : 'coreui'}/dist/css/coreui.min.css';
+import { ${name} } from './${name}.${language}x';
+
+${renderMethod}`
}
// Function to generate package.json content