Hairline divider, horizontal or vertical.
VibeUI
Components you own.
npx @agents-npm-packages/vibeui add separator --dir ./src/components/uiImport
import { Separator } from "@/components/ui/separator"Generated from the component's TypeScript types, so it always matches the source. * marks a required prop.
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | Extra classes, merged with the component's own. |
| orientation | "horizontal" | "vertical" | "horizontal" | Layout direction. |
| animated | boolean | — | Draws the line in on mount. |
import { cn } from "@/lib/utils";
/** Hairline divider, horizontal or vertical. */
export function Separator({
className,
orientation = "horizontal",
animated,
}: {
className?: string;
orientation?: "horizontal" | "vertical";
/** Draws the line in on mount. */
animated?: boolean;
}) {
return (
<div
role="separator"
aria-orientation={orientation}
className={cn(
"shrink-0 bg-line",
orientation === "horizontal" ? "h-px w-full" : "h-full min-h-4 w-px",
animated &&
(orientation === "horizontal"
? "origin-left animate-grow-x"
: "origin-top animate-grow-y"),
className,
)}
/>
);
}
Exports Separator. Peer dependencies: clsx, tailwind-merge.