Vela UI Docs
venizia.ai

Separator

Visually or semantically separates content.

npx shadcn@latest add @velaui/separator
npx shadcn@latest add @velaui/separator

Examples

  • Default
  • Vertical nav
  • Dashed light
  • Bold section
  • Dashed vertical bold
  • Light vertical

View code

Separator · Default

Installation

pnpm dlx velaui add @velaui/separator
pnpm dlx velaui add @velaui/separator

Code

separator-default.tsx
import { Separator } from "@/components/ui/separator";

export default function Example() {
  return (
    <div className="w-full space-y-3">
      <div className="text-sm font-medium">Overview</div>
      <Separator />
      <div className="text-sm text-muted-foreground">
        Project details and settings live below this divider.
      </div>
    </div>
  );
}

View code

Separator · Vertical nav

Installation

pnpm dlx velaui add @velaui/separator
pnpm dlx velaui add @velaui/separator

Code

separator-vertical-nav.tsx
import { Separator } from "@/components/ui/separator";

export default function Example() {
  return (
    <div className="flex h-6 items-center gap-3 text-sm">
      <span>Home</span>
      <Separator orientation="vertical" />
      <span>Docs</span>
      <Separator orientation="vertical" />
      <span>Blog</span>
    </div>
  );
}

View code

Separator · Dashed light

Installation

pnpm dlx velaui add @velaui/separator
pnpm dlx velaui add @velaui/separator

Code

separator-dashed-light.tsx
import { Separator } from "@/components/ui/separator";

export default function Example() {
  return (
    <div className="w-full space-y-3">
      <div className="text-sm">Draft saved</div>
      <Separator variant="dash" emphasis="light" />
      <div className="text-sm">Pending review</div>
    </div>
  );
}

View code

Separator · Bold section

Installation

pnpm dlx velaui add @velaui/separator
pnpm dlx velaui add @velaui/separator

Code

separator-bold-section.tsx
import { Separator } from "@/components/ui/separator";

export default function Example() {
  return (
    <div className="w-full space-y-3">
      <div className="text-sm font-semibold">Billing</div>
      <Separator thickness="bold" />
      <div className="text-sm text-muted-foreground">
        Manage your plan and payment method.
      </div>
    </div>
  );
}

View code

Separator · Dashed vertical bold

Installation

pnpm dlx velaui add @velaui/separator
pnpm dlx velaui add @velaui/separator

Code

separator-dashed-vertical-bold.tsx
import { Separator } from "@/components/ui/separator";

export default function Example() {
  return (
    <div className="flex h-6 items-center gap-3 text-sm">
      <span>Bold</span>
      <Separator orientation="vertical" variant="dash" thickness="bold" />
      <span>Italic</span>
      <Separator orientation="vertical" variant="dash" thickness="bold" />
      <span>Underline</span>
    </div>
  );
}

View code

Separator · Light vertical

Installation

pnpm dlx velaui add @velaui/separator
pnpm dlx velaui add @velaui/separator

Code

separator-light-vertical.tsx
import { Separator } from "@/components/ui/separator";

export default function Example() {
  return (
    <div className="flex h-6 items-center gap-3 text-sm text-muted-foreground">
      <span>Updated today</span>
      <Separator orientation="vertical" emphasis="light" />
      <span>5 min read</span>
    </div>
  );
}

Usage

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

export default function Example() {
  return (
    <div className="w-full space-y-3">
      <div className="text-sm font-medium">Overview</div>
      <Separator />
      <div className="text-sm text-muted-foreground">
        Project details and settings live below this divider.
      </div>
    </div>
  );
}

Props

PropTypeDefault
decorativebooleantrue
emphasis"high" | "light"—
orientation"horizontal" | "vertical""horizontal"
thickness"default" | "bold"—
variant"solid" | "dash"—

Takes these and every prop of SeparatorProps.

PropTypeDefault
emphasis"high" | "light"—
orientationimport("/app/node_modules/.bun/@base-ui+react@1.6.0+df7f6a806acd27ca/node_modules/@base-ui/react/index").Orientation"horizontal"
thickness"default" | "bold"—
variant"solid" | "dash"—

Takes these and every prop of SeparatorProps.

Dependencies

npm
class-variance-authority@0.7.1radix-ui@1.6.0
Installs with it
nothing else
npm
@base-ui/react@1.6.0class-variance-authority@0.7.1
Installs with it
nothing else

Source

components/ui/separator.tsx
/* eslint-disable react-refresh/only-export-components */
import * as React from "react";
import { Separator as SeparatorPrimitive } from "radix-ui";
import { cva, type VariantProps } from "class-variance-authority";

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

const separatorVariants = cva(
  [
    // The line itself is a border, not a fill — that is what lets `dash` exist.
    // The box collapses on its own axis so the border width IS the thickness.
    "shrink-0",
    "data-horizontal:h-0 data-horizontal:w-full",
    "data-vertical:w-0 data-vertical:self-stretch",
  ].join(" "),
  {
    variants: {
      variant: {
        solid: "border-solid",
        dash: "border-dashed",
      },
      emphasis: {
        high: "border-border-active",
        light: "border-border-default",
      },
      thickness: {
        default: "data-horizontal:border-t data-vertical:border-l",
        bold: "data-horizontal:border-t-2 data-vertical:border-l-2",
      },
    },
    defaultVariants: {
      variant: "solid",
      emphasis: "high",
      thickness: "default",
    },
  },
);

export type SeparatorProps = React.ComponentProps<typeof SeparatorPrimitive.Root> &
  VariantProps<typeof separatorVariants>;

function Separator({
  className,
  orientation = "horizontal",
  decorative = true,
  variant,
  emphasis,
  thickness,
  ...props
}: SeparatorProps) {
  return (
    <SeparatorPrimitive.Root
      data-slot="separator"
      decorative={decorative}
      orientation={orientation}
      className={cn(
        separatorVariants({ variant, emphasis, thickness }),
        className,
      )}
      {...props}
    />
  );
}

export { Separator, separatorVariants };
components/ui/separator.tsx
/* eslint-disable react-refresh/only-export-components */
import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
import { cva, type VariantProps } from "class-variance-authority";

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

const separatorVariants = cva(
  [
    // The line itself is a border, not a fill — that is what lets `dash` exist.
    // The box collapses on its own axis so the border width IS the thickness.
    "shrink-0",
    "data-horizontal:h-0 data-horizontal:w-full",
    "data-vertical:w-0 data-vertical:self-stretch",
  ].join(" "),
  {
    variants: {
      variant: {
        solid: "border-solid",
        dash: "border-dashed",
      },
      emphasis: {
        high: "border-border-active",
        light: "border-border-default",
      },
      thickness: {
        default: "data-horizontal:border-t data-vertical:border-l",
        bold: "data-horizontal:border-t-2 data-vertical:border-l-2",
      },
    },
    defaultVariants: {
      variant: "solid",
      emphasis: "high",
      thickness: "default",
    },
  },
);

export type SeparatorProps = SeparatorPrimitive.Props &
  VariantProps<typeof separatorVariants>;

function Separator({
  className,
  orientation = "horizontal",
  variant,
  emphasis,
  thickness,
  ...props
}: SeparatorProps) {
  return (
    <SeparatorPrimitive
      data-slot="separator"
      orientation={orientation}
      className={cn(
        separatorVariants({ variant, emphasis, thickness }),
        className,
      )}
      {...props}
    />
  );
}

export { Separator, separatorVariants };