Saltar al contenido
VEXA
enes
Visualización de datos

Separator

Apto para servidor

A thin rule that divides content.

Vista previa en vivo

Renderizado desde el código fuente instalado de VEXA — los mismos archivos que recibes.

Escritorio

Above the rule

Docs
Registry
MCP

Instalación

Añade el código del componente a tu proyecto. Las dependencias del registry se resuelven automáticamente.

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

Se instala en components/vexa/separator.tsx

Dependencias npm

Sin dependencias npm externas.

Dependencias del registry

  • @vexa/utils

Otros items de VEXA que necesita este componente. Instálalos primero — la CLI los resuelve automáticamente.

Código

Cópialo a su ruta destino, o instálalo con el comando de arriba.

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}
    />
  );
}
JSON del registryr/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"
  }
}

Detalles

Accesibilidad

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

Uso

A thin divider between sections or inline items.

Anatomía

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

Accesibilidad

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

Foco: Not focusable.

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

Buenas prácticas

Recomendado

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

Evitar

  • 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.
Editar esta página

¿Te ha resultado útil esta página?

Guardado localmente en este navegador. Sin cuenta ni servidor.