### Shared Registry Items Installation Example

Source: https://github.com/joncoronel/cubby-ui/blob/main/REGISTRY_SYSTEM.md

Shows the installation paths for shared hooks and utilities from the registry's default hooks and lib directories.

```text
- `hooks/cubby-ui/use-fuzzy-filter.ts`
- `lib/cubby-ui/highlight-text.tsx`
```

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

### Multi-File Component Structure Example

Source: https://github.com/joncoronel/cubby-ui/blob/main/REGISTRY_SYSTEM.md

Illustrates the directory structure for multi-file components in the source registry and how they are installed using the shadcn CLI.

```text
# Source structure
registry/default/drawer/
├── drawer.tsx
├── drawer.css
├── hooks/
│   ├── use-scroll-snap.ts
│   └── use-virtual-keyboard.ts
└── lib/
    └── drawer-utils.ts

# Installed structure (via shadcn CLI)
components/ui/cubby-ui/drawer/
├── drawer.tsx
├── drawer.css
├── hooks/
│   ├── use-scroll-snap.ts
│   └── use-virtual-keyboard.ts
└── lib/
    └── drawer-utils.ts
```

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

### Start Development Server

Source: https://github.com/joncoronel/cubby-ui/blob/main/CLAUDE.md

Starts the development server. Use a timeout when running this command.

```bash
pnpm run dev
```

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

### Auto-Generated Installation Instructions

Source: https://github.com/joncoronel/cubby-ui/blob/main/MDX_DOCUMENTATION.md

ComponentInstall automatically generates installation instructions, including CLI and manual tabs with package manager selection.

```mdx
<ComponentInstall component="button" />
```

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

### Kbd Component: Keyboard Shortcuts List Example

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(primitives)/kbd.mdx

Provides an example of displaying a comprehensive list of available keyboard shortcuts using the Kbd component.

```javascript
import {
  Kbd,
} from "@/registry/default/kbd/kbd";

export default function KbdDemo() {
  const shortcuts = [
    { key: "Ctrl", action: "Save" },
    { key: "Shift", action: "Redo" },
    { key: "Alt", action: "Undo" },
  ];

  return (
    <ul className="space-y-2">
      {shortcuts.map((shortcut, index) => (
        <li key={index} className="flex items-center gap-2">
          <Kbd>{shortcut.key}</Kbd>
          <span>{shortcut.action}</span>
        </li>
      ))}
    </ul>
  );
}
```

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

### Fancy Button Installation

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(composables)/fancy-button.mdx

Provides instructions for installing the fancy button component.

```javascript
<ComponentInstall component="fancy-button" />
```

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

### Vitest Setup File

Source: https://github.com/joncoronel/cubby-ui/blob/main/TESTING.md

Setup file for Vitest tests, importing necessary extensions for testing libraries like `@testing-library/jest-dom`.

```typescript
import "@testing-library/jest-dom/vitest";
```

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

### Drawer Directions Example

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(composables)/drawer.mdx

Demonstrates opening the drawer from different screen edges.

```javascript
import {
  Drawer,
  DrawerBody,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHandle,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/registry/default/drawer/drawer";

export default function DrawerDemo() {
  return (
    <Drawer direction="right">
      <DrawerTrigger>Open drawer</DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Drawer Title</DrawerTitle>
          <DrawerDescription>Drawer Description</DrawerDescription>
        </DrawerHeader>
        <DrawerBody>Drawer Body</DrawerBody>
        <DrawerFooter>
          <DrawerClose>Close</DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  );
}
```

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

### Complete Form Example

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(primitives)/form.mdx

A comprehensive form example demonstrating the integration of various field types and validation methods.

