Vela — React Admin Dashboard Template

Introduction

Vela is a premium admin dashboard template built with React 19, TypeScript (strict), Tailwind CSS v4, Vite, and React Router 7. It ships with:

• 10 complete demo dashboards — Analytics, CRM, Ecommerce, Finance, Sales, Marketing, Logistics, Projects, SaaS, and Business Intelligence.
• 180+ production-ready pages — apps (chat, email, calendar, kanban…), full CRUD flows, tables, forms, charts, auth flows, settings, reports and utility pages.
• 60+ handcrafted UI components under src/components/ui.
• Dark & light themes driven by CSS design tokens.
• Zero chart dependencies — every chart is handcrafted SVG.
• No tracking scripts — the template contains no analytics, no external calls except Google Fonts and demo images.

Requirements

• Node.js 20+ (LTS recommended) — nodejs.org
• npm 10+ (bundled with Node)
• Any modern editor — VS Code recommended.

Installation

Unzip the package, open a terminal inside the vela-dashboard folder, then:

# 1. Install dependencies
npm install

# 2. Start the dev server (http://localhost:5173)
npm run dev

# 3. Type-check + production build (outputs to dist/)
npm run build

# 4. Preview the production build locally
npm run preview

Project structure

vela-dashboard/
├─ index.html              # HTML entry (fonts + favicon load here)
├─ vite.config.ts          # Vite + React + Tailwind plugins, @ alias
├─ public/                 # Static assets, SPA fallback files
│  └─ documentation/       # This documentation (served at /documentation/)
├─ documentation/          # Redirect stub → public/documentation
└─ src/
   ├─ main.tsx             # React bootstrap (StrictMode)
   ├─ App.tsx              # Router + Theme/Toast providers
   ├─ index.css            # ALL design tokens + Tailwind theme mapping
   ├─ components/
   │  ├─ ui/               # 60+ reusable components (Button, Card, DataTable…)
   │  └─ charts/           # Handcrafted SVG chart components
   ├─ data/                # Local demo data (typed, no backend)
   ├─ layout/              # AppShell, Sidebar, Topbar, nav-config.ts
   ├─ lib/                 # Helpers (cn, lazyPage, status)
   ├─ pages/               # One folder per domain, each with routes.tsx
   ├─ router/
   │  ├─ paths.ts          # Canonical URL manifest for every page
   │  └─ router.tsx        # Route tree assembly
   └─ theme/
      └─ ThemeProvider.tsx # Dark/light context + localStorage persistence

Routing & adding pages

Every URL in the app lives in one manifest: src/router/paths.ts. Pages, sidebar links, and breadcrumbs all resolve paths from it, so a URL is never duplicated. To add a page:

1. Register the path

// src/router/paths.ts
reports: {
  root: "/reports",
  weekly: "/reports/weekly",   // ← new
},

2. Create the page and route

// src/pages/reports/routes.tsx
const WeeklyReportPage = lazyPage(() => import("./WeeklyReportPage"), "WeeklyReportPage");

export const reportsRoutes: RouteObject[] = [
  // …existing routes
  { path: paths.reports.weekly, element: <WeeklyReportPage /> },
];

3. Add it to the sidebar

// src/layout/nav-config.ts — find the group and add a leaf
{ label: "Weekly Report", to: paths.reports.weekly },

Colors & theming

The entire look of Vela is controlled from one file: src/index.css. It defines raw CSS variables for dark (:root) and light (:root[data-theme="light"]), then maps them into Tailwind utilities via the @theme block.

:root {
  --acc: #7c5cff;      /* accent — change this to rebrand the template */
  --acc-2: #9d86ff;    /* lighter accent for gradients/hover           */
  --bg-0: #090a0f;     /* page background                              */
  --bg-2: #12141d;     /* card background                              */
  --t0: #f3f4f9;       /* primary text                                 */
  --ok / --warn / --bad / --info  /* status colors                     */
}

Changing the accent color

Update --acc, --acc-2, and --acc-soft in both the dark and light blocks. Every button, chart, link, and gradient updates instantly — components only ever reference tokens (e.g. bg-acc, text-t1, border-line), never raw hex values.

