### Install Coss Menu

Source: https://github.com/cosscom/coss/blob/main/apps/ui/skills/coss/references/primitives/menu.md

Install the Coss Menu component using npx. For manual setup, also install @base-ui/react and include the destructive foreground CSS variable.

```bash
npx shadcn@latest add @coss/menu
```

```bash
npm install @base-ui/react
```

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

### Manual Installation of Skeleton Component

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/skeleton.mdx

Copy this code into your project's components/ui directory and update import paths as needed. This method is for manual setup.

```tsx
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"

const skeletonVariants = cva(
  "animate-pulse rounded-md bg-muted",
  {
    variants: {
      variant: {
        default: "",
      },
      size: {
        default: "h-full w-full",
        lg: "h-32 w-full",
        sm: "h-2 w-full",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

export interface SkeletonProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof skeletonVariants> {}

const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
  ({ className, variant, size, ...props }, ref) => {
    return (
      <div
        ref={ref}
        className={cn(skeletonVariants({ variant, size, className }))}
        {...props}
      />
    )
  }
)
Skeleton.displayName = "Skeleton"

export { Skeleton }
```

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

### Installation

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/kbd.mdx

Instructions for installing the Kbd component via CLI or manually.

```APIDOC
## Installation

### CLI
```bash
npx shadcn@latest add @coss/kbd
```

### Manual
1. Copy and paste the following code into your project:
   ```tsx
   // components/ui/kbd.tsx
   import * as React from "react"
   import { Slot } from "@radix-ui/react-slot"
   import { cva, type VariantProps } from "class-variance-authority"
   import { cn } from "@/lib/utils"

   const kbdVariants = cva(
     "inline-flex items-center justify-center rounded-md border bg-muted px-2 py-1 font-mono text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
     {
       variants: {
         variant: {
           default: "border-border",
         },
       },
       defaultVariants: {
         variant: "default",
       },
     }
   )

   const Kbd = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<"span"> & VariantProps<typeof kbdVariants>>(
     ({ className, variant, ...props }, ref) => (
       <span ref={ref} className={cn(kbdVariants({ variant, className }))} {...props} />
     )
   )
   Kbd.displayName = "Kbd"

   const KbdGroup = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<"div"> & VariantProps<typeof kbdVariants>>(
     ({ className, variant, ...props }, ref) => (
       <div ref={ref} className={cn("flex items-center gap-0.5", className)} {...props} />
     )
   )
   KbdGroup.displayName = "KbdGroup"

   export { Kbd, KbdGroup }
   ```
2. Update the import paths to match your project setup.
```

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

### Installation

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/input.mdx

Instructions for installing the Input component using CLI or manual steps.

```APIDOC
## Installation

### CLI
```bash
npx shadcn@latest add @coss/input
```

### Manual
1. Install the following dependencies:
```bash
npm install @base-ui/react
```
2. Copy and paste the following code into your project.
3. Update the import paths to match your project setup.
```

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

### Installation

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/button.mdx

Instructions for installing the Button component using CLI or manual steps.

```APIDOC
## Installation

### Using CLI

```bash
npx shadcn@latest add @coss/button
```

### Manual Installation

1.  **Install dependencies:**
    ```bash
    npm install @base-ui/react
    ```

2.  **Import CSS variables:**
    ```css
    @theme inline {
      --color-destructive-foreground: var(--destructive-foreground);
    }

    :root {
      --destructive-foreground: var(--color-red-700);
    }

    .dark {
      --destructive-foreground: var(--color-red-400);
    }
    ```

3.  **Copy component code:**
    Copy and paste the following code into your project (`components/ui/button.tsx`).

    ```tsx
    // ComponentSource name="button" title="components/ui/button.tsx"
    ```

4.  **Update import paths:**
    Adjust the import paths to match your project structure.
```

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

### Usage Examples

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/kbd.mdx

Examples demonstrating how to use the Kbd and KbdGroup components.

```APIDOC
## Usage Examples

### Import
```tsx
import { Kbd, KbdGroup } from "@/components/ui/kbd"
```

### Single Key
```tsx
<Kbd>K</Kbd>
```

### Key Combination
```tsx
<KbdGroup>
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>
```
```

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

### Install Tooltip Component

Source: https://github.com/cosscom/coss/blob/main/apps/ui/skills/coss/references/primitives/tooltip.md

Install the tooltip component using npm.

```bash
npx shadcn@latest add @coss/tooltip
```

```bash
npm install @base-ui/react
```

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

### Alert Installation

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/alert.mdx

Instructions for installing the Alert component using the CLI or manually.

```APIDOC
## Installation

### CLI
```bash
npx shadcn@latest add @coss/alert
```

### Manual
1. Import the following variables into your CSS file:
```css
@theme inline {
  --color-destructive-foreground: var(--destructive-foreground);
  --color-info: var(--info);
  --color-info-foreground: var(--info-foreground);
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
}

