Kokonut UI

https://kokonutui.com/docs
Admin
Kokonut UI is a comprehensive component library with 100+ customizable UI components, templates, and...
Tokens:94,430
Snippets:231
Trust Score:7.6
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install Smooth Drawer

Source: https://kokonutui.com/docs/navigation/smooth-drawer

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @kokonutui/smooth-drawer
```

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

### Install Spotlight Cards

Source: https://kokonutui.com/docs/cards/spotlight-cards

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @kokonutui/spotlight-cards
```

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

### Install Smooth Tab

Source: https://kokonutui.com/docs/navigation/smooth-tab

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @kokonutui/smooth-tab
```

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

### Install Profile Dropdown

Source: https://kokonutui.com/docs/navigation/profile-dropdown

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @kokonutui/profile-dropdown
```

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

### Install Avatar Picker

Source: https://kokonutui.com/docs/inputs/avatar-picker

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @kokonutui/avatar-picker
```

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

### Install Background Paths

Source: https://kokonutui.com/docs/backgrounds/background-paths

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @kokonutui/background-paths
```

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

### Install V0 Button

Source: https://kokonutui.com/docs/buttons/v0-button

Use the shadcn CLI to add the component to your project.

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

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

### Install Switch Button

Source: https://kokonutui.com/docs/buttons/switch-button

Use the shadcn CLI to add the component to your project.

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

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

### Install Team Selector

Source: https://kokonutui.com/docs/inputs/team-selector

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @kokonutui/team-selector
```

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

### Install Attract Button

Source: https://kokonutui.com/docs/buttons/attract-button

Use the shadcn CLI to add the component to your project.

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

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

### Install Action Search Bar

Source: https://kokonutui.com/docs/navigation/action-search-bar

Use the shadcn CLI to add the component to your project.

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

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

### Install Dynamic Text Component

Source: https://kokonutui.com/docs/texts/dynamic-text

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @kokonutui/dynamic-text
```

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

### Install Particle Button

Source: https://kokonutui.com/docs/buttons/particle-button

Use the shadcn CLI to add the component to your project.

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

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

### Install Shimmer Text component

Source: https://kokonutui.com/docs/texts/shimmer-text

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @kokonutui/shimmer-text
```

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

### Install Mouse Effect Card

Source: https://kokonutui.com/docs/cards/mouse-effect-card

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @kokonutui/mouse-effect-card
```

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

### Install Currency Transfer Component

Source: https://kokonutui.com/docs/cards/currency-transfer

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @kokonutui/currency-transfer
```

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

### Install Toolbar Component

Source: https://kokonutui.com/docs/navigation/toolbar

Use the shadcn CLI to add the toolbar component to your project.

```bash
npx shadcn@latest add @kokonutui/toolbar
```

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

### Install Matrix Text Component

Source: https://kokonutui.com/docs/texts/matrix-text

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @kokonutui/matrix-text
```

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

### Install utility functions

Source: https://kokonutui.com/docs

Install the required 'cn' utility function using the shadcn CLI.

```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 components in monorepo

Source: https://kokonutui.com/docs

Use the -c flag to specify the workspace path when installing components in a monorepo.

```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 Morphic Navbar

Source: https://kokonutui.com/docs/navigation/morphic-navbar

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @kokonutui/morphic-navbar
```

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

### Installation Command

Source: https://kokonutui.com/docs/buttons/slide-text-button

Use the shadcn CLI to add the Slide Text Button component to your project.

```bash
npx shadcn@latest add @kokonutui/slide-text-button
```

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

### Install Social Button

Source: https://kokonutui.com/docs/buttons/social-button

Use the shadcn CLI to add the component to your project.

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

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

### Install AI Text Loading component

Source: https://kokonutui.com/docs/ai/ai-text-loading

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @kokonutui/ai-text-loading
```

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

### Install Beams Background component

Source: https://kokonutui.com/docs/backgrounds/beams-background

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @kokonutui/beams-background
```

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

### Install Card Flip Component

Source: https://kokonutui.com/docs/cards/card-flip

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @kokonutui/card-flip
```

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

### Import and use components

Source: https://kokonutui.com/docs

Example of importing and rendering a component in a React page.

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

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