Documentation

Welcome

Vitreo is an admin dashboard in four editions that share one design: HTML with Tailwind CSS, HTML with Bootstrap, React with Vite, and Next.js. Each edition has the same 403 pages, 34 dashboards, 127 app pages, 125 UI kit pages and 20 layouts, in light and dark, in 12 colour themes, left to right and right to left.

What is in the box

Get started

HTML, Tailwind CSS

Open any page in a browser: nothing needs to be built. To change the styles, install the tools once, then rebuild the stylesheet while you work.

cd html-tailwind
npm install
npm run watch

HTML, Bootstrap

Open any page in a browser. The stylesheet is made from the Sass files in scss, on top of Bootstrap 5.3.

cd html-bootstrap
npm install
npm run watch

React

React 19 with Vite and React Router. Every page is a file in src/pages, and the routes are in src/routes.tsx.

cd react
npm install
npm run dev
npm run build

Next.js

Next.js with the App Router. Every page is a route in app; the pages that use the full window are in app/(full).

cd nextjs
npm install
npm run dev
npm run build

Themes and dark mode

Three attributes on the html element set the look. The customizer changes them and remembers the choice in the browser.

<html data-theme="dark" data-accent="indigo" dir="ltr">

The colour themes: indigo, blue, sky, cyan, teal, emerald, amber, orange, rose, pink, violet, graphite.

Set data-accent on any element to give only that part another theme. Colours, sizes, radii and shadows are CSS variables in tokens.css, so a change there reaches every page.

Layouts

The frame of the app is set with data-layout on the element with the class app. The layout pages show each one.

<div class="app" data-layout="horizontal">

The layouts: Vertical, Compact rail, Hover rail, Two column, Horizontal, Dual header, Mega menu, Docked, Detached, Boxed, Floating dock, Tab bar, Minimal, Inspector panel, Right sidebar, Dark sidebar, Fluid, Right to left, Dark, Solid (no glass).

In React and Next.js, set DEFAULT_LAYOUT in lib/layouts.ts to use a layout on every page.

Charts

Charts are drawn with Apache ECharts. In the HTML editions a chart is a div with its settings in data-chart; in React it is the Chart component with the same settings. The UI kit has 24 chart pages to copy from.

<div class="chart" data-chart='{"type":"area","labels":["Jan","Feb","Mar"],"series":[{"name":"Revenue","data":[12,19,24]}]}'></div>

Icons

Icons come from Lucide (1,866 icons). In the HTML editions they are inline SVG; copy any icon from lucide.dev the same way. In React, add the name to lib/icons.ts and use the Icon component.

<Icon name="sparkles" />

Components and pages

The UI kit pages show every component with its code for your edition: open a page, choose Code under an example, and copy it.

• Dashboards: one page per business, from e-commerce to energy
• Apps: mail, chat, calendar, kanban, files, CRM, projects, HR and more
• Pages: account, sign-in, pricing, help, errors, landing pages and emails
• UI kit: components, forms, tables, charts, widgets, icons and maps

Right to left and access

Set dir="rtl" on the html element for Arabic, Hebrew, Persian and Urdu; every part of the kit follows. Text meets WCAG AA contrast in both appearances, every control works with the keyboard, and motion stops when the system asks for less motion.

Browsers

The latest two versions of Chrome, Edge, Firefox and Safari, on the desktop and on phones. Where a browser cannot blur behind glass, surfaces become solid.

Credits

Vitreo uses these open-source projects. Each keeps its own licence, included with the package.

Vitreo ships no photos. Every box where a picture goes holds one placeholder image, assets/images/placeholder.svg: put the path of your own picture in its src and the box keeps its shape. The text uses the fonts already on each device.