Toggle component
Toggle
Installation
npx shadcn@latest add @caprice/togglenpm 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 { Toggle as TogglePrimitive } from '@base-ui/react/toggle';import type * as React from 'react';import { cva, type VariantProps } from '@/lib/utils';export const toggleVariants = cva({ base: '', variants: { variant: { default: '', outline: '', }, size: { sm: '', lg: '', }, }, defaultVariants: { variant: 'default', size: 'sm', },});/** * A two-state button that can be on or off. * Renders a `<button>` element. * * Documentation: [Caprice UI Toggle](https://caprice-ui.com/docs/components/toggle) * * API Reference: [Base UI Toggle](https://base-ui.com/react/components/toggle) */export namespace Toggle { export type State = TogglePrimitive.State; export type Props = React.ComponentProps<typeof TogglePrimitive> & VariantProps<typeof toggleVariants>; export type ChangeEventDetails = TogglePrimitive.ChangeEventDetails; export type ChangeEventReason = TogglePrimitive.ChangeEventReason;}export function Toggle({ className, variant, size, ...props }: Toggle.Props) { return ( <TogglePrimitive className={toggleVariants({ variant, size, className })} data-slot="toggle" {...props} /> );}Update the import paths to match your project setup.
Usage
import { Toggle } from "@/components/caprice-ui/toggle"import { Toggle } from "@caprice-ui/react/toggle"