# Agents
> Use Kokonut UI Pro with Claude Code, Cursor, VS Code or Codex. Connect the shadcn MCP server, add your API key and a rules file, and give your agent the docs as Markdown.

Source: https://kokonutui.pro/docs/agents

Kokonut UI Pro is a private shadcn/ui registry, so any agent that can run the shadcn CLI can install its sections and components with your API key. Ask for a section by name, or describe the page you need, and the agent finds it, installs it with its dependencies, and edits it in your codebase like any other file.

To have an agent do the whole setup, give it this prompt:

```text
Set up Kokonut UI Pro in this project by following https://kokonutui.pro/setup.md
```

If you are an agent setting up Kokonut UI Pro, follow https://kokonutui.pro/setup.md. Otherwise, follow the steps below.

## Add the registry

Agents install from the `@kokonutui-pro` namespace, so add it to your `components.json` once. If you don't have one yet, run `shadcn init` first, as shown in [Installation](/docs).

```json title="components.json"
{
  "registries": {
    "@kokonutui-pro": {
      "url": "https://kokonutui.pro/api/r/{name}",
      "headers": {
        "X-API-Key": "${KOKO_PRO_TOKEN}"
      }
    }
  }
}
```

The CLI fills in `${KOKO_PRO_TOKEN}` from your environment. Put your key in `.env.local`, which the CLI reads and git should ignore:

```bash title=".env.local"
KOKO_PRO_TOKEN=<your-api-key>
```

Your key is on https://kokonutui.pro/account after purchase.

## Connect your editor

