TP-01Marlow$59 alone, or in Pro
8 pagesLive preview
Kokonut UI ProFor Claude Code, Cursor and Codex
Agent-first
UI Components
Components, whole pages and website templates, set up for your coding agent. Ask for a sprint board or a dashboard, and it lands in your repo as source you own.
Loading…
Ask your agent
Your agent finds the component in the Pro registry, installs it with its dependencies, and puts it on the page. The image panel beside this is what you get.
Connect your editor onceshadcn MCP
01Pro components
Live, not screenshots. A few of the 124 Pro components; each installs as source in your repo, with its dependencies.
02Whole pages and sections
Heroes, feature sections and complete app pages, drawn here at laptop width. Ask for one by name, or describe the page.
03Website templates
Complete Next.js sites with every page designed, from the landing to the 404. Every one is included in Pro, or sold on its own.
TP-02Agenta$59 alone, or in Pro
10 pagesLive preview
TP-03Lume$59 alone, or in Pro
7 pagesLive preview
TP-04Sonae$59 alone, or in Pro
9 pagesLive preview
TP-05Futur$49 alone, or in Pro
7 pagesLive preview
04All components
Every Pro component by what you're building. Each category opens its docs page, with a live demo and the install command for each component.
Page sections
- HR9HeroesThe top of a landing page, from studio to SaaS
- FE9FeaturesGrids, tabs and stats that explain a product
- PC8PricingPlans with monthly and annual billing
- FQ4FAQQuestions and answers, with keyboard support
- TS3TestimonialsQuote walls, spotlights and case-study quotes
- FT4FootersLinks, newsletter and legal
- LG4Sign inSign-in and sign-up forms with social providers
- PG6App pagesDashboards and app screens, complete
Elements
- CD12CardsCheckout, profile and stat cards
- BT12ButtonsSplit, pay, download, share and follow buttons
- IN12InputsCard, phone, address, password and mention fields
- FM8FormsContact, feedback and settings forms
- MD8ModalsDialogs built on shadcn/ui
- HL9Headlines and bannersSection titles and announcement bars
- TB5ToolbarsEditor and canvas toolbars
- LS11WidgetsLists, search, schedules and backgrounds
05Set up your agent once
Pro is a shadcn/ui registry behind your API key. Connect your editor and add the key, and every component is one request away.
AConnect your editor
One command adds the shadcn MCP server, so your agent can search and read every Pro component.
BAdd your key
Put the Pro registry in components.json, and your key from the account page in .env.local as KOKO_PRO_TOKEN.
CAsk for a page
Describe the page or name a component. Prefer the terminal? The shadcn CLI installs the same files.
Full steps for each editor are in the docs.
Built on Kokonut UI, free and open source06Pricing
One payment for every component, section and template, and for everything added later. No subscription.
Kokonut UI Pro, lifetime access
$119
Paid once, in US dollars. Every future release is included.
Get Kokonut UI Pro
Already bought it? Sign in for your API key.
What it covers
- Every component and section, as source you own
- Every website template, current and future
- Install with the shadcn CLI, the MCP server or a prompt
- Every future release, with no subscription
- Email support, answered within a day
Only need one template? Each is also sold alone, from $49. See templates
07Questions
Anything else, write to [email protected].
Every Pro component, section and page, installed into your project as source code you own. Every website template, downloadable from your account. Every future release, with no subscription, and email support answered within a day.
Kokonut UI Pro is a private shadcn/ui registry. Once your agent is connected to the shadcn MCP server and has your API key, you ask in plain language, like “add a hero section from @kokonutui-pro to the home page”. The agent finds the right component, installs it with its dependencies and edits it in your codebase like any other file.
It works with Claude Code, Cursor, VS Code and Codex, and with any other client that speaks the Model Context Protocol.
Give your agent one line:
Set up Kokonut UI Pro in this project by following https://kokonutui.pro/setup.md. It adds the registry to components.json, saves your key to .env.local, connects the MCP server and adds a short rules file, then tells you what it changed.When you're signed in, the docs copy that prompt with your key already in it. If you'd rather do it by hand, the Agents guide walks through each step.
The key lives in
.env.local as KOKO_PRO_TOKEN, and components.json only names the variable, so it never lands in your repository. The rules file tells your agent never to print, log or commit it. If it does leak, regenerate it from your account and the old one stops working.Yes. Add
.md to any docs URL to get the page as Markdown. /llms.txt lists every page with a one-line description, and /llms-full.txt has the whole docs in one file.Every component page has an Agent tab next to the package managers, which copies a prompt instead of a CLI command. Copy Markdown and Open hand the page to ChatGPT, Claude or Cursor.
No. Every component installs with the shadcn CLI, for example
npx shadcn@latest add @kokonutui-pro/split-signup-login. It's plain React, Tailwind CSS and Motion in your own codebase, so you can edit it by hand or with any tool you like.Yes, in unlimited personal and commercial projects, including work for clients. What you can't do is redistribute or resell the components, build a component library from them, or share your API key.
Yes. Customers can send a request from Support & Feedback in the account menu, or write to [email protected].
No. It's a one-time purchase with lifetime access, so we don't refund once it's complete, as our terms say. If something isn't working, write to [email protected] and we'll help.