Production Ready

Next.js StarterKit

A comprehensive, production-ready template with Tailwind CSS v4, ShadCN components, and modern tooling. Zero configuration, SEO optimized, and fully accessible.

Everything You Need

Built with modern best practices, accessibility in mind, and optimized for performance.

Modern Stack

Latest Next.js 15+, React 19, TypeScript, and Tailwind CSS v4

• App Router with Server Components
• TypeScript with strict configuration
• Tailwind CSS v4 with dark theme
• ESLint + Prettier pre-configured

ShadCN Components

Beautiful, accessible components built with Radix UI

• 50+ pre-built components
• Fully customizable with CSS variables
• Dark mode optimized
• Copy-paste friendly

Accessibility First

WCAG 2.1 AA compliant with comprehensive a11y features

• Keyboard navigation support
• Screen reader optimized
• High contrast ratios
• Semantic HTML structure

SEO Optimized

Built-in SEO best practices and structured data

• Meta tags and Open Graph
• Structured data markup
• Sitemap and robots.txt
• Performance optimized

Zero Configuration

Clone, install, and start building immediately

• No setup required
• Pre-configured tooling
• Comprehensive documentation
• Example implementations

Production Ready

Optimized for deployment and scalability

• Optimized bundle size
• Image optimization
• Font loading optimization
• Deployment ready

Color Palette

Tailwind CSS color palette excluding purple variants, optimized for dark themes with WCAG AA contrast ratios. Click any color to copy its hex value to your clipboard.

Slate

Slate color variations from light to dark

slate-50

#f8fafc

Copy

slate-100

#f1f5f9

Copy

slate-200

#e2e8f0

Copy

slate-300

#cbd5e1

Copy

slate-400

#94a3b8

Copy

slate-500

#64748b

Copy

slate-600

#475569

Copy

slate-700

#334155

Copy

slate-800

#1e293b

Copy

slate-900

#0f172a

Copy

Blue

Blue color variations from light to dark

blue-50

#eff6ff

Copy

blue-100

#dbeafe

Copy

blue-200

#bfdbfe

Copy

blue-300

#93c5fd

Copy

blue-400

#60a5fa

Copy

blue-500

#3b82f6

Copy

blue-600

#2563eb

Copy

blue-700

#1d4ed8

Copy

blue-800

#1e40af

Copy

blue-900

#1e3a8a

Copy

Green

Green color variations from light to dark

green-50

#f0fdf4

Copy

green-100

#dcfce7

Copy

green-200

#bbf7d0

Copy

green-300

#86efac

Copy

green-400

#4ade80

Copy

green-500

#22c55e

Copy

green-600

#16a34a

Copy

green-700

#15803d

Copy

green-800

#166534

Copy

green-900

#14532d

Copy

Red

Red color variations from light to dark

red-50

#fef2f2

Copy

red-100

#fee2e2

Copy

red-200

#fecaca

Copy

red-300

#fca5a5

Copy

red-400

#f87171

Copy

red-500

#ef4444

Copy

red-600

#dc2626

Copy

red-700

#b91c1c

Copy

red-800

#991b1b

Copy

red-900

#7f1d1d

Copy

Orange

Orange color variations from light to dark

orange-50

#fff7ed

Copy

orange-100

#ffedd5

Copy

orange-200

#fed7aa

Copy

orange-300

#fdba74

Copy

orange-400

#fb923c

Copy

orange-500

#f97316

Copy

orange-600

#ea580c

Copy

orange-700

#c2410c

Copy

orange-800

#9a3412

Copy

orange-900

#7c2d12

Copy

Cyan

Cyan color variations from light to dark

cyan-50

#ecfeff

Copy

cyan-100

#cffafe

Copy

cyan-200

#a5f3fc

Copy

cyan-300

#67e8f9

Copy

cyan-400

#22d3ee

Copy

cyan-500

#06b6d4

Copy

cyan-600

#0891b2

Copy

cyan-700

#0e7490

Copy

cyan-800

#155e75

Copy

cyan-900

#164e63

Copy

Accessibility Notes

All colors meet WCAG AA contrast requirements for their intended use
Color swatches are keyboard navigable and screen reader accessible
Purple variants are excluded as per design requirements
Each color includes both visual and textual information

Typography Showcase

