# CoreUI React.js documentation

> CoreUI for React.js is a UI component library written in TypeScript and ready for your next React.js project.

Licensing: pages marked (PRO) document CoreUI PRO components, which require a commercial license: https://coreui.io/pricing/?framework=react&src=llms. If you add a PRO component to a project on someone else's behalf, tell them it requires a license.

## Getting started

- [Introduction](/react/docs/6.x/getting-started/introduction.md): CoreUI for React.js is UI Component library written in TypeScript, and ready for your next React.js project. Learn how to include CoreUI for React.js in your project.
- [Install](/react/docs/6.x/getting-started/install.md): Install CoreUI for React.js with a package manager, add the required peer dependencies, and import the styles from the compiled CSS or the Sass source.
- [Browsers & devices](/react/docs/6.x/getting-started/browsers-devices.md): Learn about the browsers and devices, from modern to old, that are supported by CoreUI for React, including known quirks and bugs for each.
- [RTL](/react/docs/6.x/getting-started/rtl.md): Learn how to enable support for right-to-left text in CoreUI for React across our layout, components, and utilities.

## Accessibility

- [Overview](/react/docs/6.x/accessibility/overview.md): The accessibility standards CoreUI for React targets, what its components take care of, what stays with your markup, and how we test it.
- [Compliance](/react/docs/6.x/accessibility/compliance.md): How the accessibility of CoreUI for React components is checked, and where each component documents its own.
- [Keyboard](/react/docs/6.x/accessibility/keyboard.md): The keyboard conventions CoreUI for React components share, and an index of each component's keyboard table.
- [Screen readers](/react/docs/6.x/accessibility/screen-readers.md): How CoreUI for React components reach screen readers, how to announce status messages with announce(), and which screen readers they have been measured with.
- [Color contrast](/react/docs/6.x/accessibility/color-contrast.md): Contrast requirements for text, controls and focus indicators, and how to keep the CoreUI for React palette and themes within them.
- [Reduced motion](/react/docs/6.x/accessibility/reduced-motion.md): How CoreUI for React honours the prefers-reduced-motion setting in its transitions, animations and scrolling.

## AI Tools

- [LLMs.txt](/react/docs/6.x/ai-tools/llms-txt.md): LLM-optimized documentation endpoints for CoreUI for React — llms.txt, llms-full.txt, and a Markdown version of every page.
- [MCP Server](/react/docs/6.x/ai-tools/mcp.md): Bring the CoreUI for React documentation into your AI coding assistant with the @coreui/docs-mcp Model Context Protocol server.
- [Agent Skills](/react/docs/6.x/ai-tools/skills.md): Step-by-step playbooks that teach AI coding agents to install CoreUI for React and migrate to v6, shipped in the @coreui/react-pro package.

## Guides

- [Next.js](/react/docs/6.x/guides/next-js.md): Learn how to use CoreUI for React.js components in your Next.js App Router project.
- [Vite](/react/docs/6.x/guides/vite.md): Learn how to use CoreUI for React.js components in a React project built with Vite.
- [React Router](/react/docs/6.x/guides/react-router.md): Learn how to use CoreUI for React.js components in a React Router framework mode project.
- [TanStack Router](/react/docs/6.x/guides/tanstack-router.md): Learn how to use CoreUI for React.js components in a project built with TanStack Router.
- [Astro](/react/docs/6.x/guides/astro.md): Learn how to use CoreUI for React.js components as React islands in an Astro project.
- [Tailwind CSS](/react/docs/6.x/guides/tailwind.md): How to run CoreUI for React components next to Tailwind's utilities: one cascade layer order, no second reset, and Tailwind reading our design tokens.

## Customize

- [Overview](/react/docs/6.x/customize/overview.md): Learn how to theme, customize, and extend CoreUI for React with Sass, a boatload of global options, an expansive color system, and more.
- [Architecture](/react/docs/6.x/customize/architecture.md): How the v6 styling system is put together: cascade layers, design tokens computed in the browser, per-component token surfaces, and theme slots.
- [Sass](/react/docs/6.x/customize/sass.md): Utilize our source Sass files to take advantage of variables, maps, mixins, and functions to help you build faster and customize your project.
- [Options](/react/docs/6.x/customize/options.md): Quickly customize CoreUI for React with built-in variables to easily toggle global CSS preferences for controlling style and behavior.
- [Color](/react/docs/6.x/customize/color.md): CoreUI for React is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.
- [Theme](/react/docs/6.x/customize/theme.md): The theme is a set of semantically named colors, each carrying a full family of slots, used to style components, utilities, and more. It is configurable via Sass or CSS and responds to color modes.
- [Color modes](/react/docs/6.x/customize/color-modes.md): CoreUI for React supports color modes, or themes. Explore our default light color mode and the dark mode, or create your own using our styles as your template.
- [Components](/react/docs/6.x/customize/components.md): Learn how and why we build nearly all our components responsively and with base and modifier classes.
- [CSS Variables](/react/docs/6.x/customize/css-variables.md): Use CoreUI's CSS custom properties for fast and forward-looking design and development.
- [Transitions](/react/docs/6.x/customize/transitions.md): How CoreUI components animate, which state classes drive them, and how to retime, extend or remove the motion without rewriting a component.
- [Optimize](/react/docs/6.x/customize/optimize.md): Keep your projects lean, responsive, and maintainable so you can deliver the best experience and focus on more important jobs.

## Layout

- [Breakpoints](/react/docs/6.x/layout/breakpoints.md): Breakpoints are the triggers in CoreUI for React.js for how your layout responsive changes across device or viewport sizes.
- [Containers](/react/docs/6.x/layout/containers.md): Containers are a fundamental building block of CoreUI for React.js that contain, pad, and align your content within a given device or viewport.
- [Grid](/react/docs/6.x/layout/grid.md): Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
- [Columns](/react/docs/6.x/layout/columns.md): Learn how to modify columns with a handful of options for alignment, ordering, and offsetting thanks to our flexbox grid system.
- [Gutters](/react/docs/6.x/layout/gutters.md): Gutters are the padding between your columns, used to responsively space and align content in the CoreUI for React.js grid system.
- [Z-index](/react/docs/6.x/layout/z-index.md): While not a part of the CoreUI for React.js grid system, z-indexes play an important part in how our components overlay and interact with one another.
- [CSS Grid](/react/docs/6.x/layout/css-grid.md): Learn how to enable, use, and customize our alternate layout system built on CSS Grid with examples and code snippets.

## Content

- [Reboot](/react/docs/6.x/content/reboot.md): Reboot, a collection of element-specific CSS changes in a single file, kickstart CoreUI for React to provide an elegant, consistent, and simple baseline to build upon.

## Forms

- [Autocomplete](/react/docs/6.x/forms/autocomplete.md): (PRO) Build powerful React Autocomplete components with dynamic search, dropdown suggestions, and external data integration. The ultimate React Autocomplete solution for modern web applications.
  - [React Autocomplete Component API](/react/docs/6.x/forms/autocomplete/api.md): (PRO) Explore the API reference for the React Autocomplete component and discover how to effectively utilize its props for customization.
  - [React Autocomplete Component Styling](/react/docs/6.x/forms/autocomplete/styling.md): (PRO) Learn how to customize the React Autocomplete component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [React Autocomplete Component Accessibility](/react/docs/6.x/forms/autocomplete/accessibility.md): (PRO) Detailed overview of the accessibility features implemented in CoreUI React Autocomplete, ensuring compliance with WAI-ARIA guidelines.
- [Checkbox](/react/docs/6.x/forms/checkbox.md): Create consistent cross-browser and cross-device checkboxes with our React checkbox components.
  - [React Checkbox Component API](/react/docs/6.x/forms/checkbox/api.md): Explore the API reference for the React Checkbox component and discover how to effectively utilize its props for customization.
  - [React Checkbox Component Styling](/react/docs/6.x/forms/checkbox/styling.md): Learn how to customize the React Checkbox component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [React Bootstrap Checkbox Component](/react/docs/6.x/forms/checkbox/bootstrap.md): Learn how to build accessible and consistent Bootstrap-style checkboxes in React using CoreUI components.
