Shadcn/ui - Perfect partner for tailwind

The hot combo for any next-js or react js app - tailwind with shadcn/ui.

Shadcn/ui Library

The shadcn/ui offers customizable tailwind components if you are in search for a quick components to be used in your nextjs or react project. Its a lightweight and modular collection of re-usable components who's unique point is that it only installs the code that user needs unlike other component based libraries e.g. bootstrap, which user to add the complete long list of code. Moreoever, it utlises tailwind and offers lots of customization. Another great feature is that for forms and input components, it makes use of Zod library and Reack-hooks form. Easy to setup, and easy to integrate, it defnilty can be a developer best tool if he preferes nextjs-tailwind in his stack.

Installation

After launching the nextjs project with tailwind enabled, the first command that needs to be added is:

npx shadcn-ui@latest init

This command wont add much but would create a root components folder whithin app directory. This component folder can act as any future components that user creates. When any other component is added, it will create a sub-folder by name of ui and place all related shadcn-ui components' code in that folder.

Now lets add a very basic component: Button.

For that, navigate to the button component and you will find the instructions to add button there.

npx shadcn-ui@latest add button

Usage is pretty straight-forward: Just import the component and use it like any other JSX.

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

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

Now if you navigate to the components folder and open ui folder, you would locate code for the button component that you just installed. As a reference, following is the code that you would see.

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
 
import { cn } from "@/lib/utils"
 
const buttonVariants = cva(
  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive:
          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline:
          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
        secondary:
          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)
 
export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}
 
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button"
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  }
)
Button.displayName = "Button"
 
export { Button, buttonVariants }
 

Now starting from bottom there are three points of interest.

1. The button component export button as well as button-variant. That means this button variant can also be used without using button itself, e.g. on link.

<Link className={buttonVariants({ variant: "outline" })}>
  Click here
</Link>

2. You can modify default styling by passing classname as prop as indicated by line 47 or you can add/sutract any tailwind class directly on line-8.
   Moreover, you can also add/subtrack styling of different variants by directly changing the tailwind classes on those variant. You may also add your own variant as well.

3. If you dont want to modify the component and believe in extracting changing from the source, you may notice that variant utilises some classes which picks value from the tailwind config which in turn picks the value from the css variables defined in globals.css.
   You may make the changes in globals.css and just utlise the button as it is.