### Add utilities

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/index.mdx

Install the `cn` utility function.

```bash
bunx --bun shadcn@latest add https://kokonutui.com/r/utils.json
```

```bash
npx shadcn@latest add https://kokonutui.com/r/utils.json
```

```bash
pnpm dlx shadcn@latest add https://kokonutui.com/r/utils.json
```

--------------------------------

### ParticleButton component usage

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/index.mdx

Example of how to use the ParticleButton component in your page.

```jsx
import ParticleButton from "@/components/kokonutui/particle-button";

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

--------------------------------

### V0 Button Example

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/buttons/v0-button.mdx

An example of how to use the V0 Button component.

```javascript
import V0Button from "@/components/kokonutui/v0-button";

<Preview link="v0-button">
    <V0Button size="xl" />
</Preview>
```

--------------------------------

### Gradient Button Examples

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/buttons/gradient-button.mdx

Examples of GradientButton component with different variants.

```javascript
import GradientButton from "@/components/kokonutui/gradient-button";

<Preview link="gradient-button">
    <div className="flex flex-col gap-2">
        <GradientButton label="Gradient Button" />
        <GradientButton label="Gradient Button" variant="orange" />
        <GradientButton label="Gradient Button" variant="purple" />
    </div>
</Preview>
```

--------------------------------

### Monorepo installation

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/index.mdx

For monorepo `shadcn/ui` CLI contain the options `-c` to the path to your workspace.

```bash
bunx --bun shadcn@latest add @kokonutui/particle-button -c ./apps/www
```

```bash
npx shadcn@latest add @kokonutui/particle-button -c ./apps/www
```

```bash
pnpm dlx shadcn@latest add @kokonutui/particle-button -c ./apps/www
```

--------------------------------

### Add particle-button component

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/index.mdx

Add `particle-button` component to your project.

```bash
bunx --bun shadcn@latest add @kokonutui/particle-button
```

```bash
npx shadcn@latest add @kokonutui/particle-button
```

```bash
pnpm dlx shadcn@latest add @kokonutui/particle-button
```

--------------------------------

### Initialize components.json

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/index.mdx

Create a components.json file in your project by running the following command.

```bash
bunx --bun shadcn@latest init
```

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

```bash
pnpm dlx shadcn@latest init
```

--------------------------------

### Hold Button Examples

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/buttons/hold-button.mdx

Examples of HoldButton with different variants and hold durations.

```javascript
import HoldButton from "@/components/kokonutui/hold-button";

<Preview link="hold-button">
    <div className="flex flex-col gap-2">
        <HoldButton />
        <HoldButton variant="green" holdDuration="1000" />
        <HoldButton variant="blue" holdDuration="2000" />
        <HoldButton variant="orange" />
        <HoldButton variant="grey" />
    </div>
</Preview>
```

--------------------------------

### SmoothDrawer Component

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/navigation/smooth-drawer.mdx

Example usage of the SmoothDrawer component.

```javascript
import SmoothDrawer from "@/components/kokonutui/smooth-drawer";

<Preview link="smooth-drawer">
    <SmoothDrawer />
</Preview>
```

--------------------------------

### BeamsBackground Component

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/backgrounds/beams-background.mdx

An example of how to use the BeamsBackground component.

```javascript
import BeamsBackground from "@/components/kokonutui/beams-background";

<Preview link="beams-background" comment={["Motion"]}>
    <BeamsBackground />
</Preview>
```

--------------------------------

### TypeWriter Component

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/texts/type-writer.mdx

Example of using the TypeWriter component.

```javascript
import TypeWriter from "@/components/kokonutui/type-writer";

<PreviewClient link="type-writer" comment={["Motion"]}>
    <TypeWriter />
</PreviewClient>
```

--------------------------------

### AILoadingState Component

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/ai/ai-loading.mdx

Example usage of the AILoadingState component.

```javascript
import AILoadingState from "@/components/kokonutui/ai-loading";

<Preview link="ai-loading" comment={["Motion"]}>
    <AILoadingState />
</Preview>
```

--------------------------------

### SmoothTab Component Usage

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/navigation/smooth-tab.mdx

Example of how to import and use the SmoothTab component.

```javascript
import SmoothTab from "@/components/kokonutui/smooth-tab";

