DOCSEARCHbyAlgolia
Submit Docs

CoreUI Free React Admin Template

repository·main·Indexed 26 days ago

https://github.com/coreui/coreui-free-react-admin-template

A lightweight, high-performance dashboard template built for React 19, CoreUI React components, and Bootstrap 5. It features a modular architecture using Redux for state management, HashRouter for client-side routing, and Vite for builds. The template is optimized for AI-assisted development with dedicated context files (.cursorrules, ARCHITECTURE.md, DEVELOPMENT.md) and detailed JSDoc documentation.

Tokens
8.3K
Snippets
23
Records
41
Agent score
88%

What's inside coreui-free-react-admin-template

  1. CoreUI Free React Admin Template Architecture Overview

    main

    The CoreUI Free React Admin Template is a professional admin dashboard built using React 19, CoreUI React components, and Bootstrap 5. It is designed as a Single Page Application (SPA) with the following key characteristics:

    • Routing: Client-side routing using HashRouter (via react-router-dom).
    • State Management: Global state is managed via Redux, while component-level state uses React Hooks (useState, useReducer).
    • Theming: Supports Dark, Light, and Automatic theme detection.
    • Performance: Utilizes lazy loading and code splitting for optimal loading speeds.
    • Layout: Uses a modular component-based architecture with a distinction between Public Routes (e.g., Login, Register) and Protected Routes (wrapped in DefaultLayout).

  2. Project structure overview

    main

    The template is organized into several key directories:

    • public/: Static files like favicon.ico and manifest.json.
    • src/: The project root containing:
      • assets/: Images, icons, and other media.
      • components/: Common components (header, footer, sidebar, etc.).
      • layouts/: Layout containers.
      • scss/: SCSS style files.
      • views/: Application views.
      • _nav.jsx: Sidebar navigation configuration.
      • App.jsx: Main application component.
      • index.jsx: Entry point.
      • routes.js: Routing configuration.
      • store.js: Example template state management.
    • index.html: The HTML template.
    • vite.config.mjs: Vite configuration file.

  4. Understand the CoreUI Layout System

    main

    The application uses a hierarchical layout system to provide a consistent user experience:

    • DefaultLayout (layout/DefaultLayout.jsx): The primary wrapper for authenticated views. It composes the sidebar, header, content area, and footer.
    • AppSidebar (components/AppSidebar.jsx): A collapsible navigation sidebar integrated with Redux for visibility state.
    • AppSidebarNav (components/AppSidebarNav.jsx): A recursive renderer for nested menu items using CoreUI components like CNavItem, CNavGroup, and CNavTitle.
    • AppHeader (components/AppHeader.jsx): A fixed top bar containing the sidebar toggle, breadcrumbs, user menu, and theme switcher.
    • AppContent: The main area where routed view components are rendered.

  5. Project structure and key files

    main

    The project follows a specific organization. Always edit source files in src/, never modify compiled files in build/.

    Directory Map

    • src/assets/: Static assets (images, logos)
    • src/components/: Reusable UI components
    • src/layout/: Layout wrapper components
    • src/views/: Page/route components
    • src/scss/: Global styles and themes

    Key Configuration Files

    • src/App.jsx: Main application component, routing setup, and theme initialization.
    • src/index.jsx: Application entry point (ReactDOM render, Provider setup, store connection).
    • src/routes.js: Array of route configurations for protected routes.
    • src/_nav.jsx: Navigation menu structure for the sidebar.
    • src/store.js: Redux store setup for global state (theme, sidebar).

  6. Manage global state with Redux

    main

    Use useSelector to read values from the global state and useDispatch to trigger state updates via dispatched actions.

    Reading state:

    import { useSelector } from 'react-redux'

const MyComponent = () => {
  const theme = useSelector((state) => state.theme)
  const sidebarShow = useSelector((state) => state.sidebarShow)

  return <div>Theme: {theme}</div>
}

    Updating state:

    import { useDispatch } from 'react-redux'

const MyComponent = () => {
  const dispatch = useDispatch()

  const handleClick = () => {
    dispatch({ type: 'set', theme: 'dark' })
  }

  return <CButton onClick={handleClick}>Dark Mode</CButton>
}
    import { useSelector } from 'react-redux'

const MyComponent = () => {
  const theme = useSelector((state) => state.theme)
  const sidebarShow = useSelector((state) => state.sidebarShow)

  return <div>Theme: {theme}</div>
}

  7. Create functional components with Hooks

    main

    Components should be functional and use React Hooks. It is recommended to use PropTypes for runtime type checking and provide default props.

    import React, { useState, useEffect } from 'react'
