Shadcn Css

Develop Next.js Applications with Shadcn/UI and Pure CSS Modules

This starter template offers a unique approach for Next.js developers, integrating the popular shadcn/ui component library styled entirely with CSS Modules. It consciously omits Tailwind CSS, catering to those who prefer traditional CSS methodologies. The setup includes TypeScript and is built around the Next.js app router, providing a robust and modern foundation for building web applications with fine-grained control over styling and theming.

Features:

• Next.js App Router Foundation: Built upon the modern Next.js app router for enhanced routing and server capabilities.
• TypeScript First: Integrated TypeScript for robust, type-safe development from the start.
• Shadcn/UI with CSS Modules: Utilizes shadcn/ui components, meticulously styled using CSS Modules, offering an alternative to Tailwind CSS.
• Theme Management with Next-Themes: Employs next-themes for seamless light/dark mode toggling and theme customization through CSS variables (refer to styles/theme.css).
• Dedicated Theme Toggle: Provides a pre-built theme toggle component (src/shadcn/theme-toggle) for easy user interface integration.
• Customizable Animations: Component animations are centrally managed in src/styles/animations.css for easy modification.
• Radix UI Primitives Power: Components are based on accessible and unstyled Radix UI primitives, ensuring a solid foundation.
• Integrated Form Handling: Comes with react-hook-form and @hookform/resolvers for efficient form creation and validation.
• Iconography Support: Includes lucide-react and @radix-ui/react-icons for a comprehensive set of vector icons.
• Date Selection Components: Features react-day-picker for intuitive date input interfaces.
• Responsive Panel System: Incorporates react-resizable-panels for creating flexible, resizable layouts.
• Notification System: Leverages sonner for displaying user notifications and toasts.
• Carousel Functionality: Integrates embla-carousel-react for building image or content sliders.
• OTP Input Component: Includes input-otp for secure one-time password entry fields.
• Class Variance Authority: Uses class-variance-authority for managing component style variations with CSS Modules.

Summary:

shadcn/css provides a Next.js boilerplate that pairs shadcn/ui components with CSS Modules, deliberately excluding Tailwind CSS. It's an ideal choice for developers seeking a TypeScript-enabled, app router-based project with built-in theme management (light/dark modes via next-themes) and a suite of Radix UI-powered components. This template accelerates development while adhering to CSS-centric styling principles.