Separator

Visually or semantically separates content.

Section one

Section two

Left

Right

Installation

npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/separator.json

Usage

Use a separator to divide content groups horizontally or vertically.

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

<template>
  <div>
    <div>Section one</div>
    <Separator class="my-4" />
    <div>Section two</div>
  </div>
</template>

Pass orientation="vertical" for an upright divider.