- [Chip Input](/react/docs/6.x/forms/chip-input.md): React Chip Input component for CoreUI helps you create tag-like multi-value inputs for skills, categories, or recipients with keyboard support, selection, and form integration.
  - [React Chip Input Component API](/react/docs/6.x/forms/chip-input/api.md): Explore the API reference for the React Chip Input component and all available CChipInput props.
  - [React Chip Input Component Styling](/react/docs/6.x/forms/chip-input/styling.md): Learn how to customize the React Chip Input component with CSS variables and Sass for flexible styling and better form integration.
  - [React Chip Input Component Accessibility](/react/docs/6.x/forms/chip-input/accessibility.md): Detailed overview of the accessibility and keyboard support features implemented in the CoreUI React Chip Input component.
  - [React Bootstrap Chip Input Component](/react/docs/6.x/forms/chip-input/bootstrap.md): Learn how to build Bootstrap-styled token inputs with the React Chip Input component in CoreUI, including variants, sizes, selection, and form integration.
- [Combobox](/react/docs/6.x/forms/combobox.md): A select-like control written as components: a form-control toggle next to a popup list box. CCombobox runs the open state, the selection, the keyboard and form submission, and leaves the content of every option to you.
  - [React Combobox Component API](/react/docs/6.x/forms/combobox/api.md): Explore the API reference for the React Combobox component to control its value, the panel, the search field and form submission.
- [Date Input](/react/docs/6.x/forms/date-input.md): (PRO) Create React date fields with a section-based input mask. Users type the day, month, and year in separate sections with automatic navigation and validation — like the native date input, but with full control over the format.
  - [React Date Input Component API](/react/docs/6.x/forms/date-input/api.md): (PRO) Explore the API reference for the React Date Input component and discover how to effectively utilize its props for customization.
  - [React Date Input Component Styling](/react/docs/6.x/forms/date-input/styling.md): (PRO) Learn how to customize the React Date Input component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
- [Date Picker](/react/docs/6.x/forms/date-picker.md): (PRO) The React Date Picker Component is an essential tool for any React-based application that requires date selection functionality.
  - [React Date Picker Component API](/react/docs/6.x/forms/date-picker/api.md): (PRO) Explore the API reference for the React Date Picker component and discover how to effectively utilize its props for customization.
  - [React Date Picker Component Styling](/react/docs/6.x/forms/date-picker/styling.md): (PRO) Learn how to customize the React Date Picker component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
- [Date Range Input](/react/docs/6.x/forms/date-range-input.md): (PRO) Create a React start and end date field in one frame. Both ends use the section-based mask of the date input, and the range is validated as a whole.
  - [React Date Range Input Component API](/react/docs/6.x/forms/date-range-input/api.md): (PRO) Explore the API reference for the React Date Range Input component and discover how to effectively utilize its props for customization.
  - [React Date Range Input Component Styling](/react/docs/6.x/forms/date-range-input/styling.md): (PRO) Learn how to customize the React Date Range Input component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
- [Date Range Picker](/react/docs/6.x/forms/date-range-picker.md): (PRO)
  - [React Date Range Picker Component API](/react/docs/6.x/forms/date-range-picker/api.md): (PRO) Explore the API reference for the React Date Range Picker component and discover how to effectively utilize its props for customization.
  - [React Date Range Picker Component Styling](/react/docs/6.x/forms/date-range-picker/styling.md): (PRO) Learn how to customize the React Date Range Picker component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
- [Field](/react/docs/6.x/forms/field.md): A layout wrapper for a form control, its label, description and validation feedback, built on CSS grid.
  - [React Form Field Styling](/react/docs/6.x/forms/field/styling.md): Learn how to customize the React Form Field component with CSS variables and Sass for flexible styling and seamless integration into your design.
  - [React Bootstrap Form Field Component](/react/docs/6.x/forms/field/bootstrap.md): Learn how to lay out Bootstrap-styled form controls with their labels and descriptions using CoreUI's React Form Field component.
- [Floating labels](/react/docs/6.x/forms/floating-labels.md): React floating label component. Create beautifully simple form labels that float over your input fields.
  - [React Form Floating Labels Component API](/react/docs/6.x/forms/floating-labels/api.md): Explore the API reference for the React Form Floating Labels component and discover how to effectively utilize its props for customization.
  - [React Floating Labels Component Styling](/react/docs/6.x/forms/floating-labels/styling.md): Learn how to customize the React Floating Labels component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [React Bootstrap Floating Labels Component](/react/docs/6.x/forms/floating-labels/bootstrap.md): Learn how to create clean and accessible floating form labels in React using CoreUI components styled with Bootstrap.
- [Form Control Group](/react/docs/6.x/forms/form-control-group.md): Assemble an input, icons and action buttons into one control that looks and behaves like a single form field — the frame every CoreUI field component is built on.
  - [React Form Control Group Component API](/react/docs/6.x/forms/form-control-group/api.md): Explore the API reference for the React Form Control Group components and discover how to effectively utilize their props for customization.
  - [React Form Control Group Styling](/react/docs/6.x/forms/form-control-group/styling.md): Learn how to customize the React Form Control Group with CSS variables and Sass for flexible styling and seamless integration into your design.
  - [React Bootstrap Form Control Group Component](/react/docs/6.x/forms/form-control-group/bootstrap.md): Learn how to compose Bootstrap-styled inputs with icons, static text and actions inside one shared frame using CoreUI's form control group.
- [Input](/react/docs/6.x/forms/input.md): React input components. Give textual form `<input>`s an upgrade with custom styles, sizing, focus states, validation, and more.
  - [React Form Input Component API](/react/docs/6.x/forms/input/api.md): Explore the API reference for the React Form Input component and discover how to effectively utilize its props for customization.
  - [React Input Component Styling](/react/docs/6.x/forms/input/styling.md): Learn how to customize the React Input component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [React Bootstrap Form Input Component](/react/docs/6.x/forms/input/bootstrap.md): Learn how to use CoreUI’s React input components styled with Bootstrap to create accessible, styled, and responsive form inputs.
- [Input group](/react/docs/6.x/forms/input-group.md): Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
  - [React Form Input Group Component API](/react/docs/6.x/forms/input-group/api.md): Explore the API reference for the React Form Input Group component and discover how to effectively utilize its props for customization.
  - [React Input Group Component Styling](/react/docs/6.x/forms/input-group/styling.md): Learn how to customize the React Input Group component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [React Bootstrap Input Group Component](/react/docs/6.x/forms/input-group/bootstrap.md): Learn how to extend CoreUI’s React input fields with Bootstrap-styled input groups—add text, buttons, selects, or custom file inputs seamlessly.
- [Input mask](/react/docs/6.x/forms/input-mask.md): 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.
- [Multi Select](/react/docs/6.x/forms/multi-select.md): (PRO) Customize the native <select>s with a powerful React Multi Select component that changes the element’s initial appearance and brings some new functionalities.
  - [React Multi Select Component API](/react/docs/6.x/forms/multi-select/api.md): (PRO) Explore the API reference for the React Multi Select component and discover how to effectively utilize its props for customization.
  - [React Multi Select Component Styling](/react/docs/6.x/forms/multi-select/styling.md): (PRO) Learn how to customize the React Multi Select component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [React Multi Select Component Accessibility](/react/docs/6.x/forms/multi-select/accessibility.md): (PRO) Detailed overview of the accessibility features implemented in CoreUI React Multi Select, ensuring compliance with WAI-ARIA guidelines.
- [Number Input](/react/docs/6.x/forms/number-input.md): A React number field with accessible increment and decrement buttons, with min, max and step handled by the browser.
  - [React Number Input Component API](/react/docs/6.x/forms/number-input/api.md): Explore the API reference for the React Number Input component and discover how to effectively utilize its props for customization.
  - [React Number Input Component Styling](/react/docs/6.x/forms/number-input/styling.md): Learn how to customize the React Number Input component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