```react
import { Form } from "@/registry/default/form/form";
import { FormField } from "@/registry/default/form/form-field";
import { FormLabel } from "@/registry/default/ui/form-label";
import { Input } from "@/registry/default/ui/input";
import { FormMessage } from "@/registry/default/ui/form-message";
import { FormError } from "@/registry/default/ui/form-error";
import { Textarea } from "@/registry/default/ui/textarea";
import { Checkbox } from "@/registry/default/ui/checkbox";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/registry/default/ui/select";
import { RadioGroup, RadioGroupItem } from "@/registry/default/ui/radio-group";
import { Button } from "@/registry/default/ui/button";
import { z } from "zod";

const formSchema = z.object({
  name: z.string().min(2, {
    message: "Name must be at least 2 characters.",
  }),
  email: z.string().email({
    message: "Invalid email address.",
  }),
  bio: z.string().max(200, {
    message: "Bio cannot be longer than 200 characters.",
  }),
  terms: z.boolean().refine(term => term === true, {
    message: "You must accept the terms and conditions.",
  }),
  plan: z.enum(["free", "pro", "enterprise"]),
  newsletter: z.enum(["daily", "weekly", "monthly"]),
});

export default function FormComplete() {
  const onSubmit = (values) => {
    console.log(values);
  };

  return (
    <Form
      schema={formSchema}
      onSubmit={onSubmit}
      className="space-y-4"
    >
      <FormField name="name">
        <FormLabel>Name</FormLabel>
        <Input />
        <FormMessage />
        <FormError />
      </FormField>
      <FormField name="email">
        <FormLabel>Email</FormLabel>
        <Input />
        <FormMessage />
        <FormError />
      </FormField>
      <FormField name="bio">
        <FormLabel>Bio</FormLabel>
        <Textarea />
        <FormMessage />
        <FormError />
      </FormField>
      <FormField name="terms">
        <div className="flex items-center space-x-2">
          <Checkbox id="terms" />
          <label
            htmlFor="terms"
            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
          >
            Accept terms and conditions
          </label>
        </div>
        <FormMessage />
        <FormError />
      </FormField>
      <FormField name="plan">
        <FormLabel>Plan</FormLabel>
        <Select>
          <SelectTrigger>
            <SelectValue placeholder="Select a plan" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="free">Free</SelectItem>
            <SelectItem value="pro">Pro</SelectItem>
            <SelectItem value="enterprise">Enterprise</SelectItem>
          </SelectContent>
        </Select>
        <FormMessage />
        <FormError />
      </FormField>
      <FormField name="newsletter">
        <FormLabel>Newsletter</FormLabel>
        <RadioGroup>
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="daily" id="r1" />
            <label htmlFor="r1">Daily</label>
          </div>
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="weekly" id="r2" />
            <label htmlFor="r2">Weekly</label>
          </div>
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="monthly" id="r3" />
            <label htmlFor="r3">Monthly</label>
          </div>
        </RadioGroup>
        <FormMessage />
        <FormError />
      </FormField>
      <Button type="submit">Submit</Button>
    </Form>
  );
}
```

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

### Basic Menubar Example

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(primitives)/menubar.mdx

A simple example demonstrating the basic usage of the Menubar component. This snippet shows how to structure a standard horizontal menu.

```jsx
import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarTrigger,
} from "@/registry/default/menubar/menubar";

export function MenubarBasic() {
  return (
    <Menubar className="rounded-none border-none pl-2">
      <MenubarMenu>
        <MenubarTrigger className="data-[state=open]:bg-neutral-100 dark:data-[state=open]:bg-neutral-800">
          File
        </MenubarTrigger>
        <MenubarContent>
          <MenubarItem>New Tab</MenubarItem>
          <MenubarItem>New Window</MenubarItem>
          <MenubarItem disabled>New Incognito Window</MenubarItem>
          <MenubarSeparator />
          <MenubarItem>Print...</MenubarItem>
          <MenubarSeparator />
          <MenubarItem>Close Window</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  );
}
```

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

### Good ApiProp Description Example

Source: https://github.com/joncoronel/cubby-ui/blob/main/API_REFERENCE_GUIDE.md

An example of a concise and effective description for the `fadeEdges` prop.

```mdx
<ApiProp name="fadeEdges" fullType="boolean" defaultValue="false">
  Adds a subtle fade effect at scroll edges using CSS masks.
</ApiProp>
```

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

### Autocomplete Basic Example

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(primitives)/autocomplete.mdx

A basic example of the Autocomplete component.

```javascript
import { Autocomplete } from "@/registry/default/autocomplete/autocomplete";

<Autocomplete.Root>
  <Autocomplete.Input />
  <Autocomplete.List>
    <Autocomplete.Item />
  </Autocomplete.List>
</Autocomplete.Root>
```

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

### Progress Basic Example

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(primitives)/progress.mdx

A basic progress bar to show task completion.

```javascript
import { Progress } from "@/registry/default/progress/progress";

function ProgressBasic() {
  return (
    <Progress value={33} />
  );
}
```

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

### Auto-Generated Usage Examples

Source: https://github.com/joncoronel/cubby-ui/blob/main/MDX_DOCUMENTATION.md

ComponentUsage automatically generates usage examples, showing imports and component anatomy.

```mdx
<ComponentUsage component="button" />
```

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

### Pagination Interactive Example

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(composables)/pagination.mdx

A fully interactive pagination component with state management. This example demonstrates how to manage the current page and total pages.

```tsx
import React from "react";
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/registry/default/pagination/pagination";

export function PaginationInteractivePagination() {
  const [currentPage, setCurrentPage] = React.useState(1);
  const totalPages = 10;

  return (
    <Pagination
      count={totalPages}
      page={currentPage}
      onPageChange={setCurrentPage}
      renderItem={(page) => (
        <PaginationItem
          key={page}
          slots={{
            previous: (
              <PaginationPrevious
                onClick={() => setCurrentPage(page - 1)}
                disabled={page === 1}
              />
            ),
            next: (
              <PaginationNext
                onClick={() => setCurrentPage(page + 1)}
                disabled={page === totalPages}
              />
            ),
          }}
        >
          <PaginationLink
            {...(page === currentPage ? { isActive: true } : {})}
            onClick={() => setCurrentPage(page)}
          >
            {page}
          </PaginationLink>
        </PaginationItem>
      )}
    />
  );
}
```

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

### Drawer with Form Example

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(composables)/drawer.mdx

