Next.js Dashboard Example with TailwindCSS & Theming

A modern dashboard built with Next.js, styled using TailwindCSS, and equipped with multi-theme support.

Designed for open-source use, following best practices in scalable web app architecture.

Technologies used

Core

• Next.js
• TailwindCSS
• Perfactus
• ShadCN/UI

Other

• Recharts
• TanStackQuery
• TanStackTable

Features

• Multi-theme support for a personalized user experience (with CSS Variables)
• Modular UI Architecture with reusable components
• Separate landing page and dashboard directories for better project organization and clarity.
• Fully responsive and extendable dashboard layout
• Customizable JSON Navigation Menu for flexible structure adjustments

Pages

Some ideas for pages to do meanwhile I think of a concrete idea on what to do with this project beside coding best practices.

Website

• Home Page

Dashboard

• Users
• Notes
• ToDo Board
• Analytics

Key Concepts

• Managing Named Routes in React with TypeScript
• Next.js File Architecture
• CSS Architecture Best Practices

Getting Started

Install Dependencies

pnpm install

Start the Development Server

pnpm dev

Visit http://localhost:3000 in your browser.