Introduction to Shadcn/ui Library

The most trending and loved UI library in 2023 and probably in 2024

Under the Hood

Frontend UI libraries are like a cakewalk to develop.

Maybe Yes, or maybe No because I developed our UI component library in my first job and I know how much pain it was.

The version compatibility, themes, UI components, customisable and so many things to take care of while making a simple UI library.

Hats off to Material UI, Mantine.dev, ChakraUI devs, these guys are doing a job that makes things easy for people like us.

Open source has changed the entire theme of software development, anything can be understood learned and developed.

But that’s not the reason for today’s story, I’ve worked with lots of UI libraries and have written the top-rated story for the same also.

Top 5 React UI Libraries

Currently, I am using mantine.dev UI library for my recent projects but soon I found the most trending and loved UI library in Frontend.

Shadcn/UI

If you are also thinking about why this name and what’s the meaning of the name, I am also not sure, need to ask the author developer itself 😃.

Moving ahead, I’ve found this library because it was trending on Twitter, app.daily.dev and dev.to and medium and hashnode.

Yeah, people love the themes and UI components from a design point of view. It’s the most subtle and minimilist UI component library I’ve ever seen.

Introduction

This is NOT a component library. It’s a collection of reusable components that you can copy and paste into your apps.

What do you mean by not a component library?

I mean you do not install it as a dependency. It is not available or distributed via npm.

Pick the components you need. Copy and paste the code into your project and customize it to your needs. The code is yours.

Use this as a reference to build your component libraries.

This is the crazier part of this shadcn.

Installation

Compatible with all the frameworks in front such as

• Next.js
• Astro
• Remix
• Vite
• Gatsby Link

I am using Next.js as the start project and you can use this code repository as the starter one.

yarn add shadcn-ui@latest init

Component.json

Shadcn/ui needs component.json to configure it in the project.

component.json file tells how you will use the UI components and configure them for you under the hood.

It also includes the functionality to add Tailwind CSS, and provide default themes and other configurations as shown below

{
 "style": "default" | "new-york",
 "configure": "tailwind.config.js" || "",
 "$schema": "https://ui.shadcn.com/schema.json",
 "rsc": `true` | `false` ,
 "ui": "@/app/ui",
 "components": "@/components",
 "tsx": `true` | `false`
}

In the above code, the following things are configured

• Tailwind CSS
• schema for UI components
• Aliases (Path aliases)
• Typescript support
• Tailwind CSS colours
• Tailwind CSS variables
• rsc value Link

Theming

Link

You can choose between using CSS variables or Tailwind CSS utility classes for theming.

2 ways to add themes

• CSS variables
• Utility class by Tailwind CSS

CSS variables include the process of defining your own CSS variables as the key-value pair. 2 convention is followed for CSS variables related theme

• Set “cssVariables”: true in component.json file
• Use primary as the background colour and foreground as the text colour, the following convention is shown below

<div className="bg-background text-foreground" />

A list of variables is available for different UI components and one can extend the variables, and mode details in the link below on how to extend the theme variables.

Themeing

Figma UI kit

I’ve found this interesting as the developer or the design team can first down the Figma UI kit making things easy for a developer to develop and match the color and theme and UI component as per design.

Every component is recreated in Figma. With customizable props, typography and icons

Components

Once the installation and theming part is over we will proceed with knowing about the components shadcn/ui provide.

Accordion
Link

Almost 40 UI components are provided by the library.

This sounds promising that most of the used things are already available and can be developed within a few seconds using shadcn/ui.

Interesting things I’ve found in the components list is the few new cool UI components such as

Command UI component
Command

Resizable
Resizable

Coolest Date Picker
Date Picker

Examples

Shadcn/ui ås usually provide basic examples for UI components.

Go ahead with shadcn/ui

Till the time see you in the next story.
Shrey
iHateReading