<Preview link="smooth-tab" comment={["Motion"]}>
    <SmoothTab />
</Preview>
```

--------------------------------

### DynamicText Component

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/texts/dynamic-text.mdx

Example usage of the DynamicText component.

```javascript
import DynamicText from "@/components/kokonutui/dynamic-text";

<PreviewClient link="dynamic-text" comment={["Motion"]}>
    <DynamicText />
</PreviewClient>
```

--------------------------------

### ShapeHero Component

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/backgrounds/shape-hero.mdx

Example of how to use the ShapeHero component.

```javascript
import ShapeHero from "@/components/kokonutui/shape-hero";

<Preview link="shape-hero" comment={["Motion"]}>
    <ShapeHero />
</Preview>
```

--------------------------------

### AI Prompt Component

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/ai/ai-prompt.mdx

Example usage of the AI_Prompt component.

```javascript
import AI_Prompt from "@/components/kokonutui/ai-prompt";

<Preview link="ai-prompt" comment={["Motion"]}>
    <AI_Prompt />
</Preview>
```

--------------------------------

### ActionSearchBar Component

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/navigation/action-search-bar.mdx

This is the ActionSearchBar component used in the example.

```javascript
import ActionSearchBar from "@/components/kokonutui/action-search-bar";

<Preview link="action-search-bar" comment={["Motion"]}>
    <ActionSearchBar />
</Preview>
```

--------------------------------

### Apple Activity Card

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/cards/apple-activity-card.mdx

This is an example of how to use the Apple Activity Card component.

```javascript
import AppleActivityCard from "@/components/kokonutui/apple-activity-card";

<PreviewClient link="apple-activity-card" comment={["Motion"]}>
    <AppleActivityCard />
</PreviewClient>
```

--------------------------------

### ScrollText Component Usage

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/texts/scroll-text.mdx

Example of how to import and use the ScrollText component.

```jsx
import ScrollText from "@/components/kokonutui/scroll-text";

<PreviewClient link="scroll-text" comment={["Motion"]}>
    <ScrollText />
</PreviewClient>
```

--------------------------------

### MatrixText Component

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/texts/matrix-text.mdx

Example of using the MatrixText component with custom text and class names.

```javascript
import MatrixText from "@/components/kokonutui/matrix-text";

<PreviewClient link="matrix-text" comment={["Motion"]}>
    <MatrixText
    text="Hello World!"
    className="min-h-[200px]"
    />
</PreviewClient>
```

--------------------------------

### ShimmerText Component

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/texts/shimmer-text.mdx

Example of using the ShimmerText component with a custom class name.

```javascript
import ShimmerText from "@/components/kokonutui/shimmer-text";

<PreviewClient link="shimmer-text" comment={["Motion"]}>
    <ShimmerText className="text-5xl" />
</PreviewClient>
```

--------------------------------

### SwooshText Component Usage

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/texts/swoosh-text.mdx

Example of how to use the SwooshText component with hover effect.

```javascript
import SwooshText from "@/components/kokonutui/swoosh-text";

<Preview link="swoosh-text" comment={["Motion"]}>
    <SwooshText text="Hover" className="text-6xl" />
</Preview>
```

--------------------------------

### Carousel Cards Component

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/cards/carousel-cards.mdx

Example usage of the CarouselCards component.

```javascript
import CarouselCards from "@/components/kokonutui/carousel-cards";

<PreviewClient link="carousel-cards">
    <CarouselCards />
</PreviewClient>
```

--------------------------------

### GlitchText Component

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/texts/glitch-text.mdx

Example of using the GlitchText component with size '2xl'.

```javascript
import GlitchText from "@/components/kokonutui/glitch-text";

<PreviewClient link="matrix-text" comment={["Motion"]}>
    <GlitchText size="2xl" />
</PreviewClient>
```

--------------------------------

### SlicedText Component

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/texts/sliced-text.mdx

Example of using the SlicedText component with a large text size.

```javascript
import SlicedText from "@/components/kokonutui/sliced-text";

<Preview link="sliced-text" comment={["Motion"]}>
    <SlicedText className="text-5xl" />
</Preview>
```

--------------------------------

### SlideTextButton Component

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/buttons/slide-text-button.mdx

Example usage of the SlideTextButton component with hover text.

```javascript
import SlideTextButton from "@/components/kokonutui/slide-text-button";

