DemoBuy

Getting Started with Social Media Dashboard Kit

Last updated on 2026-03-26

The Social Media Dashboard Kit is a production-ready Next.js template for building a modern social media management platform. It includes 35+ screens covering multi-platform analytics, content scheduling, audience insights, competitor tracking, sentiment analysis, and team collaboration -- all built with Tailwind CSS v4 and shadcn/ui.

What's Included

  • 70+ UI components -- primitives, social composites, chart components, calendar components, content components, and layout components
  • 35+ pages -- dashboard, platform dashboards, content hub, compose, calendar, analytics (8 sub-pages), reports, inbox, media library, settings, auth, and utility pages
  • 2 route groups -- (dashboard) for the main app, (auth) for login and registration
  • 6 social platforms -- Instagram, Twitter/X, Facebook, LinkedIn, TikTok, and YouTube with platform-specific color coding
  • Light & dark mode -- oklch design tokens with teal/cyan theme (hue 175)

Prerequisites

  • Node.js 18.17 or later
  • pnpm (recommended) or npm
  • A code editor -- VS Code recommended

Quick Start

# 1. Clone the repository (use the URL from your purchase email)
git clone <your-repo-url> social-media-dashboard-kit
cd social-media-dashboard-kit

# 2. Install dependencies
pnpm install

# 3. Start the dev server
pnpm dev

Open http://localhost:3000 to browse the social media dashboard.

Kit Overview

Area Screens Key Features
Dashboard 7 Home dashboard, 6 platform-specific dashboards (Instagram, Twitter/X, Facebook, LinkedIn, TikTok, YouTube)
Content 4 Content hub, post detail, compose/schedule, media library
Calendar 1 Drag-and-drop content calendar with day detail sheets
Analytics 8 Overview, audience demographics, hashtag tracking, engagement trends, best posting times, competitor analysis, stories/reels, sentiment analysis
Reports 4 Report templates, my reports, platform comparison, export center
Inbox 1 Unified social inbox with threaded conversations
Search 1 Global search across posts, conversations, and analytics
Settings 8 General, connected accounts, team, notifications, appearance, billing, API keys, import/export
Auth 3 Login, register, forgot password
Utility 1 Onboarding wizard

Tech Stack

Technology Purpose
Next.js 16 React framework with App Router
React 19 UI library
Tailwind CSS v4 Utility-first styling with oklch tokens
shadcn/ui Component primitives
Recharts Analytics and reporting charts
@hello-pangea/dnd Drag-and-drop for content calendar
date-fns Date formatting and utilities
Zod Schema validation for forms
Lucide React Icon library
next-themes Dark mode support
sonner Toast notifications
cmdk Command palette
react-day-picker Date picker component

Next Steps

Next

Installation