Separator

Vue separator to visually or semantically divide sections of content and menus.

Show code

Features

Horizontal or vertical — Use the orientation prop to switch layout direction
Styled default — A subtle bg-border line that adapts to orientation
Customizable — Override with the class prop

Install from the Vuzeno registry:

      
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/separator.json

      
      npx shadcn-vue@latest add https://vuzeno.com/r/separator.json

      
      yarn dlx shadcn-vue@latest add https://vuzeno.com/r/separator.json

      
      pnpm dlx shadcn-vue@latest add https://vuzeno.com/r/separator.json

      
      <script setup lang="ts">
import { Separator } from "@/components/ui/separator";
</script>

<template>
  <Separator />
</template>

Use orientation="vertical" for a vertical separator.

Show code

Vertical separators between menu items with descriptions.

Show code

Horizontal separators between list items.

Show code

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Layout direction of the separator
`class`	`string`	—	Additional CSS classes