Starter Kits

This guide shows the available layouts and pages in the Metronic React starter kit.

What are Starter Kits?

Starter Kits in Metronic are ready-to-use, simple versions that give developers a good starting point. They are the simplified version of Metronic with only the most important parts.

Key Features

• Simple Setup - Only basic files and important tools are included, making your app faster and smaller
• Clean Start - Removes example content and complicated features to provide a clean starting point for your own work
• Ready to Use - Made for real websites and apps with good settings and simple setup
• Easy to Change - Designed as a starting point that lets developers add features step by step as needed
• Made for Developers - Helps developers focus on what they need without extra stuff they don't need

Available Layouts

The Vite starter kit includes 14 different demo layouts.

Project Structure

src/
├── components/        # UI Components
│   ├── layouts/       # Demo layouts (1-14)
│   └── ui/            # Base UI components
├── pages/             # Page components
│   ├── layout-1/      # Layout 1 pages
│   ├── layout-2/      # Layout 2 pages
│   └── ...            # Other layouts
├── routing/           # Routing configuration
├── providers/         # React providers
├── hooks/             # Custom hooks
├── lib/               # Utilities
└── App.tsx            # Main app component

Layouts & Pages

Available Layouts

Each layout is located in src/components/layouts/.

Layout Components

Each layout includes these components:

components/layouts/layout-1/
├── components/
│   ├── header.tsx           # Main header
│   ├── sidebar.tsx          # Sidebar navigation
│   ├── sidebar-menu.tsx     # Menu items
│   ├── sidebar-header.tsx   # Sidebar header
│   ├── toolbar.tsx          # Page toolbar
│   ├── breadcrumb.tsx       # Breadcrumb navigation
│   ├── mega-menu.tsx        # Mega menu
│   ├── mega-menu-mobile.tsx # Mobile menu
│   ├── footer.tsx           # Footer
│   ├── main.tsx             # Main content area
│   └── context.tsx          # Layout context
├── shared/                  # Shared components
└── index.tsx                # Layout entry point

Page Structure

Pages are organized by layout in src/pages/:

pages/
├── layout-1/          # Layout 1 pages
│   └── page.tsx       # Dashboard page
├── layout-2/          # Layout 2 pages
│   └── page.tsx       # Dashboard page
└── ...                # Other layouts (3-14)

Each layout includes:

• page.tsx - Main dashboard page with toolbar and content

Switching Layouts

To switch between layouts, modify the routing configuration in src/routing/app-routing.tsx:

// Change the default layout
const defaultLayout = 'layout-5'; // Switch to Layout 5

Customization

Adding New Pages

1. Create a new page component in the appropriate layout folder
2. Add the route to the routing configuration
3. Update the navigation menu if needed

Modifying Layouts

Each layout component can be customized:

• Modify the sidebar navigation
• Change the header design
• Update the footer content
• Customize the color scheme