tuil
ReferenceComponentsTypography and status

Divider

Divider component API, behavior, and executable example.

View rawEdit

Loading executable example…

API and events

Render styled terminal copy, hierarchy, separators, labels, and compact status signals with semantic metadata.

export function Divider({
  width = 40,
  orientation = "horizontal",
  title,
  slots,
  slotProps,
  ...props
}: DividerProps): ReactNode;

Props, functions, and events

MemberTypeRequiredDescriptionRelated types
idstring | undefinedNoThe id member uses the string | undefined contract.
testIdstring | undefinedNoThe testId member uses the string | undefined contract.
labelstring | undefinedNoThe label member uses the string | undefined contract.
widthnumber | undefinedNoThe width member uses the number | undefined contract.
orientation"horizontal" | "vertical" | undefinedNoThe orientation member uses the "horizontal" | "vertical" | undefined contract.
titlestring | undefinedNoThe title member uses the string | undefined contract.
slotsPartial<SlotComponents<&#123; root: import("../../../registry/data-display/text").TextProps; &#125;>> | undefinedNoThe slots member uses the Partial<SlotComponents<&#123; root: import("../../../registry/data-display/text").TextProps; &#125;>> | undefined contract.SlotComponents, TextProps
slotPropsPartial<SlotProps<&#123; root: import("../../../registry/data-display/text").TextProps; &#125;, object>> | undefinedNoThe slotProps member uses the Partial<SlotProps<&#123; root: import("../../../registry/data-display/text").TextProps; &#125;, object>> | undefined contract.SlotProps, TextProps
unstyledboolean | undefinedNoThe unstyled member uses the boolean | undefined contract.
variantstring | undefinedNoThe variant member uses the string | undefined contract.
size"sm" | "md" | "lg" | undefinedNoThe size member uses the "sm" | "md" | "lg" | undefined contract.

No events are emitted.

Callback props run after the documented input is accepted. Callbacks are not cancellable unless their return type or description states otherwise.

Interaction and capabilities

Read-only presentation; accessibility lives in semantic role and label metadata.

The published manifest records keyboard, focus, pointer, theme, terminal, semantic, event, and dependency requirements.

Complete import

import { Divider } from "@/components/tuil/data-display/text";

On this page