CoreUI — Open Source Admin Dashboard Template & UI Kit

Introduction

CoreUI is an open source admin dashboard template and UI component library built on Bootstrap 5. It provides ready-to-use page layouts, widgets, and over 100 components that developers can use to build admin panels and back-office applications. CoreUI ships framework-specific packages for React, Vue, and Angular alongside the vanilla Bootstrap version.

What CoreUI Does

• Provides a complete admin dashboard layout with configurable sidebar, header, footer, and breadcrumb navigation
• Ships over 100 UI components including advanced tables, charts, forms, notifications, and icons
• Offers native framework packages for React (@coreui/react), Vue (@coreui/vue), and Angular (@coreui/angular)
• Includes a free icon set with over 1,500 icons in SVG format
• Supports multiple color themes and dark mode out of the box

Architecture Overview

CoreUI is built on Bootstrap 5 with Sass as its style preprocessor. The template follows a component-based architecture where each UI element is an independent module with its own styles and JavaScript. The framework-specific versions wrap these components as React/Vue/Angular components while maintaining the same visual design. The build pipeline uses Vite or Webpack depending on the framework version, with hot module replacement for development.

Self-Hosting & Configuration

• Clone the desired template variant (Bootstrap, React, Vue, or Angular) and run npm install && npm start
• Customize the theme by modifying Sass variables in the configuration file for colors, spacing, and typography
• Toggle sidebar behavior (fixed, overlaid, minimized) through layout component props or CSS classes
• Add or remove dashboard pages by editing the router configuration and importing page components
• Integrate with a backend API by replacing static data in components with fetch calls or state management

Key Features

• Framework-native components for React, Vue, and Angular with TypeScript support
• Comprehensive icon library (CoreUI Icons) with 1,500+ free SVG icons
• Dark mode support with a CSS class toggle that applies across all components
• Responsive sidebar with mini and overlay modes for mobile and desktop layouts
• Free community edition under MIT license with optional Pro tier for advanced components

Comparison with Similar Tools

• AdminLTE — widely used Bootstrap admin template with jQuery; CoreUI is more modern with native framework components and Bootstrap 5
• Tabler — clean minimal admin template on Bootstrap 5; CoreUI offers more components and framework-specific packages
• Gentelella — free Bootstrap 3 admin template; CoreUI is actively maintained on Bootstrap 5 with better tooling
• Ant Design Pro — React admin framework with Ant Design components; CoreUI is more framework-flexible and closer to Bootstrap conventions
• Material Dashboard — Material Design admin template; CoreUI uses Bootstrap styling which is more commonly matched in corporate projects

FAQ

Q: What is the difference between CoreUI Free and CoreUI Pro? A: The free version includes the core layout, basic components, and icons. The Pro version adds advanced components (data tables, calendars, editors), additional page templates, and priority support.

Q: Can I use CoreUI with Next.js or Nuxt? A: Yes. The React components work with Next.js and the Vue components work with Nuxt. Import CoreUI components and styles in your framework's standard way.

Q: Does CoreUI support right-to-left (RTL) layouts? A: Yes. CoreUI supports RTL through Bootstrap 5's built-in RTL features. Set the dir="rtl" attribute on the HTML element and use the RTL-compiled CSS.

Q: How large is the CoreUI bundle? A: The CSS bundle is around 50 KB gzipped when using the full component set. You can reduce this by importing only the Sass partials you need.

Sources

• https://github.com/coreui/coreui-free-bootstrap-admin-template
• https://coreui.io/docs/