Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Custom Inputs
Select
Components
Components
78
Micro Charts
Navigation
Libraries
Content Editor
Data View
Form Builder
Image Designer
Kanban Board
PDF Viewer
Video Player
Visual Builder
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Buy License

Divider

Divider is a visual separator between related groups of content or actions. Use ngs-divider for a horizontal or vertical rule, with optional inset and fixedHeight support. Use ngs-text-divider when the separator needs a short label, such as “or”.

Use it in lists, forms, panels, cards, toolbars, popovers, settings screens, and dense layouts where a clear boundary between groups helps scanning. Do not use Divider to create empty space or layout structure; use Tailwind spacing and layout classes for that. Prefer specialized dividers inside components that provide them, such as MenuDivider, NavigationDivider, SidebarDivider, or CommandBarDivider.

The NgStarter Angular Divider component lets you separate related groups of content or actions with a visual rule. Use ngs-divider in lists, forms, panels, cards, toolbars, popovers, settings screens, and dense layouts where a clear boundary between groups helps scanning. It includes examples for Basic Divider, Text Divider, and Divider overview.

Basic Divider

Use Divider to separate related groups in a panel, form, list, card, toolbar, or settings surface. Horizontal dividers separate sections; vertical dividers separate inline actions or columns.

Horizontal

Horizontal inset

Section 1
Section 2

Vertical

Item 1
Item 2
Item 3

Vertical fixed height

Item 1
Item 2
Item 3

Text Divider

Use Text Divider when the separator itself needs a short label, commonly for alternative actions such as “or”.

Text dividers

or
Or register with
any text