Controlsradix-ui
Separator
A hairline that reads on glass.
Installation
pnpm dlx shadcn@latest add https://glasscn.app/r/separator.jsonOr with the namespace set up: shadcn add @glasscn/separator
Source
components/glass/separator.tsx
"use client"
import * as React from "react"
import { cn } from "cn"
import { Separator as SeparatorPrimitive } from "radix-ui"
/** A hairline that reads on glass: the rim colour, not the page border. */
function Separator({ className, orientation = "horizontal", decorative = true, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
return (
<SeparatorPrimitive.Root
data-slot="separator"
decorative={decorative}
orientation={orientation}
className={cn(
"shrink-0 bg-foreground/10 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
className
)}
{...props}
/>
)
}
export { Separator }