---
name: separator
title: Separator
url: https://ui.frontic.com/components/ui/separator.md
tier: ui
install: npx @frontic/ui add separator
files:
  - components/ui/separator/Separator.vue
  - components/ui/separator/index.ts
dependencies:
  - "@vueuse/core"
  - class-variance-authority
  - reka-ui
---

# Separator

Draws a thin horizontal or vertical line between groups of content, hidden from screen readers unless it carries meaning.

## Install

```sh
npx @frontic/ui add separator
```

Used by: [Field](https://ui.frontic.com/components/ui/field.md), [Item](https://ui.frontic.com/components/ui/item.md), [Sidebar](https://ui.frontic.com/components/ui/sidebar.md), [Cart Summary](https://ui.frontic.com/components/sections/cart-summary.md), [Footer Brand](https://ui.frontic.com/components/sections/footer-brand.md), [Footer Minimal](https://ui.frontic.com/components/sections/footer-minimal.md), [Footer Trust](https://ui.frontic.com/components/sections/footer-trust.md), [Navigation Shop](https://ui.frontic.com/components/sections/navigation-shop.md), [Order Summary](https://ui.frontic.com/components/sections/order-summary.md), [Promo Code](https://ui.frontic.com/components/sections/promo-code.md), [Review Cards](https://ui.frontic.com/components/sections/review-cards.md), [Review List](https://ui.frontic.com/components/sections/review-list.md), [Reviews](https://ui.frontic.com/components/sections/reviews.md), [Settings](https://ui.frontic.com/components/sections/settings.md), [Cart Compact](https://ui.frontic.com/components/templates/cart-compact.md), [Cart Full](https://ui.frontic.com/components/templates/cart-full.md), [Cart Item Detailed](https://ui.frontic.com/components/templates/cart-item-detailed.md), [Cart Minimal](https://ui.frontic.com/components/templates/cart-minimal.md), [Category Filter](https://ui.frontic.com/components/templates/category-filter.md), [Category Grid](https://ui.frontic.com/components/templates/category-grid.md), [Checkout Page](https://ui.frontic.com/components/templates/checkout-page.md), [Filter Sheet](https://ui.frontic.com/components/templates/filter-sheet.md), [Filter Sidebar](https://ui.frontic.com/components/templates/filter-sidebar.md), [Filter Toolbar](https://ui.frontic.com/components/templates/filter-toolbar.md), [Header Checkout](https://ui.frontic.com/components/templates/header-checkout.md)

npm packages: `@vueuse/core`, `class-variance-authority`, `reka-ui`

## Examples

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

<template>
  <div class="flex max-w-sm flex-col gap-4 text-sm">
    <div class="flex flex-col gap-1.5">
      <div class="font-medium">Frost Escape Parka</div>
      <div>Insulated parka with a detachable hood and a two-way zip.</div>
    </div>
    <Separator />
    <div class="flex h-5 items-center gap-4">
      <div>Free shipping</div>
      <Separator orientation="vertical" />
      <div>30-day returns</div>
      <Separator orientation="vertical" />
      <div>Size guide</div>
    </div>
  </div>
</template>
```

## API reference

### Separator

Divides content into distinct sections.

`data-slot="separator"` · `Separator.vue`

Styling: `separator`, which extends [`divider`](https://ui.frontic.com/DESIGN.md#divider). Change it there and every part that extends it follows.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `orientation` | `DataOrientation`: `'vertical' \| 'horizontal'` | `'horizontal'` | Orientation of the component.<br><br>Either `vertical` or `horizontal`. Defaults to `horizontal`. |
| `decorative` | `boolean` | `true` | Whether or not the component is purely decorative.<br><br>When `true`, accessibility-related attributes are updated so that that the rendered element is removed from the accessibility tree. |
| `asChild` | `boolean` | `false` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details. |
| `as` | `AsTag \| Component`: `ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions> \| (props: any, ctx: Omit<{ attrs: Attrs; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<string, any>>(exposed?: Exposed \| undefined) => void; }, 'expose'>): any \| ComponentPublicInstanceConstructor<any, any, any, any, ComputedOptions, MethodOptions> \| 'a' \| 'button' \| 'div' \| 'form' \| 'h2' \| 'h3' \| 'img' \| 'input' \| 'label' \| 'li' \| 'nav' \| 'ol' \| 'p' \| 'span' \| 'svg' \| 'ul' \| 'template' \| {} & string` |  | The element or component this component should render as. Can be overwritten by `asChild`. |
| `class` | `ClassValue` |  | Classes added to the part's own element, after its recipe classes. |

## Styling

| Part | Recipe |
| --- | --- |
| `default` | [`separator`](https://ui.frontic.com/DESIGN.md#separator) |

## Source

`components/ui/separator/Separator.vue`

```vue
<script lang="ts">
/** Divides content into distinct sections. */
export default {}
</script>

<script setup lang="ts">
import type { SeparatorProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { cva } from 'class-variance-authority'
import { Separator, useForwardProps } from 'reka-ui'

const props = withDefaults(defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>(), {
  orientation: 'horizontal',
  decorative: true,
})

const delegatedProps = reactiveOmit(props, 'class')

const separator = cva('fui-separator', {
  variants: {
    orientation: {
      horizontal: 'fui-separator-horizontal',
      vertical: 'fui-separator-vertical',
    },
  },
  defaultVariants: { orientation: 'horizontal' },
})
const forwarded = useForwardProps(delegatedProps)
</script>

<template>
  <Separator data-slot="separator" v-bind="forwarded" :class="[separator({ orientation: props.orientation }), props.class]" />
</template>
```