Dark / light mode

src/theme/ThemeProvider.tsx stamps data-theme on <html> and persists the choice to localStorage (key vela-theme). Use the hook anywhere:

const { theme, toggleTheme } = useTheme();

Radii & shadows

Corner radii (--radius-vela-*) and the card shadow (--shadow) are also tokens in index.css — adjust once, applies everywhere.

Fonts

Vela uses Plus Jakarta Sans (UI) and JetBrains Mono (numbers/code), loaded from Google Fonts in index.html. To swap fonts:

1. Replace the <link> tag in index.html with your font.
2. Update --font-sans / --font-mono inside the @theme block of src/index.css.

For fully offline use, download the font files, place them in public/fonts, and declare @font-face rules in index.css instead of the Google Fonts link.

State management

Vela intentionally ships with no external state library — no Redux, no Zustand — so you can drop in whatever your product uses. State is organized as:

• Global UI state — two small React contexts: ThemeProvider (dark/light) and ToastProvider (notifications). Both live in App.tsx.
• Page state — plain useState/useMemo inside each page (filters, pagination, modals…).
• Demo data — typed constants in src/data/*.ts. Replace these with your API calls; the page components consume plain arrays/objects, so swapping in fetch/React Query is straightforward.

UI components

All reusable components are exported from src/components/ui/index.ts:

import { Button, Card, Badge, DataTable, Modal, Tabs } from "@/components/ui";

<Button variant="primary" size="sm">Save changes</Button>

Highlights: DataTable (sorting/selection), Kanban, Timeline, Modal/Drawer/Popover, form controls (src/components/ui/form.tsx), Skeleton loaders, and AnimatedNumber. A live gallery of every component ships in the app itself at /components, plus a widget gallery at /pages/widget-gallery.

Charts (src/components/charts) are dependency-free SVG: area, bar, donut, heatmap, funnel, sparkline and more, all consuming the same design tokens.

Landing / preview page

The marketing landing page lives at src/pages/landing/LandingPage.tsx and is the homepage (/, with /landing kept as a redirect). It renders every demo dashboard as a live scaled-down preview and links to all inner pages (generated automatically from src/layout/nav-config.ts). Its "Live Preview" buttons open the admin app at /dashboards/analytics.

• Purchase link — edit the PURCHASE_URL constant at the top of LandingPage.tsx.
• Boot into the dashboard instead — in src/router/router.tsx, replace the paths.home route's element with <Navigate to={paths.dashboards.analytics} replace />.
• Remove it entirely — delete the src/pages/landing folder and its route entries in router.tsx, and point the paths.home route at your preferred start page.

Static HTML/CSS version

A plain HTML/CSS/vanilla-JS export of Vela is also available — no React, no Node.js, no build step. It's generated page-for-page from this React source, so every dashboard, list, detail, form, and chart page ships as a real, standalone .html file styled by one shared Tailwind CSS bundle.

• Use it if you need to drop Vela into a plain static host, a CMS theme, or any environment without a Node.js build pipeline.
• Dark/light theming, the sidebar, mobile drawer, and the command palette are all rebuilt in vanilla JS and work exactly as they do here.
• It's a separate downloadable package — see its own bundled documentation for the full breakdown of what's interactive vs. static.

Build & deployment

npm run build outputs a static site to dist/. Because Vela is a single-page app, your host must rewrite unknown URLs to index.html. Ready-made configs are included:

Files in public/ are copied into dist/ automatically on build — upload the dist/ folder and you're done.

Credits & licenses

All third-party software used by Vela is free, open-source, and licensed for commercial use:

Fonts

Images & icons

• All icons and illustrations are hand-drawn inline SVG created for this template — no icon font or icon library is bundled.
• Integration marks (Slack, GitHub, …) on the connected-apps demo are simplified hand-drawn shapes used for demo purposes only.
• Demo product photos are hot-linked from Unsplash (free for commercial use, no attribution required). They are demo placeholders — replace them with your own product imagery.

Support

If you have questions not covered here, please reach out through the item's Comments tab or the support contact listed on our ThemeForest profile. Please include your purchase code and a description of the issue.

© Vela. All rights reserved.