Kokonut UI

Kokonut UI is a shadcn-aligned component source for animated React and Next.js UI built with Tailwind CSS and Motion.

Routing Summary

Load through Component Library Sources or UI Library Ranking when a React or Next.js screen needs an animated shadcn-style component with more polish than base shadcn, but still wants copy-owned source. Kokonut's official site describes 100+ components built with Tailwind CSS, shadcn/ui, and Motion, with shadcn registry installation through @kokonutui/<name>. Source: Kokonut UI, 2026-07-07

Position In Kevin's Stack

• Default use: animated shadcn-aligned components for product, portfolio, and marketing surfaces.
• Neighbor sources: Magic UI for structural animated effects, React Bits for expressive backgrounds/text effects, Motion Primitives for smaller editable Motion primitives, and Skiper UI / Cult UI for uncommon component patterns.
• Install posture: copy the component into the app, then retokenize color, radius, spacing, typography, and motion.

Install Shape

npx shadcn@latest add @kokonutui/<name>

After install, inspect the added files, confirm dependencies, and verify reduced-motion behavior. Do not ship the demo aesthetic unchanged.

---

Timeline

• 2026-07-07 | Promoted from external row in Component Library Sources and UI Library Ranking into a first-class tool route during the component-library coverage audit. Source: User request, 2026-07-07; https://kokonutui.com/; https://github.com/kokonut-labs/kokonutui