Getting started
Install listkit, register its Tailwind v4 stylesheet and render a working list in a few lines.
Quick Start
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} />
}Want even less wiring? <NextListView> (listkit/next) injects the router adapter and the provider for you — see the Less boilerplate (Next.js) section.
Installation
pnpm add listkit
# peers
pnpm add react react-dom lucide-react tailwindcssOptional peers (install only what you use):
pnpm add zod # advanced filters (value validation)
pnpm add next # useNextRouterAdapter
pnpm add react-router-dom # useReactRouterAdapterEverything else (react-datepicker, clsx, tailwind-merge) is bundled as a regular dependency — no extra install needed.
Tailwind v4 Setup
listkit ships its compiled classes; register them once so Tailwind generates them:
/* app/globals.css */
@import 'tailwindcss';
@import 'listkit/tailwind.css';react-datepicker styles are injected automatically at runtime (SSR-safe), so you don't need to import any extra CSS.