kokonutuilisted

# KokonutUI KokonutUI (kokonutui.com) is an open-source library of 40+ polished React components built with Tailwind CSS and the `motion` (Framer Motion successor) library. Components are **installed as source files into the project** via the shadcn CLI — they are not an npm package. After install, the component lives in `components/kokonutui/` and can be freely edited. ## Requirements - React 18+/Next.js (App Router preferred) with Tailwind CSS configured - shadcn CLI initialized in the project (`components.json` present). If not: `npx shadcn@latest init` - Many components depend on `lucide-react` and `motion` (installed automatically by the CLI) ## Installing a component Use the project's package runner: ```bash npx shadcn@latest add https://kokonutui.com/r/<name>.json # or: pnpm dlx shadcn@latest add https://kokonutui.com/r/<name>.json # or: bunx --bun shadcn@latest add https://kokonutui.com/r/<name>.json ``` This copies the component source into `components/kokonutui/<name>.tsx`, pulls in any required hooks (e.g. `hooks/use-auto-resize-textarea.ts`), icon components, shadcn/ui primitives (button, textarea, dropdown-menu, …), and npm dependencies. If the shared `cn()` helper is missing, install it first: `npx shadcn@latest add https://kokonutui.com/r/utils.json`. Import after install: ```tsx import GradientButton from "@/components/kokonutui/gradient-button"; ``` ## Workflow 1. **Pick the component** from `references/components.md` — the full catalog with names