Separator

Visually or semantically separates content.

pxl-ui

Retro styled components

Docs

Components

Themes

1
import { Separator } from "@/components/ui/pxl/separator";
2

3
export default function SeparatorDemo() {
4
  return (
5
    <div className="flex w-full max-w-md flex-col gap-4">
6
      <div className="space-y-1">
7
        <h4 className="font-heading text-sm">
8
          pxl-ui
9
        </h4>
10
        <p className="text-muted-foreground text-sm">
11
          Retro styled components
12
        </p>
13
      </div>
14
      <Separator border="dashed" />
15
      <div className="flex h-5 items-center gap-4 text-sm">
16
        <span>Docs</span>
17
        <Separator orientation="vertical" />
18
        <span>Components</span>
19
        <Separator orientation="vertical" />
20
        <span>Themes</span>
21
      </div>
22
    </div>
23
  );
24
}

Installation

Command
Manual

pnpm dlx shadcn@latest add pxl-ui/registry/separator

Install the following dependencies:

pnpm add @base-ui/react

Copy and paste the following code into your project.

1
"use client";
2

3
import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
4
import { cva, type VariantProps } from "class-variance-authority";
5

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

8
const separatorProps = cva("shrink-0", {
9
  variants: {
10
    orientation: {
11
      horizontal: "h-(--pixel-size) w-full",
12
      vertical: "h-full w-(--pixel-size) self-stretch",
13
    },
14
    size: {
15
      default: "pixel-size-md [--dash-size:12px] [--dash-gap:4px]",
16
      sm: "pixel-size-sm [--dash-size:12px] [--dash-gap:4px]",
17
      md: "pixel-size-md [--dash-size:12px] [--dash-gap:4px]",
18
      lg: "pixel-size-lg [--dash-size:24px] [--dash-gap:8px]",
19
    },
20
    border: {
21
      solid: "bg-current",
22
      dashed: "",
23
      none: "",
24
    },
25
    variant: {
26
      default: "text-border",
27
      muted: "text-muted-foreground/30",
28
      primary: "text-primary-foreground/30",
29
      success: "text-success-foreground/30",
30
      danger: "text-danger-foreground/30",
31
      warning: "text-warning-foreground/30",
32
      info: "text-info-foreground/30",
33
    }
34
  },
35
  defaultVariants: {
36
    orientation: "horizontal",
37
    size: "default",
38
    border: "solid",
39
    variant: "default",
40
  },
41
  compoundVariants: [
42
    {
43
      border: "dashed",
44
      orientation: "horizontal",
45
      className:
46
        "bg-[repeating-linear-gradient(to_right,currentColor_0,currentColor_var(--dash-size),transparent_var(--dash-size),transparent_calc(var(--dash-size)+var(--dash-gap)))]",
47
    },
48
    {
49
      border: "dashed",
50
      orientation: "vertical",
51
      className:
52
        "bg-[repeating-linear-gradient(to_bottom,currentColor_0,currentColor_var(--dash-size),transparent_var(--dash-size),transparent_calc(var(--dash-size)+var(--dash-gap)))]",
53
    },
54
  ],
55
});
56

57
function Separator({
58
  className,
59
  orientation = "horizontal",
60
  size = "default",
61
  border = "solid",
62
  variant = "default",
63
  ...props
64
}: SeparatorPrimitive.Props & VariantProps<typeof separatorProps>) {
65
  return (
66
    <SeparatorPrimitive
67
      data-slot="separator"
68
      orientation={orientation}
69
      className={cn(separatorProps({ border, orientation, size, variant }), className)}
70
      {...props}
71
    />
72
  );
73
}
74

75
export { Separator };

Update the import paths to match your project setup.

Usage

import { Separator } from "@/components/ui/pxl/separator"

<Separator />

Vertical

Use orientation="vertical" for a vertical separator.

Blog

Docs

Source

1
import { Separator } from "@/components/ui/pxl/separator"
2

3
export default function SeparatorVertical() {
4
  return (
5
    <div className="flex h-5 items-center gap-4 text-sm">
6
      <div>Blog</div>
7
      <Separator orientation="vertical" />
8
      <div>Docs</div>
9
      <Separator orientation="vertical" />
10
      <div>Source</div>
11
    </div>
12
  )
13
}

Border

Use border="dashed" for a dashed separator.

Item 1: Value 1

Item 2: Value 2

Item 3: Value 3

1
import { Separator } from "@/components/ui/pxl/separator"
2

3
export default function SeparatorDashed() {
4
  return (
5
    <div className="flex w-full max-w-sm flex-col gap-2 text-sm">
6
      <dl className="flex items-center justify-between">
7
        <dt>Item 1</dt>
8
        <dd className="text-muted-foreground">Value 1</dd>
9
      </dl>
10
      <Separator border="dashed" />
11
      <dl className="flex items-center justify-between">
12
        <dt>Item 2</dt>
13
        <dd className="text-muted-foreground">Value 2</dd>
14
      </dl>
15
      <Separator border="dashed" />
16
      <dl className="flex items-center justify-between">
17
        <dt>Item 3</dt>
18
        <dd className="text-muted-foreground">Value 3</dd>
19
      </dl>
20
    </div>
21
  )
22
}

Size

Use the size prop to change the size of the separator.

Small

Medium

Large

1
import { Separator } from "@/components/ui/pxl/separator"
2

3
export default function SeparatorSizes() {
4
  return (
5
    <div className="flex w-full max-w-sm flex-col gap-2 text-sm">
6
      <p>Small</p>
7
      <Separator size="sm" border="dashed" />
8
      <p>Medium</p>
9
      <Separator size="md" border="dashed" />
10
      <p>Large</p>
11
      <Separator size="lg" border="dashed" />
12
    </div>
13
  )
14
}

Variants

Use the variant prop to change the colors of the separator.

Primary

Success

Warning

Danger

Info

1
import { Separator } from "@/components/ui/pxl/separator"
2

3
export default function SeparatorVariants() {
4
  return (
5
    <div className="flex w-full max-w-sm flex-col gap-2 text-sm">
6
      <p className="text-primary-foreground">Primary</p>
7
      <Separator variant="primary" />
8
      <p className="text-success-foreground">Success</p>
9
      <Separator variant="success" />
10
      <p className="text-warning-foreground">Warning</p>
11
      <Separator variant="warning" />
12
      <p className="text-danger-foreground">Danger</p>
13
      <Separator variant="danger" />
14
      <p className="text-info-foreground">Info</p>
15
      <Separator variant="info" />
16
    </div>
17
  )
18
}

API Reference

See the Base UI Separator documentation.