Separator

1import { Separator } from "@/components/ui/separator";
2
3<Separator />

1"use client";
2
3import { ark } from "@ark-ui/react/factory";
4import { cn } from "@/lib/utils";
5
6interface SeparatorProps extends React.ComponentProps<typeof ark.div> {
7  /**
8   * The orientation of the separator.
9   *
10   * @default "horizontal"
11   */
12  orientation?: "horizontal" | "vertical";
13}
14
15export const Separator = (props: SeparatorProps) => {
16  const { orientation = "horizontal", className, ...rest } = props;
17
18  return (
19    <ark.div
20      aria-orientation={orientation}
21      className={cn(
22        "shrink-0",
23        "bg-input",
24        "data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full",
25        "data-[orientation=vertical]:w-px data-[orientation=vertical]:not-[[class^='h-']]:not-[[class*='_h-']]:self-stretch",
26        className
27      )}
28      data-orientation={orientation}
29      data-slot="separator"
30      role="separator"
31      {...rest}
32    />
33  );
34};
35