Include form elements within the drawer.

```javascript
import {
  Drawer,
  DrawerBody,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHandle,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/registry/default/drawer/drawer";

export default function DrawerDemo() {
  return (
    <Drawer>
      <DrawerTrigger>Open form drawer</DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Form</DrawerTitle>
          <DrawerDescription>Enter your details</DrawerDescription>
        </DrawerHeader>
        <DrawerBody>
          <form className="space-y-4">
            <div>
              <label htmlFor="name">Name:</label>
              <input type="text" id="name" className="w-full p-2 border rounded" />
            </div>
            <div>
              <label htmlFor="email">Email:</label>
              <input type="email" id="email" className="w-full p-2 border rounded" />
            </div>
            <button type="submit" className="p-2 bg-blue-500 text-white rounded">Submit</button>
          </form>
        </DrawerBody>
        <DrawerFooter>
          <DrawerClose>Cancel</DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  );
}
```

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

### Toolbar with Input Example

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(primitives)/toolbar.mdx

Demonstrates how to integrate input fields within the Toolbar component for enhanced functionality.

```javascript
import {
  Toolbar,
  ToolbarButton,
  ToolbarSeparator,
  ToolbarInput,
} from "@/registry/default/toolbar/toolbar";

<Toolbar>
  <ToolbarButton icon="plus">Add</ToolbarButton>
  <ToolbarButton icon="minus">Remove</ToolbarButton>
  <ToolbarSeparator />
  <ToolbarInput placeholder="Search..." />
  <ToolbarSeparator />
  <ToolbarButton icon="gear">Settings</ToolbarButton>
</Toolbar>
```

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

### Toolbar Basic Preview

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(primitives)/toolbar.mdx

A basic example of the Toolbar component, showcasing its default structure and usage.

```javascript
import {
  Toolbar,
  ToolbarButton,
  ToolbarSeparator,
} from "@/registry/default/toolbar/toolbar";

<Toolbar>
  <ToolbarButton icon="plus">Add</ToolbarButton>
  <ToolbarButton icon="minus">Remove</ToolbarButton>
  <ToolbarSeparator />
  <ToolbarButton icon="gear">Settings</ToolbarButton>
</Toolbar>
```

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

### Basic Select Example

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(primitives)/select.mdx

A basic implementation of the Select component.

```typescript
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/registry/default/select/select";

export default function SelectBasic() {
  return (
    <Select>
      <SelectTrigger className="w-[280px]">
        <SelectValue placeholder="Select a fruit" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="apple">Apple</SelectItem>
        <SelectItem value="banana">Banana</SelectItem>
        <SelectItem value="blueberry">Blueberry</SelectItem>
        <SelectItem value="grapes">Grapes</SelectItem>
        <SelectItem value="pineapple">Pineapple</SelectItem>
      </SelectContent>
    </Select>
  );
}
```

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

### Tabs Basic Example

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(primitives)/tabs.mdx

A fundamental implementation of the Tabs component, demonstrating basic tab navigation.

```javascript
import { Tabs, TabsContent, TabsList, TabsPanels, TabsTrigger } from "@/registry/default/tabs/tabs";

function TabsBasic() {
  return (
    <Tabs defaultValue="overview" className="w-[400px]">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="details">Details</TabsTrigger>
        <TabsTrigger value="more">
          More Info
        </TabsTrigger>
      </TabsList>
      <TabsPanels>
        <TabsContent value="overview">
          Make changes to your profile here. Click save and enjoy!
        </TabsContent>
        <TabsContent value="details">
          Content for the details tab.
        </TabsContent>
        <TabsContent value="more">
          Content for the more info tab.
        </TabsContent>
      </TabsPanels>
    </Tabs>
  );
}

export default TabsBasic;
```

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

### Combobox Multiple Selection Example

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(primitives)/combobox.mdx

Shows how to enable selecting multiple options from the combobox.

```javascript
<ComponentPreview component="combobox" example="combobox-multiple" />
```

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

### Fancy Button Sizes Example

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(composables)/fancy-button.mdx

Demonstrates different size variants for the fancy button.

```javascript
<ComponentPreview component="fancy-button" example="fancy-button-sizes" />
```

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

### Switch Form Integration Example

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(primitives)/switch.mdx

Illustrates integrating the Switch component with a Field for labeling and form participation.

```javascript
import { Switch } from "@/registry/default/switch/switch";
import { Field } from "@/registry/default/field/field";

function SwitchFieldDemo() {
  return (
    <Field>
      <Field.Label>Airplane Mode</Field.Label>
      <Switch />
    </Field>
  );
}
```

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

### Cropper Simple Usage

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(composables)/cropper.mdx

Basic example of the Cropper component. Ensure the Cropper component is imported.

```javascript
import { Cropper } from "@/registry/default/cropper/cropper";
```

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

### Combobox Creatable Example

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(primitives)/combobox.mdx

Demonstrates how to allow users to create new options within the combobox.

```javascript
<ComponentPreview component="combobox" example="combobox-creatable" />
```

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

