Separator
Visually divide or separate sections or elements, providing clarity and organization.
<script lang="ts">
import * as Separator from "@/components//ui/separator";
</script>
<div>
<div class="space-y-1">
<h4 class="text-sm font-medium leading-none">
Radix Primitives
</h4>
<p class="text-sm text-muted-foreground">
An open-source UI component library.
</p>
</div>
<Separator.Root class="my-4" />
<div class="flex h-5 items-center space-x-4 text-sm">
<div>Blog</div>
<Separator.Root orientation="vertical" />
<div>Docs</div>
<Separator.Root orientation="vertical" />
<div>Source</div>
</div>
</div>
<script lang="ts">
import * as Separator from "@/components//ui/separator";
</script>
<div>
<div class="space-y-1">
<h4 class="text-sm font-medium leading-none">
Radix Primitives
</h4>
<p class="text-sm text-muted-foreground">
An open-source UI component library.
</p>
</div>
<Separator.Root class="my-4" />
<div class="flex h-5 items-center space-x-4 text-sm">
<div>Blog</div>
<Separator.Root orientation="vertical" />
<div>Docs</div>
<Separator.Root orientation="vertical" />
<div>Source</div>
</div>
</div>
Radix Primitives
An open-source UI component library.
Blog
Docs
Source
Structure
<script lang="ts">
import { Separator } from "bits-ui";
</script>
<Separator.Root />
<script lang="ts">
import { Separator } from "bits-ui";
</script>
<Separator.Root />
Component API
An element used to separate content.
| Property | Type | Description |
|---|---|---|
asChild | boolean | Whether to use render delegation with this component or not. Default:
false |
orientation | 'horizontal' | 'vertical' | The orientation of the separator. Default:
'horizontal' |
decorative | boolean | Whether the separator is decorative or not, which will determine if it is announce by screen readers. Default:
false |
| Data Attribute | Description/Value |
|---|---|
data-orientation | The orientation of the separator. Value: 'horizontal' | 'vertical' |
🚧 UNDER CONSTRUCTION 🚧