<Preview link="slide-text-button">
    <SlideTextButton hoverText="Click to see more" />
</Preview>
```

--------------------------------

### Profile Dropdown Component

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/navigation/profile-dropdown.mdx

Import and render the ProfileDropdown component.

```javascript
import ProfileDropdown from "@/components/kokonutui/profile-dropdown";

<Preview link="profile-dropdown">
    <ProfileDropdown />
</Preview>
```

--------------------------------

### Commands

Source: https://github.com/kokonut-labs/kokonutui/blob/main/CLAUDE.md

Development and build commands for the project.

```bash
bun run dev          # Dev server with Turbopack
bun run build        # Production build
bun run lint         # Next.js linter

bun x ultracite fix  # Format and auto-fix linting issues (run before committing)
bun x ultracite check  # Check for issues without fixing

bun run ./scripts/build-registry.ts  # Rebuild public/r/*.json registry files + public/llms.txt
```

--------------------------------

### CommandButton

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/buttons/command-button.mdx

Command button for shortcut.

```javascript
import CommandButton from "@/components/kokonutui/command-button";

<Preview link="command-button">
    <CommandButton />
</Preview>
```

--------------------------------

### Toolbar

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/navigation/toolbar.mdx

Multiples actions toolbar inspired by Figma.

```javascript
import ToolbarDemo from "@/components/kokonutui/toolbar";

<Preview link="toolbar">
    <ToolbarDemo />
</Preview>
```

--------------------------------

### Bento Grid Component

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/cards/bento-grid.mdx

Import and usage of the BentoGrid component.

```javascript
import BentoGrid from "@/components/kokonutui/bento-grid";

<Preview link="bento-grid">
    <BentoGrid />
</Preview>
```

--------------------------------

### AI Text Loading Component

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/ai/ai-text-loading.mdx

This snippet shows how to import and use the AITextLoading component.

```javascript
import AITextLoading from "@/components/kokonutui/ai-text-loading";

<Preview link="ai-text-loading" comment={["Motion"]}>
    <AITextLoading />
</Preview>
```

--------------------------------

### BackgroundPaths Component

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/backgrounds/background-paths.mdx

This snippet shows how to import and use the BackgroundPaths component.

```javascript
import BackgroundPaths from "@/components/kokonutui/background-paths";

<PreviewClient link="background-paths" comment={["Motion"]}>
    <BackgroundPaths />
</PreviewClient>
```

--------------------------------

### CardStack Component

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/cards/card-stack.mdx

Import and usage of the CardStack component.

```javascript
import CardStack from "@/components/kokonutui/card-stack";

<Preview link="card-stack" comment={["Motion"]}>
    <CardStack />
</Preview>
```

--------------------------------

### Particle Button

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/buttons/particle-button.mdx

Particle Button Animation on click.

```javascript
import ParticleButton from "@/components/kokonutui/particle-button";

<Preview link="particle-button" comment={["Motion"]}>
    <ParticleButton successDuration={1000} variant="default">
        Click me!
    </ParticleButton>
</Preview>
```

--------------------------------

### AttractButton

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/buttons/attract-button.mdx

Attract particles button!

```javascript
import AttractButton from "@/components/kokonutui/attract-button";

<Preview link="attract-button">
    <AttractButton />
</Preview>
```

--------------------------------

### Liquid Glass Card

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/cards/liquid-glass-card.mdx

Liquid Glass inspired by @Apple

```javascript
import LiquidGlassCard from "@/components/kokonutui/liquid-glass-card";

<Preview link="liquid-glass-card">
    <LiquidGlassCard />
</Preview>
```

--------------------------------

### AI Input Search Component

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/ai/ai-input-search.mdx

Import and render the AI_Input_Search component.

```javascript
import AI_Input_Search from "@/components/kokonutui/ai-input-search";

<Preview link="ai-input-search">
    <AI_Input_Search />
</Preview>
```

--------------------------------

### Spotlight Cards Component

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/cards/spotlight-cards.mdx

Import and usage of the SpotlightCards component.

```javascript
import SpotlightCards from "@/components/kokonutui/spotlight-cards";

<Preview link="spotlight-cards" comment={["Motion"]}>
    <SpotlightCards />