### Default Value Formatting Examples for ApiProp

Source: https://github.com/joncoronel/cubby-ui/blob/main/API_REFERENCE_GUIDE.md

Illustrates how to format the `defaultValue` prop for strings, numbers, and other types.

```mdx
defaultValue='"primary"'
```

```mdx
defaultValue="false"
```

```mdx
defaultValue="0"
```

```mdx
defaultValue="10 (filled) / 5 (default)"
```

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

### Avoid ApiProp Description Example

Source: https://github.com/joncoronel/cubby-ui/blob/main/API_REFERENCE_GUIDE.md

An example of a less effective prop description that starts with 'This prop...'.

```mdx
<ApiProp name="fadeEdges" fullType="boolean" defaultValue="false">
  This prop controls whether fade edges are shown.
</ApiProp>
```

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

### Initialize shadcn with Cubby UI Theme (New Project)

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/getting-started/installation.mdx

For new projects, scaffold shadcn and install Cubby UI's theme in a single command. This sets up your `components.json` and integrates the theme into your `globals.css`.

```bash
npx shadcn-ui@latest init @cubby-ui/style
# or
yarn dlx shadcn-ui@latest init @cubby-ui/style
# or
pnpm dlx shadcn-ui@latest init @cubby-ui/style
```

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

### DataTable Basic Usage

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(composables)/data-table.mdx

The root DataTable component provides context to child components, allowing you to compose the exact table structure you need. This example shows a basic setup with columns, data, and enabling sorting.

```tsx
<DataTable columns={columns} data={data} enableSorting>
  <DataTableToolbar>
    <DataTableSearch />
    <DataTableColumnToggle />
  </DataTableToolbar>
  <DataTableContent>
    <DataTableHeader enableSorting />
    <DataTableBody emptyState="No results found." />
  </DataTableContent>
</DataTable>
```

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

### Basic Command Menu Example

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(composables)/command.mdx

Demonstrates the basic usage of the Command component to display a command menu.

```javascript
import {
  Command,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandItem,
  CommandGroup,
} from "cmdk-react";

export default function CommandMenu() {
  return (
    <Command>
      <CommandInput />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>Apple</CommandItem>
          <CommandItem>Banana</CommandItem>
          <CommandItem>Orange</CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  );
}
```

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

### Accordion - Indicator at Start

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(primitives)/accordion.mdx

Position the expand/collapse indicator at the start of the trigger by setting the `indicatorPosition` prop on `AccordionTrigger` to 'start'.

```typescript
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/registry/default/accordion/accordion";

export function AccordionIndicatorStart() {
  return (
    <Accordion type="single" className="w-full">
      <AccordionItem value="item-1">
        <AccordionTrigger indicatorPosition="start">Is it accessible?</AccordionTrigger>
        <AccordionContent>
          Yes. It adheres to the WAI-ARIA authoring practices for accessible
          steppers and is designed with screen reader users in mind.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger indicatorPosition="start">Is it styled?</AccordionTrigger>
        <AccordionContent>
          Yes. It comes with default styling that can be customized further.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger indicatorPosition="start">Is it animatable?</AccordionTrigger>
        <AccordionContent>
          Yes. The component is built with animations that can be controlled
          by the user.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}
```

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

### Kbd Component: In Context Example

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(primitives)/kbd.mdx

Shows how to integrate the Kbd component within documentation to represent keyboard shortcuts.

```javascript
import {
  Kbd,
} from "@/registry/default/kbd/kbd";

export default function KbdDemo() {
  return (
    <p>
      Press <Kbd>Shift</Kbd> + <Kbd>P</Kbd> to open the command palette.
    </p>
  );
}
```

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

### Install Theme via CLI

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/getting-started/theming.mdx

Use the shadcn CLI to add the theme to an existing project or initialize a new one with the theme included.

```bash
shadcn@latest add @cubby-ui/style
```

```bash
shadcn@latest init @cubby-ui/style
```

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

### Circular Slider with Custom Start Angle

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(composables)/circular-slider.mdx

Illustrates how to configure the starting position of the circular slider on the circle.

```vue
<template>
  <CircularSlider startAngle="90" />
</template>

<script setup lang="ts">
import CircularSlider from "@/components/CircularSlider.vue";
</script>
```

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

### Combobox Virtualized Example for Large Lists

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(primitives)/combobox.mdx

Shows how to use virtualization for large lists (100+ items) to ensure smooth performance by rendering only visible items.

```javascript
<ComponentPreview component="combobox" example="combobox-virtualized" />
```

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

### Good ApiProp Description with Context Example

Source: https://github.com/joncoronel/cubby-ui/blob/main/API_REFERENCE_GUIDE.md

Demonstrates writing a prop description that includes important usage constraints.

```mdx
<ApiProp name="hideScrollbar" fullType="boolean" defaultValue="false">
  Hides the scrollbar while keeping scroll functionality. Cannot be used with
  `persistScrollbar`.
</ApiProp>
```

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

### Production Build Command

Source: https://github.com/joncoronel/cubby-ui/blob/main/CLAUDE.md

