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/benjamincanac.png'
}"
/>
</template>
Color
Use the color prop to change the color of the Separator. Defaults to gray.
<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
export default defineAppConfig({
ui: {
separator: {
slots: {
root: 'flex items-center align-center text-center',
border: '',
container: 'font-medium text-gray-700 dark:text-gray-200 flex',
icon: 'shrink-0 size-5',
avatar: 'shrink-0',
avatarSize: '2xs',
label: 'text-sm'
},
variants: {
color: {
primary: {
border: 'border-primary-500 dark:border-primary-400'
},
error: {
border: 'border-error-500 dark:border-error-400'
},
red: {
border: 'border-red-500 dark:border-red-400'
},
orange: {
border: 'border-orange-500 dark:border-orange-400'
},
amber: {
border: 'border-amber-500 dark:border-amber-400'
},
yellow: {
border: 'border-yellow-500 dark:border-yellow-400'
},
lime: {
border: 'border-lime-500 dark:border-lime-400'
},
green: {
border: 'border-green-500 dark:border-green-400'
},
emerald: {
border: 'border-emerald-500 dark:border-emerald-400'
},
teal: {
border: 'border-teal-500 dark:border-teal-400'
},
cyan: {
border: 'border-cyan-500 dark:border-cyan-400'
},
sky: {
border: 'border-sky-500 dark:border-sky-400'
},
blue: {
border: 'border-blue-500 dark:border-blue-400'
},
indigo: {
border: 'border-indigo-500 dark:border-indigo-400'
},
violet: {
border: 'border-violet-500 dark:border-violet-400'
},
purple: {
border: 'border-purple-500 dark:border-purple-400'
},
fuchsia: {
border: 'border-fuchsia-500 dark:border-fuchsia-400'
},
pink: {
border: 'border-pink-500 dark:border-pink-400'
},
rose: {
border: 'border-rose-500 dark:border-rose-400'
},
gray: {
border: 'border-gray-200 dark:border-gray-800'
}
},
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: 'gray',
size: 'xs',
type: 'solid'
}
}
}
})