Next.Js 15, React 19, Tailwind CSS, ShadCN, Jotai Boilerplate

Overview

This project is a boilerplate starter for building modern web applications using Next.js 15, React 19, Tailwind CSS, ShadCN, and Jotai. It incorporates a variety of libraries and tools to enhance development efficiency, user experience, and accessibility.

Ready to use libraries

• Next.js 15.x: A powerful React framework for server-side rendering, static site generation, and API routes.
• React 19.x: A JavaScript library for building user interfaces, allowing for the creation of reusable UI components.
• Tailwind CSS: A utility-first CSS framework that enables rapid UI development with a focus on customization and responsiveness.
• ShadCN/Radix UI: A collection of accessible and customizable UI components for building consistent and modern interfaces.
• Jotai: A minimalistic state management library for React.
• Dayjs: A lightweight alternative to Moment.js for date manipulation.
• React Hook Form: A performant and flexible library for managing form state and validation.
• React Query: A library for managing server state and data fetching in React applications.
• React Router: A library for routing in React applications.
• React Table: A library for building interactive and customizable data tables.
• React Toast: A library for displaying notifications.
• React Icons: A library for using icons in React applications.
• EmblaCarousel: A library for creating responsive carousels.
• Vaul: A library for creating modals.
• Zod: A library for data validation.
• Recharts: A library for creating charts.
• Sonner: A library for displaying notifications.
• Cmndk: A library for creating command palettes.
• Input OTP: A library for creating OTP inputs.
• React Day Picker: A library for creating date pickers.
• React Resizable Panels: A library for creating resizable panels.
• Tailwind Merge: A utility for merging Tailwind CSS class names.
• Tailwind Animate: A library for adding animations to Tailwind CSS components.
• Lucide React: A library for using icons in React applications.
• ClsX: A utility for constructing className strings conditionally.
• Cmndk: A library for creating command palettes.

Dependencies

The project includes the following key dependencies:

• State Management:

  • jotai: A minimalistic state management library for React.

• Date Handling:

  • date-fns: A modern JavaScript date utility library.
  • dayjs: A lightweight alternative to Moment.js for date manipulation.

• Form Handling:

  • react-hook-form: A performant and flexible library for managing form state and validation.

• Styling:

  • ShadCN/Radix UI: A collection of accessible and customizable UI components for building consistent and modern interfaces.
  • tailwindcss: A utility-first CSS framework for rapid UI development.
  • tailwind-merge: A utility for merging Tailwind CSS class names.
  • tailwindcss-animate: A library for adding animations to Tailwind CSS components.

• Charts:

  • recharts: A composable charting library built on React components.

• Others:

  • clsx: A utility for constructing className strings conditionally.
  • sonner: A library for displaying notifications.
  • embla-carousel-react: A React carousel component for creating responsive carousels.

Development Dependencies

The project also includes several development dependencies to enhance code quality and maintainability:

• Linting and Type Checking:

  • eslint: A tool for identifying and fixing problems in JavaScript code.
  • typescript: A superset of JavaScript that adds static types.

• PostCSS: A tool for transforming CSS with JavaScript plugins, allowing for advanced styling capabilities.

• Type Definitions:

  • @types/node, @types/react, @types/react-dom: Type definitions for Node.js and React to improve TypeScript support.

Getting Started

To get started with this boilerplate, follow these steps:

1. Clone the repository:

   git clone https://github.com/AlexStack/NextJs15-React19-TailwindCSS-ShadCN-Jotai-scaffold-boilerplate-starter.git next15-react19-jotai-shadcn-tailwindcss
   cd next15-react19-jotai-shadcn-tailwindcss
   

2. Install dependencies:

   • Note: If you encounter any issues with the React 19 dependencies, you can try to install them with the --force flag.

   npm install && npm run dev
   npm install --force && npm run dev
   

3. Run the development server:

   npm run dev
   

4. Open your browser and navigate to http://localhost:3000 to see your application in action.

5. Use different port, e.g 3210:

   npm run dev -- --port 3210
   

Contributing

Contributions are welcome! Please feel free to submit a pull request or open an issue for any enhancements or bug fixes.

License

MIT