¿Qué es chadcn?

Como su documentacion menciona, Chadcn NO es una biblioteca de componentes. Es una colección de componentes reutilizables que puede copiar y pegar en sus aplicaciones.

chadcn esta desarrollado encima de bibliotecas como TailwindCSS, RadixUI

• no es necesario instalarlo como una dependencia. No está disponible ni se distribuye a través de npm.
• Elige los componentes que necesitas. Copie y pegue el código en su proyecto y personalícelo según sus necesidades. El código es tuyo.
• Utilícelo como referencia para crear sus propias bibliotecas de componentes.

Instalacion

tiene varias guias de Instalacion en las que se pueden encontrar Frameworks o generadores de proyectos como Nextjs, Vitejs, Remix, Astro, Gatsby o un proyecto creado manualmente con React.

Para este ejemplo usaremos Nextjs:

npx create-next-app@latest my-app --typescript --tailwind --eslint
cd myapp
npx shadcn-ui@latest init

Si has configurado la carpeta app, es importante que el css vaya en src/app/globals.css

Luego de escoger algunas opciones ya puedes ejecutar el proyecto con npm run dev

Listo a partir de aqui puedes añadir componentes de chadcn.

Componente Boton

Por ejemplo para añadir un boton de chadcn, puedes ejecutar el siguiente comando.

npx shadcn-ui@latest add button

Tambien chadcn permite añadir manualmente componentes, es decir que te permite copiar y pegar codigo.

      <Button>
        Click me
      </Button>
     
     <Button variant="secondary">
        Click me
      </Button>

Aplicar Estilos

tambien puedes aplicar estilos de componentes de chadcn a otros componentes de React, por ejemplo este aplica los estilos de botones a etiquetas Link de Nextjs:

  <Link href="/" className={buttonVariants({ variant: "destructive" })}>
    Go Back
  </Link>

Dark Mode

"use client";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

import { ModeToggle } from "@/components/ModeToggle";

function HomePage() {
  return (
    <div className="flex h-screen items-center justify-center">
      <div>
        <Tabs defaultValue="account">
          <TabsList className="w-full">
            <TabsTrigger value="account">Account</TabsTrigger>
            <TabsTrigger value="password">Password</TabsTrigger>
          </TabsList>
          <TabsContent value="account">
            Make changes to your account here.
          </TabsContent>
          <TabsContent value="password">Change your password here.</TabsContent>
        </Tabs>

        <ModeToggle />
      </div>
    </div>
  );
}

export default HomePage;