Getting StartedInstallation and setup guides 5
LayoutWorkflow and structural layout components 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 5
FormInput and selection components 17
UtilityGeneral-purpose interface utilities 7
NavigationMenu surfaces and hierarchical actions 7
Overview API Styling Examples

Separator overview

Separator wraps the headless divider contract with default line styling while keeping the surface intentionally small: orientation plus decorative semantics.

Imports

Import the wrapper when you want the built-in line styling and the same compact API.

Component import

ts
import { TngSeparatorComponent } from '@tailng-ui/components';

Separator variants

The same horizontal and vertical wrapper rendered with local CSS or a Tailwind utility shell.

Plain CSS separator stack

OverviewIncidentsAlerts

Apply wrapper-level spacing and let the component provide the line contract.

Accessibility baseline

  • Keep decorative true for purely visual separators.
  • Set [decorative]="false" for structural separators that should be announced.
  • Use orientation="vertical" only when the line is visually vertical.