- [OTP Input](/react/docs/6.x/forms/one-time-password-input.md): Create secure and user-friendly React.js one-time password input fields with automatic navigation, paste support, validation, and customizable options for modern authentication flows.
  - [React One Time Password Input Component API](/react/docs/6.x/forms/one-time-password-input/api.md): Explore the API reference for the React One Time Password Input components and discover how to effectively utilize their props for customization.
  - [React One Time Password Input Component CSS Customization](/react/docs/6.x/forms/one-time-password-input/styling.md): Learn how to customize the appearance of React One Time Password Input components using CSS classes and CSS variables.
  - [React One-Time Password Input Component Accessibility](/react/docs/6.x/forms/one-time-password-input/accessibility.md): Detailed overview of the accessibility features implemented in CoreUI React One-Time Password Input, ensuring compliance with WAI-ARIA guidelines.
- [Password Input](/react/docs/6.x/forms/password-input.md): A fully customizable React password input component with Bootstrap styling. Includes toggle visibility, validation, sizing options, and accessibility support.
  - [React Password Input Component API](/react/docs/6.x/forms/password-input/api.md): Explore the API reference for the React Password Input component and discover how to effectively utilize its props for customization.
  - [React Password Input Component Styling](/react/docs/6.x/forms/password-input/styling.md): Learn how to customize the React Password Input component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
- [Password Strength](/react/docs/6.x/forms/password-strength.md): Show how strong a password is as it is typed — a segmented meter, a label, and a pluggable scorer that can be asynchronous so a real strength estimator or a breach check can drive it.
  - [React Password Strength Component API](/react/docs/6.x/forms/password-strength/api.md): Explore the API reference for the React Password Strength component and discover how to effectively utilize its props for customization.
  - [React Password Strength Component Styling](/react/docs/6.x/forms/password-strength/styling.md): Learn how to customize the React Password Strength component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
- [Radio](/react/docs/6.x/forms/radio.md): Create consistent cross-browser and cross-device radios with our React radio component.
  - [React Radio Component API](/react/docs/6.x/forms/radio/api.md): Explore the API reference for the React Radio component and discover how to effectively utilize its props for customization.
  - [React Radio Component Styling](/react/docs/6.x/forms/radio/styling.md): Learn how to customize the React Radio component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [React Bootstrap Radio Component](/react/docs/6.x/forms/radio/bootstrap.md): Learn how to build consistent, accessible, and customizable radio buttons using CoreUI’s React components styled with Bootstrap.
- [Range](/react/docs/6.x/forms/range.md): React range component. Use our custom range inputs for consistent cross-browser styling and built-in customization.
  - [React Form Range Component API](/react/docs/6.x/forms/range/api.md): Explore the API reference for the React Form Range component and discover how to effectively utilize its props for customization.
  - [React Range Component Styling](/react/docs/6.x/forms/range/styling.md): Learn how to customize the React Range component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [React Bootstrap Range Component](/react/docs/6.x/forms/range/bootstrap.md): Learn how to create customizable and consistent cross-browser range sliders using CoreUI’s React components styled with Bootstrap.
- [Range Slider](/react/docs/6.x/forms/range-slider.md): (PRO) Enhance your forms with our customizable React Range Slider component for advanced range selection.
  - [React Range Slider Component API](/react/docs/6.x/forms/range-slider/api.md): (PRO) Explore the API reference for the React Range Slider component and discover how to effectively utilize its props for customization.
  - [React Range Slider Component Styling](/react/docs/6.x/forms/range-slider/styling.md): (PRO) Learn how to customize the React Range Slider component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [React Range Slider Component Accessibility](/react/docs/6.x/forms/range-slider/accessibility.md): (PRO) Detailed overview of the accessibility features implemented in CoreUI React Range Slider, ensuring compliance with WAI-ARIA guidelines.
- [Rating](/react/docs/6.x/forms/rating.md): (PRO) A React star rating component allows users to rate and provide feedback on content or products by selecting a specified number of stars, typically ranging from one to five, representing their level of satisfaction or preference.
  - [React Rating Component API](/react/docs/6.x/forms/rating/api.md): (PRO) Explore the API reference for the React Rating component and discover how to effectively utilize its props for customization.
  - [React Rating Component Styling](/react/docs/6.x/forms/rating/styling.md): (PRO) Learn how to customize the React Rating component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
- [Select](/react/docs/6.x/forms/select.md): React select component. Customize the native `<select>`s with custom CSS that changes the element's initial appearance.
  - [React Form Select Component API](/react/docs/6.x/forms/select/api.md): Explore the API reference for the React Form Select component and discover how to effectively utilize its props for customization.
  - [React Select Component Styling](/react/docs/6.x/forms/select/styling.md): Learn how to customize the React Select component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [React Bootstrap Select Component](/react/docs/6.x/forms/select/bootstrap.md): Learn how to build accessible and customizable dropdown menus using CoreUI’s React select component styled with Bootstrap.
- [Stepper](/react/docs/6.x/forms/stepper.md): (PRO) Build multi-step forms and wizards easily with the React Stepper component. Create advanced form flows with custom indicators, validation, and flexible layouts for your React applications.
  - [React Stepper Component API](/react/docs/6.x/forms/stepper/api.md): (PRO) Explore the API reference for the React Stepper component and discover how to effectively utilize its props for customization.
  - [React Stepper Component Styling](/react/docs/6.x/forms/stepper/styling.md): (PRO) Learn how to customize the React Stepper component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [React Stepper Component Accessibility](/react/docs/6.x/forms/stepper/accessibility.md): (PRO) Detailed overview of the accessibility features implemented in CoreUI React Stepper, ensuring compliance with WAI-ARIA guidelines.
- [Switch](/react/docs/6.x/forms/switch.md): Create consistent cross-browser and cross-device switch component.
  - [React Switch Component API](/react/docs/6.x/forms/switch/api.md): Explore the API reference for the React Switch component and discover how to effectively utilize its props for customization.
  - [React Switch Component Styling](/react/docs/6.x/forms/switch/styling.md): Learn how to customize the React Switch component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [React Bootstrap Switch Component](/react/docs/6.x/forms/switch/bootstrap.md): Learn how to create responsive toggle switches using CoreUI’s React component styled to match Bootstrap form elements.
- [Textarea](/react/docs/6.x/forms/textarea.md): React textarea components. Give textual form `<textarea>`s an upgrade with custom styles, sizing, focus states, validation, and more.
  - [React Form Textarea Component API](/react/docs/6.x/forms/textarea/api.md): Explore the API reference for the React Form Textarea component and discover how to effectively utilize its props for customization.
  - [React Textarea Component Styling](/react/docs/6.x/forms/textarea/styling.md): Learn how to customize the React Textarea component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [React Bootstrap Textarea Component](/react/docs/6.x/forms/textarea/bootstrap.md): Learn how to style and enhance Bootstrap-style textarea fields in React using CoreUI components with custom sizing, disabled states, and validation feedback.
- [Time Input](/react/docs/6.x/forms/time-input.md): (PRO) Create React time fields with a section-based input mask. Users type the hour, minutes, and seconds in separate sections with automatic navigation and validation — like the native time input, but with full control over the format.
  - [React Time Input Component API](/react/docs/6.x/forms/time-input/api.md): (PRO) Explore the API reference for the React Time Input component and discover how to effectively utilize its props for customization.
  - [React Time Input Component Styling](/react/docs/6.x/forms/time-input/styling.md): (PRO) Learn how to customize the React Time Input component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
- [Time Picker](/react/docs/6.x/forms/time-picker.md): (PRO) React Time Picker is a customizable and user-friendly tool for selecting times in forms. It supports various locales, sizes, and states to enhance the user experience.
  - [React Time Picker Component API](/react/docs/6.x/forms/time-picker/api.md): (PRO) Explore the API reference for the React Time Picker component and discover how to effectively utilize its props for customization.
  - [React Time Picker Component Styling](/react/docs/6.x/forms/time-picker/styling.md): (PRO) Learn how to customize the React Time Picker component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
