### Install Dialog Component

Source: https://coss.com/ui/docs/components/dialog

Installation instructions using CLI or manual setup.

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

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

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

### Install Select Component

Source: https://coss.com/ui/docs/components/select

Use the CLI to add the component or install dependencies manually.

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

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

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

### Install Switch component

Source: https://coss.com/ui/docs/components/switch

Use the CLI or manual installation to add the Switch component to your project.

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

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

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

### Install OTP Field dependencies manually

Source: https://coss.com/ui/docs/components/otp-field

Install the required Base UI and Lucide icon dependencies for manual setup.

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

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

### Install Tooltip Component

Source: https://coss.com/ui/docs/components/tooltip

Installation commands for the tooltip component using CLI or manual dependency management.

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

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

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

### Install useCopyToClipboard hook

Source: https://coss.com/ui/docs/hooks/use-copy-to-clipboard

Add the hook to your project using the CLI.

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

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

### Install Empty component

Source: https://coss.com/ui/docs/components/empty

Use the CLI to add the component to your project.

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

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

### Install Tabs Component

Source: https://coss.com/ui/docs/components/tabs

Use the CLI to add the component to your project.

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

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

### Install Form Component

Source: https://coss.com/ui/docs/components/form

Installation commands for the Form component using CLI or manual dependency management.

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

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

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

### Install Sheet component

Source: https://coss.com/ui/docs/components/sheet

Use the CLI to add the component or install the base dependency manually.

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

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

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

### Install Preview Card via CLI

Source: https://coss.com/ui/docs/components/preview-card

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

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

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

### Manual Installation Dependencies

Source: https://coss.com/ui/docs/components/checkbox

Install the required Base UI dependency manually.

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

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

### Install useMediaQuery via CLI

Source: https://coss.com/ui/docs/hooks/use-media-query

Add the hook to your project using the shadcn CLI.

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

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

### Install Table component

Source: https://coss.com/ui/docs/components/table

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

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

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

### Install Calendar Dependencies Manually

Source: https://coss.com/ui/docs/components/calendar

Install the required react-day-picker package for manual setup.

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

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

### Install Toast via CLI

Source: https://coss.com/ui/docs/components/toast

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

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

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

### Install Pagination via CLI

Source: https://coss.com/ui/docs/components/pagination

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

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

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

### Install Field component manually

Source: https://coss.com/ui/docs/components/field

Manual installation requires installing dependencies and configuring CSS variables.

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

```css
@theme inline {
  --color-destructive-foreground: var(--destructive-foreground);
}

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

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

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

### Toolbar Implementation Example

Source: https://coss.com/ui/docs/components/toolbar

Structure a toolbar with grouped buttons and a separator.

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

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

### Install Frame component

Source: https://coss.com/ui/docs/components/frame

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

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

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

### Install Toolbar via CLI

Source: https://coss.com/ui/docs/components/toolbar

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

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

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

### Install Skeleton via CLI

Source: https://coss.com/ui/docs/components/skeleton

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

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

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

### Install Drawer via CLI

Source: https://coss.com/ui/docs/components/drawer

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

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

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

### Install Alert Dialog via CLI

Source: https://coss.com/ui/docs/components/alert-dialog

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

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

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

### Install Date Picker dependencies manually

Source: https://coss.com/ui/docs/components/date-picker

Install the required npm packages for the Date Picker composition.

```bash
npm install react-day-picker date-fns lucide-react @base-ui/react
```

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

### Install Textarea via CLI

Source: https://coss.com/ui/docs/components/textarea

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

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

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

### Install Toggle Group via CLI

Source: https://coss.com/ui/docs/components/toggle-group

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

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

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

### Install Alert via CLI

Source: https://coss.com/ui/docs/components/alert

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

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

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

### Install Date Picker dependencies via CLI

Source: https://coss.com/ui/docs/components/date-picker

Use the CLI to add the necessary components to your project.

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

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

### Install Kbd component via CLI

Source: https://coss.com/ui/docs/components/kbd

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

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

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

### Install Input Component via CLI

Source: https://coss.com/ui/docs/components/input

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

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

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

### Install Breadcrumb component

Source: https://coss.com/ui/docs/components/breadcrumb

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

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

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

### Install Spinner via CLI

Source: https://coss.com/ui/docs/components/spinner

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

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

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

### ContextMenu Component Examples

Source: https://coss.com/ui/docs/components/context-menu

Various implementations of the ContextMenu component using ComponentPreview.

```html
<ComponentPreview name="p-context-menu-2" />
```

```html
<ComponentPreview name="p-context-menu-3" />
```

```html
<ComponentPreview name="p-context-menu-4" />
```

```html
<ComponentPreview name="p-context-menu-5" />
```

```html
<ComponentPreview name="p-context-menu-6" />
```

```html
<ComponentPreview name="p-context-menu-7" />
```

```html
<ComponentPreview name="p-context-menu-8" />
```

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

### Install Slider via CLI

Source: https://coss.com/ui/docs/components/slider

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

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

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

### Install Combobox via CLI

Source: https://coss.com/ui/docs/components/combobox

Use the CLI command to add the Combobox component to your project.

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

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

### Install Menu component via CLI

Source: https://coss.com/ui/docs/components/menu

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

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

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

### Install Scroll Area via CLI

Source: https://coss.com/ui/docs/components/scroll-area

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

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

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

### Install Popover via CLI

Source: https://coss.com/ui/docs/components/popover

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

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

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

### Install Fieldset via CLI

Source: https://coss.com/ui/docs/components/fieldset

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

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

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

### Install Badge via CLI

Source: https://coss.com/ui/docs/components/badge

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

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

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

### Install Toggle Component via CLI

Source: https://coss.com/ui/docs/components/toggle

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

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

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

### Install Separator via CLI

Source: https://coss.com/ui/docs/components/separator

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

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

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

### Group API example

Source: https://coss.com/ui/docs/components/group

Standard implementation of the Group component.

```tsx
<Group>
  <Button>Button 1</Button>
  <GroupSeparator />
  <Button>Button 2</Button>
