Getting started

What is inside

Quick start

Open index.html straight from the folder - the pages load their libraries from the CDN. For development and production, the template comes with a Vite build (Node.js 20.19+ or 22.12+):

npm install
npm run dev        # http://localhost:5173, reloads as you edit
npm run build      # optimised site in dist/
npm run preview    # serve dist/

The build uses the npm packages instead of the CDN files and links one stylesheet per page: src/styles.css, which compiles Tailwind CSS from the classes your pages use. vite/template.js does the swap, so the pages themselves stay plain HTML.

Folder structure

zeni-studio/
├── index.html            home page (F-Pattern)
├── documentation.html, style-guide.html
├── admin/                dashboard, analytics, orders, calendar, kanban ...
├── tools/ components/ helpers/ utilities/   70 pages x 20 examples
├── examples/             41 example pages
├── forms/                full forms
├── effects/  layouts/  icons/
├── assets/
│   ├── css/  theme.css, ui.css, template.css, effects.css
│   ├── js/
│   └── img/   SVG artwork
├── src/styles.css        stylesheet entry of the build
└── package.json, vite.config.js, vite/   Vite build

Change colours, fonts and corners

Everything visual comes from the tokens in assets/css/theme.css. Change a value and every page follows:

:root {
  --wt-primary: #14f51f;
  --wt-primary-rgb: 20, 245, 31;
  --wt-secondary: #2efaac;
  --wt-accent: #ed1d7a;
  --wt-radius: 0.125rem;
  --wt-font-heading: "Epilogue", system-ui, sans-serif;
}

Dark mode: the moon button switches data-ui-theme on the <html> element and remembers the choice. Set data-ui-theme="dark" in the markup to make dark the default.

Style guide: the style guide page shows every colour with its contrast, the type, corners, components and the pictures of this template.

Design tokens: design-tokens/tokens.json has the same colours (light and dark), fonts, corners, spacing and shadows in the W3C Design Tokens format - import it into Figma with the Tokens Studio plugin, or build tokens for other platforms with Style Dictionary. design-tokens/tokens.css has them as plain CSS variables for other projects in the same brand.

Charts

The dashboard charts are drawn by Chart.js 4.5.1: tooltips on hover and touch, theme colours that follow the light/dark modes and the colour switch. Each chart is an SVG picture first (so it shows without JavaScript and in print) that carries its numbers in data-wt-chart; assets/js/charts.js turns it into a Chart.js chart. Your own chart:

<div data-wt-chart='{"type":"bar","labels":["Mon","Tue","Wed"],
  "series":[{"name":"Visits","data":[120,180,150],"color":0}]}'></div>

Types: line, bar, doughnut, radar and bubble. A series colour is a theme colour number (0 primary, 1 accent, 2 secondary, 3 info, 4 warning, 5 success, 6 danger) or any CSS colour. Charts added by your own script start with Charts.init(document).

How the Tailwind CSS version works

Tailwind CSS 4 compiled by Vite (@tailwindcss/vite) with a small component layer. Pages also open straight from the folder with the browser build.

• Utilities are Tailwind classes (flex items-center gap-4). Components such as btn, card and modal come from assets/css/ui.css, written with the Tailwind theme tokens.
• Theme colours are registered with @theme inline, so bg-primary/25, text-muted and border-primary work everywhere - also inside a data-ui-theme="dark" section of a light page. npm run build compiles only the classes the pages use (@tailwindcss/vite); the browser build is for opening pages without a build.
• Interactive parts (dropdowns, modals, tabs ...) use data-ui-* attributes handled by assets/js/ui.js.
• Icons: Bootstrap Icons font. Fonts: Google Fonts (Epilogue, IBM Plex Sans).

Menus

The admin menu of this template is Command first - No menu bar: a big page finder (Ctrl+K) in the top bar and quick section chips. All menus are driven by assets/js/menu.js (no dependencies, the same in every stack):

• Collapsed menu: the collapse button turns the sidebar into icons; every icon shows its name in a tooltip on hover and on keyboard focus, and a menu group opens as a flyout panel.
• Page finder: the search box in the admin top bar (or Ctrl + K) lists every page of the menus; type, use the arrow keys and press Enter.
• Phones: every admin layout opens the full menu as a drawer from the menu button.
• Colour switch: the paint bucket in the admin top bar switches the whole theme to one of 8 colour presets (remembered); a link with ?primaryPreset=teal opens a page in that colour and ?primaryPreset=default brings back the template colours. Presets live in assets/js/theme-init.js.
• Attributes you can reuse: data-wt-tip="Label" (tooltip), data-wt-sub="#id" (menu group), data-wt-flyout="#id" (flyout panel), data-wt-pane="#id" inside data-wt-panes (tabs), data-wt-palette (page finder) and data-wt-toggle="#id" (full-screen menu).

Browser support

Older browsers still show every page; only newer effects (such as @property animations) fall back to static styles.

Credits

• Tailwind CSS - MIT licence
• Vite - MIT licence
• Chart.js - MIT licence
• Bootstrap Icons - MIT licence
• Google Fonts - SIL Open Font License
• All illustrations in assets/img are original SVG artwork made for this template; their subjects are Bootstrap Icons shapes (MIT).