Introducing Shadcn UI: A reusable UI component collection

Shadcn UI takes a different approach from other UI and component libraries like Material UI and Chakra UI. Where those libraries offer access to components through their bundled packages, Shadcn UI does something different and instead allows you to download the source code for individual UI components into your codebase.

Also, according to its creator, Shadcn UI isn’t actually a component library. What exactly is it, then? We’ll explore that and more in this article!

We’ll learn about Shadcn UI, its features, its benefits, and why developers love and can’t seem to get enough of it. Along the way, we’ll build some UI interfaces with it, as well. Let’s dive in!

What is Shadcn UI?

Shadcn UI is not actually a component library or UI framework. Instead, according to the documentation, it is “a collection of reusable components that we can copy and paste into our apps.” This reusable component collection was created by Shadcn, who has also created great open source projects like Taxonomy, Next.js for Drupal, and Reflexjs.

Shadcn UI is built on top of Tailwind CSS and Radix UI and currently supports Next.js, Gatsby, Remix, Astro, Laravel, and Vite. However, there is a guide for manually integrating it with other technologies.

Although Shadcn UI was released only a few months ago, it has quickly become one of the most viral UI solutions in the web development ecosystem. Everyone seems to be talking about and building with it, including the folks at Vercel. As of this writing, it has 34.5k GitHub stars and over 1 million page views.

Shadcn UI has grown so popular that there is already an unofficial Svelte extension for it, which itself has already gained 2k GitHub stars as of this writing. The impact of the library has been so great that its creator landed a job at Vercel, meaning that Shadcn UI is now backed by Vercel.

Let’s get to know Shadcn UI a little better by exploring several of its features.

Shadcn UI features

Shadcn UI provides several features that you can leverage for an enhanced user experience. Let’s take a closer look at the following features: themes and theme editor, dark mode, CLI, and multiple components.

Themes and theme editor

Shadcn UI provides hand-picked themes that you can copy and paste into your applications. You can manually add theme tokens through the codebase, but you also achieve the same results using Shadcn UI’s theme editor.

The theme editor’s interface allows you to configure themes for properties such as color, border radius, and mode (light or dark). You can also choose between two styles: default and new-york. The styles have unique components, animations, icons, and more.

The default style has larger input fields and uses lucide-react icons and tailwindcss-animate for animations. The new-york style has smaller buttons, cards with shadows, and uses Radix Icons.

You can also easily create custom themes via a Shadcn UI’s graphical interface. The editor outputs a piece of code containing your custom style definitions. Then, you simply copy the code and paste it into your application:

Here’s a sample of the theme editor’s code output. It provides style tokens for both light mode and dark mode:

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.3rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
  }
}

Dark mode

Shadcn UI supports dark mode for Next.js and Vite applications. For Next.js applications, Shadcn UI uses next-themes for the dark mode toggling functionality. When a user toggles between light and dark mode, the application switches between the light and dark theme tokens.

CLI

You can use Shadcn UI’s CLI to integrate the library with your applications, add dependencies, and apply the relevant tailwind.config.js configurations. You can also add UI components to your applications with the CLI.

You can either manually copy and paste the code for each component from the documentation or add them with the CLI. The CLI provides a superior developer experience and is one more feature that makes Shadcn UI to work with.

Multiple components

As of this writing, Shadcn UI has 40 components, including Accordion, Skeleton, Table, and Popover. Instead of building components from scratch, you can save time by leveraging the Shadcn UI’s prebuilt components.

Benefits of Shadcn UI

Shadcn UI provides several benefits compared to other component libraries. Here are the most significant:

