# coreui/coreui-free-react-admin-template

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/coreui-coreui-free-react-admin-template).**

4,940 stars · 2,538 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/coreui/coreui-free-react-admin-template
- Homepage: https://coreui.io/product/free-react-admin-template/
- awesome-repositories: https://awesome-repositories.com/repository/coreui-coreui-free-react-admin-template.md

## Topics

`admin` `admin-dashboard` `admin-panel` `admin-template` `bootstrap` `bootstrap-5` `bootstrap-theme` `bootstrap5` `css` `dashboard` `dashboard-templates` `html5` `react` `react-admin` `react-admin-dashboard` `react-admin-panel` `react-admin-template` `react-app` `reactjs` `scss`

## Description

This project is a React-based administrative template and UI kit designed for building dashboards. It provides a comprehensive collection of pre-styled layouts, an accessible component library, and a Sass-based UI framework for creating administrative interfaces.

The template is specifically structured as an AI-optimized project, utilizing coding patterns and organization designed to help AI assistants generate consistent, production-ready React code. It features a flexible styling system using Sass variables and CSS custom properties to support customizable light and dark themes.

The kit covers a wide range of interface capabilities, including data visualization widgets, interactive tables with sorting and pagination, and complex form elements like multi-step wizards. It includes high-level navigation systems such as sidebars and breadcrumbs, as well as structural components like responsive grids, modal dialogs, and accessible calendar interfaces.

## Tags

### Artificial Intelligence & ML