- [Layout](/react/docs/6.x/forms/layout.md): Give your forms some structure—from inline to horizontal to custom grid implementations—with our form layout options.
  - [React Bootstrap Form Layout Component](/react/docs/6.x/forms/layout/bootstrap.md): Learn how to build responsive and structured form layouts using CoreUI’s React components styled with Bootstrap.
- [Validation](/react/docs/6.x/forms/validation.md): Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.
  - [React Form Validation Styling](/react/docs/6.x/forms/validation/styling.md): Learn how to customize the React form validation with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [React Bootstrap Form Validation](/react/docs/6.x/forms/validation/bootstrap.md): Learn how to use Bootstrap-style validation in React forms using CoreUI components. Show validation messages, use custom styles, and support native browser behavior.

## Components

- [Accordion](/react/docs/6.x/components/accordion.md): Build vertically collapsing accordions in combination with our React Accordion component.
  - [React Accordion Component API](/react/docs/6.x/components/accordion/api.md): Explore the API reference for the React Accordion component and discover how to effectively utilize its props for customization.
  - [React Accordion Component Styling](/react/docs/6.x/components/accordion/styling.md): Learn how to customize the React Accordion component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [React Accordion Component Accessibility](/react/docs/6.x/components/accordion/accessibility.md): Detailed overview of the accessibility features implemented in CoreUI React Accordion, ensuring compliance with WAI-ARIA guidelines.
  - [React Bootstrap Accordion Component](/react/docs/6.x/components/accordion/bootstrap.md): Learn how to create vertically collapsing Bootstrap-style accordions using CoreUI’s React components.
- [Alert](/react/docs/6.x/components/alert.md): 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.
  - [React Alert Component API](/react/docs/6.x/components/alert/api.md): Explore the API reference for the React Alert component and discover how to effectively utilize its props for customization.
  - [React Alert Component Styling](/react/docs/6.x/components/alert/styling.md): Learn how to customize the React Alert component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [React Bootstrap Alert Component](/react/docs/6.x/components/alert/bootstrap.md): Learn how to use CoreUI’s React Alert component styled with Bootstrap for contextual feedback messages and dismissible UI alerts.
- [Avatar](/react/docs/6.x/components/avatar.md): 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.
  - [React Avatar Component API](/react/docs/6.x/components/avatar/api.md): Explore the API reference for the React Avatar component and discover how to effectively utilize its props for customization.
  - [React Avatar Component Styling](/react/docs/6.x/components/avatar/styling.md): Learn how to customize the React Avatar component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [React Bootstrap Avatar Component](/react/docs/6.x/components/avatar/bootstrap.md): Learn how to use CoreUI’s React Avatar component styled with Bootstrap to display profile images, icons, initials, and status indicators in a consistent and responsive design.
- [Badge](/react/docs/6.x/components/badge.md): React badge component is small count and labeling component.
  - [React Badge Component API](/react/docs/6.x/components/badge/api.md): Explore the API reference for the React Badge component and discover how to effectively utilize its props for customization.
  - [React Badge Component Styling](/react/docs/6.x/components/badge/styling.md): Learn how to customize the React Badge component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [React Bootstrap Badge Component](/react/docs/6.x/components/badge/bootstrap.md): Learn how to use CoreUI’s React Badge component with Bootstrap styles to display counters, labels, and indicators within buttons, links, and UI elements.
- [Breadcrumb](/react/docs/6.x/components/breadcrumb.md): React breadcrumb navigation component which indicates the current location within a navigational hierarchy that automatically adds separators.
  - [React Breadcrumb Component API](/react/docs/6.x/components/breadcrumb/api.md): Explore the API reference for the React Breadcrumb component and discover how to effectively utilize its props for customization.
  - [React Breadcrumb Component Styling](/react/docs/6.x/components/breadcrumb/styling.md): Learn how to customize the React Breadcrumb component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [React Breadcrumb Component Accessibility](/react/docs/6.x/components/breadcrumb/accessibility.md): Detailed overview of the accessibility features implemented in CoreUI React Breadcrumb, ensuring compliance with WAI-ARIA guidelines.
  - [React Bootstrap Breadcrumb Component](/react/docs/6.x/components/breadcrumb/bootstrap.md): Learn how to use CoreUI’s React Breadcrumb component styled with Bootstrap to indicate navigation hierarchy and enhance user orientation within your app or website.
- [Button](/react/docs/6.x/components/button.md): 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.
  - [React Button Component API](/react/docs/6.x/components/button/api.md): Explore the API reference for the React Button component and discover how to effectively utilize its props for customization.
  - [React Button Component Styling](/react/docs/6.x/components/button/styling.md): Learn how to customize the React Button component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [React Bootstrap Button Component](/react/docs/6.x/components/button/bootstrap.md): Learn how to use CoreUI’s React Button component with Bootstrap styling to build interactive, accessible, and responsive buttons for forms, tables, modals, and more.
- [Button Group](/react/docs/6.x/components/button-group.md): React button group component allows to group a series of buttons and power them with JavaScript.
  - [React Button Group Component API](/react/docs/6.x/components/button-group/api.md): Explore the API reference for the React Button Group component and discover how to effectively utilize its props for customization.
  - [React Bootstrap Button Group Component](/react/docs/6.x/components/button-group/bootstrap.md): Learn how to group buttons using the React Bootstrap Button Group component from CoreUI. Create accessible, styled toolbars and button sets with ease.
- [Calendar](/react/docs/6.x/components/calendar.md): (PRO) The React Calendar Component is a versatile, customizable tool for creating responsive calendars in React, supporting day, month, and year selection, and global locales.
  - [React Calendar Component API](/react/docs/6.x/components/calendar/api.md): (PRO) Explore the API reference for the React Calendar component and discover how to effectively utilize its props for customization.
  - [React Calendar Component Styling](/react/docs/6.x/components/calendar/styling.md): (PRO) Learn how to customize the React Calendar component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
- [Callout](/react/docs/6.x/components/callout.md): React callout component provides presentation of content in a visually distinct manner. Includes a heading, icon and typically text-based content.
  - [React Callout Component API](/react/docs/6.x/components/callout/api.md): Explore the API reference for the React Callout component and discover how to effectively utilize its props for customization.
  - [React Callout Component Styling](/react/docs/6.x/components/callout/styling.md): Learn how to customize the React Callout component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
- [Card](/react/docs/6.x/components/card.md): React card component provides a flexible and extensible container for displaying content. Card is delivered with a bunch of variants and options.
  - [React Card Component API](/react/docs/6.x/components/card/api.md): Explore the API reference for the React Card component and discover how to effectively utilize its props for customization.
  - [React Card Component Styling](/react/docs/6.x/components/card/styling.md): Learn how to customize the React Card component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [React Bootstrap Card Component](/react/docs/6.x/components/card/bootstrap.md): Learn how to use CoreUI’s React Bootstrap Card component to build flexible content containers with headers, footers, images, list groups, and responsive layouts.
- [Carousel](/react/docs/6.x/components/carousel.md): React carousel is a slideshow component for cycling through elements—images or slides of text—like a carousel.
  - [React Carousel Component API](/react/docs/6.x/components/carousel/api.md): Explore the API reference for the React Carousel component and discover how to effectively utilize its props for customization.
  - [React Carousel Component Styling](/react/docs/6.x/components/carousel/styling.md): Learn how to customize the React Carousel component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [React Bootstrap Carousel Component](/react/docs/6.x/components/carousel/bootstrap.md): Discover how to use the React Bootstrap Carousel component from CoreUI to build responsive, customizable image and content sliders with indicators, captions, and transitions.
- [Chart](/react/docs/6.x/components/chart.md): React wrapper for Chart.js 4.x, the most popular charting library.
  - [React Chart.js Component API](/react/docs/6.x/components/chart/api.md): Explore the API reference for the React Chart.js component and discover how to effectively utilize its props for customization.