</Group>
```

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

### Install Card component via CLI

Source: https://coss.com/ui/docs/components/card

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

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

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

### Install Autocomplete via CLI

Source: https://coss.com/ui/docs/components/autocomplete

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

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

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

### Install Context Menu via CLI

Source: https://coss.com/ui/docs/components/context-menu

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

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

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

### Install Collapsible via CLI

Source: https://coss.com/ui/docs/components/collapsible

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

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

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

### Install Group component via CLI

Source: https://coss.com/ui/docs/components/group

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

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

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

### Install Number Field via CLI

Source: https://coss.com/ui/docs/components/number-field

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

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

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

### EmptyMedia component variants

Source: https://coss.com/ui/docs/components/empty

Examples of using EmptyMedia with an icon or an avatar.

```tsx
<EmptyMedia variant="icon">
  <Icon />
</EmptyMedia>
```

```tsx
<EmptyMedia>
  <Avatar>
    <AvatarImage src="..." />
    <AvatarFallback>JD</AvatarFallback>
  </Avatar>
</EmptyMedia>
```

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

### Install Progress Component via CLI

Source: https://coss.com/ui/docs/components/progress

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

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

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

### Install Meter component via CLI

Source: https://coss.com/ui/docs/components/meter

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

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

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

### Dialog Panel Usage

Source: https://coss.com/ui/docs/components/dialog

Example of using DialogPanel for scrollable content.

```tsx
<DialogPanel>
  {/* Long content that will scroll if it exceeds the dialog height */}
  <div>...</div>
</DialogPanel>
```

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

### Install Command component via CLI

Source: https://coss.com/ui/docs/components/command

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

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

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

### Install Checkbox via CLI

Source: https://coss.com/ui/docs/components/checkbox

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

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

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

### Install Calendar Component via CLI

Source: https://coss.com/ui/docs/components/calendar

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

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

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

### Install Button Component via CLI

Source: https://coss.com/ui/docs/components/button

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

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

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

### Install Radio Group via CLI

Source: https://coss.com/ui/docs/components/radio-group

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

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

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

### Drawer positioning and variant examples

Source: https://coss.com/ui/docs/components/drawer

Demonstrates how to configure drawer position and apply the inset variant using the Drawer and DrawerPopup components.

```tsx
// Bottom drawer (default)
<Drawer>
  <DrawerPopup>...</DrawerPopup>
</Drawer>

// Right side drawer
<Drawer position="right">
  <DrawerPopup>...</DrawerPopup>
</Drawer>

// Left side drawer
<Drawer position="left">
  <DrawerPopup>...</DrawerPopup>
