### Install V0 Button with Bun Source: https://kokonutui.com/docs/buttons/v0-button This command installs the V0 Button component from Kokonut UI using the bunx command-line tool. It requires Node.js and Bun to be installed on your system. ```bash bunx --bun shadcn@latest add @kokonutui/v0-button ``` -------------------------------- ### Install Sliced Text Component with bun Source: https://kokonutui.com/docs/texts/sliced-text This command installs the Sliced Text component from Kokonut UI using bun. It utilizes shadcn/cli for the installation process. Ensure you have bun and Node.js installed. ```bash bunx --bun shadcn@latest add @kokonutui/sliced-text ``` -------------------------------- ### Install Kokonut UI Utilities with shadcn/ui CLI Source: https://kokonutui.com/docs Installs the necessary utility files for Kokonut UI, including Tailwind CSS v4 support and the 'cn' utility function. This command is available for Bun, npm, and pnpm. ```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 ``` -------------------------------- ### Install Kokonut UI Matrix Text with bun Source: https://kokonutui.com/docs/texts/matrix-text This command installs the `@kokonutui/matrix-text` component using `bunx` and `shadcn/ui`. It's a quick way to add the matrix text functionality to your project. ```bash bunx --bun shadcn@latest add @kokonutui/matrix-text ``` -------------------------------- ### Install Kokonut UI Bento Grid with Bun Source: https://kokonutui.com/docs/cards/bento-grid This command installs the Kokonut UI Bento Grid component using the Bun package manager. It leverages shadcn/ui for streamlined integration into your project. ```bash bunx --bun shadcn@latest add @kokonutui/bento-grid ``` -------------------------------- ### Install Spotlight Cards Component Source: https://kokonutui.com/docs/cards/spotlight-cards Use the shadcn CLI to add the Spotlight Cards component to your project. This command fetches the necessary files and dependencies for the component. ```bash bunx --bun shadcn@latest add @kokonutui/spotlight-cards ``` -------------------------------- ### Install Social Button with shadcn/cli Source: https://kokonutui.com/docs/buttons/social-button This command installs the Social Button component using the shadcn/cli tool. Ensure you have Bun and Node.js installed. This command adds the necessary dependencies and component files to your project. ```bash bunx --bun shadcn@latest add @kokonutui/social-button ``` -------------------------------- ### Install Smooth Tab Component via CLI Source: https://kokonutui.com/docs/navigation/smooth-tab Installs the Smooth Tab component into your project using the shadcn CLI. This command requires a project already configured with shadcn/ui. ```bash bunx --bun shadcn@latest add @kokonutui/smooth-tab ``` -------------------------------- ### Initialize Kokonut UI with shadcn/ui CLI Source: https://kokonutui.com/docs Initializes the shadcn/ui CLI for your project, which is a prerequisite for managing Kokonut UI components. This command can be executed using Bun, npm, or pnpm. ```bash bunx --bun shadcn@latest init ``` ```bash npx shadcn@latest init ``` ```bash pnpm dlx shadcn@latest init ``` -------------------------------- ### Install Avatar Picker Component Source: https://kokonutui.com/docs/inputs/avatar-picker Command to install the Avatar Picker component into a project using the shadcn CLI. This requires a project configured with shadcn/ui. ```shell bunx --bun shadcn@latest add @kokonutui/avatar-picker ``` -------------------------------- ### Install Flow Field Component using Bun Source: https://kokonutui.com/docs/backgrounds/flow-field This command installs the Kokonut UI Flow Field component using `bunx` and `shadcn-ui`. It's the primary method for adding this component to your project. ```bash bunx shadcn@latest add @kokonutui/flow-field ``` -------------------------------- ### Configure components.json for Kokonut UI Registry Source: https://kokonutui.com/docs Adds the Kokonut UI registry configuration to your project's components.json file. This allows the shadcn/ui CLI to locate and install Kokonut UI components. ```json { "registries": { "@kokonutui": "https://kokonutui.com/r/{name}.json" } } ``` -------------------------------- ### Add Kokonut UI Component to Monorepo with shadcn/ui CLI Source: https://kokonutui.com/docs Installs a Kokonut UI component into a monorepo structure using the shadcn/ui CLI. The '-c' flag specifies the path to your workspace, ensuring correct placement. ```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 ``` -------------------------------- ### Install Shimmer Text Component via CLI Source: https://kokonutui.com/docs/texts/shimmer-text This command uses the shadcn CLI to add the Shimmer Text component to your project. It supports multiple package managers including npm, bun, and pnpm. ```bash bunx --bun shadcn@latest add @kokonutui/shimmer-text ``` -------------------------------- ### Import and Use Kokonut UI Component in React Source: https://kokonutui.com/docs Demonstrates how to import and use a Kokonut UI component, like 'ParticleButton', within a React page. This assumes the component has been successfully added to your project. ```javascript import ParticleButton from "@/components/kokonutui/particle-button"; export default function Page() { return ; } ``` -------------------------------- ### Add Kokonut UI Component using shadcn/ui CLI Source: https://kokonutui.com/docs Adds a specific Kokonut UI component, such as 'particle-button', to your project using the shadcn/ui CLI. This process is supported by Bun, npm, and pnpm. ```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 ``` -------------------------------- ### Create AI Agent with TypeScript Source: https://kokonutui.com/docs/cards/bento-grid This TypeScript snippet demonstrates the basic structure for creating an AI agent. It's a foundational piece for building intelligent systems within the Kokonut UI ecosystem. ```typescript const createAgent = async () => { // Agent creation logic here } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.