Vela — Next.js Admin Dashboard Template

Introduction

Vela is a premium admin dashboard template. This package is the Next.js 15 port, built with the App Router, React 19, TypeScript (strict), and Tailwind CSS v4. 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-nextjs folder, then:

# 1. Install dependencies
npm install

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

# 3. Type-check
npm run typecheck

# 4. Production build (outputs to .next/)
npm run build

# 5. Run the production build locally
npm run start

Project structure

vela-nextjs/
├─ next.config.ts          # Next.js config
├─ public/                 # Static assets
│  └─ documentation/       # This documentation (served at /documentation/)
└─ src/
   ├─ app/                 # App Router route tree (thin route files only)
   │  ├─ layout.tsx         # Root layout — fonts, <Providers>
   │  ├─ providers.tsx      # Client providers: ThemeProvider + ToastProvider
   │  ├─ page.tsx            # "/" — re-exports the landing page
   │  ├─ (shell)/            # Route group wrapped in AppShell (sidebar/topbar)
   │  ├─ (auth)/             # Route group wrapped in AuthLayout
   │  └─ not-found.tsx       # Catch-all 404
   ├─ views/                # The actual page implementations, one folder
   │                          per domain (this is where you edit page content)
   ├─ 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, router-compat, status)
   ├─ router/
   │  └─ paths.ts            # Canonical URL manifest for every page
   └─ theme/
      └─ ThemeProvider.tsx   # Dark/light context + localStorage persistence

Routing & adding pages

Every URL in the app is also listed in one manifest, src/router/paths.ts, matching the React version — used by the sidebar, breadcrumbs, and internal links so a URL string is never duplicated. Because this is Next's App Router, the actual routing is file-system based: a URL maps to a folder path under src/app/. To add a page:

1. Register the path (for links/breadcrumbs)

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

2. Create the view

// src/views/reports/WeeklyReportPage.tsx
export function WeeklyReportPage() {
  return <div>...</div>;
}

3. Create the route file

// src/app/(shell)/reports/weekly/page.tsx
export { WeeklyReportPage as default } from "@/views/reports/WeeklyReportPage";

4. 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/app/globals.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). It is mounted once via src/app/providers.tsx, wrapped in "use client". Use the hook anywhere:

const { theme, toggleTheme } = useTheme();

Radii & shadows

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

Fonts

Vela uses Plus Jakarta Sans (UI) and JetBrains Mono (numbers/code), loaded via next/font/google in src/app/layout.tsx. To swap fonts, change the font imports/config there and update --font-sans / --font-mono inside the @theme block of src/app/globals.css.

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), mounted once in src/app/providers.tsx.
• Page state — plain useState/useMemo inside each view (filters, pagination, modals…).
• Demo data — typed constants in src/data/*.ts. Replace these with your API calls or Next.js server-side data fetching; the view 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, 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/views/landing/LandingPage.tsx and is the homepage (/, with /landing kept as a separate route to the same page). 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 — replace the contents of src/app/page.tsx with a redirect to paths.dashboards.analytics (e.g. using Next's redirect() from next/navigation).
• Remove it entirely — delete src/views/landing and the src/app/page.tsx/src/app/landing route files, and point / at your preferred start page instead.

Other framework versions

Vela ships as one multi-framework product. If you'd rather work in a different stack, the same 180+ pages and design system are also available as standalone packages: React (Vite), Vue.js, Nuxt.js, plain HTML/CSS/JS, Laravel, Django, and ASP.NET. See the main landing page for a picker across all versions, or check your ThemeForest download page for the other framework folders included with your purchase.

Build & deployment

npm run build produces an optimized Next.js build (static pages are prerendered, dynamic-segment pages are server-rendered on demand — see the build output for which is which). Deploy with:

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.