Yes. The main library is free and open source under the MIT licence. Kokonut UI Pro is an optional paid add-on.

What is Kokonut UI built with?

React, Tailwind CSS, Motion and shadcn/ui.

How do I install a Kokonut UI component?

Use the shadcn CLI with the component name, or ask your AI coding agent to add it. The code is copied into your project for you to edit.

Framework

Kokonut UI

100+ free, open-source UI components for React and Tailwind CSS.

Visit Kokonut UI4.6

Rating
4.6 / 5
Pricing
Free
Difficulty
Beginner
Works on
Web

Built with love by Shushant Lakhyani. Building bestproductivityresources.com

Free: 1,100+ ways people make money online Free: 399+ ways to make money online

What is Kokonut UI?

Kokonut UI is a collection of 100+ stunning UI components, free and open source, built with Next.js, React, Tailwind CSS and Motion.

Pros: what Kokonut UI does well

100+ free components
Built with React, Tailwind and Motion
Copy-paste friendly

Cons: where it falls short

Tailwind-based styling only
Requires a React or Next.js project

Who Kokonut UI is for

Developers building modern React interfaces who want ready-made components.

Who can skip it

People working outside the React ecosystem.

What people use Kokonut UI for

Adding animated buttons, cards and text effects to a React or Next.js site
Building a landing page quickly from ready-made sections
Giving a shadcn/ui project extra components that match its style
Asking an AI coding agent to install a named component for you

How to get started

1Set up a React or Next.js project with Tailwind CSS and shadcn/ui.
2Add a component with the shadcn CLI, for example npx shadcn@latest add @kokonutui/particle-button.
3Optionally add the @kokonutui registry to components.json once so you can use short names.
4Edit the copied source file to fit your design.

Kokonut UI pricing

Kokonut UI is free and open source under the MIT licence, with 100+ components. Kokonut UI Pro is a separate paid product with extra components and website templates; check its site for current plans. See current prices on Kokonut UI's site

Checked 2026-10-29. Prices change, so double-check before you pay.

Kokonut UI FAQ: quick answers

Is Kokonut UI free?: Yes. The main library is free and open source under the MIT licence. Kokonut UI Pro is an optional paid add-on.
What is Kokonut UI built with?: React, Tailwind CSS, Motion and shadcn/ui.
How do I install a Kokonut UI component?: Use the shadcn CLI with the component name, or ask your AI coding agent to add it. The code is copied into your project for you to edit.

Kokonut UI alternatives

Not sold on Kokonut UI? These do a similar job, and each card says what it has in common.

All Workflows resources

React Bits

Focus: animations and effects. Shares ui components and react with Kokonut UI. Rated 4.7 (Kokonut UI: 4.6).

FrameworkFreeWeb

4.7WorkflowsVisit

shadcn/ui

Focus: design system, web development and accessible. Shares ui components and react with Kokonut UI. Rated 4.9 (Kokonut UI: 4.6).

FrameworkFreeWeb

4.9WorkflowsVisit

Spectrum UI

Focus: components, animation and shadcn. Shares react and nextjs with Kokonut UI. Rated 4.5 (Kokonut UI: 4.6).

FrameworkFreeWeb

4.5WorkflowsVisit

ForgeUI

Focus: shadcn, templates and design. Shares react and tailwind with Kokonut UI. A website, not a framework. Freemium (Kokonut UI: Free). Rated 4.4 (Kokonut UI: 4.6).

WebsiteFree planWeb

4.4WorkflowsVisit

Motion (motion.dev)

Focus: animation, javascript and vue. Shares react and motion with Kokonut UI. Rated 4.7 (Kokonut UI: 4.6).

FrameworkFreeWeb

4.7WorkflowsVisit

Astryx Design System

Focus: design system, stylex and components. Shares react and open source with Kokonut UI. Same 4.6 rating.

FrameworkFreeWeb

4.6WorkflowsVisit

Free alternatives to Kokonut UI

Want to spend nothing? These free picks cover similar ground.

Theatre.js

Focus: animation, web and 3d. Shares motion and open source with Kokonut UI. Same 4.6 rating.

FrameworkFreeWeb

4.6WorkflowsVisit

Toggles.dev

Focus: theme toggle, dark mode and svelte. Shares react and open source with Kokonut UI. Same 4.6 rating.

FrameworkFreeWeb

4.6WorkflowsVisit

Transitions.dev

Focus: ui, transitions and animation. Shares react and open source with Kokonut UI. Rated 4.5 (Kokonut UI: 4.6).

FrameworkFreeWeb

4.5WorkflowsVisit

pdfcn

Focus: pdf, components and shadcn. Shares react and open source with Kokonut UI. Rated 4.4 (Kokonut UI: 4.6).

FrameworkFreeWeb, Cross-Platform

4.4WorkflowsVisit

Keyline Icons

Focus: icons, svg and shadcn. Shares react and open source with Kokonut UI. A website, not a framework. Same 4.6 rating.

WebsiteFreeWeb

4.6WorkflowsVisit

Kobra Input OTP

Focus: ui, component and otp. Shares react and tailwind with Kokonut UI. Rated 4.5 (Kokonut UI: 4.6).

FrameworkFreeWeb

4.5WorkflowsVisit

Are you the maker of Kokonut UI?Get a free Featured badge for your site, a share image and ready-to-paste posts. No sign-up.

Free Notion database

1,100+ ways people are making money online

Real online businesses, creators and projects, broken down by how they make money: apps, online stores, AI tools and more. Free on Gumroad.

Get the free database

Free Notion database

399+ ways to make money online

Hundreds of online income methods in one place, so you can compare options and pick one to try. Free on Gumroad.

Get the free list

For research and ideas only. Results vary and nothing here is a promise of income. See our Disclaimer.

Weekly newsletter

Everything new, every Monday.

One short email every Monday with everything shipped that week: new free tools and websites, new guides, new free browser tools and what's new in my free Gumroad libraries, plus how the site is growing. Free, and you can unsubscribe anytime.

Join the newsletter

You sign up on Gumroad, which stores your email to send the newsletter. See our Privacy Policy.