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.

Demos

Build 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

Introduction

WrapMarket License Information

Official Terms

Overview of WrapMarket marketplace license tiers and their usage permissions:

Single Site

Standard License

Use this item in one end product for personal or business projects and client work.

Multi-Site

Unlimited Projects

Allows use of this item in an unlimited number of end products and client projects.

Commercial

Commercial Add-on

Allows the end products to be sold or offered with subscription or paid access.

Important License Notice Each Standard License is valid for a single end product only.

Official License Terms

Welcome to the dibold Admin Dashboard & WebApp Template documentation. This comprehensive React.js template is built with React 19, Vite 8, and Tailwind CSS 4 to help you build powerful, responsive admin panels and web applications. Featuring 5 specialized dashboards (Analytics, CRM, Logistics, SaaS, Crypto), enterprise POS Checkout Terminal, Live Split-Screen Invoice Generator, Floating AI Copilot Widget, 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.

5+ Specialized Dashboards

Pre-built dashboards for Analytics, CRM, Logistics, SaaS, and Crypto

POS & Live Invoicing

POS Terminal, barcode scan, thermal print & live split-screen invoice builder

AI Copilot Widget

Floating AI assistant with prompt shortcuts, chat history & smart suggestions

50+ UI Components

Rich collection of reusable UI components, interactive charts & TanStack data tables

RTL & Multi-Themes

Bidirectional Arabic/Hebrew RTL support, Dark/Light modes & 5 color presets

React 19 & Vite 8

Engineered with React 19, Tailwind CSS 4, and Vite 8 for blazing zero-GC performance

Folder Structure

dibold/
├── public/
│   └── documentation/
├── src/
│   ├── assets/
│   ├── components/
│   │   ├── ai/
│   │   │   └── AICopilotWidget.jsx
│   │   ├── chat/
│   │   ├── email/
│   │   ├── tables/
│   │   └── ui/
│   ├── context/
│   │   ├── CustomizerContext.jsx
│   │   ├── RTLContext.jsx
│   │   ├── SidebarContext.jsx
│   │   ├── ThemeContext.jsx
│   │   └── UserContext.jsx
│   ├── data/
│   │   └── sidebar-data.json
│   ├── hooks/
│   │   └── useClickOutside.js
│   ├── layout/
│   │   ├── Header.jsx
│   │   ├── Layout.jsx
│   │   ├── Loader.jsx
│   │   ├── RightSidebar.jsx
│   │   └── Sidebar.jsx
│   ├── pages/
│   │   ├── app/
│   │   ├── auth/
│   │   ├── crm/
│   │   ├── crypto/
│   │   ├── dashboard/
│   │   ├── error/
│   │   ├── icons/
│   │   ├── logistics/
│   │   ├── page/
│   │   ├── pos/
│   │   │   ├── InvoiceGenerator.jsx
│   │   │   ├── InvoiceList.jsx
│   │   │   └── POSTerminal.jsx
│   │   ├── saas/
│   │   └── ui/
│   ├── routes/
│   │   └── RoutesPath.jsx
│   ├── utils/
│   │   └── chartColors.js
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── .gitignore
├── eslint.config.js
├── index.html
├── package.json
└── vite.config.js

Key Directories:

src/components/

Reusable UI elements (Buttons, Modals, Forms), Floating AI Copilot Widget, Chat & Email components, and Data Tables

src/pages/pos/

POS Terminal (/pos/terminal), Live Invoice Generator (/invoice/generator), and Invoices & Billing History (/invoice/list)

src/context/

React context providers for Theme (Dark/Light), Sidebar, Customizer, RTL, and User authentication state

src/pages/

Full-featured dashboard & application pages across Analytics, CRM, SaaS, POS, Crypto, Logistics, Apps, and UI Elements

Changelog

1.5.0 22.08.2026 - Major Feature Update (POS, Live Invoice & AI Copilot)

Added Global Interactive Search Engine in Header with live page suggestions, last 5 recent searches history & quick navigation (⌘K)
Added POS Checkout Terminal (/pos/terminal) with barcode scan, multi-payment & thermal receipt printing
Added Live Invoice Generator (/invoice/generator) with live split-screen preview & PDF print export
Added Invoice List & Billing History (/invoice/list) with KPI metric cards, status filters & management
Added Floating AI Copilot Widget with model switcher, prompt suggestions & voice dictation
Updated Notification UI with animated bell indicator, filter tabs & responsive mobile actions
Optimized Header & Loader Architecture with zero-GC static registries, GPU acceleration & SimpleBar smooth scrolling
Removed login redirect — app now opens directly on the Analytics Dashboard
Auth pages remain accessible via direct URL

📦 Dependency Updates