</Drawer>

// Drawer with inset variant
<Drawer position="right">
  <DrawerPopup variant="inset">...</DrawerPopup>
</Drawer>
```

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

### Install Checkbox Group via CLI

Source: https://coss.com/ui/docs/components/checkbox-group

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

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

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

### Install Input Group via CLI

Source: https://coss.com/ui/docs/components/input-group

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

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

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

### Install Accordion via CLI

Source: https://coss.com/ui/docs/components/accordion

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

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

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

### Install Label Component via CLI

Source: https://coss.com/ui/docs/components/label

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

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

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

### Install Field component via CLI

Source: https://coss.com/ui/docs/components/field

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

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

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

### Install Avatar Component via CLI

Source: https://coss.com/ui/docs/components/avatar

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

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

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

### Initialize a new project with COSS style

Source: https://coss.com/ui/docs/get-started

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

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

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

### Install OTP Field via CLI

Source: https://coss.com/ui/docs/components/otp-field

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

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

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

### Implement Menu component structure

Source: https://coss.com/ui/docs/components/menu

Example usage of the Menu component with various item types and sub-menus.

```tsx
<Menu>
  <MenuTrigger>Open</MenuTrigger>
  <MenuPopup align="start" sideOffset={4}>
    <MenuItem>Profile</MenuItem>
    <MenuSeparator />

    <MenuGroup>
      <MenuGroupLabel>Playback</MenuGroupLabel>
      <MenuItem>Play</MenuItem>
      <MenuItem>Pause</MenuItem>
    </MenuGroup>

    <MenuSeparator />

    <MenuCheckboxItem>Shuffle</MenuCheckboxItem>
    <MenuCheckboxItem>Repeat</MenuCheckboxItem>
    <MenuCheckboxItem variant="switch">Auto save</MenuCheckboxItem>

    <MenuSeparator />

    <MenuGroup>
      <MenuGroupLabel>Sort by</MenuGroupLabel>
      <MenuRadioGroup>
        <MenuRadioItem>Artist</MenuRadioItem>
        <MenuRadioItem>Album</MenuRadioItem>
        <MenuRadioItem>Title</MenuRadioItem>
      </MenuRadioGroup>
    </MenuGroup>

    <MenuSeparator />

    <MenuSub>
      <MenuSubTrigger>Add to playlist</MenuSubTrigger>
      <MenuSubPopup>
        <MenuItem>Jazz</MenuItem>
        <MenuItem>Rock</MenuItem>
      </MenuSubPopup>
    </MenuSub>
  </MenuPopup>
</Menu>
```

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

### Frame sub-component usage

Source: https://coss.com/ui/docs/components/frame

Individual usage examples for Frame sub-components.

```tsx
<FramePanel>Content</FramePanel>
```

```tsx
<FrameHeader>
  <FrameTitle>Title</FrameTitle>
  <FrameDescription>Description</FrameDescription>
</FrameHeader>
```

```tsx
<FrameTitle>Title</FrameTitle>
```

```tsx
<FrameDescription>Description</FrameDescription>
```

```tsx
<FrameFooter>Footer</FrameFooter>
```

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

### Configure SheetPopup variants

Source: https://coss.com/ui/docs/components/sheet

Examples of different side orientations and the inset variant for the SheetPopup component.

```tsx
// Right side sheet (default)
<SheetPopup side="right">
  ...
</SheetPopup>

// Left side sheet
<SheetPopup side="left">
  ...
</SheetPopup>

// Top sheet
<SheetPopup side="top">
  ...
</SheetPopup>

// Bottom sheet
<SheetPopup side="bottom">
  ...
</SheetPopup>

// Sheet with inset variant
<SheetPopup side="right" variant="inset">
  ...
</SheetPopup>
```

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

### Import Preview Card components

Source: https://coss.com/ui/docs/components/preview-card

Import the necessary components from the local UI directory.

```tsx
import { Button } from "@/components/ui/button"
import {
  PreviewCard,
  PreviewCardPopup,
  PreviewCardTrigger,
} from "@/components/ui/preview-card"
```

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

### Import Context Menu Components

Source: https://coss.com/ui/docs/components/context-menu

Import the necessary components from the local UI directory.

```tsx
import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuGroup,
  ContextMenuGroupLabel,
  ContextMenuItem,
  ContextMenuLinkItem,
  ContextMenuPopup,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuSeparator,
  ContextMenuSub,
  ContextMenuSubPopup,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"
