@fcfmclub/ui

Biblioteca de componentes UI de FCFM Club construida con shadcn/ui y Tailwind CSS.

Instalación

npm install @fcfmclub/ui

Dependencias requeridas

Este paquete requiere las siguientes dependencias peer:

npm install react react-dom tailwindcss

Configuración

1. Importar CSS global

En tu archivo principal de CSS o app/globals.css:

@import "@fcfmclub/ui/styles";

O importa directamente en tu layout.tsx:

import "@fcfmclub/ui/styles";

Uso

Importar componentes

Puedes importar componentes de varias formas:

Importación desde el índice principal:

import { Button, Card, Input } from "@fcfmclub/ui";

Importación directa (tree-shaking optimizado):

import { Button } from "@fcfmclub/ui/button";
import { Card, CardHeader, CardContent } from "@fcfmclub/ui/card";
import { Input } from "@fcfmclub/ui/input";

Utilidad cn:

import { cn } from "@fcfmclub/ui/utils";

Ejemplo básico

import { Button } from "@fcfmclub/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@fcfmclub/ui/card";
import { Input } from "@fcfmclub/ui/input";

export default function MyComponent() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Título</CardTitle>
      </CardHeader>
      <CardContent>
        <Input placeholder="Escribe algo..." />
        <Button>Guardar</Button>
      </CardContent>
    </Card>
  );
}

Componentes disponibles

Formularios y Entrada

• Button - Botones con múltiples variantes
• Input - Campos de entrada de texto
• Textarea - Áreas de texto
• Checkbox - Casillas de verificación
• Select - Selectores desplegables
• Form - Componentes de formulario con validación
• Label - Etiquetas para formularios

Layout

• Card - Tarjetas para contenido
• Separator - Separadores visuales
• Sidebar - Barra lateral con navegación

Overlays

• Dialog - Diálogos modales
• Drawer - Cajones deslizables
• Sheet - Paneles laterales
• Credenza - Diálogos responsivos
• Popover - Popovers flotantes
• Tooltip - Tooltips informativos
• HoverCard - Tarjetas al pasar el mouse
• DropdownMenu - Menús desplegables

Navegación

• Command - Paleta de comandos
• Pagination - Paginación

Feedback

• Progress - Barras de progreso
• Skeleton - Placeholders de carga

Display

• Avatar - Avatares de usuario

Grupos

• ButtonGroup - Grupos de botones
• InputGroup - Grupos de inputs

Variables CSS

Todas las variables de color y espaciado están definidas en el CSS global y pueden ser personalizadas:

:root {
  --background: oklch(0.9816 0.0017 247.839);
  --foreground: oklch(0.1649 0.0352 281.8285);
  --primary: oklch(0.6726 0.2904 341.4084);
  /* ... más variables */
}

TypeScript

Todos los componentes están completamente tipados con TypeScript.

Ejemplos

Botones

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

<Button>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>

<Button size="sm">Small</Button>
<Button size="lg">Large</Button>
<Button size="icon">🔥</Button>

Formularios con React Hook Form

import { useForm } from "react-hook-form";
import {
  Form,
  FormField,
  FormItem,
  FormLabel,
  FormControl,
  FormMessage,
} from "@fcfmclub/ui/form";
import { Input } from "@fcfmclub/ui/input";
import { Button } from "@fcfmclub/ui/button";

function MyForm() {
  const form = useForm();

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email</FormLabel>
              <FormControl>
                <Input placeholder="[email protected]" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit">Enviar</Button>
      </form>
    </Form>
  );
}

Licencia

MIT

Autor

FCFM Club