Separator

Component

Preview

Preview react

Usage

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

CLI

npm

npx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/separator.json

pnpm

pnpm dlx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/separator.json

bun

bunx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/s/separator.json

Manual

components/ui/separator.tsx

import { 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 }