```

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

### Import Progress Components

Source: https://coss.com/ui/docs/components/progress

Import the necessary components from your local UI directory.

```tsx
import {
  Progress,
  ProgressLabel,
  ProgressValue,
} from "@/components/ui/progress"
```

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

### Implement Context Menu Usage

Source: https://coss.com/ui/docs/components/context-menu

Basic implementation of a context menu with trigger, items, and sub-menus.

```tsx
<ContextMenu>
  <ContextMenuTrigger className="flex h-32 items-center justify-center rounded-lg border border-dashed">
    Right click here
  </ContextMenuTrigger>
  <ContextMenuPopup>
    <ContextMenuItem>Back</ContextMenuItem>
    <ContextMenuItem>Forward</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuLinkItem render={<Link href="/docs" />}>
      Documentation
    </ContextMenuLinkItem>
    <ContextMenuSeparator />
    <ContextMenuSub>
      <ContextMenuSubTrigger>More tools</ContextMenuSubTrigger>
      <ContextMenuSubPopup>
        <ContextMenuItem>Inspect</ContextMenuItem>
        <ContextMenuItem>View source</ContextMenuItem>
      </ContextMenuSubPopup>
    </ContextMenuSub>
  </ContextMenuPopup>
</ContextMenu>
```

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

### Basic Drawer Implementation

Source: https://coss.com/ui/docs/components/drawer

Structure a basic drawer using the trigger, popup, header, panel, and footer components.

```tsx
<Drawer>
  <DrawerTrigger>Open</DrawerTrigger>
  <DrawerPopup>
    <DrawerHeader>
      <DrawerTitle>Drawer Title</DrawerTitle>
      <DrawerDescription>Drawer Description</DrawerDescription>
    </DrawerHeader>
    <DrawerPanel>Content</DrawerPanel>
    <DrawerFooter>
      <DrawerClose>Close</DrawerClose>
    </DrawerFooter>
  </DrawerPopup>
