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 types
Charts
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.