- [AI-Optimized Code Structuring](https://awesome-repositories.com/f/artificial-intelligence-ml/ai-coding-assistants/ai-powered-code-generation/ai-optimized-code-structuring.md) — Provides a structured React codebase optimized for AI-driven code generation and consistency. ([source](https://coreui.io/product/free-react-admin-template/))

### User Interface & Experience

- [Admin Dashboard Frameworks](https://awesome-repositories.com/f/user-interface-experience/admin-dashboard-frameworks.md) — Provides a comprehensive library of pre-built layout components and utility classes for constructing administrative dashboards. ([source](https://coreui.io/product/angular-dashboard-template/))
- [React-Based Admin Interfaces](https://awesome-repositories.com/f/user-interface-experience/admin-interface-components/react-based-admin-interfaces.md) — Ships a collection of pre-styled dashboard layouts and UI components for administrative interfaces built with React.
- [Dynamic Theme Switching](https://awesome-repositories.com/f/user-interface-experience/color-themes/theme-application-switching/dynamic-theme-switching.md) — Enables swapping between different visual color schemes, such as light and dark modes, at runtime. ([source](https://coreui.io/product/free-react-admin-template/))
- [Component-Based UI Libraries](https://awesome-repositories.com/f/user-interface-experience/component-libraries/component-based-ui-libraries.md) — Provides a comprehensive collection of reusable and customizable layout elements for building admin dashboards.
- [CSS Variable Theming](https://awesome-repositories.com/f/user-interface-experience/css-variable-theming.md) — Toggles visual modes and themes by updating root-level CSS custom properties.
- [Layout Containers](https://awesome-repositories.com/f/user-interface-experience/layout-containers.md) — Provides structural UI elements for organizing page content into flexible and responsive containers. ([source](https://coreui.io/react/docs/components/card/))
- [Modal Dialogs](https://awesome-repositories.com/f/user-interface-experience/modal-dialogs.md) — Implements overlay components for focused user interaction via popup windows with configurable sizes. ([source](https://coreui.io/react/docs/components/modal/))
- [Navigation Menus](https://awesome-repositories.com/f/user-interface-experience/navigation-menus.md) — Creates flexible lists of links using tabs or pills to guide users through the interface. ([source](https://coreui.io/react/docs/components/navs-tabs/))
- [React UI Component Libraries](https://awesome-repositories.com/f/user-interface-experience/react-ui-component-libraries.md) — Offers a library of accessible form inputs, navigation menus, and overlays built with WAI-ARIA standards for React.
- [Responsive Grid Layouts](https://awesome-repositories.com/f/user-interface-experience/responsive-grid-layouts.md) — Implements a flexible column-based system that adjusts interface structures automatically across different screen breakpoints.
- [Component Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling.md) — Provides frameworks for applying and managing visual styles and CSS properties within UI components. ([source](https://coreui.io/react/docs/getting-started/introduction/))
- [UI Kits](https://awesome-repositories.com/f/user-interface-experience/ui-kits.md) — Provides a comprehensive set of responsive layout elements, data tables, and charts for visualizing metrics.
- [Alerts & Notifications](https://awesome-repositories.com/f/user-interface-experience/alerts-notifications.md) — Provides UI components for displaying transient, customizable notification messages and alerts. ([source](https://coreui.io/react/docs/components/toast/))
- [Action Buttons](https://awesome-repositories.com/f/user-interface-experience/button-styles/action-buttons.md) — Ships customizable action buttons with various styles and sizes for forms and tables. ([source](https://coreui.io/react/docs/components/button/))
- [Action Toolbars](https://awesome-repositories.com/f/user-interface-experience/buttons/action-toolbars.md) — Implements complex horizontal bars combining button groups and input fields for administrative actions. ([source](https://coreui.io/react/docs/components/button-group/))
- [Button Groups](https://awesome-repositories.com/f/user-interface-experience/buttons/button-groups.md) — Ships layout components that organize related action buttons into unified, seamless visual groups. ([source](https://coreui.io/react/docs/components/button-group/))
- [Calendars](https://awesome-repositories.com/f/user-interface-experience/calendars.md) — Provides UI components for date selection, event scheduling, and various calendar views with locale support. ([source](https://coreui.io/react/docs/components/calendar/))
- [Chip Groups](https://awesome-repositories.com/f/user-interface-experience/chip-groups.md) — Provides containers for managing collections of selectable chips with support for keyboard navigation and roving focus. ([source](https://coreui.io/react/docs/components/chip-set/))
- [Collapsible Content Toggles](https://awesome-repositories.com/f/user-interface-experience/collapsible-content-toggles.md) — Includes UI elements that allow users to show or hide sections of content via transitions. ([source](https://coreui.io/react/docs/components/collapse/))
- [Collapsible Content Stacks](https://awesome-repositories.com/f/user-interface-experience/collapsible-ui-components/collapsible-content-stacks.md) — Organizes content into vertical arrangements of collapsible sections that users can independently expand or hide. ([source](https://coreui.io/react/docs/components/accordion/))
- [Color Schemes](https://awesome-repositories.com/f/user-interface-experience/color-schemes.md) — Defines and applies color palettes that respect the user's system-level appearance preferences. ([source](https://coreui.io/react/docs/customize/sass/))
- [Custom Color Theme Definitions](https://awesome-repositories.com/f/user-interface-experience/color-themes/custom-color-theme-definitions.md) — Provides capabilities for defining custom themes by declaring CSS custom properties for colors and spacing. ([source](https://coreui.io/react/docs/customize/css-variables/))
- [Tooltips](https://awesome-repositories.com/f/user-interface-experience/content-display-components/tooltips.md) — Implements informational text bubbles that appear when a user hovers over or focuses an element. ([source](https://coreui.io/react/docs/components/tooltip/))
- [Data Visualization Widgets](https://awesome-repositories.com/f/user-interface-experience/data-visualization-widgets.md) — Renders visual widgets that summarize key data and metrics for an immediate performance overview. ([source](https://coreui.io/react/docs/components/widgets/))
- [Dropdowns](https://awesome-repositories.com/f/user-interface-experience/dropdowns.md) — Toggles contextual overlays to display lists of links or forms with configurable alignment. ([source](https://coreui.io/react/docs/components/dropdown/))
- [Virtualized List Rendering](https://awesome-repositories.com/f/user-interface-experience/dynamic-list-rendering/virtualized-list-rendering.md) — Optimizes the display of large datasets by rendering only the visible subset of items during scrolling.
- [File Inputs](https://awesome-repositories.com/f/user-interface-experience/file-inputs.md) — Provides specialized input fields that allow users to select and upload local files. ([source](https://coreui.io/react/docs/forms/input/))
- [Checkbox Inputs](https://awesome-repositories.com/f/user-interface-experience/form-input-components/checkbox-inputs.md) — Renders toggle switches for boolean selections using standard checkbox styles or button-like variants. ([source](https://coreui.io/react/docs/forms/checkbox/))
- [Form Wizards](https://awesome-repositories.com/f/user-interface-experience/form-wizards.md) — Implements sequential flow content panes with navigation indicators to guide users through complex data entry. ([source](https://coreui.io/react/docs/forms/stepper/))
- [Formatted Input Fields](https://awesome-repositories.com/f/user-interface-experience/formatted-input-fields.md) — Enforces specific patterns for data entry to ensure consistency and accuracy within input fields. ([source](https://coreui.io/react/docs/forms/input-mask/))
- [Information Highlighting](https://awesome-repositories.com/f/user-interface-experience/information-highlighting.md) — Uses visual cues like colors and icons in distinct containers to emphasize specific information. ([source](https://coreui.io/react/docs/components/callout/))
- [List Group Components](https://awesome-repositories.com/f/user-interface-experience/item-lists/list-group-components.md) — Displays series of content in vertical or horizontal list groups with interactive links and badges. ([source](https://coreui.io/react/docs/components/list-group/))
- [Navigation Hierarchies](https://awesome-repositories.com/f/user-interface-experience/links/categorization/navigation-hierarchies.md) — Organizes links into expandable hierarchies to manage complex application structures. ([source](https://coreui.io/react/docs/components/sidebar/))
- [Breadcrumb Navigations](https://awesome-repositories.com/f/user-interface-experience/links/categorization/navigation-hierarchies/breadcrumb-navigations.md) — Displays the current location within a navigational hierarchy using separators to help users orient themselves. ([source](https://coreui.io/react/docs/components/breadcrumb/))
- [Loading Skeletons](https://awesome-repositories.com/f/user-interface-experience/loading-skeletons.md) — Provides placeholder components that signal loading states while content is being fetched. ([source](https://coreui.io/react/docs/components/placeholder/))
- [Navigation Bars](https://awesome-repositories.com/f/user-interface-experience/navigation-components/navigation-bars.md) — Fixes headers to the viewport edges or sticks them to the page top during scrolling. ([source](https://coreui.io/react/docs/components/navbar/))
- [Navigation Headers](https://awesome-repositories.com/f/user-interface-experience/navigation-headers.md) — Renders responsive headers containing branding and links for application navigation. ([source](https://coreui.io/react/docs/components/navbar/))
- [Admin Menu Organizers](https://awesome-repositories.com/f/user-interface-experience/navigation-menu-management/admin-menu-organizers.md) — Deno UI nests additional navigation options within a collapsible menu to organize complex link sets. ([source](https://coreui.io/react/docs/components/navs-tabs/))
- [Pagination Interfaces](https://awesome-repositories.com/f/user-interface-experience/pagination-interfaces.md) — Creates connected navigation links to organize content across multiple pages with active states. ([source](https://coreui.io/react/docs/components/pagination/))
- [Popovers](https://awesome-repositories.com/f/user-interface-experience/popovers.md) — Ships floating content containers triggered by user interaction to provide additional contextual information. ([source](https://coreui.io/react/docs/components/popover/))
- [Route-Synced Navigation State](https://awesome-repositories.com/f/user-interface-experience/programmatic-section-navigation/route-synced-navigation-state.md) — Deno UI synchronizes menu expansion and collapse with the current application route. ([source](https://coreui.io/react/docs/components/sidebar/))
- [Restricted Selection Inputs](https://awesome-repositories.com/f/user-interface-experience/select-dropdowns/option-grouping/single-selection-option-groups/restricted-selection-inputs.md) — Forces users to select only from a provided list to prevent custom value entry. ([source](https://coreui.io/react/docs/forms/autocomplete/))
- [Sidebars](https://awesome-repositories.com/f/user-interface-experience/sidebars.md) — Renders a slide-out panel for navigation that toggles based on visibility or screen size. ([source](https://coreui.io/react/docs/components/offcanvas/))
- [Structured Data Tables](https://awesome-repositories.com/f/user-interface-experience/structured-data-tables.md) — Renders structured data in tabular formats with configurable alignment and compact sizing. ([source](https://coreui.io/react/docs/components/table/))
- [Global CSS Stylings](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/css-utility-libraries/css-utilities/global-css-stylings.md) — Includes utilities for applying global style overrides and baseline resets to HTML elements via variables. ([source](https://coreui.io/react/docs/customize/options/))
- [Sass Abstractions](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/component-style-customization/css-variable-styling-systems/sass-abstractions.md) — Uses Sass mixins and variables to wrap complex CSS properties into reusable styling abstractions. ([source](https://coreui.io/product/angular-dashboard-template/))
- [Tabbed Interfaces](https://awesome-repositories.com/f/user-interface-experience/tabbed-interfaces.md) — Toggles between different content panels using ARIA roles for accessible tabbed navigation. ([source](https://coreui.io/react/docs/components/navs-tabs/))
- [Tabbed Navigation](https://awesome-repositories.com/f/user-interface-experience/tabbed-navigation.md) — Implements an accessible interface for switching between different content views using selectable tabs. ([source](https://coreui.io/react/docs/components/tabs/))
- [Route Synchronization](https://awesome-repositories.com/f/user-interface-experience/tabbed-navigation/route-synchronization.md) — Deno UI syncs the active tab with application routing by controlling the active item and change events. ([source](https://coreui.io/react/docs/components/tabs/))
- [Responsive Table Containers](https://awesome-repositories.com/f/user-interface-experience/table-components/responsive-table-containers.md) — Wraps table content in horizontally scrollable containers to prevent layout overflow on small screens. ([source](https://coreui.io/react/docs/components/table/))
- [CSS Variable Override Themes](https://awesome-repositories.com/f/user-interface-experience/terminal-user-interfaces/visual-styling-presentation/interface-appearance-customization/component-appearance-customizers/application-appearance-customizers/css-variable-override-themes.md) — Allows customization of application appearance by overriding CSS variables for colors, fonts, and styles. ([source](https://coreui.io/react/docs/customize/sass/))
- [Autocomplete Inputs](https://awesome-repositories.com/f/user-interface-experience/text-input-widgets/autocomplete-inputs.md) — Provides text inputs that suggest matching options from a data source as the user types. ([source](https://coreui.io/react/docs/forms/autocomplete/))
- [Feedback and Overlay Components](https://awesome-repositories.com/f/user-interface-experience/ui-components/feedback-overlay-components.md) — Ships contextual UI components that use color-coding and icons to provide feedback on user operations. ([source](https://coreui.io/react/docs/components/alert/))
- [UI Label Tags](https://awesome-repositories.com/f/user-interface-experience/ui-label-tags.md) — Provides compact visual indicators for categorizing content and displaying metadata or status labels. ([source](https://coreui.io/react/docs/components/chip/))
- [UI Status Indicators](https://awesome-repositories.com/f/user-interface-experience/ui-status-indicators.md) — Renders small labels and counters with configurable colors to represent process or environment states. ([source](https://coreui.io/react/docs/components/badge/))
- [WAI-ARIA Frameworks](https://awesome-repositories.com/f/user-interface-experience/wai-aria-frameworks.md) — Ensures interactive elements follow WAI-ARIA roles and standards for keyboard and screen reader compatibility. ([source](https://coreui.io/react/docs/getting-started/accessibility/))

### Data & Databases

- [Interactive Tabular Displays](https://awesome-repositories.com/f/data-databases/tabular-data-frameworks/tabular-data-management-interfaces/tabular-display-management/interactive-tabular-displays.md) — Provides interactive tables with built-in sorting, filtering, pagination, and search for managing structured datasets. ([source](https://coreui.io/react/docs/components/smart-table/))
- [Remote Data Fetching](https://awesome-repositories.com/f/data-databases/remote-data-fetching.md) — Loads table records from remote servers to maintain browser performance when handling large datasets. ([source](https://coreui.io/react/docs/components/smart-table/))

### Web Development

- [Responsive Layout Adaptation](https://awesome-repositories.com/f/web-development/responsive-layout-adaptation.md) — Implements mechanisms for overriding layout settings based on viewport size to ensure a consistent experience across devices. ([source](https://coreui.io/product/angular-dashboard-template/))
- [Sass Design Systems](https://awesome-repositories.com/f/web-development/web-infrastructure-deployment/asset-management-build-tools/asset-lifecycle-orchestration/asset-pipelines/css-preprocessors/sass-design-systems.md) — Utilizes Sass variables and mixins to manage a consistent design system across colors and breakpoints.

### Part of an Awesome List

- [Charts and Visualization](https://awesome-repositories.com/f/awesome-lists/ai/charts-and-visualization.md) — Renders line, bar, pie, and scatter charts to visualize trends and multi-dimensional comparisons. ([source](https://coreui.io/react/docs/components/chart/))
- [Responsive Grids](https://awesome-repositories.com/f/awesome-lists/devtools/card-ui/responsive-grids.md) — Organizes cards into responsive grids to control columns per row across different device breakpoints. ([source](https://coreui.io/react/docs/components/card/))
- [Responsive Adaptations](https://awesome-repositories.com/f/awesome-lists/devtools/drawer-navigation/responsive-adaptations.md) — Transforms navigation links into a toggle button or offcanvas drawer at specific screen breakpoints. ([source](https://coreui.io/react/docs/components/navbar/))
- [Collapsible Navigation Sidebars](https://awesome-repositories.com/f/awesome-lists/devtools/navigation-and-menus/collapsible-navigation-sidebars.md) — Renders side-navigation containers with configurable placement and visibility states for different devices. ([source](https://coreui.io/react/docs/components/sidebar/))

### Mobile Development

- [Route-Synced States](https://awesome-repositories.com/f/mobile-development/navigation-routing/routing/state-driven-navigation/route-synced-states.md) — Coordinates the active state of menus and tabs with the current application URL.