New Project
Back to Templates
VisActor Next.js Dashboard Template
A modern dashboard template built with VisActor and Next.js, featuring a beautiful UI and rich data visualization components.
Features
- š Rich Visualizations - Powered by VisActor, including bar charts, gauge charts, circle packing charts, and more
- š Dark Mode - Seamless dark/light mode switching with system preference support
- š± Responsive Design - Fully responsive layout that works on all devices
- šØ Beautiful UI - Modern and clean interface built with Tailwind CSS
- ā”ļø Next.js 15 - Built on the latest Next.js features and best practices
- š State Management - Efficient state management with Jotai
- š¦ Component Library - Includes Shadcn components styled with Tailwind
Tech Stack
- Next.js - React framework
- VisActor - Visualization library
- Tailwind CSS - CSS framework
- Shadcn - UI components
- Jotai - State management
- TypeScript - Type safety
Quick Start
You can deploy this template to Vercel by clicking the button above, or clone this repository and run it locally.
- Clone this repository
git clone https://github.com/mengxi-ream/visactor-next-template- Install dependencies
pnpm install- Run the development server
pnpm dev- Open http://localhost:3000 with your browser to see the result.
Project Structure
src/āāā app/ # App router pagesāāā components/ # React componentsā āāā chart-blocks/ # Chart componentsā āāā nav/ # Navigation componentsā āāā ui/ # UI componentsāāā config/ # Configuration filesāāā data/ # Sample dataāāā hooks/ # Custom hooksāāā lib/ # Utility functionsāāā style/ # Global styleāāā types/ # TypeScript typesCharts
This template includes several chart examples:
- Average Tickets Created (Bar Chart)
- Ticket by Channels (Gauge Chart)
- Conversions (Circle Packing Chart)
- Customer Satisfaction (Linear Progress)
- Metrics Overview
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
License
This project is licensed under the MIT License - see the LICENSE file for details.
