9.7k

Separator

PreviousNext

Visually or semantically separates content.

Docs API Reference
Overview
Analytics
Settings
<!-- AUTO-GENERATED BY scripts/generate-custom-demos.ts. DO NOT EDIT DIRECTLY. -->
<script setup lang="ts">
import { VSeparator } from '@ui-kit/src/components/Base/VSeparator'
</script>

<template>
  <div class="flex w-full max-w-md items-center gap-4">
    <span>Overview</span>
    <VSeparator class="h-5" orientation="vertical" />
    <span>Analytics</span>
    <VSeparator class="h-5" orientation="vertical" />
    <span>Settings</span>
  </div>
</template>

Installation

pnpm dlx shadcn-vue@latest add separator

Usage

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

<template>
  <div>
    <div class="space-y-1">
      <h4 class="text-sm font-medium leading-none">
        Radix Primitives
      </h4>
      <p class="text-sm text-muted-foreground">
        An open-source UI component library.
      </p>
    </div>
    <Separator class="my-4" />
    <div class="flex h-5 items-center space-x-4 text-sm">
      <div>Blog</div>
      <Separator orientation="vertical" />
      <div>Docs</div>
      <Separator orientation="vertical" />
      <div>Source</div>
    </div>
  </div>
</template>
SelectSheet