Separator

Component

Preview

Preview solid

Usage

import { Separator } from "@/components/ui/separator"

export function SeparatorDemo() {
return (
  <div class="w-full max-w-md">
    <div class="pb-4">
      Content above separator
    </div>
    <Separator />
    <div class="pt-4">
      Content below separator
    </div>
  </div>
)
}

Installation

CLI

npm

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

pnpm

pnpm dlx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/s/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 { type ComponentProps, splitProps } from "solid-js"
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 ComponentProps<"div">, VariantProps<typeof separatorVariants> {
  decorative?: boolean
}

export const Separator = (props: SeparatorProps) => {
  const [local, rest] = splitProps(props, ["class", "orientation", "decorative"])

  const orientation = (local.orientation ?? "horizontal") as SeparatorOrientation
  const decorative = local.decorative ?? true

  return (
    <div
      role={decorative ? "presentation" : "separator"}
      aria-orientation={orientation}
      class={cn(separatorVariants({ orientation: local.orientation }), local.class)}
      {...rest}
    />
  )
}

export { separatorVariants }