Skip to content

Separator

A visual divider that separates content into distinct sections.

<script setup lang="ts">
import { Separator } from '@destyler-ui/vue'
</script>

<template>
  <main>
    <div>
      <p>Destyler UI</p>
      <p>Unstyled components for Vue.</p>
    </div>
    <Separator.Root />
    <nav>
      <span>Blog</span>
      <Separator.Root orientation="vertical" />
      <span>Docs</span>
      <Separator.Root orientation="vertical" />
      <span>Source</span>
    </nav>
  </main>
</template>

import { Separator } from '@destyler-ui/react'

export function Basic() {
  return (
    <main style={{ width: '300px', padding: '1rem' }}>
      <div>
        <p>Destyler UI</p>
        <p>Unstyled components for React.</p>
      </div>
      <Separator.Root />
      <nav style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginTop: '1rem' }}>
        <span>Blog</span>
        <Separator.Root orientation="vertical" style={{ height: '1rem' }} />
        <span>Docs</span>
        <Separator.Root orientation="vertical" style={{ height: '1rem' }} />
        <span>Source</span>
      </nav>
    </main>
  )
}

import { Separator } from '@destyler-ui/solid/separator'

export function Basic() {
  return (
    <main style={{ width: '300px', padding: '1rem' }}>
      <div>
        <p>Destyler UI</p>
        <p>Unstyled components for Solid.</p>
      </div>
      <Separator.Root />
      <nav style={{ 'display': 'flex', 'align-items': 'center', 'gap': '0.5rem', 'margin-top': '1rem' }}>
        <span>Blog</span>
        <Separator.Root orientation="vertical" style={{ height: '1rem' }} />
        <span>Docs</span>
        <Separator.Root orientation="vertical" style={{ height: '1rem' }} />
        <span>Source</span>
      </nav>
    </main>
  )
}

<script lang="ts">
  import type { SeparatorRootProps } from '@destyler-ui/svelte'
  import { Separator } from '@destyler-ui/svelte'

  const props: SeparatorRootProps = $props()
</script>

<main style="width: 300px; padding: 1rem;">
  <div>
    <p>Destyler UI</p>
    <p>Unstyled components for Svelte.</p>
  </div>
  <Separator.Root {...props} />
  <nav style="display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem;">
    <span>Blog</span>
    <Separator.Root orientation="vertical" style="height: 1rem;" />
    <span>Docs</span>
    <Separator.Root orientation="vertical" style="height: 1rem;" />
    <span>Source</span>
  </nav>
</main>

Anatomy

<script setup lang="ts">
import { Separator } from '@destyler-ui/vue'
</script>

<template>
  <Separator.Root />
</template>

import { Separator } from '@destyler-ui/react'

export default function Basic() {
  return (
    <Separator.Root />
  )
}

import { Separator } from '@destyler-ui/solid'

export default function Basic() {
  return (
    <Separator.Root />
  )
}

<script lang="ts">
  import { Separator } from '@destyler-ui/svelte'
</script>

<div>
  <span>Blog</span>
  <Separator.Root orientation="vertical" />
  <span>Docs</span>
</div>

Examples

Basic

<script setup lang="ts">
import { Separator } from '@destyler-ui/vue'
</script>

<template>
  <main>
    <div>
      <p>Destyler UI</p>
      <p>Unstyled components for Vue.</p>
    </div>
    <Separator.Root />
    <nav>
      <span>Blog</span>
      <Separator.Root orientation="vertical" />
      <span>Docs</span>
      <Separator.Root orientation="vertical" />
      <span>Source</span>
    </nav>
  </main>
</template>

import { Separator } from '@destyler-ui/react'

export function Basic() {
  return (
    <main style={{ width: '300px', padding: '1rem' }}>
      <div>
        <p>Destyler UI</p>
        <p>Unstyled components for React.</p>
      </div>
      <Separator.Root />
      <nav style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginTop: '1rem' }}>
        <span>Blog</span>
        <Separator.Root orientation="vertical" style={{ height: '1rem' }} />
        <span>Docs</span>
        <Separator.Root orientation="vertical" style={{ height: '1rem' }} />
        <span>Source</span>
      </nav>
    </main>
  )
}

import { Separator } from '@destyler-ui/solid/separator'

export function Basic() {
  return (
    <main style={{ width: '300px', padding: '1rem' }}>
      <div>
        <p>Destyler UI</p>
        <p>Unstyled components for Solid.</p>
      </div>
      <Separator.Root />
      <nav style={{ 'display': 'flex', 'align-items': 'center', 'gap': '0.5rem', 'margin-top': '1rem' }}>
        <span>Blog</span>
        <Separator.Root orientation="vertical" style={{ height: '1rem' }} />
        <span>Docs</span>
        <Separator.Root orientation="vertical" style={{ height: '1rem' }} />
        <span>Source</span>
      </nav>
    </main>
  )
}

<script lang="ts">
  import type { SeparatorRootProps } from '@destyler-ui/svelte'
  import { Separator } from '@destyler-ui/svelte'

  const props: SeparatorRootProps = $props()
</script>

<main style="width: 300px; padding: 1rem;">
  <div>
    <p>Destyler UI</p>
    <p>Unstyled components for Svelte.</p>
  </div>
  <Separator.Root {...props} />
  <nav style="display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem;">
    <span>Blog</span>
    <Separator.Root orientation="vertical" style="height: 1rem;" />
    <span>Docs</span>
    <Separator.Root orientation="vertical" style="height: 1rem;" />
    <span>Source</span>
  </nav>
</main>

Vertical

Display a vertical separator.

