Separator

Layout

Visual divider with pixel styling and expandable sections.

Installation

npm install @radix-ui/react-separator @radix-ui/react-collapsible

Import

import { PixelSeparator, PixelExpandableSeparator, PixelSectionDivider } from "@/components/ui/pixel-separator"

Usage

Above separator

Below separator

Component Source

Copy and paste the following code into your project at /src/components/ui/pixel-separator.tsx

"use client";

import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
import * as SeparatorPrimitive from "@radix-ui/react-separator";
import { cva, type VariantProps } from "class-variance-authority";
import { ChevronDown } from "lucide-react";
import * as React from "react";

import { cn } from "@/lib/utils";

const pixelSeparatorVariants = cva("shrink-0 bg-black dark:bg-[#ff8c00]", {
  variants: {
    orientation: {
      horizontal: "h-1 w-full",
      vertical: "h-full w-1",
    },
    variant: {
      solid: "",
      dashed:
        "bg-[linear-gradient(90deg,black_4px,transparent_4px)] dark:bg-[linear-gradient(90deg,#ff8c00_4px,transparent_4px)] bg-[length:8px_100%]",
      dotted:
        "bg-[radial-gradient(black_2px,transparent_2px)] dark:bg-[radial-gradient(#ff8c00_2px,transparent_2px)] bg-[length:8px_8px]",
      double:
        "relative before:absolute before:bg-black dark:before:bg-[#ff8c00] after:absolute after:bg-black dark:after:bg-[#ff8c00]",
      thick: "h-[4px]",
    },
  },
  compoundVariants: [
    {
      orientation: "horizontal",
      variant: "dashed",
      className:
        "bg-[linear-gradient(90deg,black_4px,transparent_4px)] dark:bg-[linear-gradient(90deg,#ff8c00_4px,transparent_4px)] bg-[length:8px_100%]",
    },
    {
      orientation: "vertical",
      variant: "dashed",
      className:
        "bg-[linear-gradient(0deg,black_4px,transparent_4px)] dark:bg-[linear-gradient(0deg,#ff8c00_4px,transparent_4px)] bg-[length:100%_8px]",
    },
    {
      orientation: "horizontal",
      variant: "double",
      className:
        "h-[3px] before:top-0 before:left-0 before:right-0 before:h-[1px] after:bottom-0 after:left-0 after:right-0 after:h-[1px]",
    },
    {
      orientation: "vertical",
      variant: "double",
      className:

// ... (more code below)

Accessibility

This component is built with accessibility in mind, including proper ARIA attributes, keyboard navigation, and focus management.