Creates a production build, which includes syncing the component registry.

```bash
pnpm run build
```

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

### Combobox Form Integration Example

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(primitives)/combobox.mdx

Example of integrating the Combobox with a form using the Field component and FieldLabel for proper labeling.

```javascript
<ComponentPreview component="combobox" example="combobox-field" />
```

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

### Add All Cubby UI Components

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/getting-started/installation.mdx

Install all available Cubby UI components in one go using the `@cubby-ui/all` alias. This is useful for projects that intend to use the full suite of components.

```bash
npx shadcn-ui@latest add @cubby-ui/all
# or
yarn dlx shadcn-ui@latest add @cubby-ui/all
# or
pnpm dlx shadcn-ui@latest add @cubby-ui/all
```

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

### Registry System Directory Structure

Source: https://github.com/joncoronel/cubby-ui/blob/main/REGISTRY_SYSTEM.md

Illustrates the organization of source UI components, example implementations, documentation files, and application-specific code within the project.

```bash
registry/default/                    # Source UI components (Button, Card, etc.)
  registry/default/[component]/      # Individual component directories
  registry/default/hooks/            # Shared React hooks (registry:hook)
  registry/default/lib/              # Shared utility functions (registry:lib)
registry/examples/                   # Example implementations for each component
content/docs/                        # MDX documentation files (powered by Fumadocs)
app/docs/                            # Documentation pages and layouts
components/mdx/                      # MDX component wrappers for documentation
components/                          # Application-specific components (providers, theme)
lib/                                 # Application utility functions
hooks/                               # Application React hooks
```

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

### Input Demo

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(primitives)/input.mdx

A basic demonstration of the Input component.

```javascript
import { Input } from "@/registry/default/input/input";

function InputDemo() {
  return <Input placeholder="Type something..." />;
}
```

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

### Drawer Snap Points Example

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(composables)/drawer.mdx

Configure multiple snap points for the drawer to rest at different heights.

```javascript
import {
  Drawer,
  DrawerBody,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHandle,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/registry/default/drawer/drawer";

export default function DrawerDemo() {
  return (
    <Drawer defaultOpen snapPoints={[0.5, 0.8, 1.0]}>
      <DrawerTrigger>Open drawer</DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Drawer Title</DrawerTitle>
          <DrawerDescription>Drawer Description</DrawerDescription>
        </DrawerHeader>
        <DrawerBody>Drawer Body</DrawerBody>
        <DrawerFooter>
          <DrawerClose>Close</DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  );
}
```

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

### Basic Transition Panel Usage

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(composables)/transition-panel.mdx

Demonstrates the basic setup for a TransitionPanel. This is the default behavior for sliding transitions.

```javascript
import { TransitionPanel, TransitionPanelView } from "@/registry/default/transition-panel/transition-panel";
```

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

### Combobox Async Search Example

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(primitives)/combobox.mdx

Example of asynchronous search where options are loaded from a remote source based on input changes. Handles request cancellation and loading states.

```javascript
<ComponentPreview component="combobox" example="combobox-async" />
```

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

### Stepper Timeline Example

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(composables)/timeline.mdx

Utilizes the Timeline component as a step progress indicator. This example shows a controlled stepper where the active step is managed by the 'value' prop and updated via 'onValueChange'.

```vue
import { Timeline, TimelineItem, TimelineContent, TimelineConnector, TimelineIcon } from "@/registry/default/timeline/timeline";

<script setup lang="ts">
import { ref } from "vue";

const activeStep = ref(1);
</script>

<Timeline :value="activeStep" @onValueChange="(step) => activeStep = step">
  <TimelineItem :step="1">
    <TimelineContent>Step 1</TimelineContent>
  </TimelineItem>
  <TimelineItem :step="2">
    <TimelineContent>Step 2</TimelineContent>
  </TimelineItem>
  <TimelineItem :step="3">
    <TimelineContent>Step 3</TimelineContent>
  </TimelineItem>
</Timeline>
```

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

### API Reference Section Header

Source: https://github.com/joncoronel/cubby-ui/blob/main/API_REFERENCE_GUIDE.md

Use this structure to introduce the component, its base library, and link to its documentation. It clarifies that only custom or modified props are detailed further.

```mdx
## API Reference

The [Component] is built on top of [Base UI's Component](https://base-ui.com/react/components/component). All Base UI props are supported. The documentation below only covers custom props and modified defaults specific to our implementation.

For the complete Base UI API, see the [Base UI Component documentation](https://base-ui.com/react/components/component).
```

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

### Install Base UI React Package

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/getting-started/installation.mdx

Install the Base UI React package, a headless component library that Cubby UI is built upon. This is a prerequisite for using Cubby UI components.

```bash
npm install @base-ui/react
# or
yarn add @base-ui/react
# or
pnpm add @base-ui/react
```

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

### Drawer Music Player Example

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(composables)/drawer.mdx

A music player demonstrating progressive disclosure with snap points: mini player, expanded controls, and full queue view.

