Divider

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.

free

Horizontal Divider

By default render horizontal divider when use <base-divider></base-divider>

Section 1

Section 2

Section 3

HTML

Vertical 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

HTML

Installation

Run the following command to add this component to your project:

bash

npx base-ui-cli add divider

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.

bash

npx -y base-ui-mcp

Base UI provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx base-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 reference for divider
API	Member	Type	Default	Description
`base-divider`	`class`	`string`	`''`	Additional host CSS classes (merged via cn()).
`base-divider`	`vertical`	`boolean`	`false`	If true, renders the divider vertically.