The Social Media Dashboard Kit uses Next.js App Router with route groups to separate the main dashboard from the authentication flow.
Directory Overview
social-media-dashboard-kit/
├── app/
│ ├── (dashboard)/ # Main app pages
│ │ ├── layout.tsx # AppSidebar + AppHeader
│ │ ├── page.tsx # Home dashboard
│ │ ├── platforms/
│ │ │ └── [platform]/page.tsx # Platform dashboards (6 platforms)
│ │ ├── content/
│ │ │ ├── page.tsx # Content hub
│ │ │ └── [postId]/page.tsx # Post detail
│ │ ├── compose/page.tsx # Post composer
│ │ ├── media/page.tsx # Media library
│ │ ├── calendar/page.tsx # Content calendar
│ │ ├── analytics/
│ │ │ ├── page.tsx # Analytics overview
│ │ │ ├── audience/page.tsx # Audience demographics
│ │ │ ├── hashtags/page.tsx # Hashtag tracking
│ │ │ ├── engagement/page.tsx # Engagement trends
│ │ │ ├── best-times/page.tsx # Best posting times
│ │ │ ├── competitors/page.tsx # Competitor analysis
│ │ │ ├── stories-reels/page.tsx # Stories & Reels metrics
│ │ │ └── sentiment/page.tsx # Sentiment analysis
│ │ ├── reports/
│ │ │ ├── page.tsx # Report templates
│ │ │ ├── my-reports/page.tsx # Generated reports
│ │ │ ├── comparison/page.tsx # Platform comparison
│ │ │ └── export/page.tsx # Export center
│ │ ├── inbox/page.tsx # Social inbox
│ │ ├── search/page.tsx # Global search
│ │ └── settings/
│ │ ├── page.tsx # General settings
│ │ ├── accounts/page.tsx # Connected platforms
│ │ ├── team/page.tsx # Team management
│ │ ├── notifications/page.tsx # Notification preferences
│ │ ├── appearance/page.tsx # Theme & appearance
│ │ ├── billing/page.tsx # Billing & plans
│ │ ├── api/page.tsx # API keys & webhooks
│ │ └── import-export/page.tsx # Data import/export
│ ├── (auth)/ # Authentication
│ │ ├── layout.tsx # Centered card layout
│ │ ├── login/page.tsx
│ │ ├── register/page.tsx
│ │ └── forgot-password/page.tsx
│ ├── onboarding/page.tsx # Onboarding wizard
│ ├── globals.css # Design tokens
│ └── layout.tsx # Root layout
├── components/
│ ├── ui/ # shadcn/ui primitives (~30 components)
│ ├── analytics/ # Analytics composites (6 components)
│ ├── calendar/ # Calendar composites (4 components)
│ ├── charts/ # Chart components (11 components)
│ ├── content/ # Content composites (6 components)
│ ├── dashboard/ # Dashboard composites (5 components)
│ ├── layout/ # Layout components (6 components)
│ ├── reports/ # Report composites (3 components)
│ ├── settings/ # Settings composites (3 components)
│ ├── social/ # Social composites (6 components)
│ └── a11y/ # Accessibility components (2 components)
├── data/
│ └── seed.ts # Mock data for all pages
├── types/
│ └── index.ts # TypeScript interfaces
├── hooks/
│ ├── use-mobile.ts # Mobile viewport detection
│ ├── use-announce.ts # Screen reader announcements
│ ├── use-focus-trap.ts # Focus trap for modals
│ ├── use-keyboard-navigation.ts # Keyboard nav support
│ └── use-reduced-motion.ts # Reduced motion preference
├── lib/
│ └── utils.ts # cn() utility
└── public/
└── images/ # Static images
Route Groups
| Group |
Layout |
Purpose |
(dashboard) |
AppSidebar + AppHeader |
Main app pages (dashboard, platforms, content, calendar, analytics, reports, inbox, settings) |
(auth) |
Centered card |
Login, register, forgot password |
Note: The onboarding wizard (app/onboarding/page.tsx) uses a standalone layout with its own progress stepper, outside of both route groups.
Dynamic Routes
| Route Pattern |
Segments |
Description |
/platforms/[platform] |
instagram, twitter, facebook, linkedin, tiktok, youtube |
Platform-specific dashboards |
/content/[postId] |
Any post ID |
Individual post detail and analytics |
Component Organization
Primitives (components/ui/)
Approximately 30 shadcn/ui components: Accordion, AlertDialog, Avatar, Badge, Breadcrumb, Button, Calendar, Card, Chart, Checkbox, Collapsible, Command, Dialog, DropdownMenu, Input, InputGroup, Label, Popover, Progress, ScrollArea, Select, Separator, Sheet, Sidebar, Skeleton, Sonner, Switch, Table, Tabs, Textarea, Toggle, and Tooltip.
Analytics Composites (components/analytics/)
| Component |
Used In |
competitor-card |
Competitor analysis page |
date-range-picker |
Analytics overview, all analytics sub-pages |
hashtag-cloud |
Hashtag tracking page |
metric-comparison |
Analytics overview, engagement trends |
sentiment-feed |
Sentiment analysis page |
story-reel-card |
Stories & Reels metrics page |
Calendar Composites (components/calendar/)
| Component |
Used In |
calendar-grid |
Content calendar page (main month grid) |
calendar-day-cell |
Calendar grid (individual day rendering) |
calendar-post-pill |
Calendar day cells (post preview pills) |
day-detail-sheet |
Calendar page (side sheet for day details) |
Chart Components (components/charts/)
| Component |
Used In |
audience-demographics |
Audience analytics page |
content-type-chart |
Analytics overview, content hub |
donut-chart |
Dashboard, analytics overview |
engagement-chart |
Engagement trends page, dashboard |
follower-growth-chart |
Dashboard, platform dashboards, audience page |
heatmap-chart |
Best posting times page |
platform-bar-chart |
Analytics overview, platform comparison |
radar-comparison |
Competitor analysis page |
sentiment-gauge |
Sentiment analysis page |
sparkline |
Dashboard stat cards, platform cards |
world-map |
Audience demographics page |
Content Composites (components/content/)
| Component |
Used In |
media-uploader |
Post composer, media library |
platform-preview |
Post composer (per-platform preview) |
post-card |
Content hub (grid view) |
post-composer |
Compose page |
post-row |
Content hub (list view) |
post-status-badge |
Content hub, calendar, post detail |
Dashboard Composites (components/dashboard/)
| Component |
Used In |
platform-card |
Home dashboard (connected platform overview) |
quick-actions |
Home dashboard (compose, schedule, analytics shortcuts) |
stats-card |
Dashboard, analytics, platform dashboards |
top-posts-carousel |
Home dashboard (best-performing posts) |
upcoming-posts |
Home dashboard (next scheduled posts) |
Layout Components (components/layout/)
| Component |
Purpose |
app-header |
Top bar with search, notifications, user menu |
app-sidebar |
Collapsible sidebar navigation with social media sections |
command-palette |
Global search command palette (Cmd+K) |
settings-nav |
Settings page secondary navigation |
skip-link |
Accessibility skip-to-content link |
theme-toggle |
Light/dark mode switch |
Report Composites (components/reports/)
| Component |
Used In |
export-option-card |
Export center page |
report-row |
My reports page (generated report list) |
report-template-card |
Report templates page |
Settings Composites (components/settings/)
| Component |
Used In |
connected-platform-card |
Connected accounts settings page |
notification-toggle-row |
Notification preferences page |
team-member-row |
Team management page |
Social Composites (components/social/)
| Component |
Used In |
account-card |
Platform dashboards, settings |
conversation-item |
Social inbox (conversation list) |
engagement-metrics |
Post detail, platform dashboards |
message-bubble |
Social inbox (individual messages) |
platform-badge |
Content hub, post detail, calendar |
platform-icon |
Sidebar, dashboards, throughout the app |
Accessibility Components (components/a11y/)
| Component |
Purpose |
live-region |
Announces dynamic content changes to screen readers |
visually-hidden |
Hides content visually while keeping it accessible |
Key Files
| File |
Purpose |
data/seed.ts |
All mock data (posts, platforms, analytics, conversations, team members, reports, hashtags, competitors, calendar events) |
types/index.ts |
TypeScript interfaces for all domain objects (Post, ConnectedPlatform, PlatformMetrics, Competitor, CalendarPost, ConversationThread, etc.) |
lib/utils.ts |
cn() class name utility |
hooks/use-mobile.ts |
Mobile viewport detection |
app/globals.css |
Design tokens (oklch colors with teal/cyan hue 175, spacing, typography) |