The visual divider is a layout element that helps to separate pieces of content into clear groups, sections, options, or parts. This way, it helps a designer organize the page according to the typical patterns of visual perception and makes the layout clearer and more digestible for users.
Playground
<ply-divider>Divider</ply-divider>
By default render horizontal divider when use <ply-divider></ply-divider>
Section 1
Section 2
Section 3
<p>Section 1</p> <ply-divider class="my-4"></ply-divider> <p>Section 2</p> <ply-divider class="my-4"></ply-divider> <p>Section 3</p>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add divider
// Paths are relative to aliases.components (default: src/app/components)
import { DividerComponent } from './divider/divider.component';
@Component({
selector: 'app-divider-example',
imports: [
DividerComponent
],
template: `...`
})
export class DividerExampleComponent {}Install
npx ply-ui-cli add divider
Use attribute vertical="true", as well with vertical we need to specify the height of the divider with Tailwindcss class name.
Section 1
Section 2
Section 3
<div class="flex gap-4 items-center justify-center"> <p>Section 1</p> <ply-divider class="mx-4 h-6" vertical="true"></ply-divider> <p>Section 2</p> <ply-divider class="mx-4 h-6" vertical="true"></ply-divider> <p>Section 3</p> </div>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add divider
// Paths are relative to aliases.components (default: src/app/components)
import { DividerComponent } from './divider/divider.component';
@Component({
selector: 'app-divider-example',
imports: [
DividerComponent
],
template: `...`
})
export class DividerExampleComponent {}Install
npx ply-ui-cli add divider
Run the following command to add this component to your project:
npx ply-ui-cli add divider
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.
npx -y ply-ui-mcp
Ply provides standalone components. Import the exact elements you want to use into your component.
// Install: npx ply-ui-cli add divider
// Paths are relative to aliases.components (default: src/app/components)
import { DividerComponent } from './divider/divider.component';
@Component({
selector: 'app-your-component',
imports: [
DividerComponent
],
template: `...`
})
export class YourComponent {} API for divider — generated from JSDoc in the library source.
| API | Member | Type | Default | Description |
|---|---|---|---|---|
ply-divider | class | string | '' | Additional host CSS classes (merged via cn()). |
ply-divider | vertical | boolean | false | If true, renders the divider vertically. |
Content