Skip to main contentCarbon Next.js Starter

About This Template

What is this?

This is a modern starter template combining the power of Next.js with IBM’s Carbon Design System.
It provides a solid foundation for building rapid, accessible, and performant web applications with enterprise-grade UI components.

Features

  • Carbon Design System - IBM’s open-source design system with 50+ React components
  • Next.js - React framework with App Router and Turbopack
  • TypeScript - Type-safe development experience
  • SCSS Support - Advanced styling with Sass
  • Theme Toggle - Switch between light (g10) and dark (g100) themes
  • Responsive Navigation - Hamburger menu with side navigation
  • Accessibility First - WCAG 2.1 compliant Carbon components

Key Components

This template includes several pre-configured components:

  • Header - Global navigation with theme toggle and hamburger menu
  • SideNav - Collapsible side navigation with resource links
  • ThemeToggle - Component for switching between Carbon themes
  • Landing Page - Example page with Grid layout and Tiles

Getting Started

To use this template:

  1. Clone the repository
  2. Install dependencies:
    npm install
  3. Start the development server:
    npm run dev
  4. Open your browser to:
    http://localhost:3000

Resources