Next.js Project with shadcn/ui

This is a Next.js project bootstrapped with create-next-app, featuring shadcn/ui components for a modern, accessible UI.

Tech Stack

• Framework: Next.js 15 (React-based)
• Package Manager: pnpm
• UI Components: shadcn/ui with Tailwind CSS
• Code Quality: ESLint & Prettier
• Development: VS Code Dev Container with Node.js 22

Getting Started

Using Dev Container (Recommended)

This project includes a Dev Container configuration for a consistent development environment. Open the project in VS Code and click "Reopen in Container" when prompted.

Manual Setup

If not using Dev Containers, install dependencies with pnpm:

pnpm install

Then run the development server:

pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

Project Features

• shadcn/ui Components: Pre-built, customizable components built on Radix UI primitives
• Tailwind CSS: Utility-first CSS framework for rapid UI development
• Auto-formatting: Code formatting on save with Prettier
• Font Optimization: Uses next/font to automatically optimize and load Geist

Adding shadcn/ui Components

Add new components using the shadcn/ui CLI:

pnpm dlx shadcn@latest add [component-name]

Learn More

To learn more about the technologies used in this project:

• Next.js Documentation - learn about Next.js features and API
• Learn Next.js - an interactive Next.js tutorial
• shadcn/ui Documentation - explore available components
• Tailwind CSS Documentation - utility classes reference

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out the Next.js deployment documentation for more details.