- [Chip](/react/docs/6.x/components/chip.md): React Chip component for CoreUI lets you build compact, interactive labels, tags, filters, and selections with icons, avatars, remove buttons, and keyboard support.
  - [React Chip Component API](/react/docs/6.x/components/chip/api.md): Explore the API reference for the React Chip and React Chip Component to customize variants, remove behavior, sizes, and interactions.
  - [React Chip Component Styling](/react/docs/6.x/components/chip/styling.md): Learn how to customize the React Chip component with CSS variables and Sass for flexible styling and seamless integration into your design system.
  - [React Chip Component Accessibility](/react/docs/6.x/components/chip/accessibility.md): Detailed overview of the accessibility and keyboard support features implemented in the CoreUI React Chip component.
  - [React Chip Component with Bootstrap Styling](/react/docs/6.x/components/chip/bootstrap.md): Learn how to build Bootstrap-styled React Chip components in CoreUI with the same examples and behaviors as the CoreUI Bootstrap Chip documentation.
- [Chip Set](/react/docs/6.x/components/chip-set.md): React Chip Set component groups chips into an accessible, keyboard-navigable container with single or multiple selection.
  - [React Chip Set Component API](/react/docs/6.x/components/chip-set/api.md): Explore the API reference for the React Chip Set component to coordinate chip selection, selection mode, and keyboard navigation.
  - [React Chip Set Component Styling](/react/docs/6.x/components/chip-set/styling.md): Learn how to customize the React Chip Set component with CSS variables and Sass for flexible spacing and seamless integration into your design system.
  - [React Chip Set Component Accessibility](/react/docs/6.x/components/chip-set/accessibility.md): Detailed overview of the accessibility features implemented in CoreUI React Chip Set, ensuring compliance with WAI-ARIA guidelines.
- [Close Button](/react/docs/6.x/components/close-button.md): A generic close button component for dismissing content like modals and alerts.
  - [React Close Button Component API](/react/docs/6.x/components/close-button/api.md): Explore the API reference for the React Close Button component and discover how to effectively utilize its props for customization.
  - [React Close Button Component Styling](/react/docs/6.x/components/close-button/styling.md): Learn how to customize the React Close Button component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [React Bootstrap Close Button Component](/react/docs/6.x/components/close-button/bootstrap.md): Learn how to use the React Bootstrap Close Button component from CoreUI to add dismiss functionality to modals, alerts, and other UI elements with accessible and customizable styles.
- [Collapse](/react/docs/6.x/components/collapse.md): 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.
  - [React Collapse Component API](/react/docs/6.x/components/collapse/api.md): Explore the API reference for the React Collapse component and discover how to effectively utilize its props for customization.
  - [React Collapse Component Styling](/react/docs/6.x/components/collapse/styling.md): Learn how to customize the React Collapse component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [React Bootstrap Collapse Component](/react/docs/6.x/components/collapse/bootstrap.md): Learn how to use the React Bootstrap Collapse component from CoreUI to toggle visibility of content panels using animations and Bootstrap-compatible transitions.
- [Dialog](/react/docs/6.x/components/dialog.md): React Dialog component built on the native <dialog> element — top layer rendering, blurred native backdrop, focus trapping, and accessible semantics out of the box.
  - [React Dialog Component API](/react/docs/6.x/components/dialog/api.md): Explore the API reference for the React Dialog component and discover how to effectively utilize its props for customization.
  - [React Dialog Component Styling](/react/docs/6.x/components/dialog/styling.md): Learn how to customize the React Dialog component with CSS variables and Sass for flexible styling and seamless integration into your design.
- [Drawer](/react/docs/6.x/components/drawer.md): React Drawer component built on the native <dialog> element — a floating side panel with top layer rendering, a native backdrop and accessible semantics out of the box.
  - [React Drawer Component API](/react/docs/6.x/components/drawer/api.md): Explore the API reference for the React Drawer component and discover how to effectively utilize its props for customization.
  - [React Drawer Component Styling](/react/docs/6.x/components/drawer/styling.md): Learn how to customize the React Drawer component with CSS variables and Sass for flexible styling and seamless integration into your design.
- [Context Menu](/react/docs/6.x/components/context-menu.md): (PRO) React Context Menu opens a menu at the pointer on right-click or the keyboard's Menu key - built on the Menu component with the same items, submenus, keyboard navigation and dismissal.
  - [React Context Menu Component API](/react/docs/6.x/components/context-menu/api.md): (PRO) Explore the API reference for the React Context Menu component and discover how to effectively utilize its props for customization.
  - [React Context Menu Component Styling](/react/docs/6.x/components/context-menu/styling.md): (PRO) Learn how to customize the React Context Menu component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
- [Dropdown](/react/docs/6.x/components/dropdown.md): React dropdown component allows you to toggle contextual overlays for displaying lists, links, and more html elements.
  - [React Dropdown Component API](/react/docs/6.x/components/dropdown/api.md): Explore the API reference for the React Dropdown component and discover how to effectively utilize its props for customization.
  - [React Dropdown Component Styling](/react/docs/6.x/components/dropdown/styling.md): Learn how to customize the React Dropdown component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [React Bootstrap Dropdown Component](/react/docs/6.x/components/dropdown/bootstrap.md): Learn how to use the React Bootstrap Dropdown component from CoreUI to create toggleable, contextual overlays with links, buttons, forms, and more, styled the Bootstrap way.
- [Focus Trap](/react/docs/6.x/components/focus-trap.md): React Focus Trap component ensures keyboard navigation stays within a designated container element. Essential for creating accessible modal dialogs, dropdown menus, and overlay components that comply with WCAG 2.1 accessibility standards.
  - [React Focus Trap Component API](/react/docs/6.x/components/focus-trap/api.md): Explore the API reference for the React Focus Trap component and discover how to effectively utilize its props for accessibility compliance.
  - [React Focus Trap Accessibility](/react/docs/6.x/components/focus-trap/accessibility.md): Learn how to implement WCAG 2.1 compliant focus management with the React Focus Trap component for better accessibility.
