Separator
A theme-aware groove between sections, horizontal or vertical.
Video settings
GraphicsDisplayControls
Installation
npx shadcn@latest add @runqora/craft-separatorUsage
import { Separator } from "@/components/craft/separator";
<Separator />;
<Separator orientation="vertical" />;A vertical separator takes the height of its container, so give the container a height.
Props
Prop
Type
Accessibility
- Has the
separatorrole and its orientation for screen readers. - If it's only decoration, render a plain element instead, so that it isn't announced.
Customization
The groove is two lines drawn from the surface tokens, and --craft-unit sets
how thick they are.
<Separator className="[--craft-unit:1px]" />Dependencies
@base-ui/react- shadcn's
utils, andcraft-theme
Source
"use client";
import { Separator as BaseSeparator } from "@base-ui/react/separator";
import type { ComponentProps } from "react";
import { cn } from "@/lib/utils";
export function Separator({
className,
orientation = "horizontal",
...props
}: ComponentProps<typeof BaseSeparator>) {
return (
<BaseSeparator
className={cn(
// A groove: one dark line and one light line, like the rows of a menu.
"shrink-0 bg-(--craft-surface-lo)",
orientation === "horizontal"
? "h-(--craft-unit) w-full shadow-[0_var(--craft-unit)_0_var(--craft-surface-hi)]"
: "h-full w-(--craft-unit) shadow-[var(--craft-unit)_0_0_var(--craft-surface-hi)]",
className
)}
data-slot="separator"
orientation={orientation}
{...props}
/>
);
}