:root {
  --destructive-foreground: var(--color-red-400);
  --info: var(--color-blue-500);
  --info-foreground: var(--color-blue-700);
  --success: var(--color-emerald-500);
  --success-foreground: var(--color-emerald-700);
  --warning: var(--color-amber-500);
  --warning-foreground: var(--color-amber-700);
}

.dark {
  --destructive-foreground: var(--color-red-400);
  --info: var(--color-blue-500);
  --info-foreground: var(--color-blue-400);
  --success: var(--color-emerald-500);
  --success-foreground: var(--color-emerald-400);
  --warning: var(--color-amber-500);
  --warning-foreground: var(--color-amber-400);
}
```

2. Copy and paste the following code into your project:
```tsx
// components/ui/alert.tsx
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const alertVariants = cva(
  "relative w-full rounded-lg border p-4 [&>svg~*]:translate-y-[-2px]",
  {
    variants: {
      variant: {
        default: "bg-background text-foreground",
        destructive: "border-destructive/50 text-destructive dark:border-destructive",
        info: "border-info/50 text-info dark:border-info",
        success: "border-success/50 text-success dark:border-success",
        warning: "border-warning/50 text-warning dark:border-warning",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

const Alert = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>>(
  ({ className, variant, ...props }, ref) => (
    <div
      ref={ref}
      role="alert"
      className={cn(alertVariants({ variant }), className)}
      {...props}
    />
  )
)
Alert.displayName = "Alert"

const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
  ({ className, ...props }, ref) => (
    <h5
      ref={ref}
      className={cn("mb-1 font-medium leading-none tracking-tight", props.className)}
      {...props}
    />
  )
)
AlertTitle.displayName = "AlertTitle"

const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      className={cn("text-sm [&_p]:leading-relaxed", props.className)}
      {...props}
    />
  )
)
AlertDescription.displayName = "AlertDescription"

const AlertAction = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      className={cn("mt-4 flex items-center gap-x-2", props.className)}
      {...props}
    />
  )
)
AlertAction.displayName = "AlertAction"

export { Alert, AlertTitle, AlertDescription, AlertAction, alertVariants }
```

3. Update the import paths to match your project setup.
```

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

### Popover Installation (CLI)

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/popover.mdx

Install the Popover component using the CLI.

```APIDOC
```bash
npx shadcn@latest add @coss/popover
```
```

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

### Toolbar Usage Example

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/toolbar.mdx

Example demonstrating how to use the Toolbar component with its sub-components.

```APIDOC
## Usage Example

### Code
```tsx
import {
  Toolbar,
  ToolbarButton,
  ToolbarGroup,
  ToolbarSeparator,
} from "@/registry/default/ui/toolbar"
import { Button } from "@/registry/default/ui/button"
import { Toggle } from "@/registry/default/ui/toggle"

<Toolbar>
  <ToolbarGroup>
    <ToolbarButton render={<Toggle />}>Bold</ToolbarButton>
    <ToolbarButton render={<Toggle />}>Underline</ToolbarButton>
  </ToolbarGroup>
  <ToolbarSeparator />
  <ToolbarButton render={<Button />}>Save</ToolbarButton>
</Toolbar>
```
```

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

### Install useCopyToClipboard via CLI

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/hooks/use-copy-to-clipboard.mdx

Use this command to install the hook using npm or yarn.

```bash
npx shadcn@latest add @coss/use-copy-to-clipboard
```

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

### Usage Example

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/input.mdx

Basic usage example of the Input component.

```APIDOC
## Usage

```tsx
import { Input } from "@/components/ui/input"
```

```tsx
<Input />
```
```

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

### Install Drawer via CLI

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/drawer.mdx

Use this command to install the drawer component using the CLI.

```bash
npx shadcn@latest add @coss/drawer
```

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

### Progress Component Examples

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/progress.mdx

Examples demonstrating different ways to use the Progress component.

```APIDOC
## Examples

### With Label and Value

<ComponentPreview name="p-progress-2" />

### With Formatted Value

<ComponentPreview name="p-progress-3" />
```

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

### Toast Usage Examples

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/toast.mdx

Examples demonstrating how to use the toast manager for different toast functionalities.

```APIDOC
## Usage Examples

### Stacked Toasts

To display a toast, import `toastManager` and use its `add` method.

```tsx
import { toastManager } from "@/components/ui/toast"

toa stManager.add({
  title: "Event has been created",
  description: "Monday, January 3rd at 6:00pm",
})
```

To change the default position (bottom-right), use the `position` prop on `ToastProvider`:

```tsx
<ToastProvider position="top-center">{children}</ToastProvider>
```

### Deduplicated toasts (upsert)

To manage duplicate toasts, provide a stable `id` when calling `toastManager.add`. If a toast with the same `id` exists, it will be updated.

```tsx
toa stManager.add({
  id: "save-status",
  title: "Saved",
  description: "Your draft was updated.",
})
```

### Anchored Toasts

For toasts anchored to specific elements, use `anchoredToastManager`.

```tsx
import { anchoredToastManager } from "@/components/ui/toast"