<script setup lang="ts">
import { Separator } from '@destyler-ui/vue'
</script>

<template>
  <main>
    <nav>
      <span>Blog</span>
      <Separator.Root orientation="vertical" />
      <span>Docs</span>
      <Separator.Root orientation="vertical" />
      <span>Source</span>
    </nav>
  </main>
</template>

import { Separator } from '@destyler-ui/react'

export function Vertical() {
  return (
    <main style={{ padding: '1rem' }}>
      <nav style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
        <span>Blog</span>
        <Separator.Root orientation="vertical" style={{ height: '1rem' }} />
        <span>Docs</span>
        <Separator.Root orientation="vertical" style={{ height: '1rem' }} />
        <span>Source</span>
      </nav>
    </main>
  )
}

import { Separator } from '@destyler-ui/solid/separator'

export function Vertical() {
  return (
    <main style={{ padding: '1rem' }}>
      <nav style={{ 'display': 'flex', 'align-items': 'center', 'gap': '0.5rem' }}>
        <span>Blog</span>
        <Separator.Root orientation="vertical" style={{ height: '1rem' }} />
        <span>Docs</span>
        <Separator.Root orientation="vertical" style={{ height: '1rem' }} />
        <span>Source</span>
      </nav>
    </main>
  )
}

<script lang="ts">
  import { Separator } from '@destyler-ui/svelte'
</script>

<main style="padding: 1rem;">
  <nav style="display: flex; align-items: center; gap: 0.5rem;">
    <span>Blog</span>
    <Separator.Root orientation="vertical" style="height: 1rem;" />
    <span>Docs</span>
    <Separator.Root orientation="vertical" style="height: 1rem;" />
    <span>Source</span>
  </nav>
</main>

Root Provider

<script setup lang="ts">
import { Separator, useSeparator } from '@destyler-ui/vue'

const separator = useSeparator()
</script>

<template>
  <main>
    <div>
      <p>Destyler UI</p>
      <p>Unstyled components for Vue.</p>
    </div>
    <Separator.RootProvider :value="separator" />
  </main>
</template>

import { Separator, useSeparator } from '@destyler-ui/react'

export function RootProvider() {
  const separator = useSeparator()

  return (
    <main style={{ width: '300px', padding: '1rem' }}>
      <div>
        <p>Destyler UI</p>
        <p>Unstyled components for React.</p>
      </div>
      <Separator.RootProvider value={separator}>
        <Separator.Root />
      </Separator.RootProvider>
    </main>
  )
}

import { Separator, useSeparator } from '@destyler-ui/solid/separator'

export function RootProvider() {
  const separator = useSeparator()

  return (
    <main style={{ width: '300px', padding: '1rem' }}>
      <div>
        <p>Destyler UI</p>
        <p>Unstyled components for Solid.</p>
      </div>
      <Separator.RootProvider value={separator}>
        <Separator.Root />
      </Separator.RootProvider>
    </main>
  )
}

<script lang="ts">
  import { Separator, useSeparator } from '@destyler-ui/svelte'

  const id = $props.id()
  const separator = useSeparator({ id })
</script>

<main style="width: 300px; padding: 1rem;">
  <div>
    <p>Destyler UI</p>
    <p>Unstyled components for Svelte.</p>
  </div>
  <Separator.RootProvider value={separator}>
    <Separator.Root />
  </Separator.RootProvider>
</main>

API Reference

Root

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`id`	—	`string` The unique identifier of the machine.
`orientation`	`"horizontal"`	`"horizontal" \| "vertical"` The orientation of the separator.

Context

No serializable props or emits are declared for this part.

RootProvider

Prop	Default	Type
`value*`	—	`MachineApi<PropTypes>`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`id`	—	`string` The unique identifier of the machine.
`orientation`	`"horizontal"`	`"horizontal" \| "vertical"` The orientation of the separator.

Root

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`orientation`	`"horizontal"`	`"horizontal" \| "vertical"` The orientation of the separator.

Context

Prop	Default	Type
`children`	—	`(separator: ReturnType<typeof useSeparatorContext>) => ReactNode`

RootProvider

Prop	Default	Type
`value*`	—	`UseSeparatorReturn`
`children`	—	`null \| string \| number \| bigint \| false \| true \| react82.ReactElement<unknown, string \| react82.JSXElementConstructor<any>> \| Iterable<react82.ReactNode> \| react82.ReactPortal \| Promise<string \| number \| bigint \| boolean \| react82.ReactPortal \| react82.ReactElement<unknown, string \| react82.JSXElementConstructor<any>> \| Iterable<react82.ReactNode> \| null \| undefined>`

Root

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js152.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`ids`	—	`Partial<{ root: string; }>` The ids of the elements in the divider
`orientation`	`"horizontal"`	`"horizontal" \| "vertical"` The orientation of divider

Context

Prop	Default	Type
`children`	—	`(context: UseSeparatorContext) => JSX.Element`

RootProvider

Prop	Default	Type
`value*`	—	`UseSeparatorReturn`
`children`	—	`null \| number \| false \| true \| Node \| solid_js152.JSX.ArrayElement \| (string & {})`

Root

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`
`dir`	`"ltr"`	`"ltr" \| "rtl"` The document's text/writing direction.
`id`	—	`string`
`ids`	—	`Partial<{ root: string; }>` The ids of the elements in the divider
`orientation`	`"horizontal"`	`"horizontal" \| "vertical"` The orientation of divider

Context

Prop	Default	Type
`render`	—	`Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/index").UseSeparatorReturn]>`

RootProvider

Prop	Default	Type
`value*`	—	`UseSeparatorReturn`
`children`	—	`Snippet<[]> \| undefined`