Separator

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

<Separator />

<div className="flex flex-col gap-3">
  <div>SolarUI</div>
  <Separator />
  <div className="flex gap-4 text-muted-foreground">
    <span>Docs</span>
    <span>Components</span>
    <span>Foundation</span>
  </div>
</div>

<div className="flex items-center gap-4 text-sm">
  <span>Docs</span>
  <Separator orientation="vertical" className="h-4" />
  <span>Components</span>
  <Separator orientation="vertical" className="h-4" />
  <span>Foundation</span>
</div>

npx shadcn@latest add https://solar-ui.com/r/separator.json

npm install @radix-ui/react-separator

"use client"
 
import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"
import { cn } from "@/lib/utils"
 
const Separator = React.forwardRef<
  React.ElementRef<typeof SeparatorPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
>(
  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
    <SeparatorPrimitive.Root
      ref={ref}
      decorative={decorative}
      orientation={orientation}
      className={cn(
        "shrink-0 bg-border",
        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
        className
      )}
      {...props}
    />
  )
)
Separator.displayName = SeparatorPrimitive.Root.displayName
 
export { Separator }