Next.js Shadcn-ui

Next.js Shadcn-ui is a component library which is open-source & customizable which works well with Next.js.

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:

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:
1. class-variance-authority
2. lucid-react
3. tailwind-merge
4. 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.

new