Divider

The Divider component is a versatile component that displays a message to the user with various customization options. It supports different severity levels, variants, colors, and additional actions.

Installation

Install the package

npm i @start-base/start-ui

Add the styles

To use the React form elements styles in a Next.js project, import the styles in your layout.tsx file.

app/layout.tsx

import "@start-base/start-ui/styles.css";

Import the component

import Divider from '@start-base/start-ui/Divider';

Usages

Divider With Horizontal Orientation

Hello

World

Divider With Vertical Orientation

Hello

World

Divider With Children

Hello

Startbase

World

API

Name	Type	Default	Description
orientation	`string`	`'horizontal'`	Orientation of the Divider. Accepts values of type `'horizontal' \| 'vertical'`.
variant	`string`	`'full'`	Styling variant of the Divider. Accepts values of type `'full' \| 'start' \| 'center' \| 'end'`.
align	`string`	`'center'`	Content alignment of the Divider. Accepts values of type `'start' \| 'center' \|`.
color	`string`	`'var(--sui-border)'`	Divider lines color. Accepts any hex color value, CSS colors or variables.
size	`string`	`'1px'`	Divider line size. Accepts any pixel or REM value.
round	`boolean`	`false`	Controls whether the Divider line should have round corners or not.

DataTable Dropdown