Un paquete de componentes React optimizado para Next.js 15 con App Router
npm install afro-npm-nextjsUn paquete de componentes React optimizado para Next.js 15 con App Router. Incluye componentes modernos y reutilizables con soporte completo para TypeScript.
- ✅ Next.js 15 con App Router
- ✅ TypeScript completo
- ✅ CSS Modules para estilos aislados
- ✅ Dark mode automático
- ✅ Responsive design
- ✅ Accesibilidad (a11y)
- ✅ Tree shaking optimizado
``bash`
npm install afro-npm-nextjso
yarn add afro-npm-nextjso
pnpm add afro-npm-nextjs
Un componente de tarjeta versátil y moderno:
`tsx
import { NextCard } from "afro-npm-nextjs";
export default function Page() {
return (
description="Una descripción opcional"
variant="primary"
onClick={() => console.log("Tarjeta clickeada!")}
>
Contenido personalizado aquí
#### Props de NextCard
| Prop | Tipo | Default | Descripción |
| ------------- | ----------------------------------------------------- | ----------- | ------------------------------ |
|
title | string | - | Título principal de la tarjeta |
| description | string | - | Descripción opcional |
| children | ReactNode | - | Contenido hijo |
| variant | 'default' \| 'primary' \| 'secondary' \| 'outlined' | 'default' | Variante visual |
| onClick | function | - | Callback para clicks |$3
Un botón moderno con múltiples variantes y estados:
`tsx
import { NextButton } from "afro-npm-nextjs";export default function Page() {
return (
Botón Principal
🚀}>
Cargando...
);
}
`#### Props de NextButton
| Prop | Tipo | Default | Descripción |
| ---------- | --------------------------------------------------------------- | ----------- | ------------------- |
|
children | ReactNode | - | Contenido del botón |
| variant | 'default' \| 'primary' \| 'secondary' \| 'outline' \| 'ghost' | 'default' | Variante visual |
| size | 'sm' \| 'md' \| 'lg' | 'md' | Tamaño del botón |
| loading | boolean | false | Estado de carga |
| icon | ReactNode | - | Icono opcional |🎨 Variantes y Estilos
$3
- default: Tarjeta blanca con borde sutil
- primary: Gradiente azul-púrpura
- secondary: Fondo gris claro
- outlined: Transparente con borde azul
$3
- default: Gris claro
- primary: Azul
- secondary: Gris oscuro
- outline: Transparente con borde
- ghost: Sin fondo, solo texto
🌙 Dark Mode
Los componentes soportan automáticamente el modo oscuro usando
prefers-color-scheme.🔧 Requisitos
- React ≥18
- Next.js ≥14 (optimizado para Next.js 15)
- TypeScript (recomendado)
📱 Ejemplo Completo
`tsx
"use client";import { NextCard, NextButton } from "afro-npm-nextjs";
import { useState } from "react";
export default function Example() {
const [loading, setLoading] = useState(false);
const handleAction = async () => {
setLoading(true);
// Simular API call
await new Promise((resolve) => setTimeout(resolve, 2000));
setLoading(false);
};
return (
style={{
padding: "20px",
display: "flex",
gap: "20px",
flexWrap: "wrap",
}}
>
title="Tarjeta Interactiva"
description="Click para ver la acción"
variant="primary"
onClick={() => alert("¡Tarjeta clickeada!")}
>
variant="outline"
size="sm"
onClick={(e) => {
e.stopPropagation();
handleAction();
}}
loading={loading}
>
{loading ? "Procesando..." : "Ejecutar Acción"}
title="Tarjeta Simple"
description="Sin interactividad"
variant="outlined"
>
Contenido estático aquí
🚀 Desarrollo
`bash
Instalar dependencias
npm installConstruir el paquete
npm run buildVerificar tipos
npm run type-checkModo desarrollo con watch
npm run dev
npm install
`Puedes probarlo en otra app local usando:
`📄 Licencia
MIT
🤝 Contribuir
Las contribuciones son bienvenidas. Por favor abre un issue o pull request.
---
Optimizado para Next.js 15 con App Router 🚀
``