Usage
Use the Separator component as-is to separate content.
<template>
<USeparator />
</template>
Orientation
Use the orientation prop to change the orientation of the Separator. Defaults to horizontal.
<template>
<USeparator orientation="vertical" class="h-48" />
</template>
Label
Use the label prop to display a label in the middle of the Separator.
<template>
<USeparator label="Hello World" />
</template>
Icon
Use the icon prop to display an icon in the middle of the Separator.
<template>
<USeparator icon="i-simple-icons-nuxtdotjs" />
</template>
Avatar
Use the avatar prop to display an avatar in the middle of the Separator.
<template>
<USeparator
:avatar="{
src: 'https://github.com/nuxt.png'
}"
/>
</template>
Color
Use the color prop to change the color of the Separator. Defaults to neutral.
<template>
<USeparator color="primary" />
</template>
Type
Use the type prop to change the type of the Separator. Defaults to solid.
<template>
<USeparator type="dashed" />
</template>
Size
Use the size prop to change the size of the Separator. Defaults to xs.
<template>
<USeparator size="lg" />
</template>
API
Props
| Prop | Default | Type |
|---|---|---|
as |
|
The element or component this component should render as. |
label |
Display a label in the middle. | |
icon |
Display an icon in the middle. | |
avatar |
Display an avatar in the middle. | |
color |
|
|
size |
|
|
type |
|
|
orientation |
|
The orientation of the separator. |
decorative |
Whether or not the component is purely decorative. | |
ui |
|
Slots
| Slot | Type |
|---|---|
default |
|
Theme
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
separator: {
slots: {
root: 'flex items-center align-center text-center',
border: '',
container: 'font-medium text-[var(--ui-text)] flex',
icon: 'shrink-0 size-5',
avatar: 'shrink-0',
avatarSize: '2xs',
label: 'text-sm'
},
variants: {
color: {
primary: {
border: 'border-[var(--ui-primary)]'
},
secondary: {
border: 'border-[var(--ui-secondary)]'
},
success: {
border: 'border-[var(--ui-success)]'
},
info: {
border: 'border-[var(--ui-info)]'
},
warning: {
border: 'border-[var(--ui-warning)]'
},
error: {
border: 'border-[var(--ui-error)]'
},
neutral: {
border: 'border-[var(--ui-border)]'
}
},
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: '',
sm: '',
md: '',
lg: '',
xl: ''
},
type: {
solid: {
border: 'border-solid'
},
dashed: {
border: 'border-dashed'
},
dotted: {
border: 'border-dotted'
}
}
},
compoundVariants: [
{
orientation: 'horizontal',
size: 'xs',
class: {
border: 'border-t'
}
},
{
orientation: 'horizontal',
size: 'sm',
class: {
border: 'border-t-[2px]'
}
},
{
orientation: 'horizontal',
size: 'md',
class: {
border: 'border-t-[3px]'
}
},
{
orientation: 'horizontal',
size: 'lg',
class: {
border: 'border-t-[4px]'
}
},
{
orientation: 'horizontal',
size: 'xl',
class: {
border: 'border-t-[5px]'
}
},
{
orientation: 'vertical',
size: 'xs',
class: {
border: 'border-s'
}
},
{
orientation: 'vertical',
size: 'sm',
class: {
border: 'border-s-[2px]'
}
},
{
orientation: 'vertical',
size: 'md',
class: {
border: 'border-s-[3px]'
}
},
{
orientation: 'vertical',
size: 'lg',
class: {
border: 'border-s-[4px]'
}
},
{
orientation: 'vertical',
size: 'xl',
class: {
border: 'border-s-[5px]'
}
}
],
defaultVariants: {
color: 'neutral',
size: 'xs',
type: 'solid'
}
}
}
})
]
})