@extends('layouts.app') {{-- docs/index — faithful re-expression of src/html/docs/index.html. The reference's
x-data moves to a content wrapper (shell layout owns
). Same DOM/classes/ARIA; the live area chart auto-inits from its data-ax-chart attributes via the shared scanner. --}} @section('content')

Documentation

Everything you need to install, theme & extend Vireo. Version 1.0.0.

Getting started

Build premium admin UIs in minutes

Vireo is a token-driven admin template that ships nine framework editions, light & dark themes, twelve accents and a live customizer — all from a single role-token layer. This guide gets you from zero to a running dashboard.

Quick start Browse components
Step 1

Installation

Node 18+ and a package manager are all you need.

Clone the HTML edition, install dependencies and start the dev server. Vite watches your files and Tailwind compiles on the fly.

# install dependencies
$ npm install
# start the dev server
$ npm run dev
  ➜  Local:   http://localhost:5173/

Use any package manager

pnpm, yarn and bun all work — the lockfile is the only thing that differs.

Step 2

Project structure

Where everything lives.

src/
├─ html/      — pages & partials
├─ styles/    — tokens, components, shell
│  ├─ tokens/  — the role layer (edit themes here)
│  └─ components.css
└─ js/        — alpine + chart wrapper
  • styles/tokens/ is the only place you change colours — never edit component files.
  • Pages live under html/<category>/<slug>.html and pull in shared partials.

Theming & tokens

One variable swap retheme everything.

Components reference role tokens only. Change the accent on :root and every button, link and chart retheme at once — in light, dark, and all twelve accents.

my-theme.css
:root {
  --ax-accent: #14b8a6;       /* teal */
  --ax-radius-md: 12px;
}

Never hard-code colours

Raw hex in component markup only works in one theme. Always reference a role token via var(--ax-*).

Components

Copy-paste building blocks.

Compose pages from existing primitives. Here's a primary button — the icon is decorative, the label carries meaning.

<button class="ax-btn ax-btn--primary">…</button>

Charts

Themed, dark-mode-aware, retheme on the fly.

Charts go through one wrapper so they inherit the palette automatically. The simplest path is a declarative data attribute:

<div class="ax-chart" data-ax-chart
     data-ax-chart-type="area"
     data-ax-chart-series='[…]'></div>

And here it is, live:

It just re-themes

Toggle dark mode or change the accent in the customizer — the chart above updates instantly, no code change required.

@endsection