Sistema de Componentes

El sistema de componentes de Creative Minds está construido sobre shadcn/ui , una colección de componentes reutilizables construidos con Radix UI y estilizados con Tailwind CSS. Este enfoque nos permite:

Mantener el control total del código de los componentes
Personalización completa de estilos y comportamientos
Actualizaciones selectivas de componentes individuales
Documentación unificada con ejemplos interactivos

Configuración Inicial

Para comenzar a usar los componentes en tu proyecto:

Instala las dependencias necesarias:


npx shadcn-ui@latest init

Sigue el asistente de configuración. Recomendamos estas opciones:
- Estilo: Default
- Base color: Slate
- CSS variables: Yes
- Directorio de componentes: @/components/ui
- Utilizar alias: @/*

Añadir Componentes

Usando el CLI de Creative Minds (Recomendado)

Puedes acceder a los componentes del registry de Creative Minds usando el CLI oficial:


# Añadir un componente UI
npx cm registry add button
npx cm registry add card
npx cm registry add dropdown-menu
 
# Añadir una característica completa
npx cm registry add feature-auth
npx cm registry add feature-dashboard
 
# Añadir un módulo completo
npx cm registry add module-ecommerce

Usando shadcn/ui directamente

También puedes usar directamente el CLI de shadcn/ui si lo prefieres:


npx shadcn-ui@latest add button
npx shadcn-ui@latest add card
npx shadcn-ui@latest add dropdown-menu

Nota: El CLI de Creative Minds (cm registry) es la forma recomendada ya que incluye componentes personalizados y configuraciones específicas para el ecosistema de Creative Minds.

Estructura de Directorios


components/
  ui/
    button.tsx
    card.tsx
    dropdown-menu.tsx
    ...
  shared/
    header.tsx
    footer.tsx
  features/
    auth/
      login-form.tsx
    dashboard/
      stats-card.tsx

Uso de Componentes

Los componentes pueden ser importados directamente desde @/components/ui:


import { Button } from "@/components/ui/button"
import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
 
export function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Hola Mundo</CardTitle>
        <CardDescription>Un ejemplo de tarjeta</CardDescription>
      </CardHeader>
      <Button>Haz clic</Button>
    </Card>
  )
}

Personalización

Temas

Puedes personalizar los temas editando el archivo app/globals.css:


@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    /* ... */
  }
 
  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    /* ... */
  }
}

Componentes

Cada componente puede ser personalizado editando su archivo correspondiente en components/ui/. Por ejemplo, para personalizar el botón:


// components/ui/button.tsx
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
 
const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline: "border border-input hover:bg-accent hover:text-accent-foreground",
        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "underline-offset-4 hover:underline text-primary",
        // Añade tus variantes personalizadas aquí
        premium: "bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white"
      },
      size: {
        default: "h-10 py-2 px-4",
        sm: "h-9 px-3 rounded-md",
        lg: "h-11 px-8 rounded-md",
        icon: "h-10 w-10"
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)
 
export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}
 
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button"
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  }
)
Button.displayName = "Button"
 
export { Button, buttonVariants }

Tambien

Mira la lista de componentes de shadcn a continuación
Explora la documentación de shadcn/ui
CLI - Herramientas de desarrollo

Sistema Evolutivo: Este sistema de componentes está diseñado para crecer. Cada componente sigue patrones consistentes que facilitan el mantenimiento y la extensión.