```javascript
import {
  Drawer,
  DrawerBody,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHandle,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/registry/default/drawer/drawer";

export default function DrawerDemo() {
  return (
    <Drawer snapPoints={[0.3, 0.7, 1.0]}>
      <DrawerTrigger>Open music player</DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Now Playing</DrawerTitle>
          <DrawerDescription>Artist Name</DrawerDescription>
        </DrawerHeader>
        <DrawerBody>
          <div className="h-[200px] flex flex-col justify-between">
            <div>Track Info</div>
            <div>Controls</div>
          </div>
        </DrawerBody>
        <DrawerFooter>
          <DrawerClose>Close</DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  );
}
```

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

### Nested Dialogs Example

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(primitives)/dialog.mdx

Demonstrates how to stack multiple dialogs on top of each other.

```typescript
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/registry/default/dialog/dialog";
import { Button } from "@/registry/default/ui/button";

export function DialogNested() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="outline">Open First Dialog</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>First Dialog</DialogTitle>
          <DialogDescription>This is the first dialog.</DialogDescription>
        </DialogHeader>
        <Dialog>
          <DialogTrigger asChild>
            <Button variant="outline" className="mt-4">Open Second Dialog</Button>
          </DialogTrigger>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Second Dialog</DialogTitle>
              <DialogDescription>This is the second dialog, nested inside the first.</DialogDescription>
            </DialogHeader>
            <DialogFooter className="mt-4">
              <Button type="button">Close Second</Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
        <DialogFooter className="mt-4">
          <Button type="button">Close First</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
```

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

### Dialog Basic Example

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(primitives)/dialog.mdx

A basic dialog component that can be opened and closed.

```typescript
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/registry/default/dialog/dialog";

export function DialogBasic() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="outline">Edit Profile</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Edit profile</DialogTitle>
          <DialogDescription>
            Make changes to your profile here. Click save, and exit when you’re done.
          </DialogDescription>
        </DialogHeader>
        <div className="grid gap-4 py-4">
          <div className="grid-cols-4 items-center gap-4">
            <Label htmlFor="name" className="text-right">
              Name
            </Label>
            <Input id="name" value="Pedro Duarte" className="col-span-3" />
          </div>
          <div className="grid-cols-4 items-center gap-4">
            <Label htmlFor="username" className="text-right">
              Username
            </Label>
            <Input id="username" value="@peduarte" className="col-span-3" />
          </div>
        </div>
        <DialogFooter>
          <Button type="submit">Save changes</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
```

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

### Kbd Component: Single Key Example

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(primitives)/kbd.mdx

Demonstrates the basic usage of the Kbd component for displaying a single keyboard key.

```javascript
import {
  Kbd,
} from "@/registry/default/kbd/kbd";

export default function KbdDemo() {
  return <Kbd>K</Kbd>;
}
```

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

### Basic Checkbox Group

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(primitives)/checkbox-group.mdx

A fundamental example of a Checkbox Group component.

```javascript
import { CheckboxGroup, CheckboxGroupItem } from "@/registry/default/checkbox-group/checkbox-group";
```

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

### Select with Scroll Example

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(primitives)/select.mdx

Handles long lists of options with scrollable content.

```typescript
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/registry/default/select/select";

const fruits = Array.from({ length: 20 }, (_, i) => ({
  id: `fruit-${i + 1}`,
  name: `Fruit ${i + 1}`,
}));

export default function SelectScroll() {
  return (
    <Select>
      <SelectTrigger className="w-[280px]">
        <SelectValue placeholder="Select a fruit" />
      </SelectTrigger>
      <SelectContent>
        {fruits.map((fruit) => (
          <SelectItem key={fruit.id} value={fruit.name}>
            {fruit.name}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}
```

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

### Dropdown Menu Basic Example

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(primitives)/dropdown-menu.mdx

A basic dropdown menu with a trigger and content.

```typescript
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/registry/default/dropdown-menu/dropdown-menu";

export function DropdownMenuBasic() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">Open menu</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56">
        <DropdownMenuItem>Make a reservation</DropdownMenuItem>
        <DropdownMenuItem>Order</DropdownMenuItem>
        <DropdownMenuItem inset>More tools</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem checked>Gift card</DropdownMenuItem>
        <DropdownMenuItem checked disabled>
          Expand
        </DropdownMenuItem>
        <DropdownMenuSub>
          <DropdownMenuSubTrigger>More Tools</DropdownMenuSubTrigger>
          <DropdownMenuSubContent>
            <DropdownMenuItem>Scan
            </DropdownMenuItem>
            <DropdownMenuItem>Adjust
            </DropdownMenuItem>
            <DropdownMenuItem>Unmerge
            </DropdownMenuItem>
          </DropdownMenuSubContent>
        </DropdownMenuSub>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Share</DropdownMenuItem>
        <DropdownMenuItem>Add to favorites</DropdownMenuItem>
        <DropdownMenuItem disabled>
          Delete
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}
```

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

### Combobox Grouped Options Example

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(primitives)/combobox.mdx

Demonstrates organizing options into logical groups with sticky headers for better readability.

