{"name":"separator","title":"Separator","description":"Visually or semantically separates content.","installCommand":"bunx marko-ui add separator -y","usageTags":"<Separator>","importSnippet":"import Separator from \"@/components/ui/separator/separator.marko\";","usageSnippet":"<Separator/>","tags":["Separator"],"parts":[],"props":[{"name":"decorative","type":"boolean","required":false},{"name":"orientation","type":"'horizontal' | 'vertical'","required":false}],"events":[],"keyboard":[],"accessibilityNotes":[],"examples":[{"id":"separator-demo","title":"Default","source":"import Separator from \"@marko-ui/shadcn/ui/separator/separator.marko\";\n\n<div class=\"w-full max-w-sm\">\n  <div class=\"space-y-1\">\n    <h3 class=\"text-sm font-medium leading-none\">Marko UI</h3>\n    <p class=\"text-sm text-muted-foreground\">An open-source component library.</p>\n  </div>\n  <Separator class=\"my-4\"/>\n  <div class=\"flex h-5 items-center gap-4 text-sm\">\n    <div>Blog</div>\n    <Separator orientation=\"vertical\"/>\n    <div>Docs</div>\n    <Separator orientation=\"vertical\"/>\n    <div>Source</div>\n  </div>\n</div>","description":"A horizontal separator between a heading and description, and vertical separators between inline links."},{"id":"separator-vertical","title":"Vertical","source":"import Separator from \"@marko-ui/shadcn/ui/separator/separator.marko\";\n\n<div class=\"flex h-8 items-center gap-4 text-sm\">\n  <div>Blog</div>\n  <Separator orientation=\"vertical\"/>\n  <div>Docs</div>\n  <Separator orientation=\"vertical\"/>\n  <div>Source</div>\n</div>","description":"Set `orientation=\"vertical\"` to separate content side by side."},{"id":"separator-menu","title":"Menu","source":"import Separator from \"@marko-ui/shadcn/ui/separator/separator.marko\";\n\n<div class=\"flex items-center gap-2 text-sm md:gap-4\">\n  <div class=\"flex flex-col gap-1\">\n    <span class=\"font-medium\">Settings</span>\n    <span class=\"text-xs text-muted-foreground\">Manage preferences</span>\n  </div>\n  <Separator orientation=\"vertical\"/>\n  <div class=\"flex flex-col gap-1\">\n    <span class=\"font-medium\">Account</span>\n    <span class=\"text-xs text-muted-foreground\">Profile & security</span>\n  </div>\n  <Separator orientation=\"vertical\" class=\"hidden md:block\"/>\n  <div class=\"hidden flex-col gap-1 md:flex\">\n    <span class=\"font-medium\">Help</span>\n    <span class=\"text-xs text-muted-foreground\">Support & docs</span>\n  </div>\n</div>","description":"Vertical separators between menu items with descriptions."},{"id":"separator-list","title":"List","source":"import Separator from \"@marko-ui/shadcn/ui/separator/separator.marko\";\n\n<div class=\"flex w-full max-w-sm flex-col gap-2 text-sm\">\n  <dl class=\"flex items-center justify-between\">\n    <dt>Item 1</dt>\n    <dd class=\"text-muted-foreground\">Value 1</dd>\n  </dl>\n  <Separator/>\n  <dl class=\"flex items-center justify-between\">\n    <dt>Item 2</dt>\n    <dd class=\"text-muted-foreground\">Value 2</dd>\n  </dl>\n  <Separator/>\n  <dl class=\"flex items-center justify-between\">\n    <dt>Item 3</dt>\n    <dd class=\"text-muted-foreground\">Value 3</dd>\n  </dl>\n</div>","description":"Horizontal separators between list items."},{"id":"separator-rtl","title":"RTL","source":"import Separator from \"@marko-ui/shadcn/ui/separator/separator.marko\";\n\n<div dir=\"rtl\" class=\"flex max-w-sm flex-col gap-4 text-sm\">\n  <div class=\"flex flex-col gap-1.5\">\n    <div class=\"font-medium leading-none\">shadcn/ui</div>\n    <div class=\"text-muted-foreground\">الأساس لنظام التصميم الخاص بك</div>\n  </div>\n  <Separator/>\n  <div>مجموعة من المكونات المصممة بشكل جميل يمكنك تخصيصها وتوسيعها والبناء عليها.</div>\n</div>","description":"Separators have no directional geometry of their own, so they need no RTL-specific handling — they simply follow the surrounding `dir=\"rtl\"` layout, shown here with Arabic content."},{"id":"separator-semantic","title":"Semantic (non-decorative)","source":"import Separator from \"@marko-ui/shadcn/ui/separator/separator.marko\";\n\n<div class=\"w-full max-w-sm space-y-4\">\n  <p class=\"text-sm\">Section one content goes here.</p>\n  <Separator decorative=false/>\n  <p class=\"text-sm\">Section two content goes here.</p>\n</div>","description":"Pass `decorative=false` when the separator conveys real document structure, so it renders with `role=\"separator\"` for assistive technology instead of being hidden from it."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","nativeAttributes":"div"}