</Drawer>
```

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

### Import Select Components

Source: https://coss.com/ui/docs/components/select

Import the necessary sub-components from the local UI directory.

```tsx
import {
  Select,
  SelectItem,
  SelectPopup,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
```

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

### Import Toast Manager

Source: https://coss.com/ui/docs/components/toast

Import the toast manager utility to trigger notifications.

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

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

### Add COSS UI components to existing projects

Source: https://coss.com/ui/docs/get-started

Commands for adding specific UI primitives or full theme configurations to an existing project.

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

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

```bash
npx shadcn@latest add @coss/ui @coss/colors-neutral
```

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

### Import and Basic Usage

Source: https://coss.com/ui/docs/components/checkbox

Import the component and render it in your application.

```tsx
import { Checkbox } from "@/components/ui/checkbox"
```

```tsx
<Checkbox />
```

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

### Import and Basic Usage

Source: https://coss.com/ui/docs/components/scroll-area

Import the component and wrap content to enable custom scrollbars.

```tsx
import { ScrollArea } from "@/components/ui/scroll-area"
```

```tsx
<ScrollArea className="h-64 rounded-md border">
  <div className="p-4">
    Just as suddenly as it had begun, the sensation stopped, leaving Alice
    feeling slightly disoriented. She looked around and realized that the room
    hadn't changed at all - it was she who had grown smaller, shrinking down to
    a fraction of her previous size. Alice felt herself growing larger and
    larger, filling up the entire room until she feared she might burst. The
    sensation was both thrilling and terrifying, as if she were expanding beyond
    the confines of her own body. She wondered if this was what it felt like to
    be a balloon, swelling with air until it could hold no more.
  </div>
</ScrollArea>
```

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

### Import Alert Components

Source: https://coss.com/ui/docs/components/alert

Import the required components from the local UI directory.

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

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

### Import Alert Dialog Components

Source: https://coss.com/ui/docs/components/alert-dialog

Import the necessary components from the local UI directory.

```tsx
import {
  AlertDialog,
  AlertDialogClose,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogPopup,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
```

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

### Import Autocomplete Components

Source: https://coss.com/ui/docs/components/autocomplete

Import the necessary sub-components from the local UI directory.

```tsx
import {
  Autocomplete,
  AutocompleteEmpty,
  AutocompleteInput,
  AutocompleteItem,
  AutocompleteList,
  AutocompletePopup,
} from "@/components/ui/autocomplete"
```

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

### Import Toolbar Components

Source: https://coss.com/ui/docs/components/toolbar

Import the necessary toolbar components and supporting UI elements into your file.

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

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

### Import Popover Components

Source: https://coss.com/ui/docs/components/popover

Import the necessary sub-components from the local UI directory.

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

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

### Using ContextMenuLinkItem with a router Link

Source: https://coss.com/ui/docs/components/context-menu

Migrate from ContextMenuItem with a render prop to ContextMenuLinkItem while keeping the render prop for router Links.

```tsx
<ContextMenuLinkItem render={<Link href="/docs" />}>Docs</ContextMenuLinkItem>
```

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

### Import Empty components

Source: https://coss.com/ui/docs/components/empty

Import the necessary sub-components from the local UI directory.

```tsx
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"
```

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

### Import Menu components

Source: https://coss.com/ui/docs/components/menu

Import the necessary sub-components from the local UI directory.

```tsx
import {
  Menu,
  MenuCheckboxItem,
  MenuGroup,
  MenuGroupLabel,
  MenuItem,
  MenuLinkItem,
  MenuPopup,
  MenuRadioGroup,
  MenuRadioItem,
  MenuSeparator,
  MenuSub,
  MenuSubPopup,
  MenuSubTrigger,
  MenuTrigger,
} from "@/components/ui/menu"
```

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

### Import Tabs Components

Source: https://coss.com/ui/docs/components/tabs

Import the necessary components from your local UI directory.

```tsx
import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/ui/tabs"
```

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

### Configure Toast Providers in Root Layout

Source: https://coss.com/ui/docs/components/toast

Wrap your application content with ToastProvider and AnchoredToastProvider in the root layout file.

```tsx
// [!code word:import { AnchoredToastProvider, ToastProvider } from "@/components/ui/toast"]
// [!code word:<ToastProvider>]
// [!code word:<AnchoredToastProvider>]
// [!code word:</AnchoredToastProvider>]
// [!code word:</ToastProvider>]
import { AnchoredToastProvider, ToastProvider } from "@/components/ui/toast"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head />
      <body>
        <ToastProvider>
          <AnchoredToastProvider>
            <main>{children}</main>
          </AnchoredToastProvider>
        </ToastProvider>
      </body>
    </html>
  )
}
```

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

### Implement Command Palette

Source: https://coss.com/ui/docs/components/command

Define items and render the CommandDialog with its trigger and popup content.

```tsx
const items = [
  { value: "linear", label: "Linear" },
  { value: "figma", label: "Figma" },
  { value: "slack", label: "Slack" },
]

<CommandDialog>
  <CommandDialogTrigger render={<Button variant="outline" />}>
    Open Command Palette
  </CommandDialogTrigger>

  <CommandDialogPopup>
    <Command items={items}>
      <CommandInput placeholder="Search..." />
      <CommandEmpty>No results found.</CommandEmpty>
      <CommandList>
        {(item) => (
          <CommandItem key={item.value} value={item.value}>
            {item.label}
          </CommandItem>
        )}
      </CommandList>
    </Command>
  </CommandDialogPopup>