// Assuming buttonRef is a ref to a button element
anchoredToastManager.add({
  title: "Copied!",
  positionerProps: {
    anchor: buttonRef.current,
  },
})
```

To style anchored toasts like tooltips:

```tsx
anchoredToastManager.add({
  title: "Copied!",
  positionerProps: {
    anchor: buttonRef.current,
  },
  data: {
    tooltipStyle: true,
  },
})
```
```

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

### Installation

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/otp-field.mdx

Instructions for installing the OTP Field component using CLI or manual dependency management.

```APIDOC
## Installation

### CLI

```bash
npx shadcn@latest add @coss/otp-field
```

### Manual

1. Install the following dependencies:

```bash
npm install @base-ui/react lucide-react
```

2. Copy and paste the following code into your project:

```typescript
// components/ui/otp-field.tsx (content from ComponentSource)
// components/ui/separator.tsx (content from ComponentSource)
```

3. Update the import paths to match your project setup.
```

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

### Install Coss Button

Source: https://github.com/cosscom/coss/blob/main/apps/ui/skills/coss/references/primitives/button.md

Install the Coss Button component using npx. Alternatively, manually install its dependencies.

```bash
npx shadcn@latest add @coss/button
```

```bash
npm install @base-ui/react
```

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

### Install coss Calendar Component

Source: https://github.com/cosscom/coss/blob/main/apps/ui/skills/coss/references/primitives/calendar.md

Install the component using npm. Manual dependency installation for react-day-picker is also required.

```bash
npx shadcn@latest add @coss/calendar
```

```bash
npm install react-day-picker
```

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

### Popover Installation (Manual)

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/popover.mdx

Manually install the Popover component by adding dependencies and copying source code.

```APIDOC
```bash
npm install @base-ui/react
```

Copy and paste the following code into your project:

`components/ui/popover.tsx`

Update the import paths to match your project setup.
```

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

### Install Coss Input Component

Source: https://github.com/cosscom/coss/blob/main/apps/ui/skills/coss/references/primitives/input.md

Install the Coss Input component using npm or npx. Manual dependency installation for @base-ui/react is also shown.

```bash
npx shadcn@latest add @coss/input
```

```bash
npm install @base-ui/react
```

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

### Toggle Usage Example

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/toggle.mdx

Basic usage example for the Toggle component.

```APIDOC
## Toggle Usage

### Import

```tsx
import { Toggle } from "@/components/ui/toggle"
```

### Basic Usage

```tsx
<Toggle>Toggle</Toggle>
```
```

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

### Package Runner Examples

Source: https://github.com/cosscom/coss/blob/main/apps/ui/skills/coss/references/cli.md

Always use the project's package runner for CLI commands to ensure consistency and safety. Examples include npx, pnpm dlx, and bunx.

```bash
# Always use the project's package runner:
#   npx shadcn@latest ...
#   pnpm dlx shadcn@latest ...
#   bunx --bun shadcn@latest ...
```

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

### Install Coss Toast

Source: https://github.com/cosscom/coss/blob/main/apps/ui/skills/coss/references/primitives/toast.md

Install the coss toast package using npm or yarn. Manual installation of Base UI react is also required.

```bash
npx shadcn@latest add @coss/toast
```

```bash
npm install @base-ui/react
```

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

### Badge with Link Example

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/badge.mdx

Example demonstrating how to use the `render` prop to make a Link component appear as a badge.

```APIDOC
### Link as Badge

You can use the [`render`](https://base-ui.com/react/utils/use-render#migrating-from-radix-ui) prop to make another component look like a badge. Here's an example of a link that looks like a badge.

```tsx
import Link from "next/link"

import { Badge } from "@/components/ui/badge"

export function LinkAsBadge() {
  return <Badge render={<Link href="/pricing" />}>New</Badge>
}
```
```

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

### Install Theme CSS Variables

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/(root)/styling.mdx

Paste this CSS into your app/globals.css file for manual theme installation. It defines theme colors and animations.

