The Blog CMS Kit uses Next.js App Router with route groups to separate the public blog, admin CMS, and authentication flows.
Directory Overview
blog-cms-kit/
├── app/
│ ├── (blog)/ # Public blog pages
│ │ ├── layout.tsx # BlogHeader + BlogFooter
│ │ ├── about/page.tsx
│ │ ├── authors/
│ │ │ └── [slug]/page.tsx # Author profile
│ │ ├── categories/
│ │ │ └── [slug]/page.tsx # Category listing
│ │ ├── newsletter/page.tsx
│ │ ├── posts/
│ │ │ └── [slug]/page.tsx # Article detail
│ │ ├── search/page.tsx
│ │ └── tags/
│ │ └── [slug]/page.tsx # Tag listing
│ ├── (admin)/ # Admin CMS pages
│ │ ├── layout.tsx # AdminSidebar + AdminHeader
│ │ └── admin/
│ │ ├── page.tsx # Dashboard overview
│ │ ├── posts/
│ │ │ ├── page.tsx # Posts list
│ │ │ ├── new/page.tsx # New post editor
│ │ │ └── [id]/edit/page.tsx # Edit post
│ │ ├── media/page.tsx # Media library
│ │ ├── categories/page.tsx
│ │ ├── tags/page.tsx
│ │ ├── comments/page.tsx
│ │ ├── subscribers/page.tsx
│ │ ├── authors/page.tsx
│ │ ├── analytics/page.tsx
│ │ ├── scheduled/page.tsx
│ │ └── settings/page.tsx
│ ├── (auth)/ # Authentication
│ │ ├── layout.tsx # Centered card layout
│ │ ├── login/page.tsx
│ │ └── forgot-password/page.tsx
│ ├── page.tsx # Homepage (standalone layout)
│ ├── rss/page.tsx # RSS feed preview
│ ├── sitemap-preview/page.tsx # Sitemap preview
│ ├── not-found.tsx # 404 page
│ ├── globals.css # Design tokens
│ └── layout.tsx # Root layout
├── components/
│ ├── ui/ # shadcn/ui primitives (31 components)
│ ├── blog/ # Blog composites (12 components)
│ ├── admin/ # Admin composites (4 components)
│ ├── layout/ # Layout components (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 |
(blog) |
BlogHeader + BlogFooter |
Public blog pages (categories, tags, authors, search, etc.) |
(admin) |
AdminSidebar + AdminHeader |
CMS management pages |
(auth) |
Centered card |
Login, forgot password |
Note: The homepage (app/page.tsx) uses a standalone layout with its own BlogHeader and BlogFooter to support the featured hero section.
Component Organization
Primitives (components/ui/)
31 shadcn/ui components: Accordion, AlertDialog, Avatar, Badge, Breadcrumb, Button, 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.
Blog Composites (components/blog/)
| Component |
Used In |
post-card |
Homepage, categories, tags, authors, search, related posts |
post-hero |
Homepage featured section |
post-body |
Article detail page |
post-toc |
Article sidebar (table of contents) |
post-navigation |
Article prev/next links |
share-buttons |
Article detail page |
author-card |
Article detail, about page |
category-tabs |
Homepage category filtering |
newsletter-form |
Homepage, about, newsletter archive |
reading-progress |
Article detail page (top progress bar) |
search-results |
Search page |
comment-card |
Article comments section |
Admin Composites (components/admin/)
| Component |
Used In |
stats-card |
Dashboard, analytics, subscribers |
status-badge |
Posts list, edit post, dashboard |
activity-timeline |
Dashboard recent activity |
analytics-chart |
Analytics page (PageviewChart, TrafficSourceChart, SubscriberGrowthChart, PostViewsChart) |
Layout Components (components/layout/)
| Component |
Purpose |
blog-header |
Blog navigation with search, categories, theme toggle |
blog-footer |
Footer links, newsletter, social media |
admin-sidebar |
Admin navigation with collapsible sidebar |
admin-header |
Admin top bar with mobile menu trigger |
theme-toggle |
Light/dark mode switch |
skip-link |
Accessibility skip navigation |
Key Files
| File |
Purpose |
data/seed.ts |
All mock data (posts, authors, categories, tags, comments, media, analytics, subscribers) |
types/index.ts |
TypeScript interfaces for all domain objects (Post, Author, Category, Tag, Comment, MediaItem, etc.) |
lib/utils.ts |
cn() class name utility |
hooks/use-mobile.ts |
Mobile viewport detection |
app/globals.css |
Design tokens (oklch colors with amber hue 55, spacing, typography) |