</CommandDialog>
```

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

### Import Meter components

Source: https://coss.com/ui/docs/components/meter

Import the necessary sub-components from the local project directory.

```tsx
import { Meter, MeterLabel, MeterValue } from "@/components/ui/meter"
```

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

### Import Avatar Components

Source: https://coss.com/ui/docs/components/avatar

Import the necessary components from your local UI directory.

```tsx
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
```

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

### Import Collapsible Components

Source: https://coss.com/ui/docs/components/collapsible

Import the necessary components from your local UI directory.

```tsx
import {
  Collapsible,
  CollapsiblePanel,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
```

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

### Basic usage of useCopyToClipboard

Source: https://coss.com/ui/docs/hooks/use-copy-to-clipboard

Implement a simple copy button that toggles text feedback.

```tsx
import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";

function CopyButton({ text }: { text: string }) {
  const { copyToClipboard, isCopied } = useCopyToClipboard();

  return (
    <button onClick={() => copyToClipboard(text)}>
      {isCopied ? "Copied!" : "Copy"}
    </button>
  );
}
```

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

### Import OTP Field components

Source: https://coss.com/ui/docs/components/otp-field

Import the necessary components from the local UI directory.

```tsx
import {
  OTPField,
  OTPFieldInput,
  OTPFieldSeparator,
} from "@/components/ui/otp-field"
```

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

### Import Pagination Components

Source: https://coss.com/ui/docs/components/pagination

Import the necessary sub-components from the local pagination file.

```tsx
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"
```

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

### Import Skeleton Component

Source: https://coss.com/ui/docs/components/skeleton

Import the Skeleton component from your local UI directory.

```tsx
import { Skeleton } from "@/components/ui/skeleton"
```

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

### Import Command components

Source: https://coss.com/ui/docs/components/command

Import the necessary sub-components from the command file.

```tsx
import {
  Command,
  CommandCollection,
  CommandDialog,
  CommandDialogPopup,
  CommandDialogTrigger,
  CommandEmpty,
  CommandFooter,
  CommandGroup,
  CommandGroupLabel,
  CommandInput,
  CommandItem,
  CommandList,
  CommandPanel,
  CommandSeparator,
  CommandShortcut,
} from "@/components/ui/command"
import { Button } from "@/components/ui/button"
```

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

### Implement Preview Card usage

Source: https://coss.com/ui/docs/components/preview-card

Wrap the trigger and popup content within the PreviewCard root component.

```tsx
<PreviewCard>
  <PreviewCardTrigger>Open Preview Card</PreviewCardTrigger>
  <PreviewCardPopup>Preview Card Content</PreviewCardPopup>
</PreviewCard>
```

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

### Implement basic Meter

Source: https://coss.com/ui/docs/components/meter

Render a standard meter with a label and value display.

```tsx
<Meter value={40}>
  <MeterLabel>Progress</MeterLabel>
  <MeterValue />
</Meter>
```

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

### Import Accordion Components

Source: https://coss.com/ui/docs/components/accordion

Import the necessary components from your local UI directory.

```tsx
import {
  Accordion,
  AccordionItem,
  AccordionPanel,
  AccordionTrigger,
} from "@/components/ui/accordion"
```

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

### Using ContextMenuLinkItem with href

Source: https://coss.com/ui/docs/components/context-menu

Use the href prop for plain anchor links.

```tsx
<ContextMenuLinkItem href="/docs">Docs</ContextMenuLinkItem>
```

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

### Render Grouped Command Items

Source: https://coss.com/ui/docs/components/command

Demonstrates how to structure data into groups and render them using CommandGroup and CommandSeparator components.

```tsx
const groupedItems = [
  {
    value: "Suggestions",
    items: [
      { value: "linear", label: "Linear" },
      { value: "figma", label: "Figma" },
    ]
  },
  {
    value: "Commands",
    items: [
      { value: "clipboard", label: "Clipboard History" },
      { value: "settings", label: "System Preferences" },
    ]
  },
]

<Command items={groupedItems}>
  <CommandInput placeholder="Search..." />
  <CommandEmpty>No results found.</CommandEmpty>
  <CommandList>
    {(group, index) => (
      <React.Fragment key={group.value}>
        <CommandGroup items={group.items}>
          <CommandGroupLabel>{group.value}</CommandGroupLabel>
          <CommandCollection>
            {(item) => (
              <CommandItem key={item.value} value={item.value}>
                {item.label}
              </CommandItem>
            )}
          </CommandCollection>
        </CommandGroup>
        {index < groupedItems.length - 1 && <CommandSeparator />}
      </React.Fragment>
    )}
  </CommandList>
</Command>
```

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

### Import Frame components

Source: https://coss.com/ui/docs/components/frame

Import the necessary sub-components from the local UI directory.

```tsx
import {
  Frame,
  FrameDescription,
  FrameFooter,
  FrameHeader,
  FramePanel,
  FrameTitle,
} from "@/components/ui/frame"
```

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

### Import Sheet components

Source: https://coss.com/ui/docs/components/sheet

Import the necessary sub-components from the local UI directory.

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

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

### Import Toggle Group components

Source: https://coss.com/ui/docs/components/toggle-group

Import the necessary components from your local UI directory.

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

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

### Import Group components

Source: https://coss.com/ui/docs/components/group

Import the necessary components from the local UI directory.

```tsx
import { Button } from "@/components/ui/button"
import { Group, GroupSeparator } from "@/components/ui/group"
```

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

### Import and use Switch

Source: https://coss.com/ui/docs/components/switch

Import the component and render it in your JSX.

```tsx
import { Switch } from "@/components/ui/switch"
```

```tsx
<Switch />
```

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

### Import Slider components

Source: https://coss.com/ui/docs/components/slider

Import the Slider and SliderValue components into your file.

```tsx
import { Slider, SliderValue } from "@/components/ui/slider"
```

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

### Basic Pagination Usage

Source: https://coss.com/ui/docs/components/pagination

A standard implementation of the pagination component with previous, link, ellipsis, and next items.

```tsx
<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>
```

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

### Manual CSS Configuration

Source: https://coss.com/ui/docs/components/alert

Define the necessary CSS variables for alert variants in your project's theme configuration.

```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);
}
```

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

### Display a key combination

Source: https://coss.com/ui/docs/components/kbd

Use KbdGroup to wrap multiple Kbd components for representing keyboard shortcuts.

```tsx
<KbdGroup>
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>
```

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

### Drawer Component Imports

Source: https://coss.com/ui/docs/components/drawer

Import the necessary Drawer sub-components from your local UI directory.

```tsx
import {
  Drawer,
  DrawerCreateHandle,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerMenu,
  DrawerMenuCheckboxItem,
  DrawerMenuGroup,
  DrawerMenuGroupLabel,
  DrawerMenuItem,
  DrawerMenuRadioGroup,
  DrawerMenuRadioItem,
  DrawerMenuSeparator,
  DrawerPanel,
  DrawerPopup,
  DrawerMenuTrigger,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"
```

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

### Import Kbd components

Source: https://coss.com/ui/docs/components/kbd

Import the Kbd and KbdGroup components to use them in your application.

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

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

### Implement Autocomplete Usage

Source: https://coss.com/ui/docs/components/autocomplete

Define the items array and wrap the input and popup components within the Autocomplete provider.

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

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

### Use raw media query strings

Source: https://coss.com/ui/docs/hooks/use-media-query

Pass any valid CSS media query string as an escape hatch.

```tsx
const prefersDark = useMediaQuery("(prefers-color-scheme: dark)");
const prefersReducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
```

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

### Use convenience export useIsMobile

Source: https://coss.com/ui/docs/hooks/use-media-query

Use the backward-compatible hook for mobile detection.

```tsx
import { useIsMobile } from "@/hooks/use-media-query";

const isMobile = useIsMobile(); // equivalent to useMediaQuery("max-md")
```

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

### useCopyToClipboard(options?: { timeout?: number; onCopy?: () => void; })

Source: https://coss.com/ui/docs/hooks/use-copy-to-clipboard

The useCopyToClipboard hook allows you to copy text to the clipboard and provides a boolean state to indicate success, which automatically resets after a specified timeout.

```APIDOC
## useCopyToClipboard

### Description
A React hook that wraps the Clipboard API with a built-in timeout to reset the copied state. Useful for copy buttons that show brief confirmation feedback.

### Signature
```tsx
function useCopyToClipboard(options?: {
  timeout?: number;
  onCopy?: () => void;
}): {
  copyToClipboard: (value: string) => void;
  isCopied: boolean;
};
```

### Options
- **timeout** (number) - Optional - Milliseconds before `isCopied` resets to `false`. Default is 2000. Set to 0 to keep it `true`.
- **onCopy** (() => void) - Optional - Callback fired after a successful copy.

### Return Value
- **copyToClipboard** ((value: string) => void) - Function to call with the text to copy.
- **isCopied** (boolean) - `true` for the duration of the timeout after a successful copy, then resets to `false`.
```

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

### Import Breadcrumb components

Source: https://coss.com/ui/docs/components/breadcrumb

Import the necessary sub-components from the local UI directory.

```tsx
import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
```

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

### Import Spinner Component

Source: https://coss.com/ui/docs/components/spinner

Import the Spinner component from your local UI components directory.

```tsx
import { Spinner } from "@/components/ui/spinner"
```

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

### Import Tooltip Components

Source: https://coss.com/ui/docs/components/tooltip

Required imports for using the tooltip components in a React project.

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

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

### Import Table components

Source: https://coss.com/ui/docs/components/table

Import the necessary sub-components from the UI library.

```tsx
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
```

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

### Implement conditional rendering

Source: https://coss.com/ui/docs/hooks/use-media-query

Mount components based on viewport matches.

```tsx
function Layout() {
  const isDesktop = useMediaQuery("lg");

  return isDesktop ? <DesktopNav /> : <MobileNav />;
}
```

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

### Import Card components

Source: https://coss.com/ui/docs/components/card

Import the necessary sub-components from the local UI directory.

```tsx
import {
  Card,
  CardDescription,
  CardFooter,
  CardHeader,
  CardPanel,
  CardTitle,
} from "@/components/ui/card"
```

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

### Import Input Component

Source: https://coss.com/ui/docs/components/input

Import the Input component into your React file.

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

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

### Basic Dialog Usage

Source: https://coss.com/ui/docs/components/dialog

Standard implementation of a Dialog with trigger, header, content, and footer.

```tsx
<Dialog>
  <DialogTrigger>Open Dialog</DialogTrigger>
  <DialogPopup>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>Dialog Description</DialogDescription>
    </DialogHeader>
    <DialogPanel>Content</DialogPanel>
    <DialogFooter>
      <DialogClose>Close</DialogClose>
    </DialogFooter>
  </DialogPopup>
</Dialog>
```

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

### Implement Keyboard Shortcut for Command Palette

Source: https://coss.com/ui/docs/components/command

Uses a React effect to listen for keyboard events, specifically triggering the command palette toggle on Cmd+K or Ctrl+K.

```tsx
React.useEffect(() => {
  const down = (e: KeyboardEvent) => {
    if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
      e.preventDefault()
      setOpen((open) => !open)
    }
  }

  document.addEventListener("keydown", down)
  return () => document.removeEventListener("keydown", down)
}, [])
```

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

### Import Radio Group Components

Source: https://coss.com/ui/docs/components/radio-group

Import the RadioGroup and Radio components to begin building your selection interface.

```tsx
import { Label } from "@/components/ui/label"
import { Radio, RadioGroup } from "@/components/ui/radio-group"
```

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

### ContextMenuSubPopup

Source: https://coss.com/ui/docs/components/context-menu

Configuration properties for the ContextMenuSubPopup component.

```APIDOC
## ContextMenuSubPopup