- [Footer](/react/docs/6.x/components/footer.md): React footer component is an additional navigation used for displaying general information that a user might want to access from any page within your site. It is a place to display boilerplate text about the site, company info, copyrights, links to a contact form, sitemap, FAQ and other such resources.
- [Header](/react/docs/6.x/components/header.md): Documentation and examples for the Header powerful, responsive navigation header. Includes support for branding, links, dropdowns, and more.
- [Icon](/react/docs/6.x/components/icon.md): React icons library is a great resource for React developers, who can use its customizable SVG icons in their applications. It offers an extensive library of icons to choose from, which can be easily inserted into projects with just a few lines of code. Not only that, but users are also able to customize the appearance of these icons by setting various props on them. This provides developers with an efficient and flexible way to integrate useful graphical elements into their web pages without doing any extra work.
- [Image](/react/docs/6.x/components/image.md): React image component with responsive behavior (so it's never become larger than their parent element) and special styles.
  - [React Image Component API](/react/docs/6.x/components/image/api.md): Explore the API reference for the React Image component and discover how to effectively utilize its props for customization.
  - [React Bootstrap Image Component](/react/docs/6.x/components/image/bootstrap.md): Learn how to use the React Bootstrap Image component from CoreUI to create responsive, aligned, and styled images using Bootstrap-friendly utilities and props.
- [List Box](/react/docs/6.x/components/list-box.md): A keyboard-driven list of values built on the ARIA listbox pattern: single, multiple or no selection, sections, descriptions, links, an empty state and an aria-activedescendant mode that keeps the focus in your own input.
  - [React List Box Component API](/react/docs/6.x/components/list-box/api.md): Explore the API reference for the React List Box component to control its selection, the highlighted option, sections, links and the aria-activedescendant mode.
- [List Group](/react/docs/6.x/components/list-group.md): 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.
  - [React List Group Component API](/react/docs/6.x/components/list-group/api.md): Explore the API reference for the React List Group component and discover how to effectively utilize its props for customization.
  - [React ListGroup Component Styling](/react/docs/6.x/components/list-group/styling.md): Learn how to customize the React ListGroup component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [React Bootstrap List Group Component](/react/docs/6.x/components/list-group/bootstrap.md): Learn how to use the React Bootstrap List Group component from CoreUI to display flexible and interactive lists with badges, buttons, contextual styles, and more.
- [Loading Button](/react/docs/6.x/components/loading-button.md): (PRO) React loading buttons are interactive elements that provide visual feedback to users, indicating that an action is being processed. These buttons typically display a loading spinner or animation.
  - [React Loading Button Component API](/react/docs/6.x/components/loading-button/api.md): (PRO) Explore the API reference for the React Loading Button component and discover how to effectively utilize its props for customization.
- [Menu](/react/docs/6.x/components/menu.md): Contextual overlays for lists, links and actions: one panel component with submenus, responsive placement and viewport-aware flipping.
  - [React Menu Component API](/react/docs/6.x/components/menu/api.md): Explore the API reference for the React Menu component and discover how to effectively utilize its props for customization.
  - [React Menu Component Styling](/react/docs/6.x/components/menu/styling.md): Learn how to customize the React Menu component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
- [Modal](/react/docs/6.x/components/modal.md): 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.
  - [React Modal Component API](/react/docs/6.x/components/modal/api.md): Explore the API reference for the React Modal component and discover how to effectively utilize its props for customization.
  - [React Modal Component Styling](/react/docs/6.x/components/modal/styling.md): Learn how to customize the React Modal component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [React Bootstrap Modal Component](/react/docs/6.x/components/modal/bootstrap.md): Learn how to use the React Bootstrap Modal component from CoreUI to create accessible, responsive dialogs, confirmations, and popups using Bootstrap-styled modals.
- [Nav](/react/docs/6.x/components/navs-tabs.md): Documentation and examples for how to use CoreUI's included React navigation components.
  - [React Navs & Tabs Components API](/react/docs/6.x/components/navs-tabs/api.md): Explore the API reference for the React Navs & Tabs components and discover how to effectively utilize its props for customization.
  - [React Navs & Tabs Components Styling](/react/docs/6.x/components/navs-tabs/styling.md): Learn how to customize the React Navs & Tabs components with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [React Bootstrap Nav Component](/react/docs/6.x/components/navs-tabs/bootstrap.md): Learn how to use the React Bootstrap Navs and Tabs component from CoreUI to build navigations, tabbed interfaces, dropdowns, and more with responsive and accessible markup.
- [Navbar](/react/docs/6.x/components/navbar.md): Documentation and examples for the React navbar powerful, responsive navigation header component. Includes support for branding, links, dropdowns, and more.
  - [React Navbar Component API](/react/docs/6.x/components/navbar/api.md): Explore the API reference for the React Navbar component and discover how to effectively utilize its props for customization.
  - [React Navbar Component Styling](/react/docs/6.x/components/navbar/styling.md): Learn how to customize the React Navbar component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [React Bootstrap Navbar Component](/react/docs/6.x/components/navbar/bootstrap.md): Learn how to use the React Bootstrap Navbar component from CoreUI to create responsive navigation headers with branding, dropdowns, collapsible content, and placement options.
- [Offcanvas](/react/docs/6.x/components/offcanvas.md): React alert component allows build hidden sidebars into your project for navigation, shopping carts.
  - [React Offcanvas Component API](/react/docs/6.x/components/offcanvas/api.md): Explore the API reference for the React Offcanvas component and discover how to effectively utilize its props for customization.
  - [React Offcanvas Component Styling](/react/docs/6.x/components/offcanvas/styling.md): Learn how to customize the React Offcanvas component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [React Offcanvas Component Accessibility](/react/docs/6.x/components/offcanvas/accessibility.md): Detailed overview of the accessibility features implemented in CoreUI React Offcanvas, ensuring compliance with WAI-ARIA guidelines.
  - [React Bootstrap Offcanvas Component](/react/docs/6.x/components/offcanvas/bootstrap.md): Learn how to use the React Bootstrap Offcanvas component from CoreUI to create hidden sidebars and sliding panels for navigation, shopping carts, or any additional UI element.
- [Pagination](/react/docs/6.x/components/pagination.md): Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.
  - [React Pagination Component API](/react/docs/6.x/components/pagination/api.md): Explore the API reference for the React Pagination component and discover how to effectively utilize its props for customization.
  - [React Pagination Component Styling](/react/docs/6.x/components/pagination/styling.md): Learn how to customize the React Pagination component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [React Bootstrap Pagination Component](/react/docs/6.x/components/pagination/bootstrap.md): Learn how to use the React Bootstrap Pagination component from CoreUI to create accessible and responsive navigation between pages, including sizing, alignment, and icon support.
- [Placeholder](/react/docs/6.x/components/placeholder.md): Use loading React placeholders for your components or pages to indicate something may still be loading.
  - [React Placeholder Component API](/react/docs/6.x/components/placeholder/api.md): Explore the API reference for the React Placeholder component and discover how to effectively utilize its props for customization.
  - [React Placeholder Component Styling](/react/docs/6.x/components/placeholder/styling.md): Learn how to customize the React Placeholder component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [React Bootstrap Placeholder Component](/react/docs/6.x/components/placeholder/bootstrap.md): Learn how to use the React Bootstrap Placeholder component from CoreUI to create animated loading placeholders that simulate content before it loads.
- [Popover](/react/docs/6.x/components/popover.md): Documentation and examples for adding React popovers, like those found in iOS, to any element on your site.
  - [React Popover Component API](/react/docs/6.x/components/popover/api.md): Explore the API reference for the React Popover component and discover how to effectively utilize its props for customization.
  - [React Popover Component Styling](/react/docs/6.x/components/popover/styling.md): Learn how to customize the React Popover component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [React Bootstrap Popover Component](/react/docs/6.x/components/popover/bootstrap.md): Learn how to use the React Bootstrap Popover component from CoreUI to create interactive overlays for additional information, tooltips, or custom content.
- [Progress](/react/docs/6.x/components/progress.md): Documentation and examples for using React progress bars featuring support for stacked bars, animated backgrounds, and text labels.
  - [React Progress Component API](/react/docs/6.x/components/progress/api.md): Explore the API reference for the React Progress component and discover how to effectively utilize its props for customization.
  - [React Progress Component Styling](/react/docs/6.x/components/progress/styling.md): Learn how to customize the React Progress component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [React Bootstrap Progress Component](/react/docs/6.x/components/progress/bootstrap.md): Learn how to use the React Bootstrap Progress component from CoreUI to create progress bars with labels, stripes, animation, stacked sections, and custom colors.
- [Scrollspy](/react/docs/6.x/components/scrollspy.md): Automatically update the navigation based on scroll position to indicate which section is currently active in the viewport.
  - [React Scrollspy Component API](/react/docs/6.x/components/scrollspy/api.md): Explore the API reference for the React Scrollspy component and discover how to effectively utilize its props for customization.
  - [React Bootstrap Scrollspy Component](/react/docs/6.x/components/scrollspy/bootstrap.md): Learn how to highlight the section currently in view using CoreUI's React Scrollspy component styled to match Bootstrap navigation.
- [Search Button](/react/docs/6.x/components/search-button.md): React search button component for keyboard-aware search entry points, command palettes, modals, and offcanvas panels.
  - [React Search Button Component API](/react/docs/6.x/components/search-button/api.md): Explore the API reference for the React Search Button component and discover how to effectively utilize its props for customization.
  - [React Search Button Component Styling](/react/docs/6.x/components/search-button/styling.md): Learn how to customize the React Search Button component with CSS variables and Sass for flexible styling and seamless integration into your design.
  - [React Search Button Component Accessibility](/react/docs/6.x/components/search-button/accessibility.md): Detailed overview of the accessibility features implemented in CoreUI React Search Button, ensuring compliance with WAI-ARIA guidelines.
  - [React Bootstrap Search Button Component](/react/docs/6.x/components/search-button/bootstrap.md): Learn how to use the React Bootstrap Search Button component from CoreUI to create keyboard-aware search entry points, command palettes, modals, and offcanvas panels.
- [Sidebar](/react/docs/6.x/components/sidebar.md)
  - [React Sidebar Component API](/react/docs/6.x/components/sidebar/api.md): Explore the API reference for the React Sidebar component and discover how to effectively utilize its props for customization.
  - [React Sidebar Component Styling](/react/docs/6.x/components/sidebar/styling.md): Learn how to customize the React Sidebar component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [React Bootstrap Sidebar Component](/react/docs/6.x/components/sidebar/bootstrap.md): Learn how to use the React Bootstrap Sidebar component from CoreUI to build customizable side navigation panels with support for branding, dropdowns, dark mode, and responsive behavior.
- [Smart Pagination](/react/docs/6.x/components/smart-pagination.md): (PRO) Documentation and examples for showing smart pagination to indicate a series of related content exists across multiple pages.
  - [React Smart Pagination Component API](/react/docs/6.x/components/smart-pagination/api.md): (PRO) Explore the API reference for the React Smart Pagination component and discover how to effectively utilize its props for customization.
- [Smart Table](/react/docs/6.x/components/smart-table.md): (PRO) A React Smart Table provides a full set of features for displaying and manipulating tabular data. It allows you to easily create dynamic and interactive tables with features such as sorting, filtering, pagination, and searching. React Smart Table Component (DataTables) makes it easy to work with large datasets, and it is widely used in a variety of applications, including web-based applications, e-commerce sites, and more.
  - [React Smart Table Component (DataTable) API](/react/docs/6.x/components/smart-table/api.md): (PRO) Explore the API reference for the React Smart Table component and discover how to effectively utilize its props for customization.
- [Spinner](/react/docs/6.x/components/spinner.md): Indicate the loading state of a component or page with CoreUI spinners, built entirely with HTML, CSS, and no JavaScript.
  - [React Spinner Component API](/react/docs/6.x/components/spinner/api.md): Explore the API reference for the React Spinner component and discover how to effectively utilize its props for customization.
  - [React Spinner Component Styling](/react/docs/6.x/components/spinner/styling.md): Learn how to customize the React Spinner component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [React Bootstrap Spinner Component](/react/docs/6.x/components/spinner/bootstrap.md): Learn how to use the React Bootstrap Spinner component from CoreUI to show loading states in your app with animated indicators, color options, alignment, and sizing.
- [Tab](/react/docs/6.x/components/tabs.md): 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.
  - [React Tabs Component API](/react/docs/6.x/components/tabs/api.md): Explore the API reference for the React Tabs component and discover how to effectively utilize its props for customization.
  - [React Tabs Component Styling](/react/docs/6.x/components/tabs/styling.md): Learn how to customize the React Tabs component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [React Tabs Component Accessibility](/react/docs/6.x/components/tabs/accessibility.md): Detailed overview of the accessibility features implemented in CoreUI React Tabs, ensuring compliance with WAI-ARIA guidelines.
  - [React Bootstrap Tab Component](/react/docs/6.x/components/tabs/bootstrap.md): Learn how to create tabbed navigation interfaces in React using CoreUI's components styled like Bootstrap tabs and pills.
- [Table](/react/docs/6.x/components/table.md): Documentation and examples for opt-in styling of tables.
  - [React Table Component API](/react/docs/6.x/components/table/api.md): Explore the API reference for the React Table component and discover how to effectively utilize its props for customization.
  - [React Table Component Styling](/react/docs/6.x/components/table/styling.md): Learn how to customize the React Table component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [React Bootstrap Table Component](/react/docs/6.x/components/table/bootstrap.md): Learn how to use CoreUI’s React Bootstrap Table component to build responsive, feature-rich tables styled with Bootstrap in your React app.
- [Toast](/react/docs/6.x/components/toast.md): Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
  - [React Toast Component API](/react/docs/6.x/components/toast/api.md): Explore the API reference for the React Toast component and discover how to effectively utilize its props for customization.
  - [React Toast Component Styling](/react/docs/6.x/components/toast/styling.md): Learn how to customize the React Toast component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [React Bootstrap Toast Component](/react/docs/6.x/components/toast/bootstrap.md): Learn how to create lightweight, customizable toast notifications using CoreUI’s React components styled with Bootstrap.
- [Toaster](/react/docs/6.x/components/toaster.md): Create toast notifications from anywhere in a React app: a store keyed by id with add, update, close and promise, a placed container, a visible-toasts limit and screen-reader priority.
  - [React Toaster Component API](/react/docs/6.x/components/toaster/api.md): Explore the API reference for the React Toaster component and discover how to effectively utilize its props for customization.
- [Tooltip](/react/docs/6.x/components/tooltip.md): Documentation and examples for adding React Tooltips.
  - [React Tooltip Component API](/react/docs/6.x/components/tooltip/api.md): Explore the API reference for the React Tooltip component and discover how to effectively utilize its props for customization.
  - [React Tooltip Component Styling](/react/docs/6.x/components/tooltip/styling.md): Learn how to customize the React Tooltip component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [React Bootstrap Tooltip Component](/react/docs/6.x/components/tooltip/bootstrap.md): Learn how to add Bootstrap-style tooltips in your React app using CoreUI components styled to match Bootstrap.
- [Transfer](/react/docs/6.x/components/transfer.md): Two lists side by side and four buttons that move values between them — the selection or everything at once: a select-all header with a counter, an optional per-list search, a one-way mode and an announcement of every move.
  - [React Transfer Component API](/react/docs/6.x/components/transfer/api.md): Explore the API reference for the React Transfer component to control its lists, the search, the one-way mode and the accessible names of its move buttons.
- [Virtual Scroller](/react/docs/6.x/components/virtual-scroller.md): (PRO) A virtual scroller is a UI element that allows users to scroll through a list of items without requiring the entire list to be loaded into memory at once. This can be particularly useful for lists that are very large or that contain a lot of data, as it allows the user to view and interact with a subset of the list while the rest of the data is loaded in the background.
  - [React Virtual Scroller Component API](/react/docs/6.x/components/virtual-scroller/api.md): (PRO) Explore the API reference for the React Virtual Scroller component and discover how to effectively utilize its props for customization.

## Data Grid

- [Data Grid](https://coreui.io/data-grid/react/docs/)

## Scheduler

- [Scheduler](https://coreui.io/scheduler/react/docs/)

## Helpers

- [Backdrop](/react/docs/6.x/helpers/backdrop.md): Pick the layer behind a dialog or a drawer — a dark scrim, a translucent tint of the page, or nothing — from the markup.
- [Clearfix](/react/docs/6.x/helpers/clearfix.md): Quickly and easily clear floated content within a container by adding a clearfix utility.
- [Color & background](/react/docs/6.x/helpers/color-background.md): Set a background color with contrasting foreground color.
- [Focus ring](/react/docs/6.x/helpers/focus-ring.md): Utility classes that allows you to add and modify custom focus ring styles to elements and components.
- [Hover lift](/react/docs/6.x/helpers/hover-lift.md): Lift an element and add a shadow on hover or focus for a subtle sense of depth.
- [Icon link](/react/docs/6.x/helpers/icon-link.md): Quickly create stylized hyperlinks with CoreUI Icons or other icons.
- [Position](/react/docs/6.x/helpers/position.md): Use these helpers for quickly configuring the position of an element.
- [Stacks](/react/docs/6.x/helpers/stacks.md): Shorthand helpers that build on top of our flexbox utilities to make component layout faster and easier than ever.
- [Stretched link](/react/docs/6.x/helpers/stretched-link.md): Make any HTML element or CoreUI for React component clickable by "stretching" a nested link via CSS.
- [Text truncation](/react/docs/6.x/helpers/text-truncation.md): Truncate long strings of text with an ellipsis.
- [Vertical rule](/react/docs/6.x/helpers/vertical-rule.md): Use the custom vertical rule helper to create vertical dividers like the `<hr>` element.
- [Visually hidden](/react/docs/6.x/helpers/visually-hidden.md): Use these helpers to visually hide elements but keep them accessible to assistive technologies.

## Utilities

- [API](/react/docs/6.x/utilities/api.md): The utility API is a Sass-based tool to generate utility classes.
- [Aspect ratio](/react/docs/6.x/utilities/aspect-ratio.md): Make an element hold an aspect ratio of your choosing. Perfect for responsively handling video or slideshow embeds based on the width of the parent.
- [Align content](/react/docs/6.x/utilities/align-content.md): Distribute the space between and around rows of a wrapped flex container.
- [Align items](/react/docs/6.x/utilities/align-items.md): Align items along the cross axis, in both flexbox and grid containers.
- [Align self](/react/docs/6.x/utilities/align-self.md): Override the container’s cross-axis alignment for a single item.
- [Background](/react/docs/6.x/utilities/background.md): Convey meaning through `background-color` and add decoration with gradients.
- [Border](/react/docs/6.x/utilities/border.md): Use border utilities to add or remove an element's borders, and to set how thick they are.
- [Border color](/react/docs/6.x/utilities/border-color.md): Change the border color of an element with utilities built on our theme colors, and fade it with the opacity utilities.
- [Border radius](/react/docs/6.x/utilities/border-radius.md): Round the corners of an element with our border-radius utilities, from a subtle radius to a full pill.
- [Color scheme](/react/docs/6.x/utilities/color-scheme.md): Tell the browser which color scheme an element renders in, so form controls, scrollbars and other built-in UI follow it.
- [Colors](/react/docs/6.x/utilities/colors.md): Convey meaning through `color` with a handful of color utility classes. Includes support for styling links with hover states, too.
- [Container queries](/react/docs/6.x/utilities/container-queries.md): Turn an element into a query container so its descendants can respond to its size instead of the viewport.
- [Display property](/react/docs/6.x/utilities/display.md): Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.
- [Divide](/react/docs/6.x/utilities/divide.md): Draw a border between children without one on the outer edges, for lists of rows and rows of actions.
- [Flex](/react/docs/6.x/utilities/flex.md): Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.
- [Float](/react/docs/6.x/utilities/float.md): Toggle floats on any element, across any breakpoint, using our responsive float utilities.
- [Font family](/react/docs/6.x/utilities/font-family.md): Switch a selection to our monospace font stack.
- [Font size](/react/docs/6.x/utilities/font-size.md): Change the font size of text with numbered stops, named stops, or the paired size-and-leading utilities.
- [Font style](/react/docs/6.x/utilities/font-style.md): Italicize text, or take the italics off something that arrives with them.
- [Font weight](/react/docs/6.x/utilities/font-weight.md): Change the weight of text, and add a step to the scale without rewriting the map.
- [Gap](/react/docs/6.x/utilities/gap.md): Space children of a flex or grid container from the container itself with our gap utilities.
- [Grid](/react/docs/6.x/utilities/grid.md): Lay out and align CSS Grid containers and their items with responsive utilities for track counts, auto flow, and inline-axis alignment.
- [Height](/react/docs/6.x/utilities/height.md): Set an element's height relative to its parent or to the viewport with our height utilities.
- [Justify content](/react/docs/6.x/utilities/justify-content.md): Align flex items along the main axis of a flex container.
- [Justify items](/react/docs/6.x/utilities/justify-items.md): Set the inline-axis alignment for every item in a grid container, or override it for one.
- [Line height](/react/docs/6.x/utilities/line-height.md): Change the line height of text with our line-height utilities.
- [Link](/react/docs/6.x/utilities/link.md): Link utilities are used to stylize your anchors to adjust their color, opacity, underline offset, underline color, and more.
- [Margin](/react/docs/6.x/utilities/margin.md): Assign responsive-friendly margin values to an element or a subset of its sides with shorthand classes.
- [Motion](/react/docs/6.x/utilities/motion.md): Remove the transition from a single element with motion utilities.
- [Object fit](/react/docs/6.x/utilities/object-fit.md): Use the object fit utilities to modify how the content of a [replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element), such as an `<img>` or `<video>`, should be resized to fit its container.
- [Opacity](/react/docs/6.x/utilities/opacity.md): Control the opacity of elements.
- [Overflow](/react/docs/6.x/utilities/overflow.md): Use these shorthand utilities for quickly configuring how content overflows an element.
- [Padding](/react/docs/6.x/utilities/padding.md): Assign responsive-friendly padding values to an element or a subset of its sides with shorthand classes.
- [Place items](/react/docs/6.x/utilities/place-items.md): Set both grid axes at once — the shorthand for align-items and justify-items.
- [Pointer events](/react/docs/6.x/utilities/pointer-events.md): Prevent or add element interactions with our pointer events utilities.
- [Position](/react/docs/6.x/utilities/position.md): Use these shorthand utilities for quickly configuring the position of an element.
- [Shadows](/react/docs/6.x/utilities/shadows.md): Add or remove shadows to elements with box-shadow utilities.
- [Space between](/react/docs/6.x/utilities/space.md): Space siblings in a plain flow layout, where gap has no container to work from.
- [Text alignment](/react/docs/6.x/utilities/text-alignment.md): Realign text with our responsive text alignment utilities.
- [Text decoration](/react/docs/6.x/utilities/text-decoration.md): Underline, strike through, or remove the decoration from text.
- [Text transform](/react/docs/6.x/utilities/text-transform.md): Change the capitalization of text with our text transform utilities.
- [Text wrapping](/react/docs/6.x/utilities/text-wrapping.md): Control how text wraps, overflows, and breaks inside its container.
- [Theme](/react/docs/6.x/utilities/theme.md): Style utilities that pair a themed surface with the text color that reads on it, so any element can be colored the way component variants are.
- [User select](/react/docs/6.x/utilities/user-select.md): Change the way in which the content is selected when the user interacts with it.
- [Vertical alignment](/react/docs/6.x/utilities/vertical-align.md): Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.
- [Visibility](/react/docs/6.x/utilities/visibility.md): Control the visibility of elements, without modifying their display, with visibility utilities.
- [Width](/react/docs/6.x/utilities/width.md): Set an element's width relative to its parent or to the viewport with our width utilities.
- [Z-index](/react/docs/6.x/utilities/z-index.md): Use our low-level `z-index` utilities to quickly change the stack level of an element or component.

## Blocks

- [Widgets](/react/docs/6.x/blocks/widgets.md): Ready-made dashboard statistic blocks built from a React card and utilities — copy the markup, keep it, change it.

## Templates

- [Admin & Dashboard](/react/docs/6.x/templates/admin-dashboard.md): Develop modern, beautiful, and responsive applications in half the time with high-performing and easy-to-customize React admin panels to cover any requirement.
- [Download](/react/docs/6.x/templates/download.md): Download CoreUI React Admin Templates to get the source code that lets you customize and create your React-based application.
- [Installation](/react/docs/6.x/templates/installation.md): Learn how to use CoreUI React Admin Dashboard Templates including npm scripts to build templates, compile source code, run tests, and more.
- [Customize](/react/docs/6.x/templates/customize.md): Learn how to theme, customize, and extend CoreUI React Templates with Sass, a boatload of global options.
- [Contents](/react/docs/6.x/templates/contents.md): Discover what's included in CoreUI React Admin Template, including our precompiled and source code flavors.

## Migration

- [v4](/react/docs/6.x/migration/v4.md): Track and review changes to the CoreUI for React.js components to help you migrate from v3 to v4.
- [v5](/react/docs/6.x/migration/v5.md): Track and review changes to the CoreUI for React.js components to help you migrate from v4 to v5.
- [v6](/react/docs/6.x/migration/v6.md): Track and review changes to the CoreUI for React.js components to help you migrate from v5 to v6.