UNPKG

@neynar/ui

Version:

React UI component library built on shadcn/ui and Tailwind CSS

53 lines (43 loc) 1.33 kB
# CommandList **Type**: component CommandList - Scrollable container for command items Contains and manages the list of command items with automatic scrolling, overflow handling, and dynamic height calculation. Provides the scrollable viewport for command items and groups with proper keyboard navigation. Uses CSS custom property `--cmdk-list-height` for smooth height transitions when items are filtered. Supports scroll padding for better item visibility. ## JSX Usage ```jsx import { CommandList } from '@neynar/ui'; <CommandList className="value" > {/* Your content here */} </CommandList> ``` ## Component Props ### className - **Type**: `string` - **Required**: No - **Description**: Additional CSS classes ### children - **Type**: `React.ReactNode` - **Required**: No - **Description**: No description available ## Examples ### Example 1 ```tsx <CommandList> <CommandEmpty>No results found</CommandEmpty> <CommandGroup heading="Actions"> <CommandItem>New File</CommandItem> <CommandItem>Open File</CommandItem> </CommandGroup> </CommandList> ``` ### Example 2 ```tsx // With custom height and scroll behavior <CommandList className="max-h-[400px] scroll-py-2"> {items.map((item) => ( <CommandItem key={item.id} value={item.id}> {item.name} </CommandItem> ))} </CommandList> ```