GuidelinesGuidelinesBuilt on @radix-ui/react-separator — a thin dividing line, horizontal or vertical.
npx chandra-asri-ui add separatorDesign system and component docs.
import { Separator } from "@/app/components/ui/separator";
export function SeparatorDemo() {
return (
<div>
<div>
<h4 className="text-foreground text-sm leading-none font-semibold">
Brand Guidelines
</h4>
<p className="text-muted mt-1 text-sm">
Design system and component docs.
</p>
</div>
<Separator className="my-4" />
<div className="flex h-5 items-center gap-4 text-sm">
<span className="text-foreground">Docs</span>
<Separator orientation="vertical" />
<span className="text-foreground">Components</span>
<Separator orientation="vertical" />
<span className="text-foreground">Templates</span>
</div>
</div>
);
}
decorative defaults to true — a purely visual divider gets role="none" and is invisible to screen readers. Pass decorative={false} when the line is structurally meaningful (inside a breadcrumb or menu, say, not just a visual rule) — it then becomes role="separator" with aria-orientation set.
"use client";
import { cn } from "@/lib/utils";
import * as SeparatorPrimitive from "@radix-ui/react-separator";
import * as React from "react";
/**
* Built on @radix-ui/react-separator. `decorative` defaults to `true`
* (explicit here, matching Radix's own default) — a purely visual divider
* gets `role="none"` and is invisible to screen readers. Pass
* `decorative={false}` when the line is structurally meaningful (e.g.
* inside a breadcrumb or menu, not just a visual rule) — it then becomes
* `role="separator"` with `aria-orientation` set.
*/
export const Separator = React.forwardRef<
React.ComponentRef<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(
"bg-border shrink-0",
orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
className,
)}
{...props}
/>
),
);
Separator.displayName = SeparatorPrimitive.Root.displayName;