Separator

Separator visually divides related content. Do not use it as the only heading or landmark for a new section.

Code

<div className="tw:flex tw:flex-col tw:gap-4">
  <div className="tw:flex tw:flex-col tw:gap-2">
    <span className="tw:text-sm">Horizontal</span>
    <Separator orientation="horizontal" />
  </div>

  <div className="tw:flex tw:h-8 tw:items-center tw:gap-2">
    <span className="tw:text-sm">Left</span>
    <Separator orientation="vertical" />
    <span className="tw:text-sm">Right</span>
  </div>
</div>

API

Separator

Name	Type/Description
className	string | ((state: SeparatorState) => string | undefined) | undefined CSS class applied to the element, or a function that returns a class based on the component's state.
orientation = "horizontal"	Orientation | undefined The orientation of the separator.
ref	((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined
render	ReactElement<any, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SeparatorState> | undefined Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	CSSProperties | ((state: SeparatorState) => CSSProperties | undefined) | undefined Style applied to the element, or a function that returns a style object based on the component's state.