# CoreUI React.js documentation

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

## Getting Started

- [Introduction](/react/docs/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.
- [Accessibility](/react/docs/getting-started/accessibility.md): A brief overview of CoreUI for React features and limitations for the creation of accessible content.

## AI Tools

- [LLMs.txt](/react/docs/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/ai-tools/mcp.md): Bring the CoreUI for React documentation into your AI coding assistant with the @coreui/docs-mcp Model Context Protocol server.

## Customize

- [Sass](/react/docs/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/customize/options.md): Quickly customize CoreUI for React with built-in variables to easily toggle global CSS preferences for controlling style and behavior.
- [CSS Variables](/react/docs/customize/css-variables.md): Use CoreUI's CSS custom properties for fast and forward-looking design and development.

## Layout

- [Breakpoints](/react/docs/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/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/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/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/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.

## Forms

- [Autocomplete](/react/docs/forms/autocomplete.md): Build powerful React Autocomplete components with dynamic search, dropdown suggestions, and external data integration. The ultimate React Autocomplete solution for modern web applications.
- [Checkbox](/react/docs/forms/checkbox.md): Create consistent cross-browser and cross-device checkboxes with our React checkbox components.
- [Chip Input](/react/docs/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.
- [Date Picker](/react/docs/forms/date-picker.md): The React Date Picker Component is an essential tool for any React-based application that requires date selection functionality.
- [Date Range Picker](/react/docs/forms/date-range-picker.md)
- [Floating Labels](/react/docs/forms/floating-labels.md): React floating label component. Create beautifully simple form labels that float over your input fields.
- [Input](/react/docs/forms/input.md): React input components. Give textual form `<input>`s an upgrade with custom styles, sizing, focus states, validation, and more.
- [Input Mask](/react/docs/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.
- [Input Group](/react/docs/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.
- [Multi Select](/react/docs/forms/multi-select.md): Customize the native <select>s with a powerful React Multi Select component that changes the element’s initial appearance and brings some new functionalities.
- [OTP Input](/react/docs/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.
- [Password Input](/react/docs/forms/password-input.md): A fully customizable React password input component with Bootstrap styling. Includes toggle visibility, validation, sizing options, and accessibility support.
- [Radio](/react/docs/forms/radio.md): Create consistent cross-browser and cross-device radios with our React radio component.
- [Range](/react/docs/forms/range.md): React range component. Use our custom range inputs for consistent cross-browser styling and built-in customization.
- [Range Slider](/react/docs/forms/range-slider.md): Enhance your forms with our customizable React Range Slider component for advanced range selection.
- [Rating](/react/docs/forms/rating.md): 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.
- [Select](/react/docs/forms/select.md): React select component. Customize the native `<select>`s with custom CSS that changes the element's initial appearance.
- [Stepper](/react/docs/forms/stepper.md): 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.
- [Switch](/react/docs/forms/switch.md): Create consistent cross-browser and cross-device switch component.
- [Textarea](/react/docs/forms/textarea.md): React textarea components. Give textual form `<textarea>`s an upgrade with custom styles, sizing, focus states, validation, and more.
- [Time Picker](/react/docs/forms/time-picker.md): 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.
- [Layout](/react/docs/forms/layout.md): Give your forms some structure—from inline to horizontal to custom grid implementations—with our form layout options.
- [Validation](/react/docs/forms/validation.md): Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.

## Components

- [Accordion](/react/docs/components/accordion.md): Build vertically collapsing accordions in combination with our React Accordion component.
- [Alert](/react/docs/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.
- [Avatar](/react/docs/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.
- [Badge](/react/docs/components/badge.md): React badge component is small count and labeling component.
- [Breadcrumb](/react/docs/components/breadcrumb.md): React breadcrumb navigation component which indicates the current location within a navigational hierarchy that automatically adds separators.
- [Button](/react/docs/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.
- [Button Group](/react/docs/components/button-group.md): React button group component allows to group a series of buttons and power them with JavaScript.
- [Calendar](/react/docs/components/calendar.md): The React Calendar Component is a versatile, customizable tool for creating responsive calendars in React, supporting day, month, and year selection, and global locales.
- [Callout](/react/docs/components/callout.md): React callout component provides presentation of content in a visually distinct manner. Includes a heading, icon and typically text-based content.
- [Card](/react/docs/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.
- [Carousel](/react/docs/components/carousel.md): React carousel is a slideshow component for cycling through elements—images or slides of text—like a carousel.
- [Chart](/react/docs/components/chart.md): React wrapper for Chart.js 4.x, the most popular charting library.
- [Chip](/react/docs/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.
- [Chip Set](/react/docs/components/chip-set.md): React Chip Set component groups chips into an accessible, keyboard-navigable container with single or multiple selection.
- [Close Button](/react/docs/components/close-button.md): A generic close button component for dismissing content like modals and alerts.
- [Collapse](/react/docs/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.
- [Dropdown](/react/docs/components/dropdown.md): React dropdown component allows you to toggle contextual overlays for displaying lists, links, and more html elements.
- [Focus Trap](/react/docs/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.
- [Footer](/react/docs/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/components/header.md): Documentation and examples for the Header powerful, responsive navigation header. Includes support for branding, links, dropdowns, and more.
- [Icon](/react/docs/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/components/image.md): React image component with responsive behavior (so it's never become larger than their parent element) and special styles.
- [List Group](/react/docs/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.
- [Loading Button](/react/docs/components/loading-button.md): 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.
- [Modal](/react/docs/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.
- [Navbar](/react/docs/components/navbar.md): Documentation and examples for the React navbar powerful, responsive navigation header component. Includes support for branding, links, dropdowns, and more.
- [Navs & Tabs](/react/docs/components/navs-tabs.md): Documentation and examples for how to use CoreUI's included React navigation components.
- [Offcanvas](/react/docs/components/offcanvas.md): React alert component allows build hidden sidebars into your project for navigation, shopping carts.
- [Pagination](/react/docs/components/pagination.md): Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.
- [Placeholder](/react/docs/components/placeholder.md): Use loading react placeholders for your components or pages to indicate something may still be loading.
- [Popover](/react/docs/components/popover.md): Documentation and examples for adding React popovers, like those found in iOS, to any element on your site.
- [Progress](/react/docs/components/progress.md): Documentation and examples for using React progress bars featuring support for stacked bars, animated backgrounds, and text labels.
- [Search Button](/react/docs/components/search-button.md): React search button component for keyboard-aware search entry points, command palettes, modals, and offcanvas panels.
- [Sidebar](/react/docs/components/sidebar.md)
- [Smart Pagination](/react/docs/components/smart-pagination.md): Documentation and examples for showing smart pagination to indicate a series of related content exists across multiple pages.
- [Smart Table](/react/docs/components/smart-table.md): 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.
- [Spinner](/react/docs/components/spinner.md): Indicate the loading state of a component or page with CoreUI spinners, built entirely with HTML, CSS, and no JavaScript.
- [Table](/react/docs/components/table.md): Documentation and examples for opt-in styling of tables.
- [Tabs](/react/docs/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.
- [Toast](/react/docs/components/toast.md): Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
- [Tooltip](/react/docs/components/tooltip.md): Documentation and examples for adding React Tooltips.
- [Virtual Scroller](/react/docs/components/virtual-scroller.md): 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.
- [Widgets](/react/docs/components/widgets.md): React widget components give information about the app statistics.

## Templates

- [Admin & Dashboard](/react/docs/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/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/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/templates/customize.md): Learn how to theme, customize, and extend CoreUI React Templates with Sass, a boatload of global options.
- [Contents](/react/docs/templates/contents.md): Discover what's included in CoreUI React Admin Template, including our precompiled and source code flavors.

## Migration

- [v4](/react/docs/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/migration/v5.md): Track and review changes to the CoreUI for React.js components to help you migrate from v4 to v5.