Separator

Visually or semantically separates content.
stableView sourceRadix Themes
Tools for building high-quality, accessible UI.
Themes Primitives Icons Colors
vue
<script setup lang="ts">
import { Separator } from '@typlog/ui'
</script>

<template>
  <div class="text-sm leading-6">
    Tools for building high-quality, accessible UI.
    <Separator class="my-2" size="4" />
    <div class="flex items-center gap-3">
      Themes
      <Separator orientation="vertical" />
      Primitives
      <Separator orientation="vertical" />
      Icons
      <Separator orientation="vertical" />
      Colors
    </div>
  </div>
</template>

API Reference ​

PropDefaultType
as"span"
"div""span"

The element this separator should render as.

color"gray"
Color

Overrides the color of the separator.

orientation"horizontal"
"vertical""horizontal"

Control the orientation of the separator.

size"1"
"1""2""3""4"

Control the size of the separator.

Examples ​

Size ​

Use the size prop to control the size of the separator. The largest step takes full width or height of the container.

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

<template>
  <div class="flex flex-col gap-4">
    <Separator orientation="horizontal" size="1" />
    <Separator orientation="horizontal" size="2" />
    <Separator orientation="horizontal" size="3" />
    <Separator orientation="horizontal" size="4" />
  </div>
</template>
vue
<script setup lang="ts">
import { Separator } from '@typlog/ui'
</script>

<template>
  <div class="flex items-center gap-4 h-24">
    <Separator orientation="vertical" size="1" />
    <Separator orientation="vertical" size="2" />
    <Separator orientation="vertical" size="3" />
    <Separator orientation="vertical" size="4" />
  </div>
</template>

Color ​

Use the color prop to assign a specific color, the default color is gray.

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

<template>
  <div class="flex flex-col gap-4 py-4">
    <Separator color="indigo" size="4" />
    <Separator color="cyan" size="4" />
    <Separator color="orange" size="4" />
    <Separator color="crimson" size="4" />
  </div>
</template>