DesignX
Core@paxeer/core/separatorimplemented

Separator

shadcn Separator restyled to MD3 outline-variant.

Install

$pnpm exec designx add @paxeer/core/separator

Preview

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