A menu bar providing commands and options for your application.
Installation
npx shadcn@latest add @caprice/menubarpnpm dlx shadcn@latest add @caprice/menubaryarn dlx shadcn@latest add @caprice/menubarbunx shadcn@latest add @caprice/menubarnpm install @caprice-ui/reactpnpm add @caprice-ui/reactyarn add @caprice-ui/reactbun add @caprice-ui/reactInstall the following dependencies:
npm install @base-ui/react lucide-reactpnpm add @base-ui/react lucide-reactyarn add @base-ui/react lucide-reactbun add @base-ui/react lucide-reactAdd a cn helper
import { defineConfig, getSchema, type VariantProps } from 'cva';
import { twMerge } from 'tailwind-merge';
export const { cva, cx: cn } = defineConfig({
hooks: {
onComplete: (className: string) => twMerge(className),
},
});
export type { VariantProps };
export { getSchema };
Copy and paste the following code into your project.
'use client';
import { Menubar as MenubarPrimitive } from '@base-ui/react/menubar';
/**
* The container for menus.
*
* Documentation: [Caprice UI Menubar](https://caprice-ui.com/docs/components/menubar)
*
* API Reference: [Base UI Menubar](https://base-ui.com/react/components/menubar)
*/
export namespace Menubar {
export type State = MenubarPrimitive.State;
export type Props = React.ComponentProps<typeof MenubarPrimitive>;
}
export function Menubar({ ...props }: Menubar.Props) {
return <MenubarPrimitive data-slot="menubar" {...props} />;
}
Update the import paths to match your project setup.
Usage
import { Menubar } from "@/components/caprice-ui/menubar"import { Menubar } from "@caprice-ui/react/menubar"Examples
API Reference
Last updated on