Vini Boilerplate
Boilerplate to start using Next and all modern technologies.
Overview
Next Boilerplate is a Next.js 13 template designed for building applications with Radix UI and Tailwind CSS. It provides a comprehensive set of features to streamline the development process and enhance the user experience.
Features
- Radix UI Primitives: Next Boilerplate incorporates Radix UI Primitives, a collection of accessible and reusable components, to build the user interface.
- Next with appdir: This template integrates Next.js with appdir, a powerful file-based routing solution, allowing for efficient and organized code structure.
- Tailwind CSS: Next Boilerplate utilizes Tailwind CSS, a utility-first CSS framework, to style the application and facilitate rapid development.
- Fonts with @next/font: The template enables easy integration of different fonts using the @next/font package, giving developers the freedom to customize the typography.
- Icons from Lucide: Next Boilerplate includes a range of icons from Lucide, a set of beautifully designed, open-source SVG icons, to enhance the visual appearance of the application.
- Dark mode with next-themes: It provides built-in support for dark mode using the next-themes package, allowing users to switch between light and dark modes effortlessly.
- Storybook: The template includes Storybook, a development environment for creating and testing UI components in isolation, which aids in component-driven development.
- ESLint + Prettier: Next Boilerplate comes pre-configured with ESLint and Prettier, ensuring consistent code style and identifying potential errors or issues.
- Husky + lint-staged: It implements Husky and lint-staged to automatically run ESLint and Prettier on staged files, promoting code quality and maintaining code consistency.
- Premade Components by shadcn/ui: The template offers a selection of pre-made components from shadcn/ui, simplifying the development process and accelerating time-to-market.
- Class Merging: Next Boilerplate integrates the "cn" utility, which handles conditional classes and class merging, providing a convenient way to manage dynamic styling.
Summary
Next Boilerplate is a comprehensive template for building applications with Next.js 13, Radix UI, and Tailwind CSS. It provides essential features such as Radix UI Primitives, appdir integration, Tailwind CSS styling, customizable fonts, Lucide icons, dark mode support, Storybook for component development, ESLint and Prettier for code quality, Husky and lint-staged for automatic code checks, premade components from shadcn/ui, and convenient class merging using the "cn" utility. Installing and utilizing Next Boilerplate can greatly accelerate development and enhance the user experience for Next.js applications.
- Next.js
Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Vite
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- Radix UI
Radix Primitives is a low-level UI component library with a focus on accessibility, customization and developer experience. You can use these components either as the base layer of your design system, or adopt them incrementally.
- Shadcn UI
Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Postcss
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.
- Storybook
Storybook is a tool for developing and testing UI components in isolation. It provides a sandbox environment where you can experiment with different props and states to see how your component responds.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.