Separator

separatorui

Horizontal or vertical visual divider — a `<div>` with the right ARIA role and a registry-token border color. Use between sections, list rows, and toolbar groups.

Also available for React ->

Installation

$pnpm dlx shadcn-vue@latest add https://uipkge.dev/r/vue/separator.json

$npx shadcn-vue@latest add https://uipkge.dev/r/vue/separator.json

$yarn dlx shadcn-vue@latest add https://uipkge.dev/r/vue/separator.json

$bunx shadcn-vue@latest add https://uipkge.dev/r/vue/separator.json

Named registry:npx shadcn-vue@latest add @uipkge/separatorInstalls to:app/components/ui/separator/

Examples

Loading interactive previews…

Props

Name	Type / Values	Default	Required
`class`	`HTMLAttributes['class']`	—	optional

npm dependencies

@vueuse/core reka-ui

Files installed (2)

app/components/ui/separator/Separator.vue0.8 kB

<script setup lang="ts">
import type { SeparatorProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { Separator } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = withDefaults(defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>(), {
  orientation: 'horizontal',
  decorative: true,
})

const delegatedProps = reactiveOmit(props, 'class')
</script>

<template>
  <Separator
    data-uipkge
    data-slot="separator"
    v-bind="delegatedProps"
    :class="
      cn(
        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
        props.class,
      )
    "
  />
</template>