Menubar component
Installation
npx shadcn@latest add @caprice/menubarnpm install @caprice-ui/reactInstall the following dependencies:
npm install @base-ui/react lucide-reactAdd a cn helper
import { defineConfig, type VariantProps } from 'cva';import { twMerge } from 'tailwind-merge';export const { compose, cva, cx: cn,} = defineConfig({ hooks: { onComplete: (className: string) => twMerge(className), },});export type { VariantProps };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"