Nahuel UI

Librería de componentes UI para proyectos Next.js y React, utilizando Tailwind CSS y class-variance-authority para estilos y variantes.

Componentes incluidos

• Button
• Card
• Toast

Instalación

Desde npm (o tu registro privado)

pnpm add nahuel-ui

Desde Yalc (para desarrollo local)

yalc add nahuel-ui

Dependencias externas

Esta librería asume que el proyecto cliente ya tiene instalados:

• react
• react-dom
• next

Además, la librería incluye internamente:

• class-variance-authority (para manejo de variantes y clases).

Nota

• Los estilos dependen de Tailwind CSS. Asegúrate de tenerlo configurado en tu proyecto Next.js.

Uso básico

"use client";

import { Button, Card, Toast } from "nahuel-ui";

export default function Home() {
  return (
    <main className="min-h-screen bg-gray-50 flex flex-col items-center justify-start p-8 gap-8">
      <section className="flex gap-4 flex-wrap">
        <Button>Default</Button>
        <Button variant="outline">Outline</Button>
        <Button variant="destructive">Destructive</Button>
        <Button size="small">Small</Button>
        <Button size="large">Large</Button>
      </section>

      <section className="flex gap-4 flex-wrap">
        <Card>
          <h2 className="text-lg font-semibold">Default Card</h2>
          <p>Contenido de ejemplo dentro de la card.</p>
        </Card>
        <Card variant="elevated">
          <h2 className="text-lg font-semibold underline">Elevated Card</h2>
          <p>Card con sombra más intensa.</p>
        </Card>
        <Card variant="subtle">
          <h2 className="text-lg font-semibold">Subtle Card</h2>
          <p>Card con fondo más claro y minimalista.</p>
        </Card>
      </section>

      <section className="flex flex-col gap-4 w-full max-w-md">
        <Toast variant="info">Info: Esto es un mensaje informativo.</Toast>
        <Toast variant="success">Success: Operación completada correctamente.</Toast>
        <Toast variant="warning">Warning: Ten cuidado con esto.</Toast>
        <Toast variant="error">Error: Algo salió mal.</Toast>
      </section>
    </main>
  );
}