• Ease of use: Anyone with basic knowledge of HTML, CSS, JavaScript, and a framework or two can quickly get started with Shadcn UI. Its components are easily accessed using either the copy and paste or CLI installation method. I’ve used different component libraries like Material UI and Chakra UI, and Shadcn UI doesn’t fall short in that regard
• Accessibility: Shadcn UI’s components are fully accessible and adhere to Web Content Accessibility Guidelines (WCAG) standards. It supports screen readers, keyboard navigation, and other accessibility features. You can use Shadcn UI to create applications that are both beautiful and accessible to all users
• Fine-grained control and extensibility: Shadcn UI provides direct access to each component’s source code, so you can easily adjust the code to fit unique use cases and application needs. This ease of customization helps Shadcn UI stand out among other UI solutions and makes it a delight to work with. Easy access to component code also improves flexibility and makes it easier to scale and maintain applications

Caveats

There are a couple of things you should know before deciding whether to use Shadcn UI in future projects.

First, having to manually install or copy every component that you need can be a hassle. This extra step is not a big issue, but can add more stress to the developer experience, particularly for those who are used to importing components from a package.

Second, while having direct access to components’ code is beneficial in terms of modularity and extensibility, it also results in a larger codebase with more lines of code.

Getting started with Shadcn UI

This tutorial will cover how to integrate Shadcn UI with Next.js. Refer to the installation guide for instructions on integrating with other frameworks.

To get started, create a new Next.js application by running the command below:

npx create-next-app@latest my-app --typescript --tailwind --eslint

Next, run the init command to initialize dependencies for a new project:

npx shadcn-ui@latest init

The CLI will prompt you to make some configurations. Here’s a sample of the configuration questions:

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
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

That’s it! Now you can start adding components to your applications.

Creating a button with Shadcn UI

Creating a button component with Shadcn UI is as easy as copying its code from the button docs or adding it with the CLI. Run the command below to add it using the CLI:

npx shadcn-ui@latest add button

I prefer using the CLI because it automatically creates a components folder for me and makes the process more seamless. Once I have the component, all I need to do is export it from its folder, and bam! Here’s the code:

import { Button } from "@/components/ui/button"

<Button variant="outline">Button</Button>

The Button component has six variants: default, destructive, outline, secondary, ghost, and link.

Creating a login form with Shadcn UI

I love that when it comes to forms, Shadcn UI goes a step further than just offering form components like Input, Textarea, Checkbox, and RadioGroup. It also provides a Form component, which is a wrapper around react-hook-form.

Here are some of the things the Form component provides:

• A <FormField /> component for building controlled form fields
• Support for validation with form validation libraries like Valibot, Yup, and Zod.
• Error message handling

You can access the component by running the command below:

npx shadcn-ui@latest add form input

Next, set up the components for the form, like so:

"use client"

import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import * as z from "zod"

import { Button } from "@/components/ui/button"
import {
  Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"

const FormSchema = z.object({
  username: z.string().min(2, {
    message: "Username must be at least 2 characters.",
  }),
})

export function InputForm() {
  const form = useForm({ resolver: zodResolver(FormSchema) })

  function onSubmit(data) {
    <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
      {JSON.stringify(data, null, 2)} </pre> } return ( <Form {...form}> <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6"> <FormField control={form.control} name="username" render={({ field }) => ( <FormItem> <FormLabel>Username</FormLabel> <FormControl> <Input placeholder="Input username" {...field} /> </FormControl> <FormMessage /> </FormItem> )} /> <Button type="submit">Submit</Button> </form> </Form> ) }

Here’s the online form built with the above code:

Conclusion

Shadcn UI is a breath of fresh air compared to existing component libraries, enabling developers to create beautiful user interfaces with a unique flair. It ticks the box in terms of user experience and development speed, while also giving devs fine-grained control over the components they use.

No library is ever a one-size-fits-all solution, but based on current trends, I expect Shadcn UI to become a top contender in the frontend ecosystem. It’s already being adopted by big players like Vercel. For example, Vercel’s v0 application is an AI-powered tool that uses Shadcn UI, Tailwind CSS, and text prompts to generate UI code that developers can copy and paste into their applications.

Shadcn UI is still a relatively new UI solution, and I hope to see more components added to it over time. What do you think about this new tool? Will you try it out in future projects? Are you already using it? Drop a comment — I’d love to know!