Display@knitui/components

Separator

Separator renders a divider line — mirrors Mantine's Divider. Supports variant (solid/dashed/dotted), size (thickness), orientation (horizontal/vertical), and an optional label anchored left, center, or right.

WebiOSAndroid2 style slots3 own props10 examples

Stories Source Tests Open in Storybook

import { Separator } from "@knitui/components";

Playground

Loading playground…

orientationWhether the line runs horizontally or vertically.

variantBorder style of the line.

sizeThickness of the line — xxs→xxl or an explicit px number.

labelOptional text label rendered over a horizontal line.

labelPositionWhere the label sits along the horizontal line.

Playground

<Separator
  orientation="horizontal"
  variant="solid"
  size="xs"
/>

Examples

Variants

Every line style (solid, dashed, dotted) shown side by side.

Loading example…

VariantsSource Storybook

Sizes

All seven thickness levels from xxs to xxl.

Loading example…

SizesSource Storybook

Vertical

Vertical orientation — useful inside flex rows to divide sections.

Loading example…

VerticalSource Storybook

With Label Center

Label centered over the line — the default labelPosition.

Loading example…

With Label CenterSource Storybook

With Label Left

Label pinned to the left edge of the line.

Loading example…

With Label LeftSource Storybook

With Label Right

Label pinned to the right edge of the line.

Loading example…

With Label RightSource Storybook

With Icon Label

Label accepts any ReactNode — here a small icon is embedded inline.

Loading example…

With Icon LabelSource Storybook

Matrix

Full variant × size matrix for visual regression.

Loading example…

MatrixSource Storybook

Styles

Per-slot styles targets individual parts — here the line and the label.

Loading example…

StylesSource Storybook

Props

Prop	Type	Default	Description
`disabled` system	`boolean \| undefined`	—
`label`	`ReactNode`	—	Optional text label rendered over a horizontal line.
`labelPosition`	`SeparatorLabelPosition \| undefined` left · center · right	—	Where the label sits along the horizontal line.
`orientation`	`SeparatorOrientation \| undefined` horizontal · vertical	`horizontal`	Whether the line runs horizontally or vertically.
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`size` system	`SeparatorSize \| undefined` xxs · xs · sm · md · lg · xl · xxl	`xs`	Thickness of the line — xxs→xxl or an explicit px number.
`styles` system	`SlotStyles<SeparatorStyles> \| undefined`	—	Per-slot style sugar — props spread onto the matching styled part.
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element
`variant` system	`SeparatorVariant \| undefined` solid · dashed · dotted	`solid`	Border style of the line.

Style slots

Every part of Separator can be styled through the styles prop. Explicit props on the component always win over slot styles.

Slot	Usage
`label`	`styles={{ label: { … } }}`
`line`	`styles={{ line: { … } }}`

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiElement> \| undefined`

Plus 501 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.