Skip to content
20 linesCodeBlameRaw
1import { Separator as Primitive } from "radix-ui";
2import type { ComponentProps } from "react";
3
4import { cn } from "../../lib/cn";
5
6// shadcn/ui's separator, styled with g1t's tokens: a hairline in `line`,
7// across or (vertical) up and down. Decorative unless told otherwise, so a
8// screen reader passes over it.
9
10export function Separator({ className, orientation = "horizontal", decorative = true, ...props }: ComponentProps<typeof Primitive.Root>) {
11 return (
12 <Primitive.Root
13 data-slot="separator"
14 decorative={decorative}
15 orientation={orientation}
16 className={cn("shrink-0 bg-line data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px", className)}
17 {...props}
18 />
19 );
20}