import PropTypes from 'prop-types'
import { CCard, CCardBody, CCardHeader } from '@coreui/react'

/**
 * UserCard component displays user information in a card format
 * @param {Object} props - Component props
 * @param {string} props.name - User's full name
 * @param {string} props.email - User's email address
 * @param {string} [props.avatar] - Optional avatar URL
 */
const UserCard = ({ name, email, avatar }) => {
  const [isLoading, setIsLoading] = useState(false)

  useEffect(() => {
    // Component lifecycle logic
    console.log('UserCard mounted')

    return () => {
      // Cleanup logic
      console.log('UserCard unmounted')
    }
  }, [])

  return (
    <CCard>
      <CCardHeader>{name}</CCardHeader>
      <CCardBody>
        {avatar && <img src={avatar} alt={name} />}
        <p>{email}</p>
      </CCardBody>
    </CCard>
  )
}

UserCard.propTypes = {
  name: PropTypes.string.isRequired,
  email: PropTypes.string.isRequired,
  avatar: PropTypes.string,
}

UserCard.defaultProps = {
  avatar: null,
}

export default UserCard

  8. Understand the Project Directory Structure

    main

    The project follows a modular structure to separate concerns between assets, reusable components, layouts, and views:

    • src/assets/: Static assets like brand logos and images.
    • src/components/: Reusable UI components (e.g., AppHeader, AppSidebar, AppBreadcrumb).
    • src/layout/: Layout wrappers, primarily DefaultLayout.jsx for protected routes.
    • src/views/: Page-level components. Organized by feature (e.g., dashboard/, forms/, pages/login/).
    • src/scss/: Global styles, including style.scss (CoreUI imports) and _custom.scss (user overrides).
    • src/routes.js: Centralized route definitions.
    • src/_nav.jsx: Configuration for the sidebar navigation.
    • src/store.js: Redux store configuration.
    • src/App.jsx: The root application component containing HashRouter and theme management.

  9. Configure Routing with React Router DOM v7

    main

    The project uses HashRouter for client-side routing, which is ideal for static hosting (like GitHub Pages) as it doesn't require server-side configuration.

    Routes are typically defined in App.jsx for top-level structure (like Login/Register) and in a routes.js file for views wrapped in the DefaultLayout.

    <HashRouter>
  <Routes>
    <Route path="/login" element={<Login />} />
    <Route path="/register" element={<Register />} />
    <Route path="/404" element={<Page404 />} />
    <Route path="/500" element={<Page500 />} />
    <Route path="*" element={<DefaultLayout />} />
  </Routes>
</HashRouter>

  10. Customize Styles with Sass and CSS Variables

    main

    Sass Overrides

    Custom styles and variable overrides should be placed in src/scss/_custom.scss. The main entry point is src/scss/style.scss.

    Using CSS Variables

    CoreUI uses CSS custom properties for theming. You can use these directly in your components:

    <div style={{ backgroundColor: 'var(--cui-primary)' }}>Content</div>

  12. Implement forms and validation

    main

    Use CoreUI form components (CForm, CFormInput, CFormLabel, CFormTextarea) combined with React state for controlled components.

    HTML5 Validation: Use standard attributes like required and pattern on CFormInput.

    Custom Validation Pattern: Maintain an errors state object and a validate function that checks your formData before submission.

    Example Form Structure:

    import { CButton, CCard, CCardBody, CCardHeader, CCol, CForm, CFormInput, CFormLabel, CFormTextarea, CRow } from '@coreui/react'

const MyForm = () => {
  // ... state management for formData and validated status
  
  return (
    <CCard>
      <CCardHeader>Contact Form</CCardHeader>
      <CCardBody>
        <CForm className="row g-3" noValidate validated={validated} onSubmit={handleSubmit}>
          <CCol md={6}>
            <CFormLabel htmlFor="name">Name</CFormLabel>
            <CFormInput id="name" name="name" value={formData.name} onChange={handleChange} required />
          </CCol>
          {/* ... other fields ... */}
          <CCol xs={12}>
            <CButton color="primary" type="submit">Submit</CButton>
          </CCol>
        </CForm>
      </CCardBody>
    </CCard>
  )
}
    <CForm
  className="row g-3"
  noValidate
  validated={validated}
  onSubmit={handleSubmit}
>