The [shadcn MCP server](https://ui.shadcn.com/docs/mcp) lets your agent list, search and install components from any registry in `components.json`. One command sets it up for your editor:

### Claude Code

```bash
npx shadcn@latest mcp init --client claude
```

Or add it by hand to `.mcp.json`:

```json title=".mcp.json"
{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}
```

Restart Claude Code, then run /mcp to check that shadcn is connected.

### Cursor

```bash
npx shadcn@latest mcp init --client cursor
```

Add to Cursor: cursor://anysphere.cursor-deeplink/mcp/install?name=shadcn&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyJzaGFkY25AbGF0ZXN0IiwibWNwIl19

Or add it by hand to `.cursor/mcp.json`:

```json title=".cursor/mcp.json"
{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}
```

Turn the server on in Cursor Settings, under MCP.

### VS Code

```bash
npx shadcn@latest mcp init --client vscode
```

Add to VS Code: vscode:mcp/install?%7B%22name%22%3A%22shadcn%22%2C%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22shadcn%40latest%22%2C%22mcp%22%5D%7D

Or add it by hand to `.vscode/mcp.json`:

```json title=".vscode/mcp.json"
{
  "servers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}
```

Open .vscode/mcp.json and click Start next to the shadcn server.

### Codex

```bash
npx shadcn@latest mcp init --client codex
```

Or add it by hand to `~/.codex/config.toml`:

```toml title="~/.codex/config.toml"
[mcp_servers.shadcn]
command = "npx"
args = ["shadcn@latest", "mcp"]
```

Restart Codex. It reads the server from your global config.

Any other client that speaks the Model Context Protocol works too: point it at `npx shadcn@latest mcp`.

## Ask your agent

Restart your editor, then ask in plain language. Each prompt copies.

- "Show me every component in the @kokonutui-pro registry"
- "Add a hero section from @kokonutui-pro to the home page"
- "Build a pricing page with @kokonutui-pro sections"
- "Replace my sign-in page with @kokonutui-pro/split-signup-login"

The agent browses the public registry index, then installs through your key, along with each component's shadcn/ui primitives and npm packages (like `motion` or `lucide-react`), exactly as the CLI does.

## Add a rules file

A short rules file tells your agent to check Kokonut UI Pro before building a section from scratch, to install rather than paste code, and to keep your key out of logs and commits. Save it in your project under the file name shown for your editor.

### Claude Code: `CLAUDE.md`

```markdown title="CLAUDE.md"
# Kokonut UI Pro

This project installs components from Kokonut UI Pro, a private shadcn/ui
registry. It is set in components.json as "@kokonutui-pro" and reads the
API key from KOKO_PRO_TOKEN in .env.local.

- Before building a section, page or animated component from scratch, check
  Kokonut UI Pro: https://kokonutui.pro/llms.txt lists every docs page with a
  one-line description.
- Install with the shadcn CLI, never by pasting code:
  npx shadcn@latest add @kokonutui-pro/<name>
  It writes the files under components/kokonutui-pro/ and installs their
  dependencies.
- Never print, log or commit KOKO_PRO_TOKEN. A 401 means the key is missing or
  wrong; ask the user for it rather than guessing.
- Free components come from the "@kokonutui" registry (kokonutui.com).
- Installed components are project code. Edit them in place rather than
  wrapping them.
- Any docs page is available as Markdown by adding .md to its URL, e.g.
  https://kokonutui.pro/docs/components/pricings.md
```

### Cursor: `.cursor/rules/kokonutui-pro.mdc`

```markdown title=".cursor/rules/kokonutui-pro.mdc"
---
description: Installing and editing Kokonut UI Pro components
alwaysApply: false
---

# Kokonut UI Pro

This project installs components from Kokonut UI Pro, a private shadcn/ui
registry. It is set in components.json as "@kokonutui-pro" and reads the
API key from KOKO_PRO_TOKEN in .env.local.

- Before building a section, page or animated component from scratch, check
  Kokonut UI Pro: https://kokonutui.pro/llms.txt lists every docs page with a
  one-line description.
- Install with the shadcn CLI, never by pasting code:
  npx shadcn@latest add @kokonutui-pro/<name>
  It writes the files under components/kokonutui-pro/ and installs their
  dependencies.
- Never print, log or commit KOKO_PRO_TOKEN. A 401 means the key is missing or
  wrong; ask the user for it rather than guessing.
- Free components come from the "@kokonutui" registry (kokonutui.com).
- Installed components are project code. Edit them in place rather than
  wrapping them.
- Any docs page is available as Markdown by adding .md to its URL, e.g.
  https://kokonutui.pro/docs/components/pricings.md
```

### VS Code: `.github/copilot-instructions.md`

```markdown title=".github/copilot-instructions.md"
# Kokonut UI Pro

This project installs components from Kokonut UI Pro, a private shadcn/ui
registry. It is set in components.json as "@kokonutui-pro" and reads the
API key from KOKO_PRO_TOKEN in .env.local.

- Before building a section, page or animated component from scratch, check
  Kokonut UI Pro: https://kokonutui.pro/llms.txt lists every docs page with a
  one-line description.
- Install with the shadcn CLI, never by pasting code:
  npx shadcn@latest add @kokonutui-pro/<name>
  It writes the files under components/kokonutui-pro/ and installs their
  dependencies.
- Never print, log or commit KOKO_PRO_TOKEN. A 401 means the key is missing or
  wrong; ask the user for it rather than guessing.
- Free components come from the "@kokonutui" registry (kokonutui.com).
- Installed components are project code. Edit them in place rather than
  wrapping them.
- Any docs page is available as Markdown by adding .md to its URL, e.g.
  https://kokonutui.pro/docs/components/pricings.md
```

### Codex: `AGENTS.md`

```markdown title="AGENTS.md"
# Kokonut UI Pro

This project installs components from Kokonut UI Pro, a private shadcn/ui
registry. It is set in components.json as "@kokonutui-pro" and reads the
API key from KOKO_PRO_TOKEN in .env.local.

- Before building a section, page or animated component from scratch, check
  Kokonut UI Pro: https://kokonutui.pro/llms.txt lists every docs page with a
  one-line description.
- Install with the shadcn CLI, never by pasting code:
  npx shadcn@latest add @kokonutui-pro/<name>
  It writes the files under components/kokonutui-pro/ and installs their
  dependencies.
- Never print, log or commit KOKO_PRO_TOKEN. A 401 means the key is missing or
  wrong; ask the user for it rather than guessing.
- Free components come from the "@kokonutui" registry (kokonutui.com).
- Installed components are project code. Edit them in place rather than
  wrapping them.
- Any docs page is available as Markdown by adding .md to its URL, e.g.
  https://kokonutui.pro/docs/components/pricings.md
```

## Docs for agents

Every page on this site is also served as Markdown, so an agent can read the docs without a browser.

- `https://kokonutui.pro/setup.md`: Setup steps written for an agent: registry, API key, MCP server and rules file. The setup prompt points here.
- `https://kokonutui.pro/llms.txt`: Index of every docs page, with a one-line description and a link to its Markdown.
- `https://kokonutui.pro/llms-full.txt`: Every docs page in one file, for agents that read the docs once.
- `https://kokonutui.pro/docs/<page>.md`: Any docs page as Markdown, with its install commands. The Copy Markdown button on each page copies the same text.
- `https://kokonutui.pro/api/r/registry.json`: The public registry index: every component with its dependencies, without source. Agents browse it through the MCP server.
- `https://kokonutui.pro/api/r/<name>`: One component's registry item with its source. Needs your key in the X-API-Key header, which the CLI sends from KOKO_PRO_TOKEN.

At the top of every page, **Copy Markdown** copies the page for a chat, and **Open** sends it to ChatGPT, Claude or Cursor.

## Troubleshooting

* **401 on install:** `KOKO_PRO_TOKEN` is missing or wrong. Check `.env.local` in the project you're installing into, and copy the key again above.
* **Component not found:** the `@kokonutui-pro` block isn't in that project's `components.json`.
* **Server not showing up:** restart your editor after adding the MCP config, and check the file is at the path shown for your editor.


# Changelog
> New and updated Kokonut UI Pro components, templates and docs, release by release. Every release is included with Pro.

Source: https://kokonutui.pro/docs/changelog

## October 15, 2026

**Improved**

- Every component reviewed and reworked, with fixes to motion, accessibility and layout across the library. (109 components)
- Near-duplicates folded into one component each, such as button-04 into loading-button and login-02 into magic-link-login. (boxed-faq, loading-button, submit-button, account-menu-card, services-accordion, poll-card, text-input, magic-link-login, confirm-delete-button)

**Site and docs**

- Every numbered component has a descriptive name, such as split-signup-login for login-01 and icon-tier-pricing for pricing-01. The old names still install.
- Removed animated-list, card-recording, the particle backgrounds, headline-05, headline-06 and toolbar-05.
- An Agents page, and a one-line setup prompt: your agent follows kokonutui.pro/setup.md to add the registry, your API key, the MCP server and a rules file.
- Installation now leads with that prompt and shows the real install command for each step.
- This changelog, with New tags in the docs sidebar.
- Link previews for every docs page, so shared links show the page's title.
- The mobile and tablet previews render the component at that width, so its breakpoints switch as they would on a device.

## August 21, 2026

**Improved**

- The dropdown and result boxes match the input's background. (action-search-bar)

**Site and docs**

- shadcn MCP support: a public registry index your agent can browse and search, while installs stay behind your API key.

## August 6, 2026

**Site and docs**

- An account page with your API key and template downloads.
- A simpler sign in and sign up, and checkout fills in your email.

## August 1, 2026

**Improved**

- Layouts adapt to the space they're given, not only the screen, and keyboard and screen reader fixes. (services-accordion, boxed-faq, centered-faq, tabbed-faq, alternating-feature, card-grid-feature, expertise-bento, collection-feature, dashboard-feature, stats-feature, article-grid, portfolio-bento, ai-portrait-hero, design-agency-hero, developer-platform-hero, analytics-saas-hero, case-study-hero, wellness-app-hero, ai-agents-hero, split-signup-login, signup-card-login, magic-link-login, split-provider-login)
- Accessible markup, and layouts that hold at tablet width. (icon-tier-pricing, single-plan-pricing, three-tier-pricing, feature-list-pricing, annual-switch-pricing, agency-services-pricing, newsletter-footer, wordmark-footer, sitemap-footer, card-footer)
- Broken avatar and product images replaced. (account-menu-card, course-card, checkout-card, action-toolbar, testimonial-stack, team-invite-card, edit-profile-form, ai-portrait-hero, team-member-list, projects-dashboard, student-dashboard, clinic-dashboard, team-calendar-page, testimonial-grid)

**Site and docs**

- Copy Markdown and Open in ChatGPT or Claude on every docs page, plus llms.txt for agents.
- A pricing page.
- Sign in with an email code, or with Google, GitHub, Discord or Vercel.


# Installation
> Install Kokonut UI Pro sections and components in any React or Next.js project with the shadcn CLI and your API key.

Source: https://kokonutui.pro/docs

To have an agent do the whole setup, give it this prompt:

```text
Set up Kokonut UI Pro in this project by following https://kokonutui.pro/setup.md
```

If you are an agent setting up Kokonut UI Pro, follow https://kokonutui.pro/setup.md. Otherwise, follow the steps below.

## Add the registry

Kokonut UI Pro is a private shadcn/ui registry. The shadcn CLI reads its configuration from `components.json`; if your project doesn't have one yet, create it:

```bash
npx shadcn@latest init
```

Then add the `@kokonutui-pro` namespace to it, so components install by name. The CLI sends your API key with each request:

```json title="components.json"
{
  "registries": {
    "@kokonutui-pro": {
      "url": "https://kokonutui.pro/api/r/{name}",
      "headers": {
        "X-API-Key": "${KOKO_PRO_TOKEN}"
      }
    }
  }
}
```

## Add your API key

The CLI fills in `${KOKO_PRO_TOKEN}` from `.env.local`. Your key is shown here once you're signed in with Pro, and on your [account page](/account):

```bash title=".env.local"
KOKO_PRO_TOKEN=<your-api-key>
```

Your key is on https://kokonutui.pro/account after purchase.

> **Keep it out of git**
>
> Check that `.env.local` is in your `.gitignore`. Anyone with the key can install Pro components.

## Add a component

Components are styled with [Tailwind CSS v4](https://tailwindcss.com/docs/installation/framework-guides/nextjs), so make sure it's set up. Then name the component. The CLI writes it to `components/kokonutui-pro/` and installs what it needs, such as the `cn` helper, [lucide-react](https://lucide.dev/guide/installation) icons, [shadcn/ui](https://ui.shadcn.com/) primitives and `motion`:

```bash
npx shadcn@latest add @kokonutui-pro/split-signup-login
```

Then use it like any component in your project:

```tsx title="app/sign-in/page.tsx"
import SplitSignupLogin from "@/components/kokonutui-pro/split-signup-login";

export default function Page() {
  return <SplitSignupLogin />;
}
```

Each docs page shows its components' install commands. Prefer the CLI over copying the source: it brings every file and dependency a component needs.

## Use an AI agent

Claude Code, Cursor, VS Code and Codex can find and install components for you through the shadcn MCP server. See [Agents](/docs/agents) to connect your editor and add a rules file.

## Monorepos

In a monorepo, pass the workspace the component belongs to with `-c`:

```bash
npx shadcn@latest add @kokonutui-pro/split-signup-login -c ./apps/www
```

> **Free components**
>
> Kokonut UI Pro builds on the open source library. Its components install from the `@kokonutui` registry; see [kokonutui.com](https://kokonutui.com/docs).


# Action Search Bar
> Command palette with ⌘K, nested pages, fuzzy matching and in-row action progress.

Source: https://kokonutui.pro/docs/components/action-search-bar

```bash
npx shadcn@latest add @kokonutui-pro/action-search-bar
```


# Action Toolbar
> Floating toolbar whose search button expands into a search field, with feedback on each action.

Source: https://kokonutui.pro/docs/components/action-toolbar

```bash
npx shadcn@latest add @kokonutui-pro/action-toolbar
```

***


# Banners
> Announcement, promo, trial and cookie consent banners for the top or bottom of a page.

Source: https://kokonutui.pro/docs/components/banner

### Cookie Consent Banner

Small cookie consent card with accept and reject buttons and a link to your cookie policy.

```bash
npx shadcn@latest add @kokonutui-pro/cookie-consent-banner
```

### Brutalist Banner

Neo-brutalist announcement bar with a hard shadow and a link button that presses in on hover.

```bash
npx shadcn@latest add @kokonutui-pro/brutalist-banner
```

### Trial Status Banner

Dismissible top banner showing days left in a trial, or that it ended, with an upgrade link.

```bash
npx shadcn@latest add @kokonutui-pro/trial-status-banner
```

***

### Limited Offer Banner

Quiet zinc banner with a discount, a message, a link and a close button.

```bash
npx shadcn@latest add @kokonutui-pro/limited-offer-banner
```

***

### Sale Strip Banner

Black promo strip with a discount, a short message and a shop link that visitors can dismiss.

```bash
npx shadcn@latest add @kokonutui-pro/sale-strip-banner
```

***


# Buttons
> Buttons for everyday actions plus stateful ones: confirm, download, submit, copy, share, reactions and theme toggle.

Source: https://kokonutui.pro/docs/components/button

### Base Button

Rounded button in solid, offset, glass and soft styles with three sizes, for everyday actions.

```bash
npx shadcn@latest add @kokonutui-pro/base-button
```

***

### Loading Button

Button in five styles with a loading spinner that keeps its width and an optional arrow that nudges on hover.

```bash
npx shadcn@latest add @kokonutui-pro/loading-button
```

### Confirm Delete Button

Delete button that asks for a second click to confirm, then disarms itself after a few seconds.

```bash
npx shadcn@latest add @kokonutui-pro/confirm-delete-button
```

***

### Share Button

Share button that opens a row of share targets (X, Facebook, copy link) for the current page or a given URL.

```bash
npx shadcn@latest add @kokonutui-pro/share-button
```

### Download Button

Download button that shows progress as a fill and ring, then a done or failed state before resetting.

```bash
npx shadcn@latest add @kokonutui-pro/download-button
```

### Submit Button

Async submit button that shows sending, sent and failed states, for forms and one-off actions.

```bash
npx shadcn@latest add @kokonutui-pro/submit-button
```

### Theme Toggle Button

Light and dark theme switch with a sliding thumb, controlled or uncontrolled via an onToggle callback.

```bash
npx shadcn@latest add @kokonutui-pro/theme-toggle-button
```

### Copy Button

Copy-to-clipboard button that confirms with a short Copied or Failed state.

```bash
npx shadcn@latest add @kokonutui-pro/copy-button
```

### Reaction Button

Tap to like, or press and hold to slide across a tray of reactions and let go on the one you want. On desktop, resting the mouse on it opens the tray too.

```bash
npx shadcn@latest add @kokonutui-pro/reaction-button
```

***

### Push Button

3D keycap-style button that visibly presses down into its base when clicked.

```bash
npx shadcn@latest add @kokonutui-pro/push-button
```


# Calendar Schedule
> Month calendar with event chips and a side panel listing the selected day's events.

Source: https://kokonutui.pro/docs/components/calendar-schedule

```bash
npx shadcn@latest add @kokonutui-pro/calendar-schedule
```


# Cards
> Ready-to-use cards for profiles, contacts, checkout, courses, jobs and polls.

Source: https://kokonutui.pro/docs/components/card

### Audio Player Card

Podcast or voice note player with a scrubbable waveform, chapter tooltips and a speed chip.

```bash
npx shadcn@latest add @kokonutui-pro/audio-player-card
```

***

### Onboarding Checklist

Get-started checklist with a progress ring, steps that collapse as you check them and an all-set state at the end.

```bash
npx shadcn@latest add @kokonutui-pro/onboarding-checklist
```

***

### Profile Card

Portrait profile card with a verified badge, follower and post counts and a follow button.

```bash
npx shadcn@latest add @kokonutui-pro/profile-card
```

### Account Menu Card

Profile header with a short account menu and a logout button, for user dropdowns or settings panels.

```bash
npx shadcn@latest add @kokonutui-pro/account-menu-card
```

***

### Contact Card

Profile card with email, phone and website links and a short bio, for team or about pages.

```bash
npx shadcn@latest add @kokonutui-pro/contact-card
```

***

### Image Generator Card

AI image generation panel with a preview, prompt field, style and ratio options and recent prompts.

```bash
npx shadcn@latest add @kokonutui-pro/image-generator-card
```

***

### Course Card

Course listing with instructor, student count, duration, tags, price and an enroll button.

```bash
npx shadcn@latest add @kokonutui-pro/course-card
```

***

### Checkout Card

Single-product order summary with delivery status, price breakdown and a pay button.

```bash
npx shadcn@latest add @kokonutui-pro/checkout-card
```

***

### Job Listing Card

Job post with company, location, salary range, requirements and an apply button.

```bash
npx shadcn@latest add @kokonutui-pro/job-listing-card
```

***

### Poll Card

Single-choice poll with result bars that update when you vote, for feedback or community features.

```bash
npx shadcn@latest add @kokonutui-pro/poll-card
```

***

### Project Card

Compact project tile with an icon, status badge, version, short description and tags.

```bash
npx shadcn@latest add @kokonutui-pro/project-card
```


# FAQs
> FAQ sections as accordions and tabs, with keyboard support.

Source: https://kokonutui.pro/docs/components/faqs

### Services Accordion

Numbered list of services that expand to show details and tags, for agency or capabilities sections.

```bash
npx shadcn@latest add @kokonutui-pro/services-accordion
```

### Boxed FAQ

FAQ in a bordered card with a header, where each question opens on its own.

```bash
npx shadcn@latest add @kokonutui-pro/boxed-faq
```

### Centered FAQ

Centered FAQ section with bordered questions that open one at a time, first one open by default.

```bash
npx shadcn@latest add @kokonutui-pro/centered-faq
```

### Tabbed FAQ

FAQ laid out as tabs: pick a question to show its answer, with arrow-key navigation.

```bash
npx shadcn@latest add @kokonutui-pro/tabbed-faq
```


# Features
> Feature sections: alternating rows, card grids, bentos, product previews and article grids.

Source: https://kokonutui.pro/docs/components/features

### Live Cursors Feature

Collaboration section with teammates' cursors moving notes on a shared board.

```bash
npx shadcn@latest add @kokonutui-pro/live-cursors-feature
```

### Portfolio Bento

Bento layout for a studio or portfolio: profile, social links, works link and a services carousel.

```bash
npx shadcn@latest add @kokonutui-pro/portfolio-bento
```

### Alternating Feature

Two alternating image-and-text rows with capability cards and headline stats.

```bash
npx shadcn@latest add @kokonutui-pro/alternating-feature
```

### Card Grid Feature

Centered heading over two rows of feature cards with image slots of different widths.

```bash
npx shadcn@latest add @kokonutui-pro/card-grid-feature
```

### Expertise Bento

Bento grid of expertise cards with stats and a large contact link, in one accent color.

```bash
npx shadcn@latest add @kokonutui-pro/expertise-bento
```

### Collection Feature

Product collection grid followed by an editorial block, for fashion or retail storefronts.

```bash
npx shadcn@latest add @kokonutui-pro/collection-feature
```

### Dashboard Feature

Product dashboard preview beside a heading and a short list of key features.

```bash
npx shadcn@latest add @kokonutui-pro/dashboard-feature
```

### Stats Feature

Headline and product preview over two large stat cards with client logos.

```bash
npx shadcn@latest add @kokonutui-pro/stats-feature
```

### Article Grid

Grid of article cards with cover, category, title, excerpt and date, for a blog or news section.

```bash
npx shadcn@latest add @kokonutui-pro/article-grid
```


# File Tree
> File explorer with keyboard navigation, inline rename and drag to move.

Source: https://kokonutui.pro/docs/components/file-tree

```bash
npx shadcn@latest add @kokonutui-pro/file-tree
```


# Footers
> Footer components with newsletter forms, social links, and navigation menus.

Source: https://kokonutui.pro/docs/components/footers

### Newsletter Footer

Footer with brand, two link columns and a newsletter signup that reports its status inline.

```bash
npx shadcn@latest add @kokonutui-pro/newsletter-footer
```

### Wordmark Footer

Footer with a large faint wordmark behind the brand blurb, link columns and contact email.

```bash
npx shadcn@latest add @kokonutui-pro/wordmark-footer
```

### Sitemap Footer

Footer with four link columns, an inline email signup and social icon links.

```bash
npx shadcn@latest add @kokonutui-pro/sitemap-footer
```

### Card Footer

Inverted rounded footer card with brand, social icons and right-aligned link columns.

```bash
npx shadcn@latest add @kokonutui-pro/card-footer
```


# Forms
> Complete form cards for support, booking, feature requests, product options, flights and profiles.

Source: https://kokonutui.pro/docs/components/form

### Support Form

A contact support card with category and priority pickers, message, file attachments and recent tickets.

```bash
npx shadcn@latest add @kokonutui-pro/support-form
```

***

### Appointment Form

A booking card for picking service, duration, date, time and location, with upcoming appointments below.

```bash
npx shadcn@latest add @kokonutui-pro/appointment-form
```

***

### New Project Form

A create-project card with name, description, visibility and team size fields.

```bash
npx shadcn@latest add @kokonutui-pro/new-project-form
```

***

### Feature Request Form

A feature request card with title, category, priority, description and link, plus recent requests.

```bash
npx shadcn@latest add @kokonutui-pro/feature-request-form
```

***

### Product Options Form

A product customizer for picking color, material and size before continuing to checkout.

```bash
npx shadcn@latest add @kokonutui-pro/product-options-form
```

***

### Flight Search Form

A flight search card with from/to swap, date, passengers, popular destinations and recent searches.

```bash
npx shadcn@latest add @kokonutui-pro/flight-search-form
```

***

### Edit Profile Form

An edit profile card with avatar upload, name, email, location, website and bio fields.

```bash
npx shadcn@latest add @kokonutui-pro/edit-profile-form
```


# Headline
> Section headlines with a label, highlight, eyebrow or stats row.

Source: https://kokonutui.pro/docs/components/headline

Every headline renders its title as an `h2` by default. Pass `as="h1"` when the headline is the page's main heading, or `as="h3"` inside a nested section.

## Tilted Label Headline

Centered headline with the subtitle set on a slightly tilted dark label.

```bash
npx shadcn@latest add @kokonutui-pro/tilted-label-headline
```

***

## Eyebrow Headline

Left-aligned headline with an accent bar and a short line of context above the title.

```bash
npx shadcn@latest add @kokonutui-pro/eyebrow-headline
```

***

## Highlight Headline

Large headline that sets one word or phrase in italics with an underline, followed by a subtitle.

```bash
npx shadcn@latest add @kokonutui-pro/highlight-headline
```

***

## Stats Headline

Light, centered headline with a two-line title and a row of stats below.

```bash
npx shadcn@latest add @kokonutui-pro/stats-headline
```


# Heroes
> Hero section components with modern designs and animations for landing pages.

Source: https://kokonutui.pro/docs/components/heroes

### AI Agents Hero

Inverted hero for an AI agent product with an agent picker linked to a list of supported models.

```bash
npx shadcn@latest add @kokonutui-pro/ai-agents-hero
```

### Design Agency Hero

Agency hero with a two-tone headline, one call to action and a brand board showing type, layout and colour.

```bash
npx shadcn@latest add @kokonutui-pro/design-agency-hero
```

### Analytics SaaS Hero

Centered SaaS hero with an announcement link, highlighted phrase, two actions and a row of customer logos.

```bash
npx shadcn@latest add @kokonutui-pro/analytics-saas-hero
```

### Wellness App Hero

Calm, light-weight hero for a wellness or fitness app with practice tiles, one action and stats.

```bash
npx shadcn@latest add @kokonutui-pro/wellness-app-hero
```

### AI Portrait Hero

Split hero for an AI image product with a showcase image, two actions, member avatars and quick stats.

```bash
npx shadcn@latest add @kokonutui-pro/ai-portrait-hero
```

### Developer Platform Hero

Centered hero for a developer tool with a GitHub button, feature chips and a faint line texture.

```bash
npx shadcn@latest add @kokonutui-pro/developer-platform-hero
```

### Case Study Hero

Dark agency hero with navigation, a mobile menu, a featured case study card and a client list.

```bash
npx shadcn@latest add @kokonutui-pro/case-study-hero
```

### Creative Studio Hero

Bold studio hero with a stacked three-word headline, split colour background and fanned cards.

```bash
npx shadcn@latest add @kokonutui-pro/creative-studio-hero
```


# Inputs
> Text, password, autocomplete, tag, shortcut, biometric, recording and verification code inputs, plus a swatch fan color picker.

Source: https://kokonutui.pro/docs/components/input

## Date Range Picker

Two-month range calendar with presets and full keyboard support, for analytics and reports.

```bash
npx shadcn@latest add @kokonutui-pro/date-range-picker
```

***

## Text Input

A text input with optional label, leading icon and an error message linked for screen readers.

```bash
npx shadcn@latest add @kokonutui-pro/text-input
```

***

## Framed Input

A labeled text input set inside a bordered card, with an optional icon and inline error.

```bash
npx shadcn@latest add @kokonutui-pro/framed-input
```

***

## Autocomplete Input

A search field with a filtered suggestion list, full keyboard support, a clear button and a loading state.

```bash
npx shadcn@latest add @kokonutui-pro/autocomplete-input
```

***

## Shortcut Input

A search input with a ⌘K hint that actually focuses the field from anywhere on the page.

```bash
npx shadcn@latest add @kokonutui-pro/shortcut-input
```

***

## Password Input

A password field with show/hide, copy to clipboard and an optional generate button.

```bash
npx shadcn@latest add @kokonutui-pro/password-input
```

***

## Tag Input

A tag field: type and press Enter to add tags, remove them with the x or Backspace, or pick a suggestion.

```bash
npx shadcn@latest add @kokonutui-pro/tag-input
```

***

## Biometric Input

A passcode field with a fingerprint button and clear verifying, verified and failed states.

```bash
npx shadcn@latest add @kokonutui-pro/biometric-input
```

***

## Recording Input

A text input with a record button for video, voice or photo notes, with timer and processing states.

```bash
npx shadcn@latest add @kokonutui-pro/recording-input
```

***

### Recording Input, audio while recording

```bash
npx shadcn@latest add @kokonutui-pro/recording-input
```

***

### Recording Input, camera after success

```bash
npx shadcn@latest add @kokonutui-pro/recording-input
```

***

## Verification Code

A one-time code field that fills from typing, paste or autofill, and folds into a single Verified pill when the code is right. A wrong code shakes and clears.

```bash
npx shadcn@latest add @kokonutui-pro/verification-code
```

***

## Swatch Fan

A color picker shaped like a paint fan deck. Drag it open, pick a hue and a shade, and copy the hex.

```bash
npx shadcn@latest add @kokonutui-pro/swatch-fan
```


# Kanban Board
> Sprint board: drag cards between columns, or move them with Space and the arrow keys.

Source: https://kokonutui.pro/docs/components/kanban-board

```bash
npx shadcn@latest add @kokonutui-pro/kanban-board
```


# Animated List
> Animated lists: a rotating feed, a removable team list and swipeable cards.

Source: https://kokonutui.pro/docs/components/list

### Rotating List

Shows a few items at a time and cycles to the next one with a short slide, for feeds or updates.

```bash
npx shadcn@latest add @kokonutui-pro/rotating-list
```

***

### Team Member List

Team list where each row can be removed with a short collapse animation.

```bash
npx shadcn@latest add @kokonutui-pro/team-member-list
```

***

### Swipe Card List

Swipeable course cards with previous/next buttons, showing one card at a time.

```bash
npx shadcn@latest add @kokonutui-pro/swipe-card-list
```


# Login
> Sign-up and sign-in screens with social providers, magic links and split layouts.

Source: https://kokonutui.pro/docs/components/login

### Split Signup Login

Full-page sign-up with a brand panel and testimonial beside a form with Google and GitHub buttons.

```bash
npx shadcn@latest add @kokonutui-pro/split-signup-login
```

### Signup Card Login

Compact sign-up card with icon fields, password toggle, terms checkbox and social buttons.

```bash
npx shadcn@latest add @kokonutui-pro/signup-card-login
```

### Magic Link Login

Sign-in card with Google and GitHub buttons and an email magic link, or an email and password form.

```bash
npx shadcn@latest add @kokonutui-pro/magic-link-login
```

Pass `method="password"` for a classic email and password sign in, and `onSignIn`, `onGoogle` and `onGithub` to wire it to your auth. Without `onSignIn` the form simulates a short request.

### Split Provider Login

Two-panel sign-in with a brand side, Google and GitHub buttons, and an email option that opens in place.

```bash
npx shadcn@latest add @kokonutui-pro/split-provider-login
```


# Modals
> Dialogs for upgrades, newsletters, settings, plan picking, feedback and new projects.

Source: https://kokonutui.pro/docs/components/modal

***

### Upgrade Dialog

A dialog that lists what a paid plan unlocks, with Maybe Later and Get Access actions.

```bash
npx shadcn@latest add @kokonutui-pro/upgrade-dialog
```

***

### Newsletter Dialog

A newsletter sign-up dialog with subscriber benefits and an email field.

```bash
npx shadcn@latest add @kokonutui-pro/newsletter-dialog
```

***

### Settings Dialog

A settings dialog with a list of labeled on/off switches and a save button.

```bash
npx shadcn@latest add @kokonutui-pro/settings-dialog
```

***

### Plan Picker Dialog

A dialog for choosing between pricing plans shown as selectable cards.

```bash
npx shadcn@latest add @kokonutui-pro/plan-picker-dialog
```

***

### Feedback Dialog

A three-step feedback dialog: star rating, comments, then an optional email.

```bash
npx shadcn@latest add @kokonutui-pro/feedback-dialog
```

***

### New Project Dialog

A create-project dialog with name, description, visibility and team size, plus a loading state.

```bash
npx shadcn@latest add @kokonutui-pro/new-project-dialog
```


# Pricings
> Pricing section components with cards, toggles, and feature comparisons for various business models.

Source: https://kokonutui.pro/docs/components/pricings

### Icon Tier Pricing

Three plan cards with an icon, price, feature list and a popular badge, for subscription products.

```bash
npx shadcn@latest add @kokonutui-pro/icon-tier-pricing
```

### Single Plan Pricing

One plan with price, trial CTA and a feature grid, plus three highlight cards, for single-tier products.

```bash
npx shadcn@latest add @kokonutui-pro/single-plan-pricing
```

### Three Tier Pricing

Three plans in a bordered tray with a monthly/yearly switch and a book-a-call bar, for SaaS pricing pages.

```bash
npx shadcn@latest add @kokonutui-pro/three-tier-pricing
```

### Feature List Pricing

A single plan laid out as a light editorial list with feature notes and coming-soon items.

```bash
npx shadcn@latest add @kokonutui-pro/feature-list-pricing
```

### Annual Switch Pricing

Three calm, light pricing tiers with an annual/monthly switch, for studios and subscription services.

```bash
npx shadcn@latest add @kokonutui-pro/annual-switch-pricing
```

### Agency Services Pricing

Free, per-component and per-page tiers with icon feature rows, for agencies and freelancers selling builds.

```bash
npx shadcn@latest add @kokonutui-pro/agency-services-pricing
```


# Team Invitation
> Invite form to add emails with roles, send invitations and confirm success.

Source: https://kokonutui.pro/docs/components/team-invite-card

```bash
npx shadcn@latest add @kokonutui-pro/team-invite-card
```

***


# Toolbars
> Toolbars for list headers, search, view switching and document editors.

Source: https://kokonutui.pro/docs/components/toolbar

### Action Toolbar

Floating toolbar whose search button expands into a search field, with feedback on each action.

```bash
npx shadcn@latest add @kokonutui-pro/action-toolbar
```

### Filter Toolbar

Search bar with a filter dropdown, icon actions and a create button, for list and table headers.

```bash
npx shadcn@latest add @kokonutui-pro/filter-toolbar
```

***

### Search Toolbar

Rounded toolbar with a pill search field, filter button, icon actions and a new button.

```bash
npx shadcn@latest add @kokonutui-pro/search-toolbar
```

***

### View Toggle Toolbar

Page header bar with a grid/list view toggle, filter count, quick search, notifications and profile.

```bash
npx shadcn@latest add @kokonutui-pro/view-toggle-toolbar
```

***

### Editor Toolbar

Document editor top bar with breadcrumb, save status, comments, share and present actions.

```bash
npx shadcn@latest add @kokonutui-pro/editor-toolbar
```


# Agenta
> Futuristic template that is aesthetically pleasing and rich in small details, featuring a modern design.

Source: https://kokonutui.pro/docs/templates/agenta

- Live demo: https://template-agenta.vercel.app/
- Price: $59, or included with Pro

<span className="text-sm font-semibold text-zinc-900 dark:text-white uppercase tracking-wider flex items-center gap-2 mb-0">
  WHAT is this?
</span>

A complete Next.js template with attention to detail, suitable for SaaS, AI, design, and more.

Utilizing the latest Next.js 16 and Tailwind CSS 4.0, it is thoughtfully organized and incorporates the best tools available for modern web development.

It features a built-in dark mode with smooth, eye-friendly color schemes, ideal for low-light environments.

## What's included

- 1-click download and setup
- Next.js 16 & React 19
- Aesthetically pleasing and rich in small details
- All assets and icons included
- SEO Ready
- Designed with Tailwind CSS v4
- Smooth animations with Motion
- Mobile friendly
- Dark and Light mode

Pages: Navigation Menu, Hero, Features, How it works, Pricing, Testimonials, FAQ, 404 Page.


# AI
> Template for Startup inspired by modern design and little interaction.

Source: https://kokonutui.pro/docs/templates/ai

- Live demo: https://template-07-startup.vercel.app/
- Price: $59, or included with Pro

<span className="text-sm font-semibold text-zinc-900 dark:text-white uppercase tracking-wider flex items-center gap-2 mb-0">
  WHAT is this?
</span>

AI is a beautiful startup business template designed and built with Next.js, Tailwind CSS, and Motion. It's perfect for showcasing your AI startup with a clean, futuristic design and smooth animations that will captivate your audience.

The whole website can be installed with a single click and is easily customizable. It's built with best practices and the latest technologies, including Next.js 14, React 18, TypeScript 5, and Tailwind CSS v4, ensuring a modern and high-performance foundation for your project.

## What's included

- 1-click download and setup
- Next.js 15 & React 19
- SEO Ready
- Designed with Tailwind CSS v4
- Elegant animation with Motion
- Mobile friendly
- Dark and Light mode
- Easy to customize

Pages: Header, Hero, Features Grid, Pricing, FAQ, Footer, 404 Page.


# Futur
> Template for Startup inspired by modern design and little interaction.

Source: https://kokonutui.pro/docs/templates/futur

- Live demo: https://futur-template.vercel.app/
- Price: $49, or included with Pro

<span className="text-sm font-semibold text-zinc-900 dark:text-white uppercase tracking-wider flex items-center gap-2 mb-0">
  WHAT is this?
</span>

Futur is a beautiful startup business template designed and built with Next.js, Tailwind CSS, and Motion. It's perfect for showcasing your AI startup with a clean, futuristic design and smooth animations that will captivate your audience.

The whole website can be installed with a single click and is easily customizable. It's built with best practices and the latest technologies, including Next.js 14, React 18, TypeScript 5, and Tailwind CSS v4, ensuring a modern and high-performance foundation for your project.

## What's included

- 1-click download and setup
- All assets and icons included
- Next.js 15 & React 19
- SEO Ready
- Designed with Tailwind CSS v4
- Mobile friendly
- Dark & Light mode
- Smooth animations

Pages: Header, Hero, Features Grid, Pricing, FAQ, Footer, 404 Page.


# Grace
> Documentation template.

Source: https://kokonutui.pro/docs/templates/grace

<span className="text-sm font-semibold text-zinc-900 dark:text-white uppercase tracking-wider flex items-center gap-2 mb-0">
  WHAT is this?
</span>

AI is a beautiful startup business template designed and built with Next.js, Tailwind CSS, and Motion. It's perfect for showcasing your AI startup with a clean, futuristic design and smooth animations that will captivate your audience.

The whole website can be installed with a single click and is easily customizable. It's built with best practices and the latest technologies, including Next.js 14, React 18, TypeScript 5, and Tailwind CSS v4, ensuring a modern and high-performance foundation for your project.


# Lume
> A template focused for startups building for AI, Agents and SaaS. Clean, Minimal and Modern.

Source: https://kokonutui.pro/docs/templates/lume

- Live demo: https://template-lume.vercel.app/
- Price: $59, or included with Pro

<span className="text-sm font-semibold text-zinc-900 dark:text-white uppercase tracking-wider flex items-center gap-2 mb-0">
  WHAT is this?
</span>

A template focused for startups building for AI, Agents and SaaS. Clean, Minimal and Modern.

Using the latest Next.js 16 and Tailwind CSS 4.0, it’s thoughtfully organized and uses the best tools available for today’s web development.

It comes with a built-in dark mode featuring smooth, easy-on-the-eyes color schemes, perfect for working in low-light environments. Plus, it’s optimized for search engines to help your site get noticed. No matter what device or screen size you’re using, Sonae makes sure your content looks great and works perfectly.

## What's included

- 1-click download and setup
- Next.js 16 & React 19
- Landing Page
- SEO Ready
- Designed with Tailwind CSS v4
- Elegant animation with Motion
- Mobile friendly
- Fully responsive

Pages: Header, Hero, Features, Pricing, FAQ, 404 Page.


# Marlow
> A portfolio for product designers and design engineers, with live project covers, annotated case studies and a lab of interactions to try.

Source: https://kokonutui.pro/docs/templates/marlow

- Live demo: https://marlow-template.vercel.app/
- Price: $59, or included with Pro

<span className="text-sm font-semibold text-zinc-900 dark:text-white uppercase tracking-wider flex items-center gap-2 mb-0">
  WHAT is this?
</span>

A portfolio for people who design and build interfaces. Instead of screenshots, every project cover is a small running version of the product, and each case study pairs a timeline of the work with figures you can point at to read the notes behind them.

The home page has a lab of five interactions visitors can try and slow down, fixed-price engagements with an availability calendar, and a contact form that takes a real brief. Everything personal lives in three files, so swapping in your own name, projects and writing takes an afternoon.

Built with Next.js 16, React 19, Tailwind CSS v4 and Motion, with light and dark themes, reduced-motion support, a ⌘K menu and generated social images.

## What's included

- Live project covers that run in the browser
- Case studies with a timeline and annotated figures
- Next.js 16 & React 19
- A lab of five interactions with slow motion
- Pricing, availability calendar and a real brief form
- ⌘K menu, sitemap and generated social images
- Designed with Tailwind CSS v4
- Smooth animations with Motion, reduced-motion aware
- Dark and Light mode

Pages: Home, Work index and grid, Case study, Writing, Article, About, Contact, 404 Page.


# Postly
> Template for Startup inspired by modern design and little interaction.

Source: https://kokonutui.pro/docs/templates/postly

- Live demo: https://template-07-saas.vercel.app/
- Price: $49, or included with Pro

<span className="text-sm font-semibold text-zinc-900 dark:text-white uppercase tracking-wider flex items-center gap-2 mb-0">
  WHAT is this?
</span>

AI is a beautiful startup business template designed and built with Next.js, Tailwind CSS, and Motion. It's perfect for showcasing your AI startup with a clean, futuristic design and smooth animations that will captivate your audience.

The whole website can be installed with a single click and is easily customizable. It's built with best practices and the latest technologies, including Next.js 14, React 18, TypeScript 5, and Tailwind CSS v4, ensuring a modern and high-performance foundation for your project.

## What's included

- 1-click download and setup
- All assets and icons included
- Next.js 15 & React 19
- SEO Ready
- Designed with Tailwind CSS v4
- Smooth animations with Motion
- Mobile friendly
- Dark & Light mode

Pages: Header, Hero, Features Grid, Pricing, FAQ, Footer, 404 Page.


# Sonae
> A clean modern templates for AI Agents.interaction.

Source: https://kokonutui.pro/docs/templates/sonae

- Live demo: https://template-sonae.vercel.app/
- Price: $59, or included with Pro

<span className="text-sm font-semibold text-zinc-900 dark:text-white uppercase tracking-wider flex items-center gap-2 mb-0">
  WHAT is this?
</span>

Sonae is a clean and modern template built with Next.js that makes your project look sharp and professional.

Using the latest Next.js 16 and Tailwind CSS 4.0, it’s thoughtfully organized and uses the best tools available for today’s web development.

It comes with a built-in dark mode featuring smooth, easy-on-the-eyes color schemes, perfect for working in low-light environments. Plus, it’s optimized for search engines to help your site get noticed. No matter what device or screen size you’re using, Sonae makes sure your content looks great and works perfectly.

## What's included

- 1-click download and setup
- Next.js 16 & React 19
- Landing Page
- Blog Page
- Login Page
- SEO Ready
- Designed with Tailwind CSS v4
- Elegant animation with Motion
- Mobile friendly
- Fully responsive

Pages: Header, Hero, Features, Pricing, FAQ, Login, Blog, 404 Page.


# Startup
> Template for Startup inspired by modern design and little interaction.

Source: https://kokonutui.pro/docs/templates/startup

- Live demo: https://template-founder.vercel.app/
- Price: $49, or included with Pro

<span className="text-sm font-semibold text-zinc-900 dark:text-white uppercase tracking-wider flex items-center gap-2 mb-0">
  WHAT is this?
</span>

AI is a beautiful startup business template designed and built with Next.js, Tailwind CSS, and Motion. It's perfect for showcasing your AI startup with a clean, futuristic design and smooth animations that will captivate your audience.

The whole website can be installed with a single click and is easily customizable. It's built with best practices and the latest technologies, including Next.js 14, React 18, TypeScript 5, and Tailwind CSS v4, ensuring a modern and high-performance foundation for your project.

## What's included

- One-click deployment
- All assets and icons included
- Next.js 15 & React 19
- SEO Ready
- Designed with Tailwind CSS v4
- Mobile friendly
- Dark & Light mode
- Smooth animations

Pages: Header, Hero, Features Grid, Pricing, FAQ, Footer, 404 Page.


# Clinic Dashboard
> Doctor's day view with patient queue, today's schedule, recent patients and reminders.

Source: https://kokonutui.pro/docs/components/pages/clinic-dashboard

```bash
npx shadcn@latest add @kokonutui-pro/clinic-dashboard
```

{" "}


# Projects Dashboard
> Project workspace with sidebar, search, filters, grid and list views, and a new-project dialog.

Source: https://kokonutui.pro/docs/components/pages/projects-dashboard

```bash
npx shadcn@latest add @kokonutui-pro/projects-dashboard
```


# Storefront Page
> Minimal clothing storefront with product grid or list, a product dialog with size picker and a slide-out cart.

Source: https://kokonutui.pro/docs/components/pages/storefront-page

```bash
npx shadcn@latest add @kokonutui-pro/storefront-page
```

{" "}


# Student Dashboard
> School dashboard with upcoming schedule, grades by subject, attendance stats and ongoing courses.

Source: https://kokonutui.pro/docs/components/pages/student-dashboard

```bash
npx shadcn@latest add @kokonutui-pro/student-dashboard
```

{" "}


# Team Calendar Page
> Week calendar with time-positioned meetings, meeting details sheet, upcoming list and shared files.

Source: https://kokonutui.pro/docs/components/pages/team-calendar-page

```bash
npx shadcn@latest add @kokonutui-pro/team-calendar-page
```

{" "}


# Testimonial Grid
> Headline with client logos beside a grid of short quotes from named customers.

Source: https://kokonutui.pro/docs/components/testimonials/testimonial-grid

```bash
npx shadcn@latest add @kokonutui-pro/testimonial-grid
```


# Testimonial Stack
> One testimonial at a time on a stack of tilted cards, with previous and next buttons.

Source: https://kokonutui.pro/docs/components/testimonials/testimonial-stack

```bash
npx shadcn@latest add @kokonutui-pro/testimonial-stack
```