UILab

Separator

Visually or semantically separates content.

uilab-core
AILab Design System
A set of beautifully designed components that you can customize, extend, and build on inspired by shadcn/ui.
"use client"

import { Separator } from "uilab-core"

export function SeparatorPreview() {

Usage

import { Separator } from "uilab-core"
<Separator />

Examples

Vertical

Use orientation="vertical" for a vertical separator.

Blog
Docs
Source
"use client"

import { Separator } from "uilab-core"

export function SeparatorVerticalExample() {

Vertical separators between menu items with descriptions.

SettingsManage preferences
AccountProfile & security
"use client"

import { Separator } from "uilab-core"

export function SeparatorMenuExample() {

List

Horizontal separators between list items.

Item 1
Value 1
Item 2
Value 2
Item 3
Value 3
"use client"

import { Separator } from "uilab-core"

export function SeparatorListExample() {

On this page