Separator — Frontfriend

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to Reka UI.

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download separator -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

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

const args = {
  "orientation": "horizontal",
  "align": "center",
  "noPadding": false,
  "decorative": true,
  "children": "Section",
} satisfies Partial<
  InstanceType<typeof Separator> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & {
    orientation?: "horizontal" | "vertical";
    align?: "start" | "center" | "end";
  };
</script>

<template>
  <div style="width: 320px; height: 160px">
    <Separator
      :orientation="args.orientation"
      :align="args.align"
      :no-padding="args.noPadding"
      >{{ args.children }}</Separator
    >
  </div>
</template>

Examples

Default

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

const args = {
  "orientation": "horizontal",
  "align": "center",
  "noPadding": false,
  "decorative": true,
} satisfies Partial<
  InstanceType<typeof Separator> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & {
    orientation?: "horizontal" | "vertical";
    align?: "start" | "center" | "end";
  };
</script>

<template>
  <div class="w-[420px] space-y-4">
    <div class="space-y-1">
      <h4 class="text-sm font-medium leading-none">Radix Primitives</h4>
      <p class="text-sm text-neutral-mid">
        An open-source UI component library.
      </p>
    </div>
    <Separator no-padding />
    <div class="flex h-5 items-center gap-4 text-sm">
      <div>Blog</div>
      <Separator orientation="vertical" no-padding />
      <div>Docs</div>
      <Separator orientation="vertical" no-padding />
      <div>Source</div>
    </div>
  </div>
</template>

With Text

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

const args = {
  "orientation": "horizontal",
  "align": "center",
  "noPadding": false,
  "decorative": true,
} satisfies Partial<
  InstanceType<typeof Separator> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & {
    orientation?: "horizontal" | "vertical";
    align?: "start" | "center" | "end";
  };
</script>

<template>
  <div class="flex h-[200px] w-[400px] items-center justify-center">
    <Separator v-bind="args">Section</Separator>
  </div>
</template>

Vertical

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

const args = {
  "orientation": "vertical",
  "align": "center",
  "noPadding": false,
  "decorative": true,
} satisfies Partial<
  InstanceType<typeof Separator> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & {
    orientation?: "horizontal" | "vertical";
    align?: "start" | "center" | "end";
  };
</script>

<template>
  <div class="flex h-[200px] w-[400px] items-center justify-center">
    <Separator v-bind="args">Section</Separator>
  </div>
</template>

Custom

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

const args = {
  "orientation": "horizontal",
  "align": "center",
  "noPadding": false,
  "decorative": true,
} satisfies Partial<
  InstanceType<typeof Separator> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & {
    orientation?: "horizontal" | "vertical";
    align?: "start" | "center" | "end";
  };
</script>

<template>
  <div class="flex h-[200px] w-[400px] items-center justify-center">
    <Separator v-bind="args">
      <Badge variant="secondary">Section with badge</Badge>
    </Separator>
  </div>
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

Prop	Type	Default	Description
`align`	`"center" \| "end" \| "start"`	`—`	Where slotted content is placed relative to the separator line.
`class`	`HTMLAttributes["class"]`	`—`	Additional class names for the separator line.
`noPadding`	`boolean`	`—`	Removes the default outer padding from the separator wrapper.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.