Scrollspy

A sticky table-of-contents that tracks scroll position with an IntersectionObserver — the active section lights up and links scroll smoothly into view.

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 dev

Tokens

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.

Badge AX

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.

You've reached the end — the last item stays active.