Explore Our Platform
Preview our pages and access documentation
Multi Dashboard Demos
Demos
Analytics Dashboard
CRM Dashboard
Logistics Dashboard
Saas Dashboard
Crypto Dashboard
Multi-concept layouts with endless possibilities.
DemosBuild next-level interfaces using DiBold’s diverse layout options, specifically crafted to align with current web trends & intuitive UX design.
Vertical - Light
Vertical - Dark
Horizontal - Light
Horizontal - Dark
Theme Color Primary
Theme Color Blue
Theme Color Purple
Theme Color Orange
Theme Color Cyan
Sidebar Light
Sidebar Dark
Sidebar Glass
Sidebar Style Large
Sidebar Style Small
Corner Style Rounded
Corner Style Square
Border Style With Borders
Border Style No Borders
RTL + Vertical - Light
RTL + Vertical - Dark
RTL + Horizontal - Light
RTL + Horizontal - Dark
Quick Links
Introduction
🛒 License Information
Standard License – Use this item in one end product for personal or business purposes, or client work.
Unlimited Projects – Allows use of this item in an unlimited number of end products and client projects.
Commercial – Allows the end products to be sold or offered with subscription or paid access.
Welcome to the dibold Admin Dashboard & WebApp Template documentation. This comprehensive React.js template is built with React 19, Vite 7, and Tailwind CSS 4 to help you build powerful, responsive admin panels and web applications. Featuring 5 specialized dashboards (Analytics, CRM, Logistics, SaaS, Crypto), 50+ reusable components, advanced charts, and modern features like chat, calendar, and email management. Following industry best practices, dibold combines beautiful design with powerful functionality to accelerate your development process.
Multiple Dashboards
Pre-built dashboards for analytics, e-commerce, and more
UI Components
Rich collection of reusable components and widgets
Fully Responsive
Optimized for all devices and screen sizes
Folder Structure
dibold/
├── public/
│ └── documentation/
├── src/
│ ├── assets/
│ ├── components/
│ │ ├── tables/
│ │ └── ui/
│ ├── context/
│ │ ├── CustomizerContext.jsx
│ │ ├── RTLContext.jsx
│ │ ├── SidebarContext.jsx
│ │ └── ThemeContext.jsx
│ ├── data/
│ │ └── sidebar-data.json
│ ├── layout/
│ │ ├── Header.jsx
│ │ ├── Layout.jsx
│ │ ├── Loader.jsx
│ │ ├── RightSidebar.jsx
│ │ └── Sidebar.jsx
│ ├── pages/
│ │ ├── app/
│ │ ├── auth/
│ │ ├── crm/
│ │ ├── crypto/
│ │ ├── dashboard/
│ │ ├── error/
│ │ ├── page/
│ │ ├── saas/
│ │ └── ui/
│ ├── routes/
│ │ └── RoutesPath.jsx
│ ├── App.jsx
│ ├── index.css
│ └── main.jsx
├── .gitignore
├── package.json
├── tailwind.config.js
└── vite.config.jsKey Directories:
src/components/
Reusable UI components organized by feature, including dashboards, e-commerce, and UI elements
src/contexts/
React context providers for global state management
src/data/
Mock data and configurations for different features
src/hooks/
Custom React hooks for reusable logic
Changelog
- Initial release of DiBold Admin Template
- Built with React 19, Vite 7, and Tailwind CSS 4
- 5 specialized dashboards: Analytics, CRM, Logistics, SaaS, Crypto
- 50+ reusable UI components with modern animations
- Light & Dark modes included
- LTR & RTL layout support for global usability
- Multi-color theme system for quick brand customization
- Vertical and Horizontal layouts available out of the box
- Sidebar gradient color options for enhanced visual styling
Installation & Deployment Guide
Development Setup
Install Dependencies
npm installStart Development Server
npm run devServer will run at: http://localhost:5173
Production Build
Build for Production
npm run buildCreates optimized build in /dist folder
Preview Production Build
npm run previewTest production build locally before deployment
Package Dependencies
Here are the key dependencies and their versions used in this project:
| Package | Version | Description |
|---|---|---|
react |
^19.2.0 | Core React library (RC) |
react-dom |
^19.2.0 | React DOM renderer |
vite |
^7.1.7 | Next generation frontend build tool |
tailwindcss |
^4.1.13 | Utility-first CSS framework |
react-router-dom |
^7.9.1 | Routing for React applications |
@tanstack/react-table |
^8.21.3 | Headless UI for building powerful tables |
apexcharts |
^5.3.5 | Interactive JavaScript charts library |
react-apexcharts |
^1.7.0 | React wrapper for ApexCharts |
recharts |
^3.2.1 | Composable charting library |
@fullcalendar/react |
^6.1.19 | Full-featured calendar component |
framer-motion |
^12.23.19 | Animation library for React |
gsap |
^3.13.0 | Professional-grade animation library |
@headlessui/react |
^2.2.8 | Unstyled UI components |
@hello-pangea/dnd |
^18.0.1 | Drag and drop library |
leaflet |
^1.9.4 | Interactive maps library |
react-leaflet |
^5.0.0 | React components for Leaflet |
emoji-picker-react |
^4.0.8 | Emoji picker component |
@fancyapps/ui |
^6.0.34 | JavaScript UI components library |
react-slick |
^0.31.0 | Carousel component |
swiper |
^12.0.2 | Modern mobile touch slider |
simplebar-react |
^3.3.2 | Custom scrollbar component |
react-icons |
^5.5.0 | Popular icon packs as React components |
File Customization
Core Components
-
pages/dashboard/- 5 pre-built dashboards: Analytics, CRM, Logistics, SaaS, Crypto -
layout/- Header, Sidebar, RightSidebar, Layout wrapper components -
components/ui/- Reusable UI: Button, Modal, Dropdown, Accordion, Avatar, Spinner -
pages/auth/- Login, Register, Forgot Password, Reset Password, 2FA pages
Feature Modules
-
pages/crm/- CRM features: Leads, Contacts, Deals, Kanban board -
pages/app/email/- Email inbox and detail pages -
pages/app/- Chat, Calendar, File Manager apps -
pages/crypto/- Crypto wallet, market, transactions -
pages/saas/- SaaS subscriptions, usage, billing
UI Components
pages/ui/ui-components/- 50+ UI component demoscomponents/tables/- Data tables with TanStack
pages/ui/charts/- ApexCharts & Recharts demospages/page/- Gallery, Pricing, Profile pages
pages/error/- 404 and 500 error pagescontext/- Theme, Sidebar, RTL contexts
Color & Font Customization
Color Customization
Customize your theme colors by editing the SCSS variables file.
Tailwind Theme Colors
// In src/index.css
@theme {
--color-primary-50: #E6F7F7;
--color-primary-100: #C0EBEB;
--color-primary-200: #99DFDF;
--color-primary-300: #66CCCC;
--color-primary-400: #33B8B8;
--color-primary-500: #027F80;
--color-primary-600: #026B6C;
--color-primary-700: #025757;
--color-primary-800: #014242;
--color-primary-900: #002E2E;
}Font Customization
Customize typography by updating font imports and variables.
Google Fonts Import
// In src/index.css
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
body {
font-family: 'Nunito Sans', sans-serif !important;
}Credits
Frameworks
- Tailwind CSS - UI Framework
- Google Fonts - Typography
- React 19 - Frontend Library
Support & Assistance
We're Here to Help!
We offer 6 months of dedicated support from the date of purchase for any questions, issues, or technical assistance you may need.
How to Get Support
Need Extended Support?
If you need support beyond the 6-month period or require custom development services, please contact us for extended support packages and custom development quotes.
Contact for Extended Support
