Separator

Separator draws a thin rule between groups of content. Use orientation="vertical" inside a flex row with a set height. Set decorative={false} when the rule marks a real boundary that screen readers should announce.

Radix PrimitivesAn open-source UI component library.

Blog

Docs

Source

'use client';

import { Separator } from '@/components/nxds/components/separator/separator';

export default function SeparatorInContext() {
  return (
    <div className="nx:max-w-xs nx:rounded-lg nx:border-default nx:border-border-default nx:bg-container nx:p-4">
      <div className="nx:flex nx:flex-col nx:gap-1">
        <span className="nx:typography-label-default nx:text-container-foreground">
          Radix Primitives
        </span>
        <span className="nx:typography-label-default nx:text-muted-foreground">
          An open-source UI component library.
        </span>
      </div>
      <Separator className="nx:my-4" />
      <div className="nx:flex nx:h-5 nx:items-center nx:gap-3 nx:typography-label-default nx:text-muted-foreground">
        <span>Blog</span>
        <Separator orientation="vertical" />
        <span>Docs</span>
        <Separator orientation="vertical" />
        <span>Source</span>
      </div>
    </div>
  );
}

Installation

npx nxds-cli@latest add separator

Run npx nxds-cli@latest init first if nxds isn’t set up in your app yet. See Install.

Usage

import { Separator } from '@/components/nxds/components/separator/separator';

Examples

Vertical

Divide inline links with vertical rules inside a row of fixed height.

Docs

Source

Issues

'use client';

import { Separator } from '@/components/nxds/components/separator/separator';

export default function SeparatorVertical() {
  return (
    <div className="nx:flex nx:h-5 nx:items-center nx:gap-3 nx:typography-label-default nx:text-foreground">
      <span>Docs</span>
      <Separator orientation="vertical" />
      <span>Source</span>
      <Separator orientation="vertical" />
      <span>Issues</span>
    </div>
  );
}

Props

Separator

Separator adds no props of its own; it accepts the props of the element or primitive it wraps.

Separator draws a thin rule between groups of content. Use orientation="vertical" inside a flex row with a set height. Set :decorative="false" when the rule marks a real boundary that screen readers should announce.

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

<template>
  <div
    class="nx:max-w-xs nx:rounded-lg nx:border-default nx:border-border-default nx:bg-container nx:p-4"
  >
    <div class="nx:flex nx:flex-col nx:gap-1">
      <span class="nx:typography-label-default nx:text-container-foreground">
        Radix Primitives
      </span>
      <span class="nx:typography-label-default nx:text-muted-foreground">
        An open-source UI component library.
      </span>
    </div>
    <Separator class="nx:my-4" />
    <div
      class="nx:flex nx:h-5 nx:items-center nx:gap-3 nx:typography-label-default nx:text-muted-foreground"
    >
      <span>Blog</span>
      <Separator orientation="vertical" />
      <span>Docs</span>
      <Separator orientation="vertical" />
      <span>Source</span>
    </div>
  </div>
</template>

Installation

1
Install the following dependencies:
npm install @vueuse/core@^14.1.0 reka-ui@^2.11.0

Copy and paste the following code into your project.

components/separator/Separator.vue

<script setup lang="ts">
import { reactiveOmit } from '@vueuse/core';
import { Separator, type SeparatorProps as RekaSeparatorProps } from 'reka-ui';
import type { HTMLAttributes } from 'vue';

import { cn } from '../../lib/utils';

export interface SeparatorProps extends RekaSeparatorProps {
  class?: HTMLAttributes['class'];
}

const props = withDefaults(defineProps<SeparatorProps>(), {
  orientation: 'horizontal',
  decorative: true,
});

const delegated = reactiveOmit(props, 'class');
</script>

<template>
  <Separator
    v-bind="delegated"
    data-slot="separator"
    :class="
      cn(
        'nx:shrink-0 nx:bg-border-default',
        'nx:data-[orientation=horizontal]:h-px nx:data-[orientation=horizontal]:w-full',
        'nx:data-[orientation=vertical]:h-full nx:data-[orientation=vertical]:w-px',
        props.class
      )
    "
  />
</template>

components/separator/index.ts

export { default as Separator, type SeparatorProps } from './Separator.vue';

Keep each file at the path shown above it.
Paths are relative to packages/vue/src/. Keep the same folders under your @/ root, and the imports between files work without edits.

Usage

import { Separator } from '@/components/separator';

Examples

Vertical

Divide inline links with vertical rules inside a row of fixed height.

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

<template>
  <div
    class="nx:flex nx:h-5 nx:items-center nx:gap-3 nx:typography-label-default nx:text-foreground"
  >
    <span>Docs</span>
    <Separator orientation="vertical" />
    <span>Source</span>
    <Separator orientation="vertical" />
    <span>Issues</span>
  </div>
</template>

Props

Separator

Separator adds no props of its own; it accepts the props of the element or primitive it wraps.