{
  "title": "Separator",
  "description": "Visual or semantic rule between groups of content.",
  "url": "/docs/components/separator",
  "since": "0.2.0",
  "tags": [
    "primitive",
    "layout"
  ],
  "platform": "both",
  "source": "---\ntitle: Separator\ndescription: Visual or semantic rule between groups of content.\nsince: 0.2.0\ntags: [primitive, layout]\nplatform: both\ncategory: primitives\n---\n\nimport { BundleSize } from '@/components/bundle-size';\nimport { Preview } from '@/components/preview';\nimport { PropsTable } from '@/components/props-table';\n\n<BundleSize component=\"Separator\" />\n\n## At a glance\n\n- Horizontal (default) or vertical orientation.\n- Decorative by default — use `decorative={false}` when the rule carries meaning a screen reader should announce.\n- One-pixel rule using the semantic border color, so it adapts to your theme.\n\n## Horizontal\n\n<Preview name=\"separator-basic\" />\n\n## Vertical\n\nPass `orientation=\"vertical\"` and place inside an `HStack` (or any\nflex-row container). The separator stretches to its container's\nheight via `align-self: stretch`.\n\n<Preview name=\"separator-vertical\" />\n\n## Props\n\n<PropsTable component=\"Separator\" />\n"
}