shadcn

A modern Next.js project with shadcn/ui components, Storybook, TypeScript, and comprehensive tooling.

Tech Stack

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: shadcn/ui
• Component Development: Storybook
• Testing: Jest with Testing Library
• Package Manager: Yarn
• Code Quality:
  • ESLint - Linting
  • Prettier - Code formatting
  • Husky - Git hooks
  • lint-staged - Run linters on staged files
  • commitlint - Commit message linting

Getting Started

Prerequisites

• Node.js 18+
• Yarn

Installation

# Install dependencies
yarn install

# Run the development server
yarn dev

Open http://localhost:3000 to see your application.

Available Scripts

• yarn dev - Start the development server
• yarn build - Build the production application
• yarn start - Start the production server
• yarn lint - Run ESLint
• yarn format - Format code with Prettier
• yarn format:check - Check code formatting
• yarn test - Run tests
• yarn test:watch - Run tests in watch mode
• yarn storybook - Start Storybook development server
• yarn build-storybook - Build Storybook for production

Project Structure

shadcn/
├── .husky/              # Git hooks
├── .storybook/          # Storybook configuration
├── .vscode/             # VS Code settings (format on save enabled)
├── src/
│   ├── __tests__/       # Test files
│   ├── app/             # Next.js app directory
│   ├── components/      # React components
│   │   └── ui/          # shadcn/ui components
│   ├── lib/             # Utility functions
│   └── stories/         # Storybook stories
├── components.json      # shadcn/ui configuration
├── jest.config.ts       # Jest configuration
├── next.config.ts       # Next.js configuration
├── tailwind.config.ts   # Tailwind CSS configuration
└── tsconfig.json        # TypeScript configuration

Code Quality

Format on Save

This project is configured to format code on save in VS Code. Install the recommended extensions:

• Prettier - Code formatter
• ESLint
• Tailwind CSS IntelliSense

Git Hooks

The project uses Husky to enforce code quality:

• pre-commit: Runs lint-staged to format and lint staged files
• commit-msg: Validates commit messages using conventional commits format

Commit Message Format

Follow the Conventional Commits specification:

<type>: <description>

[optional body]

[optional footer]

Types: feat, fix, docs, style, refactor, perf, test, build, ci, chore, revert

Example:

git commit -m "feat: add button component"

shadcn/ui Components

This project includes the shadcn/ui component library. Add new components using:

npx shadcn@latest add [component-name]

Note: Due to network restrictions, you may need to add components manually. The utility function for className merging is available at src/lib/utils.ts.

Storybook

View and develop components in isolation:

yarn storybook

Open http://localhost:6006 to see Storybook.

Testing

Run tests:

yarn test          # Run all tests
yarn test:watch    # Run tests in watch mode