Primeros pasos
Instala listkit, registra su hoja de estilos de Tailwind v4 y renderiza una lista funcional en pocas líneas.
Inicio rápido
pnpm add listkit react react-dom lucide-react tailwindcss/* app/globals.css */
@import 'tailwindcss';
@import 'listkit/tailwind.css';// app/providers.tsx
'use client'
import { ListKitProvider } from 'listkit'
import { useNextRouterAdapter } from 'listkit/next'
export function Providers({ children }) {
const router = useNextRouterAdapter()
return (
<ListKitProvider router={router} theme='blue'>
{children}
</ListKitProvider>
)
}// app/page.tsx
import { ListView } from 'listkit'
export default function Page() {
return <ListView config={productsConfig} data={products} />
}¿Quieres aún menos cableado? <NextListView> (listkit/next) inyecta el adaptador de router y el provider por ti — mira la sección Menos boilerplate (Next.js).
Instalación
pnpm add listkit
# peers
pnpm add react react-dom lucide-react tailwindcssPeers opcionales (instala solo lo que uses):
pnpm add zod # filtros avanzados (validación de valores)
pnpm add next # useNextRouterAdapter
pnpm add react-router-dom # useReactRouterAdapterTodo lo demás (react-datepicker, clsx, tailwind-merge) viene empaquetado como dependencia regular — no necesitas instalar nada extra.
Configuración de Tailwind v4
listkit incluye sus clases compiladas; regístralas una vez para que Tailwind las genere:
/* app/globals.css */
@import 'tailwindcss';
@import 'listkit/tailwind.css';Los estilos de react-datepicker se inyectan automáticamente en runtime (seguros para SSR), así que no necesitas importar CSS adicional.