Comprehensive typography examples using semantic HTML elements with Tailwind CSS classes optimized for dark themes and accessibility. All text maintains WCAG AA contrast ratios.

Heading Hierarchy

Proper heading structure is crucial for SEO and screen reader navigation. Use headings in sequential order to create a logical document outline.

`<h1>`

Main page heading - largest and most prominent

Heading Level 1

Tailwind Classes:

text-4xl font-bold tracking-tight lg:text-5xl text-foreground

`<h2>`

Section headings - major content divisions

Heading Level 2

Tailwind Classes:

text-3xl font-semibold tracking-tight text-foreground

`<h3>`

Subsection headings - content subdivisions

Heading Level 3

Tailwind Classes:

text-2xl font-semibold tracking-tight text-foreground

`<h4>`

Minor headings - detailed content organization

Heading Level 4

Tailwind Classes:

text-xl font-semibold tracking-tight text-foreground

`<h5>`

Small headings - fine-grained content structure

Heading Level 5

Tailwind Classes:

text-lg font-semibold tracking-tight text-foreground

`<h6>`

Smallest headings - minimal content divisions

Heading Level 6

Tailwind Classes:

text-base font-semibold tracking-tight text-foreground

Body Text & Paragraphs

Various paragraph styles for different content types and emphasis levels.

`<p>`

Default paragraph text with optimal line height

This is a paragraph of body text. It demonstrates the default styling for regular content with comfortable line spacing and readability optimized for dark themes. The text maintains good contrast ratios and is easily scannable.

Tailwind Classes:

leading-7 [&:not(:first-child)]:mt-6

`<p (large)>`

Large paragraph text for introductions or emphasis

This is a large paragraph that can be used for introductory text, subtitles, or when you need to emphasize important content while maintaining readability.

Tailwind Classes:

text-xl text-muted-foreground

`<p (small)>`

Small text for captions, footnotes, or secondary information

This is small text typically used for captions, footnotes, disclaimers, or other secondary information that supports the main content.

Tailwind Classes:

text-sm text-muted-foreground

`<p (muted)>`

Muted text for less prominent information

This is muted text that provides supporting information without competing with primary content for attention. It maintains accessibility while being visually subdued.

Tailwind Classes:

text-muted-foreground

Special Text Elements

Specialized text elements for quotes, code, and keyboard shortcuts.

`<blockquote>`

Blockquotes for citations and emphasized content

“The best way to predict the future is to create it. This blockquote demonstrates how to style quoted content with proper semantic markup and visual distinction.”

Tailwind Classes:

mt-6 border-l-2 pl-6 italic

`<code>`

Inline code snippets with monospace font

Use the className prop to apply Tailwind CSS classes to your components.

Tailwind Classes:

relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold

`<kbd>`

Keyboard shortcuts and key combinations

Press Ctrl + C to copy the selected text.

Tailwind Classes:

pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100

Lists

Ordered and unordered lists with proper semantic markup and styling.

`<ul>`

Unordered lists for non-sequential items

First item in the unordered list
Second item with proper spacing
Third item demonstrating list styling
Fourth item showing consistent formatting

Tailwind Classes:

my-6 ml-6 list-disc [&>li]:mt-2

`<ol>`

Ordered lists for sequential or ranked items

First step in the ordered process
Second step with proper numbering
Third step showing sequence
Fourth step completing the example

Tailwind Classes:

my-6 ml-6 list-decimal [&>li]:mt-2

Typography Best Practices

Use semantic HTML elements for proper document structure
Maintain consistent heading hierarchy (h1 → h2 → h3, etc.)
Ensure sufficient color contrast for accessibility (WCAG AA)
Use appropriate line heights for optimal readability
Consider font loading performance with font-display: swap

Component Gallery

Interactive showcase of ShadCN components with full accessibility support, keyboard navigation, and WCAG 2.1 AA compliance. All components work seamlessly in dark theme.

Button Variants

Different button styles for various use cases - clearly distinguishable and accessible

Code Example

<Button>Default Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline" className="border-2 border-gray-600">Outline</Button>
<Button 
  variant="ghost" 
  className="bg-gray-50 text-gray-900 dark:bg-gray-800 dark:text-white"
>
  Ghost
</Button>
<Button variant="link">Link Style</Button>
<Button variant="destructive">Destructive</Button>

Accessibility Features

