shadcn/ui: The Modern Component Library 🕊️

Ok… let’s talk 😊. See we all know that now days things are happening so fast each and every day new technologies are coming out. that’s why we also have do our job in less time with better productivity and in web devlopement creating components are so frustrating and time taking that’s why we need component like shadcn.

There are also bunch of other libraries which you might know better and you want to stick to it but trust me if you are using Tailwind in your project and you are not using shadcn you are probably doing it wrong.

See atleast you should try it once.

What is shadcn/ui? 💫

shadcn/ui  is a collection of reusable React components built on Radix UI primitives and styled with Tailwind CSS. Unlike traditional libraries, you copy and paste components directly into your project.

Why Use shadcn/ui? ⚒️

1. Flexibility: Full control over component code
2. No Dependencies: No external package to manage
3. Accessibility: Built-in a11y features
4. Easy Customization: Tailwind CSS for quick styling
5. Modern Stack: React, TypeScript, and Tailwind CSS

Key Features 📜

• Composable components
• Dark mode support
• Responsive design
• TypeScript integration
• Consistent design language

Example: Button Component

import { Button } from "@/components/ui/button"
 
export default function ButtonExample() {
  return (
    <div className="flex flex-col items-center gap-4">
      <Button variant="default">Default</Button>
      <Button variant="destructive">Destructive</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link</Button>
    </div>
  )
}

Example: Form Component

"use client"
 
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { 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 ProfileForm() {
  // ...
 
  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
        <FormField
          control={form.control}
          name="username"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Username</FormLabel>
              <FormControl>
                <Input placeholder="shadcn" {...field} />
              </FormControl>
              <FormDescription>
                This is your public display name.
              </FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit">Submit</Button>
      </form>
    </Form>
  )
}

The <Form /> component is a wrapper around the react-hook-form library. It provides a few things:

• A <FormField /> component for building controlled form fields.

• Form validation using zod.

• Handles accessibility and error messages.

• Uses React.useId() for generating unique IDs.

• Applies the correct aria attributes to form fields based on states.

• Built to work with all Radix UI components.

• Bring your own schema library. We use zod but you can use anything you want.

• You have full control over the markup and styling.

• With shadcn/ui you can easily bind the form vaildation libraries like zod  and yup 

Conclusion 🤷🏼‍♂️

These examples demonstrate the flexibility and power of shadcn/ui. By providing a set of customizable, accessible components, it enables developers to quickly build complex, beautiful interfaces without sacrificing control over the final output.

Remember, the true strength of shadcn/ui lies in its adaptability. You’re not limited to the default styles or behaviors.

Bye 🖐.