gsap 3.13.0 → 3.15.0 patch
react 19.2.0 → 19.2.8 patch
react-dom 19.2.0 → 19.2.8 patch
react-router-dom 7.9.1 → 7.18.2 minor
react-icons 5.5.0 → 5.7.0 minor
recharts 3.2.1 → 3.10.1 minor
tailwindcss 4.1.13 → 4.3.3 minor
@tailwindcss/vite 4.1.13 → 4.3.3 minor
@fancyapps/ui 6.0.34 → 6.1.14 minor
emoji-picker-react 4.0.8 → 4.19.1 minor
apexcharts 5.3.5 → 6.10.0 major
react-apexcharts 1.7.0 → 2.1.1 major
framer-motion 12.23.19 → 13.1.1 major
swiper 12.0.2 → 14.1.0 major
vite 7.1.7 → 8.2.2 major
@vitejs/plugin-react 5.0.3 → 6.1.0 major
globals 16.4.0 → 17.11.0 major

1.0.0 26.05.2026 - Initial Release

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 install

Start Development Server

npm run dev

Server will run at: http://localhost:5173

Production Build

Build for Production

npm run build

Creates optimized build in /dist folder

Preview Production Build

npm run preview

Test 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.8	Core React 19 component library
`react-dom`	^19.2.8	React DOM renderer
`vite`	^8.2.2	Next generation frontend build engine
`tailwindcss`	^4.3.3	Modern utility-first CSS framework (v4 engine)
`@tailwindcss/vite`	^4.3.3	Official Tailwind CSS v4 Vite integration plugin
`react-router-dom`	^7.18.2	Modern client-side routing for React applications
`@tanstack/react-table`	^8.21.3	Headless UI for building powerful data tables
`apexcharts`	^6.10.0	Interactive JavaScript charts library
`react-apexcharts`	^2.1.1	React wrapper for ApexCharts
`recharts`	^3.10.1	Composable charting library built on React components
`@fullcalendar/react`	^6.1.19	Full-featured event calendar component suite
`framer-motion`	^13.1.1	Production-ready motion and animation library for React
`gsap`	^3.15.0	Professional-grade animation library
`@headlessui/react`	^2.2.8	Completely unstyled, accessible UI components
`@hello-pangea/dnd`	^18.0.1	Accessible drag and drop library for Kanban lists
`leaflet`	^1.9.4	Mobile-friendly interactive maps library
`react-leaflet`	^5.0.0	React components for Leaflet maps
`emoji-picker-react`	^4.19.1	Rich emoji picker component for chat & comments
`emoji-mart`	^5.6.0	Customizable emoji components & data
`@fancyapps/ui`	^6.1.14	Touch-enabled JavaScript lightbox & UI components
`react-slick`	^0.31.0	React carousel & slider component
`slick-carousel`	^1.8.1	Slick carousel base library
`swiper`	^14.1.0	Modern mobile touch slider & hardware-accelerated transitions
`simplebar-react`	^3.3.2	Cross-browser custom scrollbar React wrapper
`react-countup`	^6.5.3	Animated numerical counters for KPI cards
`react-icons`	^5.7.0	Comprehensive icon packs as React components (Bootstrap, Feather, Remix, Lucide, FontAwesome)

File Customization

Core Components

pages/dashboard/ - 5 pre-built dashboards: Analytics, CRM, Logistics, SaaS, Crypto
components/ai/ - Floating AI Copilot Widget with prompt switcher & responses
layout/ - Header (with Global Search), Sidebar, RightSidebar, Layout wrapper
components/ui/ - Reusable UI: Button, Modal, Dropdown, Accordion, Avatar, Spinner
pages/auth/ - Login, Register, Forgot Password, Reset Password, 2FA pages

Feature Modules

pages/pos/ - POS Terminal, Live Split-Screen Invoice Generator & Billing History
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 demos
components/tables/ - Data tables with TanStack

pages/ui/charts/ - ApexCharts & Recharts demos
pages/page/ - Gallery, Pricing, Profile pages

pages/error/ - 404 and 500 error pages
context/ - Theme, Sidebar, RTL contexts

Color & Font Customization

Color Customization

Customize your theme colors by editing the CSS @theme tokens in src/index.css.

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

Resources

Unsplash - Images
Freepik - Graphics
remixicon - Icons

Frameworks

React 19 - Frontend Library
Vite 8 - Build Tool & Dev Engine
Tailwind CSS 4 - UI Framework
Google Fonts - Typography

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

Email Support

Send us your questions via email

Email Us

Visit Website

Check our website for more info

Visit Site

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

The Ultimate Next-Gen React 19 & Tailwind 4 Admin Dashboard & WebApp Ecosystem