{
  "name": "separator",
  "title": "Separator",
  "description": "A hairline divider: solid, fade-to-ends, or lit with edge-light.",
  "category": "layout",
  "install": {
    "command": "npx shadcn@latest add @clow/separator",
    "registryConfig": {
      "@clow": "https://clow.cards/r/{name}.json"
    }
  },
  "props": {
    "variant": {
      "type": "select",
      "options": [
        "default",
        "fade",
        "lit"
      ],
      "default": "default",
      "description": "default = solid hairline, fade = dissolves at ends, lit = edge-light for section focus."
    },
    "orientation": {
      "type": "select",
      "options": [
        "horizontal",
        "vertical"
      ],
      "default": "horizontal"
    }
  },
  "agent": {
    "prompt": "Use Separator to divide content groups. variant=default for solid hairlines, fade for editorial/soft breaks, lit for a focused section break (edge-light). Defaults to horizontal; pass orientation=\"vertical\" inside a flex row (parent must define height).",
    "examples": [
      "<Separator className=\"my-4\" />",
      "<Separator variant=\"fade\" className=\"my-6\" />",
      "<Separator orientation=\"vertical\" />"
    ]
  },
  "dependencies": [
    "@base-ui/react",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "utils"
  ],
  "links": {
    "docs": "https://clow.cards/docs/separator",
    "markdown": "https://clow.cards/llms/separator.md",
    "registryItem": "https://clow.cards/r/separator.json"
  }
}
prop	type	default
variant	default \| fade \| lit	default
orientation	horizontal \| vertical	horizontal
Draw

Playground

Examples

Props
