UIPackage
Vue React

Separator

Vue layout
Edit on GitHub

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

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

Or with the named registry: npx shadcn-vue@latest add @uipkge/separator

Examples

Props

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

Dependencies

@vueuse/corereka-ui

Used by

auth-sign-inauth-sign-upcheckout-flowdashboard-layoutdata-tableevent-calendarfooter-01login-01login-02register-01rich-text-editorsidebar

Files (2)

  • app/components/ui/separator/Separator.vue 0.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>
  • app/components/ui/separator/index.ts 0.1 kB 
    export { default as Separator } from './Separator.vue'

Raw manifest: https://uipkge.dev/r/vue/separator.json