ODIN ADMIN documentation
ODIN ADMIN is a Bootstrap 5 admin dashboard template in plain HTML, CSS and vanilla JavaScript. These docs explain how the template is built and how to use it in your own project.
Odin.Component pattern behind every widget, and its events.
About the template
Most admin panels need the same screens: a sign-in page, a sidebar, a dashboard, a table of records and a form to edit them. ODIN ADMIN gives you those screens ready-made, in a calm style with soft colours, clear type and plenty of space.
- No build step. Every page is a static
.htmlfile. Open it in a browser or copy it into any back end. - No jQuery. Each widget is a small JavaScript class. Plugins were chosen to match — Tom Select instead of Select2, for example.
- One set of components. Every page uses the same sidebar, top bar, cards and form styles, so what you learn on one page works on the next.
- Themeable. Colours, sizes and radius are CSS variables in one file,
css/base/variables.css.
What's included
The Pro version has 31 pages. Pages marked Free are also in the free version.
| Group | Pages | Count |
|---|---|---|
| Dashboards | Analytics Free, Analytics v2 (sales & world map), CMS, Ecommerce, CRM, Finance, Support | 7 |
| Apps | File Manager, Calendar, Task Management, Messages, Support Tickets | 5 |
| Content | Pages list, Page form, Categories list, Category form, Navigation, Users, Settings | 7 |
| Components | Accordions, Alerts, Badges, Breadcrumbs, Buttons, Cards, Form elements, Modals, Progress, Tables, Tabs, Tooltips, Tree View, Dragula (drag & drop), Toastr, Chart.js, ApexCharts | 17 |
| Authentication | Sign in Free, Sign in (centered), Create account Free, Forgot password | 4 |
| Error pages | 404 Page not found, 504 Gateway timeout | 2 |
| Total | 31 |
Free and Pro
Both versions share the same folder structure and class names, so you can start with Free and upgrade to Pro later without changing the pages you've built.
| Free | Pro | |
|---|---|---|
| Core layout — sidebar, top bar, footer | ||
| Analytics dashboard | ||
| Sign in and create account pages | ||
| Components | Basic | All |
| CMS, Ecommerce and CRM dashboards | ||
| File Manager, Calendar, Task Management, Messages and Support Tickets | ||
| All 31 pages | ||
| License | MIT | Pro — one end product |
| Updates | Free releases | Lifetime |
A Pro license covers one end product — a client site, a SaaS app or an internal tool. For another project, buy another license.
Requirements
- A modern browser — the latest versions of Chrome, Edge, Firefox and Safari. The template uses CSS variables and modern JavaScript (classes, arrow functions), so Internet Explorer is not supported.
- An internet connection for Bootstrap, Font Awesome, the Inter font and the plugins, which load from public CDNs. To work offline, download them and change the links (see Installation).
- No server and no build tools. You can open the pages straight from your disk. To use them in a real project, any web server or back end will do.
Libraries
Every library loads from a CDN with a fixed version. The core files load on every page; plugins load only on the pages that use them.
| Library | Version | Used for | Loaded on | License |
|---|---|---|---|---|
| Bootstrap | 5.3.3 | Grid, utilities, dropdowns, modals, tabs | Every page | MIT |
| Font Awesome | 6.5.1 | Icons | Every page | Free license |
| Inter | — | Typeface (Google Fonts) | Every page | OFL |
| Tom Select | 2.6.2 | Searchable selects and tags | Form elements, page & category forms, Settings | Apache-2.0 |
| Dropzone | 5.9.3 | File upload fields | Form elements, page & category forms, Settings | MIT |
| flatpickr | 4.6.13 | Date and time pickers (EN, DE, ES, FR, RU) | Form elements | MIT |
| SortableJS | 1.15.7 | Drag to reorder | Pages list, Navigation, Task Management | MIT |
| Dragula | 3.7.3 | Drag & drop demo | Dragula | MIT |
| FullCalendar | 6.1.21 | Calendar app | Calendar | MIT |
| SweetAlert2 | 11.26.25 | Confirm and message dialogs | Modals | MIT |
Dashboard charts are drawn with inline SVG and CSS, so no chart library is needed.
Getting help
- Browse these docs — use the search box (press /) to jump to a page.
- See what changed between versions in the Changelog.
- Email odinzeroofficial@gmail.com. Pro customers get priority support, with a reply within one business day.