Separator
Component
Section titled “Component” Preview react
import { Separator } from "@/components/ui/separator"
export function SeparatorDemo() {return ( <div className="w-full max-w-md"> <div className="pb-4"> Content above separator </div> <Separator /> <div className="pt-4"> Content below separator </div> </div>)}Installation
Section titled “Installation”npx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/separator.jsonpnpm dlx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/separator.jsonbunx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/s/separator.jsonimport { cva, type VariantProps } from "class-variance-authority"import { forwardRef } from "react"import { cn } from "@/lib/utils"
const separatorVariants = cva("shrink-0 bg-border", { variants: { orientation: { horizontal: "h-px w-full", vertical: "h-full w-px", }, }, defaultVariants: { orientation: "horizontal", },})
export type SeparatorOrientation = "horizontal" | "vertical"
export interface SeparatorProps extends VariantProps<typeof separatorVariants> { className?: string decorative?: boolean children?: never}
const Separator = forwardRef<HTMLDivElement, SeparatorProps>( ({ className, orientation = "horizontal", decorative = true }, ref) => { return ( <div ref={ref} role={decorative ? "presentation" : "separator"} aria-orientation={orientation as SeparatorOrientation} className={cn(separatorVariants({ orientation }), className)} /> ) },)Separator.displayName = "Separator"
export { Separator, separatorVariants }