VisActor Next.js Dashboard Template

A modern dashboard template built with VisActor and Next.js, featuring a beautiful UI and rich data visualization components.

Live Demo

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.

Github Repo

1. Clone this repository

1
git clone https://github.com/mengxi-ream/visactor-next-template

1. Install dependencies

1
pnpm install

1. Run the development server

1
pnpm dev

1. Open http://localhost:3000 with your browser to see the result.

Project Structure

1
src/
2
├── app/ # App router pages
3
├── components/ # React components
4
│ ├── chart-blocks/ # Chart components
5
│ ├── nav/ # Navigation components
6
│ └── ui/ # UI components
7
├── config/ # Configuration files
8
├── data/ # Sample data
9
├── hooks/ # Custom hooks
10
├── lib/ # Utility functions
11
├── style/ # Global style
12
└── 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.

Acknowledgements

• VisActor - For the amazing visualization library
• Vercel - For the incredible deployment platform
• Next.js - For the awesome React framework