Separator component
Separator
Installation
npx shadcn@latest add @caprice/separatornpm 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 { Separator as SeparatorPrimitive } from '@base-ui/react/separator';import type * as React from 'react';import { cn } from '@/lib/utils';/** * A separator element accessible to screen readers. * Renders a `<div>` element. * * Documentation: [Caprice UI Separator](https://caprice-ui.com/docs/components/separator) * * API Reference: [Base UI Separator](https://base-ui.com/react/components/separator) */export namespace Separator { export type State = SeparatorPrimitive.State; export type Props = React.ComponentProps<typeof SeparatorPrimitive>;}export function Separator({ className, orientation = 'horizontal', ...props }: Separator.Props) { return ( <SeparatorPrimitive className={cn( 'shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px', className )} data-slot="separator" orientation={orientation} {...props} /> );}Update the import paths to match your project setup.
Usage
import { Separator } from "@/components/caprice-ui/separator"import { Separator } from "@caprice-ui/react/separator"