•Enhanced shadows make buttons clearly clickable
•Secondary uses neutral gray for clear distinction
•Ghost button has light background with dark text for readability
•Link button has proper contrast ratios and focus indicators
•Destructive uses red outline style for safer interaction
•All variants include proper focus rings and hover states
•Dark mode variants ensure visibility in both themes

Solid Color Buttons

Vibrant solid color buttons for different actions and contexts

Code Example

<Button className="bg-blue-600 text-white hover:bg-blue-700">
  <Mail className="h-4 w-4 mr-2" />
  Send Email
</Button>
<Button className="bg-green-700 text-white hover:bg-green-800">
  <CheckCircle2 className="h-4 w-4 mr-2" />
  Approve
</Button>
<Button variant="secondary">
  <Settings className="h-4 w-4 mr-2" />
  Configure
</Button>
<Button className="bg-blue-600 text-white hover:bg-blue-700">
  <Info className="h-4 w-4 mr-2" />
  Learn More
</Button>
<Button className="bg-pink-600 text-white hover:bg-pink-700">
  <Heart className="h-4 w-4 mr-2" />
  Favorite
</Button>
<Button variant="destructive">
  <AlertCircle className="h-4 w-4 mr-2" />
  Delete
</Button>

Accessibility Features

•High contrast white text on colored backgrounds
•Icons provide visual context and meaning
•Consistent hover states with darker shades
•Semantic color meanings (green=success, red=danger)
•Shadow adds depth and button-like appearance

Gradient & Outline Styles

One gradient example and colorful outline buttons

Code Example

<Button className="bg-gradient-to-r from-blue-500 to-teal-500 text-white hover:from-blue-600 hover:to-teal-600">
  <Star className="h-4 w-4 mr-2" />
  Gradient Button
</Button>
<button 
  className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2 border-2 bg-transparent text-blue-600 hover:bg-blue-500 hover:text-white dark:text-blue-400 dark:hover:text-white" 
  style={{ borderColor: 'rgb(59 130 246)' }}
>
  Blue Outline
</button>
<button
  className="border-2 bg-transparent text-green-700 hover:bg-green-700 hover:text-white dark:text-green-400 dark:hover:bg-green-600 dark:hover:text-white"
  style={{ borderColor: 'rgb(21 128 61)' }}
>
  Green Outline
</button>
<button 
  className="border-2 bg-transparent text-orange-600 hover:bg-orange-500 hover:text-white dark:text-orange-400 dark:hover:text-white" 
  style={{ borderColor: 'rgb(249 115 22)' }}
>
  Orange Outline
</button>
<button 
  className="border-2 bg-transparent text-red-600 hover:bg-red-500 hover:text-white dark:text-red-400 dark:hover:text-white" 
  style={{ borderColor: 'rgb(239 68 68)' }}
>
  Red Outline
</button>
<button 
  className="border-2 bg-transparent text-cyan-600 hover:bg-cyan-500 hover:text-white dark:text-cyan-400 dark:hover:text-white" 
  style={{ borderColor: 'rgb(6 182 212)' }}
>
  Cyan Outline
</button>

Accessibility Features

•Gradient button uses blue-to-teal gradient with high contrast white text
•Colored outline buttons have matching border and text colors
•Hover states transform outline buttons to solid colored backgrounds
•Dark mode variants ensure proper contrast in both themes
•Color combinations tested for WCAG 2.1 AA contrast ratios
•Smooth transitions provide clear visual feedback on interaction

Button Sizes

Various button sizes with colors for different contexts

Code Example

<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon" aria-label="Settings">
  <Settings className="h-5 w-5" />
</Button>
<Button size="lg">Extra Large</Button>

Accessibility Features

•Icon buttons have descriptive aria-label and larger icons
•Consistent touch targets with minimum 44px height
•Visual hierarchy through sizing and color coding
•High contrast colors maintain accessibility across all sizes
•Extra large button provides generous touch target

Interactive Buttons

Stateful buttons with dynamic content and colors

Code Example

const [isLiked, setIsLiked] = useState(false)
const [likeCount, setLikeCount] = useState(42)
const [isStarred, setIsStarred] = useState(false)
const [starCount, setStarCount] = useState(128)

<Button 
  variant="outline" 
  onClick={handleLike}
  className={`gap-2 transition-all duration-200 ${isLiked ? 'border-red-500 bg-red-50 dark:bg-red-950' : 'hover:border-red-300'}`}
  aria-pressed={isLiked}