</Preview>
```

--------------------------------

### TweetCard Component

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/cards/tweet-card.mdx

Import and render the TweetCard component.

```javascript
import TweetCard from "@/components/kokonutui/tweet-card";

<Preview link="tweet-card" comment={["Motion"]}>
    <TweetCard />
</Preview>
```

--------------------------------

### robots.txt Configuration

Source: https://github.com/kokonut-labs/kokonutui/blob/main/app/robots.txt

This is a standard robots.txt file configuration that specifies which parts of the website search engine crawlers are allowed or disallowed to access.

```robots.txt
User-Agent: *
Allow: /
Disallow: /api/
Disallow: /_next/

Sitemap: https://kokonutui.com/sitemap.xml
```

--------------------------------

### SwitchButton Component

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/buttons/switch-button.mdx

A basic SwitchButton component implementation.

```javascript
import SwitchButton from "@/components/kokonutui/switch-button";

<Preview link="switch-button">
    <SwitchButton />
</Preview>
```

--------------------------------

### Loader Component

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/inputs/loader.mdx

A simple loader component.

```javascript
import Loader from "@/components/kokonutui/loader";

<Preview link="loader">
    <Loader />
</Preview>
```

--------------------------------

### Card Flip Component

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/cards/card-flip.mdx

Import and usage of the CardFlip component.

```javascript
import CardFlip from "@/components/kokonutui/card-flip";

<Preview link="card-flip">
    <CardFlip />
</Preview>
```

--------------------------------

### AvatarPicker Component

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/inputs/avatar-picker.mdx

Basic AvatarPicker component usage.

```jsx
import AvatarPicker from "@/components/kokonutui/avatar-picker";

<AvatarPicker />
```

--------------------------------

### AI Voice Component

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/ai/ai-voice.mdx

Import and render the AI_Voice component.

```javascript
import AI_Voice from "@/components/kokonutui/ai-voice";

<Preview link="ai-voice">
    <AI_Voice />
</Preview>
```

--------------------------------

### Flow Field Component

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/backgrounds/flow-field.mdx

Import and use the FlowField component.

```javascript
import FlowField from "@/components/kokonutui/flow-field";

<Preview link="flow-field" comment={["Motion", "Canvas"]}>
    <FlowField />
</Preview>
```

--------------------------------

### Mouse Effect Card Component

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/cards/mouse-effect-card.mdx

Import and usage of the MouseEffectCard component.

```javascript
import MouseEffectCard from "@/components/kokonutui/mouse-effect-card";

<Preview link="mouse-effect-card" comment={["Motion"]}>
    <MouseEffectCard />
</Preview>
```

--------------------------------

### Social Button

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/buttons/social-button.mdx

Animated Social show-up

```javascript
import SocialButton from "@/components/kokonutui/social-button";

<Preview link="social-button">
    <SocialButton />
</Preview>
```

--------------------------------

### TeamSelector Component

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/inputs/team-selector.mdx

Import and render the TeamSelector component.

```javascript
import TeamSelector from "@/components/kokonutui/team-selector";

<Preview link="team-selector" comment={["Motion"]}>
    <TeamSelector />
</Preview>
```

--------------------------------

### MorphicNavbar Component

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/navigation/morphic-navbar.mdx

Import and render the MorphicNavbar component.

```javascript
import MorphicNavbar from "@/components/kokonutui/morphic-navbar";

<Preview link="morphic-navbar">
    <MorphicNavbar />
</Preview>
```

--------------------------------

### File Upload Component

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/inputs/file-upload.mdx

A basic file upload component with a special uploading animation and drag-and-drop functionality.

```javascript
import FileUpload from "@/components/kokonutui/file-upload";

<PreviewClient
    link="file-upload"
    comment={["Motion"]}
    uploadDelay="4000"
>
    <FileUpload />
</PreviewClient>
```

--------------------------------

### Currency Transfer Component

Source: https://github.com/kokonut-labs/kokonutui/blob/main/content/docs/cards/currency-transfer.mdx

A currency transfer component with a multi-step animation, inspired by transaction flows.

```javascript
import CurrencyTransfer from "@/components/kokonutui/currency-transfer";

<PreviewClient link="currency-transfer" comment={["Motion"]}>
    <CurrencyTransfer />
</PreviewClient>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.