```javascript
<ComponentPreview component="combobox" example="combobox-grouped" />
```

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

### Single-File Component Structure

Source: https://github.com/joncoronel/cubby-ui/blob/main/REGISTRY_SYSTEM.md

Demonstrates the flat file structure for single-file components in the source registry and their installed location.

```text
- Source: `registry/default/button/button.tsx`
- Installed: `components/ui/cubby-ui/button.tsx`
```

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

### Alert Info Example

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(primitives)/alert.mdx

Use this snippet to display informational messages to users.

```tsx
import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@/registry/default/alert/alert";

export function AlertInfo() {
  return (
    <Alert>
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>
        You can add components and dependencies to your app.
      </AlertDescription>
    </Alert>
  );
}
```

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

### Add Multiple Cubby UI Components

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/getting-started/installation.mdx

Install several Cubby UI components simultaneously by listing them in a single command. This is efficient for adding multiple UI elements at once.

```bash
npx shadcn-ui@latest add @cubby-ui/button @cubby-ui/input @cubby-ui/card
# or
yarn dlx shadcn-ui@latest add @cubby-ui/button @cubby-ui/input @cubby-ui/card
# or
pnpm dlx shadcn-ui@latest add @cubby-ui/button @cubby-ui/input @cubby-ui/card
```

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

### Date Picker Basic Usage

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(composables)/date-picker.mdx

Basic example of the Date Picker component.

```javascript
import { DatePicker } from "@/registry/default/date-picker/date-picker";

<DatePicker />
```

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

### Type Formatting Examples for ApiProp

Source: https://github.com/joncoronel/cubby-ui/blob/main/API_REFERENCE_GUIDE.md

Demonstrates various ways to format the `fullType` prop for different TypeScript data types.

```mdx
fullType='"primary" | "secondary" | "ghost"'
```

```mdx
fullType="boolean"
```

```mdx
fullType='boolean | "always"'
```

```mdx
fullType="boolean | 'top' | 'bottom' | 'x' | 'y' | FadeEdge[]"
```

```mdx
fullType="(value: string) => void"
```

```mdx
fullType="T[] | { items: T[] }[]"
```

```mdx
fullType="ReactNode"
```

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

### Multiple Selection Select Example

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(primitives)/select.mdx

Allows users to select multiple options from the list.

```typescript
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/registry/default/select/select";
import * as React from "react";

export default function SelectMultiple() {
  return (
    <Select defaultValue={["apple", "banana"]} multiple>
      <SelectTrigger className="w-[280px]">
        <SelectValue placeholder="Select fruits" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="apple">Apple</SelectItem>
        <SelectItem value="banana">Banana</SelectItem>
        <SelectItem value="blueberry">Blueberry</SelectItem>
        <SelectItem value="grapes">Grapes</SelectItem>
        <SelectItem value="pineapple">Pineapple</SelectItem>
      </SelectContent>
    </Select>
  );
}
```

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

### Virtualized Command Example

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/hooks/use-list-virtualizer.mdx

Integrates useListVirtualizer with a Command component for efficient rendering of command menus. Requires helper functions for item labels and proper attachment of refs and props to Command and CommandItem components.

```tsx
import { useListVirtualizer } from "@/hooks/cubby-ui/use-list-virtualizer";
import {
  Command,
  CommandVirtualizedList,
  CommandItem,
} from "@/lib/cubby-ui/command";

// Helper to extract searchable text from items
const getItemLabel = (item: Item | null) => item?.label ?? "";

function VirtualizedCommand({ items, filteredItems }) {
  const {
    rootProps,
    scrollRef,
    measureRef,
    totalSize,
    virtualItems,
    getItem,
    getItemStyle,
    getItemProps,
  } = useListVirtualizer({
    items,
    filteredItems,
    estimateSize: 40,
  });

  return (
    <Command {...rootProps} filter={null} itemToStringValue={getItemLabel}>
      <CommandVirtualizedList scrollRef={scrollRef} totalSize={totalSize} nativeScroll>
        {virtualItems.map((virtualItem) => {
          const item = getItem(virtualItem);
          return (
            <CommandItem
              key={virtualItem.key}
              ref={measureRef}
              value={item}
              style={getItemStyle(virtualItem)}
              {...getItemProps(virtualItem)}
            >
              {item.label}
            </CommandItem>
          );
        })}
      </CommandVirtualizedList>
    </Command>
  );
}
```

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

### Select with Icons Example

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(primitives)/select.mdx

Add icons to select options for enhanced visual context.

```typescript
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/registry/default/select/select";
import { Star } from "lucide-react";

export default function SelectWithIcons() {
  return (
    <Select>
      <SelectTrigger className="w-[280px]">
        <SelectValue placeholder="Select a verified email" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="m@example.com">
          <div className="flex items-center">
            <Star className="mr-2 h-4 w-4 text-muted-foreground" />
            <span>m@example.com</span>
          </div>
        </SelectItem>
        <SelectItem value="m@google.com">
          <div className="flex items-center">
            <Star className="mr-2 h-4 w-4 text-muted-foreground" />
            <span>m@google.com</span>
          </div>
        </SelectItem>
        <SelectItem value="m@work.com">
          <div className="flex items-center">
            <Star className="mr-2 h-4 w-4 text-muted-foreground" />
            <span>m@work.com</span>
          </div>
        </SelectItem>
      </SelectContent>
    </Select>
  );
}
```

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

