Shadcn: The Ultimate Component Companion

Introduction

Shadcn is a collection of components that are build using Tailwind CSS , a framework of CSS and the entire project is build using Typescript. Despite not being available on any package manager and not formally labeling itself as a component library, Shadcn, a collection of Tailwind CSS and Typescript components, has rapidly gained traction in the industry. This rise in popularity begs the question: what sets Shadcn apart from the numerous existing component libraries? Let's find out.

Beautiful Components

It is very obvious that Shadcn has a collection of visually stunning components that attracts developers. The default "New York" font adds a touch of elegance, making Shadcn the perfect choice for developers seeking to craft modern, premium websites and webapps in a flash.

The website of Vercel is built using Shadcn components.

Advantages

1. Easy to use:

   Putting the components to work from the collection has a very low learning curve. They are really easy to use, we will explore this further in the blog.

2. Highly customizable:

   The code of every component is provided by Shadcn. A user can modify the component as per their requirement. Since it is built using Tailwind CSS, components can be easily modified.

   

3. Open source:

   The code is open source, that means you can fix bugs, build a new component or find a new way of contributing in Shadcn. Since, it is open source highly skilled developers across the globe contribute to this project to make it better.

   💡

   You can even publish your own component library using Shadcn components. The owner will not claim any copyright.

4. UI/UX:

   Experience interfaces that are not only visually stunning but also intuitive and responsive across all devices.The user experience is mostly smooth and impressive.

   

5. Scalable:

   The components offered by the collection are highly scalable. From a simple landing page to a complex web app, these components can adapt to various project sizes.

Installation

Utilizing Shadcn components is very easy. I will demonstrate ease of use through a Next.js project.

Steps to get started:

1. Create a Next.js project by using

    npx create-next-app@latest project-name --typescript --tailwind --eslint
   

2. Initiate Shadcn after navigating into your project directory

    npx shadcn-ui@latest init
   

3. Choose the options for your components.json configuration

   Would you like to use TypeScript (recommended)? no / yes

   Which style would you like to use? › Default

   Which color would you like to use as base color? › Slate

   Where is your global CSS file? › › app/globals.css

   Do you want to use CSS variables for colors? › no / yes

   Are you using a custom tailwind prefix eg. tw-? (Leave blank if not) ...

   Where is your tailwind.config.js located? › tailwind.config.js

   Configure the import alias for components: › @/components

   Configure the import alias for utils: › @/lib/utils

   Are you using React Server Components? › no / yes

4. This is the recommended file structure for your project

Now that we are done with the Next.js setup and Shadcn initiation let's bring in some components into our project

Let's bring in a simple button component with this command. This command will add button to your components/ui folder.

npx shadcn-ui@latest add button

Remove the template code from page.js and use the button component as shown below.

Run npm run dev to start your next.js project and there you have your button component.

This is how simple it is to use highly scalable and beautiful components in your project.🥳 Visit the official website for more components.

Conclusion

Building stunning UIs shouldn't feel like scaling a mountain. Shadcn has taken the initiative to save your time and energy by providing such stunning components. Also I would recommend you to visit their official website and take a look at their codebase so that you can add your valuable contribution to make it better. Thankyou😊

Also checkout my other blog where I explain you the difference between Access token and Refresh token

Difference between Access and Refresh token