Data display

Separator

Name: VEXA
Author: Valfiguer

Server-safe

A thin rule that divides content.

Live preview

Rendered from the installed VEXA source — the same files you receive.

Above the rule

Docs

Registry

MCP

Installation

Adds the component source to your project. Registry dependencies are pulled in automatically.

npx shadcn@latest add https://vexa.valfiguer.com/r/separator.json

Installs to components/vexa/separator.tsx

npm dependencies

No external npm dependencies.

Registry dependencies

@vexa/utils

Other VEXA items this component needs. Install them first — they are resolved automatically by the CLI.

Source

Copy this into its target path, or install it with the command above.

components/vexa/separator.tsx

import type * as React from "react";

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

export interface SeparatorProps extends React.ComponentProps<"div"> {
  /** Visual and semantic orientation. */
  orientation?: "horizontal" | "vertical";
  /**
   * When `true` (default) the separator is purely visual and hidden from
   * assistive technology. Set `false` when it conveys a meaningful boundary.
   */
  decorative?: boolean;
}

/**
 * Separator — a thin rule that divides content.
 *
 * RSC-safe: renders on the server with no client boundary.
 */
export function Separator({
  className,
  orientation = "horizontal",
  decorative = true,
  ...props
}: SeparatorProps) {
  const semantics = decorative
    ? ({ role: "none" } as const)
    : ({ role: "separator", "aria-orientation": orientation } as const);

  return (
    <div
      data-slot="separator"
      data-orientation={orientation}
      {...semantics}
      className={cn(
        "shrink-0 bg-vexa-border",
        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
        className,
      )}
      {...props}
    />
  );
}

Registry JSONr/separator.json

r/separator.json

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "separator",
  "type": "registry:ui",
  "title": "Separator",
  "description": "A thin rule that divides content.",
  "registryDependencies": [
    "@vexa/utils"
  ],
  "files": [
    {
      "path": "registry/default/ui/separator.tsx",
      "type": "registry:ui",
      "target": "components/vexa/separator.tsx",
      "content": "import type * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport interface SeparatorProps extends React.ComponentProps<\"div\"> {\n  /** Visual and semantic orientation. */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * When `true` (default) the separator is purely visual and hidden from\n   * assistive technology. Set `false` when it conveys a meaningful boundary.\n   */\n  decorative?: boolean;\n}\n\n/**\n * Separator — a thin rule that divides content.\n *\n * RSC-safe: renders on the server with no client boundary.\n */\nexport function Separator({\n  className,\n  orientation = \"horizontal\",\n  decorative = true,\n  ...props\n}: SeparatorProps) {\n  const semantics = decorative\n    ? ({ role: \"none\" } as const)\n    : ({ role: \"separator\", \"aria-orientation\": orientation } as const);\n\n  return (\n    <div\n      data-slot=\"separator\"\n      data-orientation={orientation}\n      {...semantics}\n      className={cn(\n        \"shrink-0 bg-vexa-border\",\n        orientation === \"horizontal\" ? \"h-px w-full\" : \"h-full w-px\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n"
    }
  ],
  "meta": {
    "frameworks": [
      "react",
      "next"
    ],
    "rsc": "server-safe",
    "cssVars": [
      "--vexa-border"
    ],
    "a11y": "Decorative by default (role=none); set decorative={false} for a semantic role=separator with aria-orientation.",
    "example": "<Separator /> or <Separator orientation=\"vertical\" decorative={false} />",
    "tests": "planned — see docs/README.md#roadmap"
  }
}

Details

Accessibility

Decorative by default (role=none); set decorative={false} for a semantic role=separator with aria-orientation.

Usage

A thin divider between sections or inline items.

Anatomy

Separator: A `<div>` divider; `orientation` is `horizontal` or `vertical`.

Accessibility

Decorative by default (role=none). Set `decorative={false}` for a semantic role=separator with `aria-orientation`.

Focus: Not focusable.

Make it semantic only when it marks a real grouping boundary.

Guidelines

Do

Keep it decorative for purely visual lines.
Set `decorative={false}` when it marks a real boundary.
Match `orientation` to the layout.

Don't

Don't use a Separator to fake spacing — use margins.
Don't announce a purely visual divider.
Don't rely on it as the only grouping cue.

Edit this page

Was this page helpful?

Stored locally in this browser. No account or server needed.