Getting Started with Next.js and shadcn/ui

Welcome to this comprehensive guide on building modern web applications with Next.js and shadcn/ui!

What is shadcn/ui?

shadcn/ui is a collection of reusable components built using Radix UI and Tailwind CSS. Unlike traditional component libraries, shadcn/ui copies components directly into your project, giving you full control over customization.

Key Benefits

• Full Control: Components live in your codebase
• TypeScript Support: Fully typed for better developer experience
• Accessible: Built on Radix UI primitives with ARIA attributes
• Customizable: Use Tailwind CSS classes to customize every aspect

Setting Up Your Project

1. Create a New Next.js App

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

2. Initialize shadcn/ui

npx shadcn@latest init

This will create a components.json configuration file and set up the necessary utilities.

3. Add Your First Component

npx shadcn@latest add button

Now you can use the button component in your app:

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

export default function Home() {
  return <Button>Click me</Button>;
}

Styling with Tailwind CSS

The components use CSS variables for theming, making it easy to support dark mode:

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
}

Building a Form

Let's create a simple form with validation using React Hook Form and Zod:

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";

const formSchema = z.object({
  email: z.string().email("Invalid email address"),
  password: z.string().min(8, "Password must be at least 8 characters"),
});

export function SignupForm() {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
  });

  const onSubmit = (values: z.infer<typeof formSchema>) => {
    console.log(values);
  };

  return (
    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
      <div>
        <Label htmlFor="email">Email</Label>
        <Input id="email" type="email" placeholder="john@example.com" />
      </div>
      <div>
        <Label htmlFor="password">Password</Label>
        <Input id="password" type="password" />
      </div>
      <Button type="submit">Sign up</Button>
    </form>
  );
}

<Button variant="default">Default</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>

Common Components Reference

Conclusion

shadcn/ui provides a fantastic foundation for building beautiful, accessible interfaces. Copy the components into your project and customize them to fit your needs!

Happy coding!