Skip to main content

​
Overview

The Separator component divides content either horizontally or vertically. It supports labels, icons, and avatars in the middle, making it perfect for section breaks, content divisions, and visual organization.

​
Usage

Use the Separator component as-is to create a simple horizontal divider: 
<template>
  <div>
    <p>Content above</p>
    <USeparator />
    <p>Content below</p>
  </div>
</template>

​
With label

<template>
  <USeparator label="OR" />
</template>

​
With icon

<template>
  <USeparator icon="i-simple-icons-nuxtdotjs" />
</template>

​
With avatar

<template>
  <USeparator :avatar="{ src: 'https://github.com/nuxt.png' }" />
</template>

​
Props

​
as
string | Component
default:"'div'"
The element or component this component should render as.
​
label
string
Display a text label in the middle of the separator.
​
icon
string
Display an icon in the middle of the separator. Accepts Iconify icon names.
​
avatar
object
Display an avatar in the middle of the separator.
​
color
string
default:"'neutral'"
The color of the separator. Accepts theme color names (e.g., ‘primary’, ‘secondary’, ‘neutral’).
​
size
'xs' | 'sm' | 'md' | 'lg' | 'xl'
default:"'xs'"
The thickness of the separator line.
  • xs: 1px border
  • sm: 2px border
  • md: 3px border
  • lg: 4px border
  • xl: 5px border
​
type
'solid' | 'dashed' | 'dotted'
default:"'solid'"
The style of the separator line.
​
orientation
'horizontal' | 'vertical'
default:"'horizontal'"
The orientation of the separator.
​
decorative
boolean
When true, the separator is treated as decorative and hidden from screen readers.
​
class
any
Additional CSS classes to apply to the separator root element.
​
ui
object
Override the default styling for specific separator slots.

​
Slots

​
default
Custom content to display in the middle of the separator. Receives ui object as a prop for styling.When using the default slot, the label, icon, and avatar props are ignored.

​
Orientation

Default horizontal separator:
<template>
  <div class="space-y-4">
    <p>Section 1</p>
    <USeparator />
    <p>Section 2</p>
  </div>
</template>

​
Colors

Default neutral color:
<template>
  <USeparator color="neutral" />
</template>

​
Line styles

Default solid line:
<template>
  <USeparator type="solid" />
</template>

​
Sizes

<template>
  <div class="space-y-4">
    <USeparator size="xs" />
    <USeparator size="sm" />
    <USeparator size="md" />
    <USeparator size="lg" />
    <USeparator size="xl" />
  </div>
</template>

​
Theming

The Separator component uses the following theme structure: 
{
  slots: {
    root: 'flex items-center align-center text-center',
    border: '',
    container: 'font-medium text-default flex',
    icon: 'shrink-0 size-5',
    avatar: 'shrink-0',
    avatarSize: '2xs',
    label: 'text-sm'
  },
  variants: {
    color: {
      neutral: { border: 'border-default' },
      // + theme colors (primary, secondary, etc.)
    },
    orientation: {
      horizontal: {
        root: 'w-full flex-row',
        border: 'w-full',
        container: 'mx-3 whitespace-nowrap'
      },
      vertical: {
        root: 'h-full flex-col',
        border: 'h-full',
        container: 'my-2'
      }
    },
    size: {
      xs: { border: 'border-t' },    // 1px
      sm: { border: 'border-t-[2px]' },
      md: { border: 'border-t-[3px]' },
      lg: { border: 'border-t-[4px]' },
      xl: { border: 'border-t-[5px]' }
    },
    type: {
      solid: { border: 'border-solid' },
      dashed: { border: 'border-dashed' },
      dotted: { border: 'border-dotted' }
    }
  },
  defaultVariants: {
    color: 'neutral',
    size: 'xs',
    type: 'solid'
  }
}

​
Examples

​
Form section divider

<template>
  <form class="space-y-6">
    <div>
      <h3 class="text-lg font-semibold">Personal Information</h3>
      <!-- form fields -->
    </div>
    
    <USeparator label="Account Settings" />
    
    <div>
      <!-- more form fields -->
    </div>
  </form>
</template>

​
Login options separator

<template>
  <div class="space-y-4">
    <button class="w-full">Continue with Google</button>
    <button class="w-full">Continue with GitHub</button>
    
    <USeparator label="OR" />
    
    <form>
      <input type="email" placeholder="Email" />
      <input type="password" placeholder="Password" />
      <button type="submit">Sign in</button>
    </form>
  </div>
</template>

<template>
  <nav class="space-y-2">
    <a href="/">Home</a>
    <a href="/about">About</a>
    
    <USeparator class="my-4" />
    
    <a href="/settings">Settings</a>
    <a href="/logout">Logout</a>
  </nav>
</template>

​
Custom slot content

<template>
  <USeparator>
    <template #default="{ ui }">
      <div :class="ui.container()">
        <span class="text-xs uppercase tracking-wide text-gray-500">
          Chapter 2
        </span>
      </div>
    </template>
  </USeparator>
</template>

​
Vertical toolbar divider

<template>
  <div class="flex items-center gap-2 p-2 border rounded">
    <button>Bold</button>
    <button>Italic</button>
    <button>Underline</button>
    
    <USeparator orientation="vertical" class="h-6" />
    
    <button>Link</button>
    <button>Image</button>
  </div>
</template>

​
Customization

Customize separators globally via app.config.ts:
app.config.ts
export default defineAppConfig({
  ui: {
    separator: {
      slots: {
        label: 'text-xs uppercase tracking-wider',
        container: 'px-4'
      },
      defaultVariants: {
        size: 'sm',
        color: 'primary'
      }
    }
  }
})

​
Accessibility

The Separator component is based on Reka UI’s Separator primitive and follows WAI-ARIA separator pattern.
Use the decorative prop for purely visual separators that don’t convey meaningful content structure. This hides the separator from screen readers.
<template>
  <!-- Decorative separator -->
  <USeparator decorative />
  
  <!-- Semantic separator (announces to screen readers) -->
  <USeparator />
</template>

Build docs developers (and LLMs) love

Get started for freeTalk to us