### Description
Popup component for rendering submenu content within a context menu.

### Props
- **align** ("start" | "center" | "end") - Optional - Alignment relative to the trigger. Default: "start".
- **sideOffset** (number) - Optional - Distance from the trigger in pixels. Default: 0.
- **alignOffset** (number) - Optional - Offset along the alignment axis. Default: -5 when align is not "center".
```

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

### Basic Alert Usage

Source: https://coss.com/ui/docs/components/alert

Implement a standard alert with a title and description.

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

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

### Import Checkbox Group Components

Source: https://coss.com/ui/docs/components/checkbox-group

Import the necessary components into your file.

```tsx
import { Checkbox } from "@/components/ui/checkbox"
import { CheckboxGroup } from "@/components/ui/checkbox-group"
```

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

### Empty

Source: https://coss.com/ui/docs/components/empty

The main container component for the empty state.

```APIDOC
## Empty

### Description
The main component of the empty state. Wraps the `EmptyHeader` and `EmptyContent` components.

### Props
- **className** (string) - Optional - Additional CSS classes.
```

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

### Basic Popover Usage

Source: https://coss.com/ui/docs/components/popover

Structure a standard popover with a trigger, title, description, and close button.

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

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

### Import Field components

Source: https://coss.com/ui/docs/components/field

Import the necessary Field sub-components from the local UI directory.

```tsx
import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
  FieldValidity,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
```

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

### ContextMenuSubPopup Properties

Source: https://coss.com/ui/docs/components/context-menu

Configuration options for the ContextMenuSubPopup component, including alignment and offset settings.

```markdown
| Prop          | Type                           | Default   | Description                                      |
| ------------- | ------------------------------ | --------- | ------------------------------------------------ |
| `align`       | `"start" | "center" | "end"` | `"start"` | Alignment relative to the trigger                |
| `sideOffset`  | `number`                       | `0`       | Distance from the trigger in pixels              |
| `alignOffset` | `number`                       | `-5`      | Offset along the alignment axis. Defaults to `-5` when `align` is not `"center"` |
```