VexUI is a modern multipurpose admin dashboard template built with React 19, TanStack Start, Tailwind CSS 4, and Vite.

It provides a comprehensive collection of dashboards, application pages, business management screens, reusable UI components, forms, tables, charts, authentication pages, and utility screens for building modern web applications.

Key Features

• Built with React 19
• TanStack Start application framework
• Tailwind CSS 4
• Vite-powered development workflow
• 8 ready-to-use dashboard layouts
• Responsive and modern UI
• Reusable UI components
• ApexCharts integration
• Accessible UI primitives
• Form controls and validation
• Data tables and responsive tables
• Authentication page templates
• Light, dark, and system appearance modes
• Customizable sidebar and header layouts
• Responsive desktop and mobile layouts

Dashboard Demos

VexUI includes 8 dashboard experiences:

• Executive Dashboard
• Analytics Dashboard
• eCommerce Dashboard
• CRM Dashboard
• Projects Dashboard
• Finance Dashboard
• Marketing Dashboard
• SaaS Dashboard

Application Pages

Build complete application interfaces with included pages for:

• Email
• Chat
• Calendar
• Tasks
• Kanban
• File Manager

eCommerce Pages

The eCommerce module includes:

• Products
• Add Product
• Product Details
• Orders
• Customers
• Checkout

CRM Pages

Create CRM interfaces with:

• Contacts
• Companies
• Leads
• Deals
• Pipeline

Project & Invoice Management

VexUI includes dedicated interfaces for:

• Project List
• Project Grid
• Project Details
• Team Management
• Invoice List
• Invoice Details
• Create Invoice

UI Components

VexUI includes a reusable component library covering:

• Buttons
• Alerts
• Badges
• Avatars
• Cards
• Dropdowns
• Dialogs
• Drawers
• Tabs
• Accordions
• Tooltips
• Progress indicators
• Pagination
• Breadcrumbs
• Tables
• Forms
• Select controls
• Toast notifications
• Navigation elements
• Layouts and grids

The UI components are built around Tailwind CSS and Radix UI primitives for a flexible and accessible foundation.

Forms & Data

The template includes form elements, switches, selects, form layouts, date pickers, validation interfaces, inline editing, multi-step wizard layouts, and editor interfaces.

Multiple table examples are also included, including basic, responsive, filterable, data, and advanced table layouts.

Charts

VexUI includes an ApexCharts-based chart system with examples for:

• Line charts
• Area charts
• Bar charts
• Pie and donut charts
• Radar charts
• Radial charts
• Scatter and bubble charts
• Mixed charts
• Heatmaps
• Treemaps
• Sparklines

Authentication

Ready-to-use authentication interfaces include:

• Sign In
• Sign Up
• Forgot Password
• Reset Password
• Verify Email
• Two-Step Verification
• Lock Screen

Both basic and cover-style authentication layouts are included.

Additional Pages

VexUI also includes:

• Profile
• Settings
• Pricing
• FAQ
• Email templates
• 404 error page
• 500 error page
• 503 error page
• Maintenance page

Customization

VexUI includes a built-in customization panel that allows users to preview different layout and appearance settings, including:

• Light, dark, and system modes
• Theme colors
• Sidebar sizes
• Sidebar styles
• Fixed or static headers
• Comfortable or compact density
• Fluid or boxed layouts

The project structure is organized to make it easier for developers to customize existing pages, add new routes, and extend the component system.

Technology Stack

• React 19
• TanStack Start
• TanStack Router
• Tailwind CSS 4
• Vite 8
• ApexCharts
• Radix UI
• React Hook Form
• Zod
• Sonner
• Lucide React

Responsive Design

VexUI is designed for modern desktop and mobile browsers with responsive layouts throughout the dashboard, application pages, forms, tables, and authentication screens.

Suitable For

VexUI can be used as a starting point for:

• SaaS applications
• Admin panels
• CRM systems
• eCommerce platforms
• Analytics applications
• Finance dashboards
• Project management tools
• Business management applications
• Marketing dashboards
• Internal company tools
• Data management applications

Requirements

• Node.js
• npm
• Modern web browser

Getting Started

Install the project dependencies and start the development server:

npm install
npm run dev

Detailed documentation is included with the template covering installation, project structure, dependencies, customization, layouts, components, pages, and common setup tasks.

Documentation

The included documentation provides guidance for installing, customizing, and extending VexUI, including information about the project structure, components, pages, themes, layouts, and dependencies.