Toggle Group component
Installation
npx shadcn@latest add @caprice/toggle-groupnpm 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 { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';import type * as React from 'react';import { cn } from '@/lib/utils';/** * Provides a shared state to a series of toggle buttons. * * Documentation: [Caprice UI Toggle Group](https://caprice-ui.com/docs/components/toggle-group) * * API Reference: [Base UI Toggle Group](https://base-ui.com/react/components/toggle-group) */export namespace ToggleGroup { export type State = ToggleGroupPrimitive.State; export type Props = React.ComponentProps<typeof ToggleGroupPrimitive>; export type ChangeEventDetails = ToggleGroupPrimitive.ChangeEventDetails; export type ChangeEventReason = ToggleGroupPrimitive.ChangeEventReason;}export function ToggleGroup({ className, ...props }: ToggleGroup.Props) { return <ToggleGroupPrimitive className={cn('', className)} data-slot="toggle-group" {...props} />;}Update the import paths to match your project setup.
Usage
import { ToggleGroup } from "@/components/caprice-ui/toggle-group"import { Toggle } from "@/components/caprice-ui/toggle"import { ToggleGroup } from "@caprice-ui/react/toggle-group"import { Toggle } from "@caprice-ui/react/toggle"