### Select with Groups Example

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(primitives)/select.mdx

Organize select options into labeled groups for better organization.

```typescript
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/registry/default/select/select";

export default function SelectWithGroups() {
  return (
    <Select>
      <SelectTrigger className="w-[280px]">
        <SelectValue placeholder="Select a fruit" />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectLabel>Fruits</SelectLabel>
          <SelectItem value="apple">Apple</SelectItem>
          <SelectItem value="banana">Banana</SelectItem>
          <SelectItem value="blueberry">Blueberry</SelectItem>
        </SelectGroup>
        <SelectGroup>
          <SelectLabel>Vegetables</SelectLabel>
          <SelectItem value="kale">Kale</SelectItem>
          <SelectItem value="carrot">Carrot</SelectItem>
          <SelectItem value="broccoli">Broccoli</SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  );
}
```

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

### Component Structure with Variants and Props

Source: https://github.com/joncoronel/cubby-ui/blob/main/CLAUDE.md

Demonstrates a typical component structure using 'use client', cva for variants, cn for class merging, and explicit prop types.

```tsx
"use client";

import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

// Variants defined with cva
const buttonVariants = cva("base-classes", {
  variants: {
    /* ... */
  },
  defaultVariants: {
    /* ... */
  },
});

// Props type extends base + variants
export type ButtonProps = React.ComponentProps<"button"> &
  VariantProps<typeof buttonVariants> & {
    customProp?: string;
  };

// Named function (not arrow) for components
function Button({ className, variant, ...props }: ButtonProps) {
  return (
    <button
      data-slot="button"
      className={cn(buttonVariants({ variant }), className)}
      {...props} />
  );
}

export { Button, buttonVariants };
```

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

### Controlled Select Example

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(primitives)/select.mdx

Manage the select state externally using React state.

```typescript
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/registry/default/select/select";
import * as React from "react";

export default function SelectControlled() {
  const [value, setValue] = React.useState("apple");

  return (
    <Select value={value} onValueChange={setValue}>
      <SelectTrigger className="w-[280px]">
        <SelectValue placeholder="Select a fruit" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="apple">Apple</SelectItem>
        <SelectItem value="banana">Banana</SelectItem>
        <SelectItem value="blueberry">Blueberry</SelectItem>
        <SelectItem value="grapes">Grapes</SelectItem>
        <SelectItem value="pineapple">Pineapple</SelectItem>
      </SelectContent>
    </Select>
  );
}
```

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

### Dialog without Close Button Example

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(primitives)/dialog.mdx

Hides the default close button for the dialog.

```typescript
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/registry/default/dialog/dialog";
import { Button } from "@/registry/default/ui/button";

export function DialogNoCloseButton() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="outline">Open Dialog</Button>
      </DialogTrigger>
      <DialogContent closeButton={false}>
        <DialogHeader>
          <DialogTitle>No Close Button</DialogTitle>
          <DialogDescription>
            This dialog does not have a visible close button. You must close it programmatically or via other actions.
          </DialogDescription>
        </DialogHeader>
        <div className="py-4">
          <p className="text-sm leading-6">
            Content goes here. To close this dialog, you might need to click a button within the content or use a state management approach.
          </p>
        </div>
        <DialogFooter>
          <Button type="button" onClick={() => console.log('Action performed')}>Perform Action</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
```

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

### Resizable Panels with Min/Max Size Constraints

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/components/(composables)/resizable.mdx

Demonstrates setting minimum and maximum size constraints for resizable panels.

```jsx
import { Resizable, ResizableHandle, ResizablePanel } from "@/registry/default/resizable/resizable";

function ResizableMinMaxSizeDemo() {
  return (
    <Resizable className="h-[300px] w-[300px] rounded-md border">
      <ResizablePanel defaultSize={50} minSize={25} maxSize={75}>
        Panel 1 (constrained)
      </ResizablePanel>
      <ResizableHandle />
      <ResizablePanel>
        Panel 2
      </ResizablePanel>
    </Resizable>
  );
}
```

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

### Basic Usage of useFuzzyFilter

Source: https://github.com/joncoronel/cubby-ui/blob/main/content/docs/hooks/use-fuzzy-filter.mdx

Demonstrates how to initialize useFuzzyFilter with specified keys and threshold, and then use the returned filter functions to process a list of items.

```tsx
import { useFuzzyFilter } from "@/hooks/cubby-ui/use-fuzzy-filter";

const { filter, filterItem } = useFuzzyFilter({
  keys: ["label", "description"],
  threshold: "contains",
});

// Filter and sort an array
const results = filter(items, query);

// Check if single item matches
const matches = filterItem(item, query);
```