```css
@theme inline {
  --font-sans: var(--font-sans);
  --font-heading: var(--font-heading);
  --font-mono: var(--font-mono);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-info: var(--info);
  --color-info-foreground: var(--info-foreground);
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --animate-skeleton: skeleton 2s -1s infinite linear;
  @keyframes skeleton {
    to {
      background-position: -200% 0;
    }
  }
}

:root {
  --radius: 0.625rem;
  --background: var(--color-white);
  --foreground: var(--color-neutral-800);
  --card: var(--color-white);
  --card-foreground: var(--color-neutral-800);
  --popover: var(--color-white);
  --popover-foreground: var(--color-neutral-800);
  --primary: var(--color-neutral-800);
  --primary-foreground: var(--color-neutral-50);
  --secondary: --alpha(var(--color-black) / 4%);
  --secondary-foreground: var(--color-neutral-800);
  --muted: --alpha(var(--color-black) / 4%);
  --muted-foreground: color-mix(
    in srgb,
    var(--color-neutral-500) 90%,
    var(--color-black)
  );
  --accent: --alpha(var(--color-black) / 4%);
  --accent-foreground: var(--color-neutral-800);
  --destructive: var(--color-red-500);
  --destructive-foreground: var(--color-red-700);
  --info: var(--color-blue-500);
  --info-foreground: var(--color-blue-700);
  --success: var(--color-emerald-500);
  --success-foreground: var(--color-emerald-700);
  --warning: var(--color-amber-500);
  --warning-foreground: var(--color-amber-700);
  --border: --alpha(var(--color-black) / 8%);
  --input: --alpha(var(--color-black) / 10%);
  --ring: var(--color-neutral-400);
  --sidebar: var(--color-neutral-50);
  --sidebar-foreground: color-mix(
    in srgb,
    var(--color-neutral-800) 64%,
    var(--sidebar)
  );
  --sidebar-primary: var(--color-neutral-800);
  --sidebar-primary-foreground: var(--color-neutral-50);
  --sidebar-accent: --alpha(var(--color-black) / 4%);
  --sidebar-accent-foreground: var(--color-neutral-800);
  --sidebar-border: --alpha(var(--color-black) / 6%);
  --sidebar-ring: var(--color-neutral-400);
}

.dark {
  --background: color-mix(
    in srgb,
    var(--color-neutral-950) 95%,
    var(--color-white)
  );
  --foreground: var(--color-neutral-100);
  --card: color-mix(in srgb, var(--background) 98%, var(--color-white));
  --card-foreground: var(--color-neutral-100);
  --popover: color-mix(in srgb, var(--background) 98%, var(--color-white));
  --popover-foreground: var(--color-neutral-100);
  --primary: var(--color-neutral-100);
  --primary-foreground: var(--color-neutral-800);
  --secondary: --alpha(var(--color-white) / 4%);
  --secondary-foreground: var(--color-neutral-100);
  --muted: --alpha(var(--color-white) / 4%);
  --muted-foreground: color-mix(
    in srgb,
    var(--color-neutral-500) 90%,
    var(--color-white)
  );
  --accent: --alpha(var(--color-white) / 4%);
  --accent-foreground: var(--color-neutral-100);
  --destructive: color-mix(
    in srgb,
    var(--color-red-500) 90%,
    var(--color-white)
  );
  --destructive-foreground: var(--color-red-400);
  --info: var(--color-blue-500);
  --info-foreground: var(--color-blue-400);
  --success: var(--color-emerald-500);
  --success-foreground: var(--color-emerald-400);
  --warning: var(--color-amber-500);
  --warning-foreground: var(--color-amber-400);
  --border: --alpha(var(--color-white) / 6%);
  --input: --alpha(var(--color-white) / 8%);
  --ring: var(--color-neutral-500);
  --sidebar: color-mix(

```

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

### Add Individual Coss UI Components

Source: https://context7.com/cosscom/coss/llms.txt

Install specific components as needed using the CLI. Use `--dry-run` or `--diff` to preview changes before installation.

```bash
# Install dialog component
npx shadcn@latest add @coss/dialog

# Install select component
npx shadcn@latest add @coss/select

# Install toast notifications
npx shadcn@latest add @coss/toast

# Preview changes before installing
npx shadcn@latest add @coss/dialog --dry-run
npx shadcn@latest add @coss/dialog --diff
```

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

### Popover Usage Example

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/popover.mdx

Basic usage example of the Popover component.