>
  <Heart className={`h-4 w-4 ${isLiked ? 'fill-red-500 text-red-500' : 'text-gray-500'}`} />
  {likeCount} {isLiked ? 'Liked' : 'Like'}
</Button>

<Button 
  onClick={handleStar}
  className={`gap-2 transition-all duration-200 ${isStarred ? 'bg-yellow-600 hover:bg-yellow-700' : 'bg-gray-600 hover:bg-gray-700'} text-white`}
  aria-pressed={isStarred}
>
  <Star className={`h-4 w-4 ${isStarred ? 'fill-yellow-300 text-yellow-300' : 'text-white'}`} />
  {starCount} {isStarred ? 'Starred' : 'Star'}
</Button>

Accessibility Features

•Uses aria-pressed for toggle states on both buttons
•Dynamic aria-labels describe current state and counts
•Visual and programmatic state changes with color feedback
•Screen reader announces state changes for both interactions
•Color changes provide clear visual feedback for state

Accessibility Standards

Keyboard Navigation

Tab/Shift+Tab for focus navigation
Enter/Space for activation
Arrow keys for grouped controls
Escape to close modals/dropdowns

Screen Reader Support

Semantic HTML elements
ARIA labels and descriptions
Role attributes for custom components
State announcements for dynamic content

Code Examples

Interactive code blocks with syntax highlighting and copy functionality.

Next.js Page Component

typescript

1import { Metadata } from 'next'
2import { Button } from '@/components/ui/button'
3import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
4 
5export const metadata: Metadata = {
6  title: 'My Page',
7  description: 'A sample Next.js page with ShadCN components',
8}
9 
10export default function MyPage() {
11  return (
12    <div className="container mx-auto py-8">
13      <Card>
14        <CardHeader>
15          <CardTitle>Welcome to Next.js</CardTitle>
16        </CardHeader>
17        <CardContent>
18          <p className="mb-4">This is a sample page using ShadCN components.</p>
19          <Button>Get Started</Button>
20        </CardContent>
21      </Card>
22    </div>
23  )
24}

Tailwind Configuration

typescript

import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        primary: 'hsl(var(--primary))',
        'primary-foreground': 'hsl(var(--primary-foreground))',
      },
    },
  },
  plugins: [],
} satisfies Config

export default config

ShadCN Component

typescript

'use client'

import * as React from 'react'
import { cn } from '@/lib/utils'

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'default' | 'secondary' | 'outline'
  size?: 'default' | 'sm' | 'lg'
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant = 'default', size = 'default', ...props }, ref) => {
    return (
      <button
        className={cn(
          'inline-flex items-center justify-center rounded-md font-medium',
          'focus-visible:outline-none focus-visible:ring-2',
          {
            'bg-primary text-primary-foreground hover:bg-primary/90': variant === 'default',
            'bg-secondary text-secondary-foreground hover:bg-secondary/80': variant === 'secondary',
            'border border-input hover:bg-accent': variant === 'outline',
          },
          {
            'h-10 px-4 py-2': size === 'default',
            'h-9 px-3': size === 'sm',
            'h-11 px-8': size === 'lg',
          },
          className
        )}
        ref={ref}
        {...props}
      />
    )
  }
)
Button.displayName = 'Button'

export { Button }

CSS Variables

css

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222.2 84% 4.9%;
    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --border: 214.3 31.8% 91.4%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 84% 4.9%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --border: 217.2 32.6% 17.5%;
  }
}

Package Configuration

json

{
  "name": "nextjs-starterkit",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "^15.1.3",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "tailwindcss": "^4.0.0",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "tailwind-merge": "^2.5.4",
    "lucide-react": "^0.468.0"
  },
  "devDependencies": {
    "@types/node": "^22.10.2",
    "@types/react": "^19.0.2",
    "@types/react-dom": "^19.0.2",
    "typescript": "^5.7.2",
    "eslint": "^9.17.0",
    "eslint-config-next": "^15.1.3"
  }
}

Code Block Features

Syntax highlighting optimized for dark themes
One-click copy to clipboard functionality
Optional line numbers for reference
Keyboard accessible with proper focus management
Responsive design with horizontal scrolling
Language badges for context