Logo

Separator

Visual and semantic dividers with horizontal, vertical, decorative, custom styling, and RTL support.

Preview

Release notes

Small fixes, clearer navigation, and a few quality-of-life updates.

Updated 12 minutes ago by the docs team.

Usage

TS 

import { FrSeparatorModule } from '@frame-ui-ng/components/separator';

HTML 

<div frSeparator></div>

Examples

Basic

Use a horizontal separator to create a quiet visual break between related pieces of content.

Release notes

Small fixes, clearer navigation, and a few quality-of-life updates.

Updated 12 minutes ago by the docs team.

Vertical

Set orientation to vertical when the separator sits between inline links, actions, or metadata.

Menu

Separators can group stacked action rows without requiring a dedicated menu component.

NotificationsChoose when the workspace should interrupt you.
SecurityReview sessions, passkeys, and recovery methods.
BillingManage invoices, seats, and payment details.

List

Use separators between rows when the row content has enough visual weight to benefit from a divider.

Drafts reviewed18
Comments resolved42
Ready to publish7

Semantic

Set decorative to false when assistive technology should announce the separator as a structural boundary.

Keyboard region

Use a semantic separator when the boundary itself communicates structure.

Decorative separators remain presentation-only by default.

RTL

Separator sizing and spacing use logical properties, so horizontal and vertical patterns work in RTL layouts.

ملخص المساحة

تساعد الفواصل على تنظيم المعلومات داخل الواجهات ثنائية الاتجاه.

Custom Styling

Override separator tokens on the separator itself or on an ancestor to adjust color, thickness, radius, and orientation-specific spacing.

Repository health

Checks passing98%

Use local token overrides when a separator needs stronger visual rhythm.

Token Inspector

Hover the card, horizontal separator, or vertical separator to inspect the tokens that control the separator surface and sizing.

Workspace summary

Three high-priority updates are waiting for review.

Open12 issues

Design Tokens

Use these CSS custom properties to tune separator color, thickness, radius, and orientation-specific sizing or spacing.

SCSS 

--frame-separator-color: var(--frame-border);
--frame-separator-thickness: 1px;
--frame-separator-radius: 999px;
--frame-separator-horizontal-width: 100%;
--frame-separator-horizontal-margin-block: 0;
--frame-separator-vertical-height: 100%;
--frame-separator-vertical-margin-inline: 0;