```APIDOC
```tsx
import {
  Popover,
  PopoverClose,
  PopoverDescription,
  PopoverPopup,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/popover"
```

```tsx
<Popover>
  <PopoverTrigger>Open Popover</PopoverTrigger>
  <PopoverPopup>
    <PopoverTitle>Popover Title</PopoverTitle>
    <PopoverDescription>Popover Description</PopoverDescription>
    <PopoverClose>Close</PopoverClose>
  </PopoverPopup>
</Popover>
```
```

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

### Button Usage Example

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/button.mdx

Example of how to import and use the Button component in a React application.

```APIDOC
## Usage

### Basic Button

```tsx
import { Button } from "@/components/ui/button"
```

```tsx
<Button>Button</Button>
```

### Link as Button

You can use the [`render`](https://base-ui.com/react/utils/use-render#migrating-from-radix-ui) prop to make another component look like a button. Here's an example of a link that looks like a button.

```tsx
import Link from "next/link"

import { Button } from "@/components/ui/button"

export function LinkAsButton() {
  return <Button render={<Link href="/login" />}>Login</Button>
}
```
```

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

### Badge Usage Example

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/badge.mdx

Example of how to import and use the Badge component in a React application.

```APIDOC
### Usage

```tsx
import { Badge } from "@/components/ui/badge"
```

```tsx
<Badge>Badge</Badge>
```
```

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

### Install Coss Separator

Source: https://github.com/cosscom/coss/blob/main/apps/ui/skills/coss/references/primitives/separator.md

Install the Coss Separator component using npm or npx.

```bash
npx shadcn@latest add @coss/separator
```

```bash
npm install @base-ui/react
```

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

### Breadcrumb Installation

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/breadcrumb.mdx

Install the Breadcrumb component using the CLI or manually by copying the source code.

```APIDOC
## Installation

### CLI
```bash
npx shadcn@latest add @coss/breadcrumb
```

### Manual
1. Copy and paste the following code into your project:
```tsx
// components/ui/breadcrumb.tsx
// ... component source code ...
```
2. Update the import paths to match your project setup.
```

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

### Install coss Toolbar

Source: https://github.com/cosscom/coss/blob/main/apps/ui/skills/coss/references/primitives/toolbar.md

Install the coss Toolbar component using npm or npx. Ensure you also install manual dependencies like @base-ui/react if required by your setup.

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

```bash
npm install @base-ui/react
```

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

### Info Alert Example

Source: https://github.com/cosscom/coss/blob/main/apps/ui/skills/coss-particles/SKILL.md

A styled alert component specifically for informational messages. Fetch the JSON URL to get the source code.

```json
https://coss.com/ui/r/p-alert-4.json
```

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

### Install coss Spinner

Source: https://github.com/cosscom/coss/blob/main/apps/ui/skills/coss/references/primitives/spinner.md

Install the spinner component using npm. No extra runtime dependencies are required.

```bash
npx shadcn@latest add @coss/spinner
```

```bash
# No extra runtime dependency required for this primitive.
```

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

### Basic Accordion Example

Source: https://github.com/cosscom/coss/blob/main/apps/ui/skills/coss-particles/SKILL.md

A simple accordion component with collapsible panels. Fetch the JSON URL to get the full source code.

```json
https://coss.com/ui/r/p-accordion-1.json
```

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

### Initialize New Project with Coss Style

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/(root)/get-started.mdx

Use this command to set up a new project with all Coss UI components, color systems, sidebar variables, base styles, and default fonts.

```bash
npx shadcn@latest init @coss/style
```

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

### Install Coss Select Component

Source: https://github.com/cosscom/coss/blob/main/apps/ui/skills/coss/references/primitives/select.md

Install the Coss Select component using npx. Manual dependencies may also be required.

```bash
npx shadcn@latest add @coss/select
```

```bash
npm install @base-ui/react
```

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

### Install Preview Card via CLI

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/preview-card.mdx

Use this command to add the Preview Card component to your project using the CLI.

```bash
npx shadcn@latest add @coss/preview-card
```

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

### Install Coss Kbd

Source: https://github.com/cosscom/coss/blob/main/apps/ui/skills/coss/references/primitives/kbd.md

Install the Coss Kbd component using npm. No extra runtime dependencies are required.

```bash
npx shadcn@latest add @coss/kbd
```

```bash
# No extra runtime dependency required for this primitive.
```

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

### Install Kbd Component Manually

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/kbd.mdx

Manually install the Kbd component by copying the provided code into your project and updating import paths.

```tsx
import * as React from "react"

import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const kbdVariants = cva(
  "inline-flex items-center justify-center rounded-[4px] border border-solid border-neutral-200 bg-neutral-100 px-1.5 py-0.5 font-mono text-xs font-medium text-neutral-900 opacity-100 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100",
  {
    variants: {
      variant: {
        default: "",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

export interface KbdProps
  extends React.HTMLAttributes<HTMLElement>,
    VariantProps<typeof kbdVariants> {
  asChild?: boolean
}

const Kbd = React.forwardRef<HTMLDivElement, KbdProps>(
  ({ className, variant, asChild, ...props }, ref) => {
    const Comp = asChild && Slot ? Slot : "kbd"
    return (
      <Comp
        className={cn(kbdVariants({ variant, className }))}
        ref={ref}
        {...props}
      />
    )
  }
)
Kbd.displayName = "Kbd"

const kbdGroupVariants = cva("flex items-center gap-1", {
  variants: {
    variant: {
      default: "",
    },
  },
  defaultVariants: {
    variant: "default",
  },
})

export interface KbdGroupProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof kbdGroupVariants> {
  asChild?: boolean
}

const KbdGroup = React.forwardRef<HTMLDivElement, KbdGroupProps>(
  ({ className, variant, asChild, ...props }, ref) => {
    const Comp = asChild && Slot ? Slot : "div"
    return (
      <Comp
        className={cn(kbdGroupVariants({ variant, className }))}
        ref={ref}
        {...props}
      />
    )
  }
)
KbdGroup.displayName = "KbdGroup"

export { Kbd, KbdGroup }

```

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

### Install Coss Slider

Source: https://github.com/cosscom/coss/blob/main/apps/ui/skills/coss/references/primitives/slider.md

Install the Coss Slider component using npm. Ensure you also install the manual dependency @base-ui/react.

```bash
npx shadcn@latest add @coss/slider
```

```bash
npm install @base-ui/react
```

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

### Install Coss Meter

Source: https://github.com/cosscom/coss/blob/main/apps/ui/skills/coss/references/primitives/meter.md

Install the Coss Meter component using npm. Manual dependency installation may also be required.

```bash
npx shadcn@latest add @coss/meter
```

```bash
npm install @base-ui/react
```

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

### Install Coss Group

Source: https://github.com/cosscom/coss/blob/main/apps/ui/skills/coss/references/primitives/group.md

Install the Coss Group component using npm. Ensure you also install the necessary manual dependency.

```bash
npx shadcn@latest add @coss/group
```

```bash
npm install @base-ui/react
```

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

### Install Coss Field

Source: https://github.com/cosscom/coss/blob/main/apps/ui/skills/coss/references/primitives/field.md

Install the Coss Field component using npm. Ensure you also install the manual dependency for @base-ui/react.

```bash
npx shadcn@latest add @coss/field
```

```bash
npm install @base-ui/react
```

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

### Install use-media-query via CLI

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/hooks/use-media-query.mdx

Use this command to add the @coss/use-media-query package to your project using npm or yarn.

```bash
npx shadcn@latest add @coss/use-media-query
```

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

### Install Checkbox Component

Source: https://github.com/cosscom/coss/blob/main/apps/ui/skills/coss/references/primitives/checkbox.md

Install the Checkbox component using npm or npx. Manual dependency installation may also be required.

```bash
npx shadcn@latest add @coss/checkbox
```

```bash
npm install @base-ui/react
```

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

### Install coss Badge

Source: https://github.com/cosscom/coss/blob/main/apps/ui/skills/coss/references/primitives/badge.md

Install the coss Badge component using npm. Ensure you also install the manual dependency @base-ui/react.

```bash
npx shadcn@latest add @coss/badge
```

```bash
npm install @base-ui/react
```

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

### Install coss Accordion

Source: https://github.com/cosscom/coss/blob/main/apps/ui/skills/coss/references/primitives/accordion.md

Install the coss Accordion component using npm. Manual dependency installation may also be required.

```bash
npx shadcn@latest add @coss/accordion
```

```bash
npm install @base-ui/react
```

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

### Install Coss Textarea

Source: https://github.com/cosscom/coss/blob/main/apps/ui/skills/coss/references/primitives/textarea.md

Install the Coss Textarea component using npm. Ensure you also install the necessary Base UI dependency.

```bash
npx shadcn@latest add @coss/textarea
```

```bash
npm install @base-ui/react
```

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

### Install Coss Sidebar

Source: https://github.com/cosscom/coss/blob/main/apps/ui/skills/coss/references/primitives/sidebar.md

Install the Coss Sidebar component using npm or npx. Manual dependency installation for @base-ui/react is also required.

```bash
npx shadcn@latest add @coss/sidebar
```

```bash
npm install @base-ui/react
```

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

### Install Coss Combobox

Source: https://github.com/cosscom/coss/blob/main/apps/ui/skills/coss/references/primitives/combobox.md

Install the Coss Combobox component using npm. Ensure you also install manual dependencies as per the documentation.

```bash
npx shadcn@latest add @coss/combobox
```

```bash
npm install @base-ui/react
```

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

### Install Coss Collapsible

Source: https://github.com/cosscom/coss/blob/main/apps/ui/skills/coss/references/primitives/collapsible.md

Install the Coss Collapsible component using npx. Manual dependency installation for @base-ui/react may also be required.

```bash
npx shadcn@latest add @coss/collapsible
```

```bash
npm install @base-ui/react
```

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

### Install Checkbox Group

Source: https://github.com/cosscom/coss/blob/main/apps/ui/skills/coss/references/primitives/checkbox-group.md

Install the Checkbox Group component using npx. Ensure you also install the necessary base UI dependency.

```bash
npx shadcn@latest add @coss/checkbox-group
```

```bash
npm install @base-ui/react
```

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

### Build Registry and Sync UI Components

Source: https://github.com/cosscom/coss/blob/main/apps/ui/AGENTS.md

Commands for building the project registry and synchronizing UI components. `registry:build` generates necessary registry files, while `ui:sync` copies UI primitives if modified.

```bash
bun run registry:build
```

```bash
bun run ui:sync
```

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

### Install Coss Autocomplete

Source: https://github.com/cosscom/coss/blob/main/apps/ui/skills/coss/references/primitives/autocomplete.md

Install the Coss Autocomplete component using npm. Ensure you also install manual dependencies as per the documentation.

```bash
npx shadcn@latest add @coss/autocomplete
```

```bash
npm install @base-ui/react
```

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

### Install Coss Avatar

Source: https://github.com/cosscom/coss/blob/main/apps/ui/skills/coss/references/primitives/avatar.md

Install the Coss Avatar component using npx. Manual dependency installation for @base-ui/react may also be required.

```bash
npx shadcn@latest add @coss/avatar
```

```bash
npm install @base-ui/react
```

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

### Usage Example

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/toggle-group.mdx

Demonstrates how to import and use the ToggleGroup and ToggleGroupItem components.

```APIDOC
## Usage

### Import
```tsx
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
```

### Basic Usage
```tsx
<ToggleGroup>
  <ToggleGroupItem>Bold</ToggleGroupItem>
  <ToggleGroupItem>Italic</ToggleGroupItem>
  <ToggleGroupItem>Underline</ToggleGroupItem>
</ToggleGroup>
```
```

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

### Install Coss Progress Component

Source: https://github.com/cosscom/coss/blob/main/apps/ui/skills/coss/references/primitives/progress.md

Install the Coss Progress component using npm or yarn. Manual dependency installation may also be required.

```bash
npx shadcn@latest add @coss/progress
```

```bash
npm install @base-ui/react
```

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

### Install Pagination via CLI

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/pagination.mdx

Use this command to add the pagination component to your project using the CLI.

```bash
npx shadcn@latest add @coss/pagination
```

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

### Install Select Component via CLI

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/select.mdx

Use this command to add the Select component to your project using the shadcn CLI.

```bash
npx shadcn@latest add @coss/select
```

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

### Install coss Alert Dialog

Source: https://github.com/cosscom/coss/blob/main/apps/ui/skills/coss/references/primitives/alert-dialog.md

Install the coss Alert Dialog component using npx. Manual dependency installation may also be required.

```bash
npx shadcn@latest add @coss/alert-dialog
```

```bash
npm install @base-ui/react
```

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

### Install Coss Toggle Group

Source: https://github.com/cosscom/coss/blob/main/apps/ui/skills/coss/references/primitives/toggle-group.md

Install the Coss Toggle Group component using npx. Manual dependency installation for @base-ui/react may also be required.

```bash
npx shadcn@latest add @coss/toggle-group
```

```bash
npm install @base-ui/react
```

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

### Install Coss Scroll Area

Source: https://github.com/cosscom/coss/blob/main/apps/ui/skills/coss/references/primitives/scroll-area.md

Install the Coss Scroll Area component using npm. Manual dependency installation for @base-ui/react may also be required.

```bash
npx shadcn@latest add @coss/scroll-area
```

```bash
npm install @base-ui/react
```

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

### Install Input Component via CLI

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/input.mdx

Use this command to add the Input component to your project using the shadcn CLI.

```bash
npx shadcn@latest add @coss/input
```

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

### Install Coss Number Field

Source: https://github.com/cosscom/coss/blob/main/apps/ui/skills/coss/references/primitives/number-field.md

Install the Coss Number Field component using npm or npx. Ensure you also install the manual dependency `@base-ui/react`.

```bash
npx shadcn@latest add @coss/number-field
```

```bash
npm install @base-ui/react
```

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

### Run Next.js Development Server

Source: https://github.com/cosscom/coss/blob/main/apps/examples/calcom/README.md

Use these commands to start the development server for your Next.js application. Open http://localhost:4002 in your browser to view the running application.

```bash
npm run dev
```

```bash
yarn dev
```

```bash
pnpm dev
```

```bash
bun run dev
```

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

### Bootstrap Projects with coss CLI

Source: https://github.com/cosscom/coss/blob/main/apps/ui/skills/coss/references/cli.md

Use these commands to bootstrap new or existing projects with coss components and styles. The recommended bootstrap includes fonts and a full theme.

```bash
# New projects (recommended — includes Inter + Geist Mono fonts + full theme)
npx shadcn@latest init @coss/style

# Existing projects - all primitives
npx shadcn@latest add @coss/ui

# Existing projects - full theme setup
npx shadcn@latest add @coss/style

# Existing projects - primitives + color tokens
npx shadcn@latest add @coss/ui @coss/colors-neutral
```

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

### Install Autocomplete via CLI

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/autocomplete.mdx

Use this command to add the Autocomplete component to your project using the CLI.

```bash
npx shadcn@latest add @coss/autocomplete
```

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

### Copy UI Components to Packages

Source: https://github.com/cosscom/coss/blob/main/apps/ui/CONTRIBUTING.md

Use this command to synchronize UI components to the packages folder.

```bash
bun run ui:sync
```

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

### Sheet Usage Example

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/sheet.mdx

Example of how to use the Sheet component in your application.

```APIDOC
## Usage

```tsx
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetPanel,
  SheetPopup,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"
```

```tsx
<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetPopup>
    <SheetHeader>
      <SheetTitle>Are you absolutely sure?</SheetTitle>
      <SheetDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </SheetDescription>
    </SheetHeader>
    <SheetPanel>Content</SheetPanel>
    <SheetFooter>
      <SheetClose>Close</SheetClose>
    </SheetFooter>
  </SheetPopup>
</Sheet>
```
```

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

### Install Tooltip via CLI

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/tooltip.mdx

Use this command to add the tooltip component to your project using the CLI.

```bash
npx shadcn@latest add @coss/tooltip
```

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

### Install Calendar via CLI

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/calendar.mdx

Use this command to add the Calendar component to your project using the CLI.

```bash
npx shadcn@latest add @coss/calendar
```

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

### Run Development Server

Source: https://github.com/cosscom/coss/blob/main/apps/ui/README.md

Use this command to start the development server for Coss UI. Open http://localhost:4000 in your browser to view the result.

```sh
bun run dev
```

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

### Basic Tooltip Usage

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/tooltip.mdx

Example of how to implement a basic tooltip with a trigger and content.

```APIDOC
## Basic Tooltip Usage

### Description

This example demonstrates the fundamental structure for creating a tooltip.

### Method

N/A (Component usage)

### Endpoint

N/A (Component usage)

### Request Body

N/A (Component usage)

### Response

N/A (Component usage)

### Code Example

```tsx
import {
  Tooltip,
  TooltipTrigger,
  TooltipPopup,
} from "@/components/ui/tooltip"

<Tooltip>
  <TooltipTrigger render={<Button variant="outline" />}>
    Hover me
  </TooltipTrigger>
  <TooltipPopup>Helpful hint</TooltipPopup>
</Tooltip>
```
```

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

### Install Coss Breadcrumb

Source: https://github.com/cosscom/coss/blob/main/apps/ui/skills/coss/references/primitives/breadcrumb.md

Install the Coss Breadcrumb component using npm.

```bash
npx shadcn@latest add @coss/breadcrumb
```

```bash
# No extra runtime dependency required for this primitive.
```

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

### Install @coss/form via CLI

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/form.mdx

Use the shadcn-ui CLI to add the form component to your project.

```bash
npx shadcn@latest add @coss/form
```

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

### Install Kbd Component via CLI

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/kbd.mdx

Use this command to add the Kbd component to your project using the CLI.

```bash
npx shadcn@latest add @coss/kbd
```

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

### Install Skeleton via CLI

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/skeleton.mdx

Use this command to add the Skeleton component to your project using the shadcn CLI.

```bash
npx shadcn@latest add @coss/skeleton
```

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

### Install Date Picker Dependencies (CLI)

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/date-picker.mdx

Use the CLI command to add the necessary packages for the Date Picker component.

```bash
npx shadcn@latest add @coss/calendar @coss/popover @coss/button
```

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

### Alert Usage Example

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/alert.mdx

Example of how to use the Alert component in your React application.

```APIDOC
## Usage

```tsx
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
```

```tsx
<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</Alert>
```
```

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

### Navigate to UI Directory

Source: https://github.com/cosscom/coss/blob/main/apps/ui/CONTRIBUTING.md

After adding your particle, navigate to the 'apps/ui' directory to run subsequent scripts.

```bash
cd apps/ui
```

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

### Install Spinner via CLI

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/spinner.mdx

Use this command to add the Spinner component to your project using the CLI.

```bash
npx shadcn@latest add @coss/spinner
```

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

### Install Calendar Dependencies Manually

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/calendar.mdx

Manually install the react-day-picker dependency for the Calendar component.

```bash
npm install react-day-picker
```

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

### Install Meter Component via CLI

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/meter.mdx

Use this command to add the Meter component to your project using the CLI.

```bash
npx shadcn@latest add @coss/meter
```

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

### Install Toggle via CLI

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/toggle.mdx

Use this command to add the Toggle component to your project using the CLI.

```bash
npx shadcn@latest add @coss/toggle
```

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

### Install Accordion Dependencies Manually

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/accordion.mdx

Manually install the necessary dependency for the Accordion component.

```bash
npm install @base-ui/react
```

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

### Building and Validating UI Registry

Source: https://github.com/cosscom/coss/blob/main/apps/ui/AGENTS.md

Execute these commands from the `apps/ui` directory to format code, validate dependencies, build registry JSON files, and sync UI components.

```bash
cd apps/ui

# 1. Format code and sort imports
bun run format:all

# 2. Validate registry dependencies
bun run registry:validate-deps

# 3. Build registry JSON files
bun run registry:build

# 4. Copy UI components to packages folder (if needed)
bun run ui:sync
```

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

### Breadcrumb Example with Custom Separator

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/breadcrumb.mdx

An example showcasing the Breadcrumb component with a custom separator.

```APIDOC
## Examples

### With custom separator

<ComponentPreview name="p-breadcrumb-2" />
```

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

### Install Menu Component via CLI

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/menu.mdx

Use this command to add the Menu component to your project using the CLI.

```bash
npx shadcn@latest add @coss/menu
```

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

### Basic Autocomplete Usage

Source: https://github.com/cosscom/coss/blob/main/apps/ui/content/docs/components/autocomplete.mdx

Example of how to set up a basic Autocomplete component with a list of items and input.

```tsx
const items = [
  { value: "apple", label: "Apple" },
  { value: "banana", label: "Banana" },
  { value: "orange", label: "Orange" },
  { value: "grape", label: "Grape" },
]

<Autocomplete items={items}>
  <AutocompleteInput placeholder="Search..." />
  <AutocompletePopup>
    <AutocompleteEmpty>No results found.</AutocompleteEmpty>
    <AutocompleteList>
      {(item) => <AutocompleteItem key={item.value} value={item}>{item.label}</AutocompleteItem>}
    </AutocompleteList>
  </AutocompletePopup>
</Autocomplete>
```