Simple Starterkit for NextJS (App Router / Dir) Application using Shadcn/UI, TailwindCSS
- Refactoring Shadcn into plugin and preset
- Easy to change or add more theme
- Setting up the dark mode
- Login and Register Page
- Using the best Icon from Tabler (Components from Shadcn/UI are modified using Tabler Icons too)
- Setting up prettier from Prettier Plugin Tailwindcss
- Setting up Tailwind Merge and CLSX
- Using Geist Font from NextJS
- Provide some custom hooks for Loading
- Provide some custom hooks for handle Dialog from Shadcn/UI
- Add TanStack Query for fetching data on client
git clone
cd project
npm install && npm run dev
This starterkit uses a number of open source projects to work properly:
- NextJs - The React Framework for the Web
- Shadcn/UI - Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
- TailwindCSS - A utility-first CSS framework packed with classes
- Tabler Icons - Free and open source icons designed to make your website or app attractive, visually consistent and simply beautiful.
- Tailwind Prettier
- Geist Font - Geist truly represents the coding and design spirit within Vercel's creative community.
- TanStack - Headless, type-safe, & powerful utilities for State Management, Routing, Data Visualization, Charts, Tables, and more.
- Go to Shadcn Themes and chose theme
- Open file
./lib/shadcn/plugin.ts
add or customize the thme - Restart the server