Kokonut UI

Kokonut UI 是一个基于 React、Next.js、Tailwind CSS、Motion 和 shadcn/ui 的开源 UI 组件库，提供 100+ 免费组件及付费 Pro 版（70+ 额外组件与模板），定位为 shadcn/ui 生态的增强型组件集合。

核心组件与模板

免费版包含 100+ 组件，Pro 版额外提供 70+ 组件和完整模板。组件覆盖卡片、导航、输入、加载器、AI 交互、按钮、文本动画等类别。模板包括 Agenta（未来感设计）、Lume（AI/Agent/SaaS 专注）、Sonae（AI Agent 简洁）、AI（AI 项目落地页）、Postly（SaaS 销售）、Futur（实物产品销售）、Startup（创业公司）等 7+ 套完整页面。

• Card Flip：3D 悬停翻转卡片，展示功能和 CTA，基于 React + Tailwind CSS 变换过渡
• Action Search Bar：带防抖输入、快捷键提示和动画建议下拉框的搜索栏，使用 Motion 动画
• Glass Effect Filter：玻璃态滤镜效果组件
• AI 组件系列：AI Input Selector、AI State Loading、AI Text Loading、AI Voice 等
• 文本动画：Scroll Text、Typing Text、Matrix Text、Dynamic Text、Glitch Text、Shimmer Text、Sliced Text、Swoosh Text
• 按钮变体：Particle Button、V0 Button、Gradient Button、Magnet Button、Hold Button、Social Button、Command Button、Switch Button、Slide Text Button
• 导航组件：Morphic Navbar、Toolbar、Smooth Tab、Profile Dropdown、Smooth Drawer

安装与使用方式

组件通过 shadcn/cli 一键安装到现有项目，无运行时依赖，代码直接落入项目目录，可自由修改。支持 npm、bun、pnpm 三种包管理器。

• 安装命令示例：bunx --bun shadcn@latest add @kokonutui/action-search-bar
• 三步流程：浏览组件预览 CLI 安装 用 Tailwind + React 自定义样式逻辑
• 组件代码直接进入项目，无黑盒包装，可完全掌控
• 支持在 v0 中打开组件，通过提示词定制后部署到应用

收费模式与限制

免费开源版在 GitHub 开源（1.8k+ Stars），Pro 版为一次性买断制，终身使用并包含所有未来更新。Pro 版被 500+ 创始人、开发者和设计师采用。

• 免费版：100+ 组件，开源，GitHub 仓库 kokonut-labs/kokonutui
• Pro 模板包含 Hero、Feature、Pricing、Cards、Sign-in/Sign-up、FAQ、Footer、Testimonials 等完整区块
• 模板基于 Next.js，可一键部署到 Vercel 或 Netlify

技术栈与兼容性

所有组件基于 React、TypeScript、Tailwind CSS v4、Motion（动画库）和 shadcn/ui 构建。Pro 模板使用 Next.js 框架。

• 核心依赖：React、Tailwind CSS v4、Motion、shadcn/ui
• Pro 模板运行环境：Next.js
• 被 shadcn 官方账号在 X 上转发认可
• 支持通过 shadcn/cli 集成到现有 shadcn/ui 项目

常见问题

Q1：Kokonut UI 与 shadcn/ui 是什么关系？

A1：Kokonut UI 是 shadcn/ui 生态的扩展组件库，所有组件通过 shadcn/cli 安装，与 shadcn/ui 组件兼容，可混用在同一项目中。shadcn 官方账号曾在 X 上转发推荐 Kokonut UI。

Q2：Kokonut UI Pro 的定价模式是怎样的？

A2：Pro 版采用一次性买断制，支付一次即可永久使用，包含所有未来更新。具体价格未在材料中公开，需访问 kokonutui.pro 查看。

Q3：能否在非 Next.js 项目中使用 Kokonut UI？

A3：免费开源组件基于 React + Tailwind CSS，不依赖 Next.js，可在任何 React 项目中使用。Pro 模板则基于 Next.js 构建，建议在 Next.js 项目中部署。

更多同类工具与网站,可在落地页组件分类继续挑选。

信息核实于 2026年7月,具体以官网为准。