Layout

Separator

Visually or semantically separates content. Renders as an hr element with proper accessibility.

Preview

A preview of the Separator component with interactive controls.

Preview Code

Interactive

Installation

Add the Separator component to your project.

Bash

ng g @ng-cn/core:c separator

Usage

Import and use the Separator component in your Angular application.

Template TypeScript

template.html

<div class="w-full max-w-md">
  <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="space-y-1">
    <h4 class="text-sm font-medium leading-none">Installation</h4>
    <p class="text-sm text-muted-foreground">How to install dependencies and structure your app.</p>
  </div>
</div>

Examples

Explore different variations and use cases for the Separator component.

Horizontal

Default horizontal separator between content sections.

Preview Code

Interactive

Vertical

Vertical separator between inline elements.

Preview Code

Interactive

In Navigation

Separator used in navigation menus.

Preview Code

Interactive

With Text Label

Separator with centered text label.

Preview Code

Interactive

In Card Layout

Separator between card sections.

Preview Code

Interactive

API Reference

Props

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	The orientation of the separator.
`decorative`	`boolean`	`true`	Whether the separator is decorative (aria-hidden).
`class`	`string`	—	Additional CSS classes.