Nuxt UI Pro v1.0 is out with dashboard components!

Components

Divider

Display a separator between content.

Usage

You can pass label, icon or avatar to the divider component.

Label

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

Icon

Use any icon from Iconify by setting the icon prop by using this pattern: i-{collection_name}-{icon_name}.

<template>
  <UDivider icon="i-simple-icons-github" />
</template>

Avatar

Use the avatar prop as an object and configure it with any of its props.

<template>
  <UDivider
    :avatar="{ src: 'https://avatars.githubusercontent.com/u/739984?v=4' }"
  />
</template>

Orientation

You can change the orientation of the divider by setting the orientation prop to horizontal or vertical. Defaults to horizontal.

OR
OR
<script setup lang="ts">
const form = reactive({ email: 'mail@example.com', password: 'password' })
</script>

<template>
  <div class="w-full flex flex-col gap-y-4">
    <UCard :ui="{ body: { base: 'grid grid-cols-3' } }">
      <div class="space-y-4">
        <UFormGroup label="Email" name="email">
          <UInput v-model="form.email" />
        </UFormGroup>

        <UFormGroup label="Password" name="password">
          <UInput v-model="form.password" type="password" />
        </UFormGroup>

        <UButton label="Login" color="gray" block />
      </div>

      <UDivider label="OR" orientation="vertical" />

      <div class="space-y-4 flex flex-col justify-center">
        <UButton color="black" label="Login with GitHub" icon="i-simple-icons-github" block />
        <UButton color="black" label="Login with Google" icon="i-simple-icons-google" block />
      </div>
    </UCard>

    <UCard>
      <div class="space-y-4">
        <UFormGroup label="Email" name="email">
          <UInput v-model="form.email" />
        </UFormGroup>

        <UFormGroup label="Password" name="password">
          <UInput v-model="form.password" type="password" />
        </UFormGroup>

        <UButton label="Login" color="gray" block />

        <UDivider label="OR" />

        <UButton color="black" label="Login with GitHub" icon="i-simple-icons-github" block />
        <UButton color="black" label="Login with Google" icon="i-simple-icons-google" block />
      </div>
    </UCard>
  </div>
</template>

Type

You can change the type of the divider by setting the type prop to solid, dotted or dashed. Defaults to solid.

Nuxt UI
<template>
  <UDivider label="Nuxt UI" type="dashed" />
</template>

Size New

Use the size prop to change the size of the divider.

Nuxt UI
<template>
  <UDivider label="Nuxt UI" size="sm" />
</template>

Color

You can change the color of the content by using the ui prop

Nuxt UI
<template>
  <UDivider
    label="Nuxt UI"
    :ui="{ label: 'text-primary-500 dark:text-primary-400' }"
  />
</template>

Slots

default

Use the default slot to add content to the divider.

<template>
  <UDivider>
    <Logo class="w-28 h-6" />
  </UDivider>
</template>

Props

type
"solid" | "dotted" | "dashed"
"solid"
ui
{}
{}
label
string
null
size
DividerSize
config.default.size
"md""2xs""xs""sm""lg""xl"
icon
string
null
orientation
"horizontal" | "vertical"
"horizontal"
avatar
any
null

Config

{
  wrapper: {
    base: 'flex items-center align-center text-center w-full',
    horizontal: 'flex-row',
    vertical: 'flex-col',
  },
  container: {
    base: 'font-medium text-gray-700 dark:text-gray-200 flex',
    horizontal: 'mx-3 whitespace-nowrap',
    vertical: 'my-2',
  },
  border: {
    base: 'flex border-gray-200 dark:border-gray-800',
    horizontal: 'w-full',
    vertical: 'h-full',
    size: {
      horizontal: {
        '2xs': 'border-t',
        xs: 'border-t-[2px]',
        sm: 'border-t-[3px]',
        md: 'border-t-[4px]',
        lg: 'border-t-[5px]',
        xl: 'border-t-[6px]',
      },
      vertical: {
        '2xs': 'border-s',
        xs: 'border-s-[2px]',
        sm: 'border-s-[3px]',
        md: 'border-s-[4px]',
        lg: 'border-s-[5px]',
        xl: 'border-s-[6px]',
      },
    },
    type: {
      solid: 'border-solid',
      dotted: 'border-dotted',
      dashed: 'border-dashed',
    },
  },
  icon: {
    base: 'flex-shrink-0 w-5 h-5',
  },
  avatar: {
    base: 'flex-shrink-0',
    size: '2xs',
  },
  label: 'text-sm',
  default: {
    size: '2xs',
  },
}