Next.js Shadcn-ui
Next.js Shadcn-ui is a component library which is open-source & customizable which works well with Next.js.
Next.js Shadcn-ui
- Shadcn-ui is an interesting component library since it's open source & slightly different from conventional ones such as Mui. In the Official Shadcn-ui page they state it's NOT a component library & it's just a collection of re-usable components that we can copy & paste into our project. This is my current choice for a component library I especially like it for the data-table but just like any component library it helps us build ui quicker & consistent. To me it's kinda slick & minimal in the design. The installation is easy & we can add only what we need; also I like the docs. Obviously with any package we want a large community of people using it & Shadcn is widely adopted.
Summaryof setting up Shadcn-ui in Next.js includes the following:
1. Add the shad-cn package
2. Configure components.json
3. App structure & alters
4. Add components
Details of setting up next-auth in Next.js includes the following:
1. 1. Add the shad-cn package
To install shadcn-ui we add the package.1npx shadcn-ui@latest init
2. Configure components.json
We are prompted with a few simple questions:- Which style would you like to use? › Default
- Which color would you like to use as base color? › Slate
- Do you want to use CSS variables for colors? › yes
For the style choice the New York (I like the name but currently choose the default) style uses less padding & less rounded components.
3. App structure & alters
There is a directory created "components/ui/" with a lowercase "c" & this is where the components will be added. Also if we take a look at the packages it installs are the following:- class-variance-authority
- lucid-react
- tailwind-merge
- tailwindcss-animate
4. Add components
Adding components is quite easy just add it and then in our directory of "components/ui/" the component is added.1npx shadcn-ui@latest add input
Then next we can utilize other shadcn-ui components to our projects.