What's Included

Everything you need to build your admin dashboard

File Structure

Understanding the project directory structure

Page Layout Structure

Understanding the HTML structure of Adminty pages

Adminty uses a consistent page structure across all templates. The layout consists of a navigation sidebar, header, and main content area. You can choose between vertical sidebar (default) or horizontal navigation layouts.

Install-template

Yep, as simple as that.

npm Installation

Install Dependencies

npm install

Development Server

Start the development server with live reload and SCSS watching:

npm run dev

Build for Development

Compile CSS and copy plugin files:

npm run build

Production Build

Create an optimized dist/ folder for deployment with only necessary files:

npm run build:prod

Compile SCSS Only

Compile SCSS files to CSS without starting the dev server:

npm run css

All Available Commands

SCSS Customization

SCSS Directory Structure

All SCSS source files are located in the scss/ folder:

scss/
├── style.scss                    # Main entry point
├── pcoded-horizontal.scss        # Horizontal layout variant
└── partials/
    ├── _variables.scss           # Theme colors and configuration
    ├── _mixins.scss              # Reusable SASS mixins
    ├── _general.scss             # Base styles
    ├── _generic.scss             # Utility classes
    ├── _dark.scss                # Dark theme overrides
    ├── menu/                     # Navigation menu styles
    ├── theme-elements/           # Buttons, forms, icons, shadows
    └── other/                    # Feature-specific styles (charts, chat, calendar, etc.)

Theme Color Variables

Customize the theme colors in scss/partials/_variables.scss:

// Primary Colors
$primary-color: #01a9ac;
$warning-color: #fe9365;
$danger-color: #fe5d70;
$success-color: #0ac282;
$info-color: #2DCEE3;
$inverse-color: #404E67;

// Background Colors
$body-bg: #f6f7fb;
$card-bg: #fff;

// Typography
$font-family: 'Open Sans', sans-serif;

Compiling SCSS

After making changes to SCSS files, compile them using:

# Compile once
npm run css

# Watch for changes during development
npm run dev

CSS Output Files

SCSS compiles to assets/css/theme/ with the following variants:

CSS Classes Reference

Adminty uses Bootstrap 5's utility classes. Here are the most commonly used responsive display utilities:

Bootstrap 5 Display Utilities

Adminty Custom Classes

Plugins

Core Dependencies

The following are the core libraries and their versions used in Adminty:

Plugin Usage Reference

Below is a reference table of all plugins installed via npm (package.json). These are copied to plugins/ folder via npm run plugins.

<!-- Update the page title -->
<title>Your Page Title | Adminty</title>

<!-- Update the breadcrumb -->
<div class="page-header">
    <div class="page-block">
        <div class="row align-items-center">
            <div class="col-md-12">
                <div class="page-header-title">
                    <h5 class="m-b-10">Your Page Title</h5>
                </div>
                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                    <li class="breadcrumb-item"><a href="#">Category</a></li>
                    <li class="breadcrumb-item active">Your Page</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h5>Card Title</h5>
    </div>
    <div class="card-body">
        <!-- Your content here -->
    </div>
</div>

<li class="pc-item">
    <a href="your-page.html" class="pc-link">
        <span class="pc-micon"><i class="ti-home"></i></span>
        <span class="pc-mtext">Your Page</span>
    </a>
</li>

# 1. Install the package
npm install package-name --save

# 2. Add to plugins-list.js (build/npm/plugins-list.js)
# 3. Run the plugins script
npm run plugins

module.exports = {
    // ... existing plugins
    'package-name': [
        'dist/package-name.min.js',
        'dist/package-name.min.css'
    ]
};

<!-- CSS in head -->
<link rel="stylesheet" href="plugins/package-name/dist/package-name.min.css">

<!-- JS before closing body -->
<script src="plugins/package-name/dist/package-name.min.js"></script>

• Chrome

• Safari

• Opera

• FireFox

• Edge

• What is Adminty?

  Adminty is a responsive admin template/dashboard built with Bootstrap 5.3. It's useful for complete projects like CRM systems, Task Management, User Management, Social Dashboards, and more. It comes with tons of ready-made plugins and components to help you at every step.

• Why choose Adminty?

  Adminty is built using Bootstrap 5.3 and jQuery 4.0. It includes 100+ pages, 50+ plugins, multiple layout options, dark mode support, RTL support, and is fully responsive across all devices.

• How do I install Adminty?

  Installation is simple: 1) Extract the downloaded zip file, 2) Run npm install to install dependencies, 3) Run npm run dev to start the development server with live reload. The browser will automatically open with the template.

• How do I customize colors and themes?

  All theme colors are defined in scss/partials/_variables.scss. Simply modify the color variables (like $primary-color, $success-color, etc.) and run npm run css to compile your changes.

• How do I create a production build?

  Run npm run build:prod to create an optimized production build. This creates a dist/ folder containing only the files needed for deployment, with minified CSS and optimized assets.

• Does Adminty support RTL languages?

  Yes! Adminty includes full RTL (Right-to-Left) support. RTL stylesheets are automatically generated during the build process. Use style.rtl.css instead of style.css for RTL layouts.

• What browsers are supported?

  Adminty supports all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. Internet Explorer is not supported as it has been discontinued by Microsoft.

• How do I add a new plugin?

  1) Add the npm package to package.json, 2) Add a mapping in build/npm/plugins-list.js, 3) Run npm install && npm run plugins, 4) Reference the plugin from the plugins/ directory in your HTML.

• What about License terms?

  Adminty comes with a single license for each purchase. If you need to use Adminty for multiple projects, you'll need to purchase additional licenses.

• What support is included?

  6 months of support is included with every purchase. Our team responds to support tickets within 24 hours. Extended support options are also available.