bits

Separator

Visually divide or separate sections or elements, providing clarity and organization.

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

Root

An element used to separate content.

Prop Default Type/Description
asChild false boolean

Whether to use render delegation with this component or not.

orientation 'horizontal' 'horizontal' | 'vertical'

The orientation of the separator.

decorative false boolean

Whether the separator is decorative or not, which will determine if it is announce by screen readers.

Data Attribute Value/Description
data-orientation 'horizontal' | 'vertical'

The orientation of the separator.

🚧 UNDER CONSTRUCTION 🚧