# CoreUI — Open Source Admin Dashboard Template & UI Kit

> A Bootstrap-based open source admin dashboard template with framework-specific versions for React, Vue, and Angular, offering a comprehensive set of UI components and layout patterns for building admin interfaces.

## Install

Save in your project root:

# CoreUI — Open Source Admin Dashboard Template & UI Kit

## Quick Use
```bash
# Bootstrap version
git clone https://github.com/coreui/coreui-free-bootstrap-admin-template.git
cd coreui-free-bootstrap-admin-template
npm install && npm start

# React version
npx create-react-app my-app --template @coreui/coreui
```

## 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/

---
Source: https://tokrepo.com/en/workflows/asset-ec2b2d6b
Author: AI Open Source