NOCTA UI

Separator

A lightweight divider for grouping content sections horizontally or vertically.

Installation

Install the Separator component using the nocta-ui CLI:

npx @nocta-ui/cli add separator

Then import the component where you need it:

import { Separator } from '@/components/ui/separator';

Examples

Default Separator

Project Status

Track the latest updates from the team.

Next milestone

QA sign-off on Tuesday

Vertical Separator

OverviewBillingAutomation

Variants

Default Divider

Use the default separator for clear and balanced section breaks.

Subtle Divider

Use muted separators to softly separate dense content.

Api Reference

Prop

Type

Scroll Area

A stylized scroll container with composable viewport, custom indicators, and hover or scroll-driven visibility

Button

A versatile button component with multiple variants, sizes and dark mode support

On this page

Installation
Examples
Default Separator
Vertical Separator
Variants
Api Reference