Scrollspy
A sticky table-of-contents that tracks scroll position with an IntersectionObserver — the active section lights up and links scroll smoothly into view.
Getting started with Vireo
Scroll inside this panel — the contents rail follows along.
Introduction
Vireo is a premium admin template that ships nine framework editions from one design system. Every surface is defined as a role token, so light, dark and twelve accent presets all retheme without touching component code.
This guide walks through installing the kit, the token layers, the component vocabulary, charts, and the accessibility guarantees baked in.
Installation
Clone the repository and install dependencies. The HTML edition is powered by Vite, Tailwind v4 and Alpine.js.
# install & run
npm install
npm run devTokens
Three layers compose the system: raw scales, semantic role tokens, and recipe gradients. Pages only ever reference the role layer.
--ax-surface— glass panel background--ax-text-muted— secondary copy--ax-accent— the live accent, one of twelve--ax-viz-cyan— constant chart color
Components
Over sixty BEM-named blocks cover buttons, cards, tables, forms, navigation and overlays. Compose pages from these primitives — never invent new classes.
Charts
ApexCharts renders through a single wrapper that reads colors from CSS variables, so every chart re-themes live alongside the rest of the UI.
Accessibility
One H1 per page, landmark regions, labelled icon buttons, visible focus rings and reduced-motion fallbacks ship by default. This scrollspy itself respects prefers-reduced-motion by switching to instant scrolling.