UNPKG

@saas-ui/command-bar

Version:

Chakra UI CommandBar Component

60 lines (42 loc) 1.07 kB
# @saas-ui/command-bar Fast, composable, unstyled command menu for Chakra UI. Built with `cmdk` ## Installation ```sh $ yarn add @saas-ui/command-bar #or $ npm i @saas-ui/command-bar --save ``` ## Usage ```tsx import { Command } from '@saas-ui/command-bar' const CmdBar = () => { const disclosure = useDisclosure() const command = useHotkeys( 'cmd+k', () => { disclosure.onOpen() }, [disclosure] ) return ( <Command.Dialog {...disclosure}> <Command.Input /> <Command.List> {loading && <Command.Loading>Hang on…</Command.Loading>} <Command.Empty>No results found.</Command.Empty> <Command.Group heading="Fruits"> <Command.Item>Apple</Command.Item> <Command.Item>Orange</Command.Item> <Command.Separator /> <Command.Item>Pear</Command.Item> <Command.Item>Blueberry</Command.Item> </Command.Group> <Command.Item>Fish</Command.Item> </Command.List> </Command.Dialog> ) } ``` ## License MIT - Appulse Software