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

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

2. Install dependencies

pnpm install

3. Run the development server

pnpm dev

4. 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.

Acknowledgements

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