Core@paxeer/core/separatorimplemented
Separator
shadcn Separator restyled to MD3 outline-variant.
Install
$
pnpm exec designx add @paxeer/core/separatorPreview
Above
Below
Source code
components/designx/core/separator.tsxtsx
"use client";
import { type ComponentProps } from "react";
import { Separator as SeparatorPrimitive } from "radix-ui";
import { cn } from "../lib/cn";
/** Adapted from shadcn/ui Separator. */
export function Separator({
className,
orientation = "horizontal",
decorative = true,
...props
}: ComponentProps<typeof SeparatorPrimitive.Root>) {
return (
<SeparatorPrimitive.Root
data-slot="separator"
decorative={decorative}
orientation={orientation}
className={cn(
"shrink-0 bg-outline-variant data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
className,
)}
{...props}
/>
);
}
Dependencies
npm packages
radix-ui
Registry dependencies