> ## Documentation Index
> Fetch the complete documentation index at: https://neo.tvk.company/llms.txt
> Use this file to discover all available pages before exploring further.

# Divider

> A visual separator that adapts its orientation automatically based on the parent layout direction.

## Examples

<Tabs>
  <Tab title="Basic Dividers">
    <Frame caption="Dividers automatically adapt to horizontal and vertical layouts.">
      <img src="https://mintcdn.com/tvk/M1ZGdn8TY0ukkJe8/images/widgets/utilities/divider/divider_light.png?fit=max&auto=format&n=M1ZGdn8TY0ukkJe8&q=85&s=b487a1c885cbf2fed655fa0515fc39bf" noZoom className="block dark:hidden" width="1536" height="384" data-path="images/widgets/utilities/divider/divider_light.png" />

      <img src="https://mintcdn.com/tvk/M1ZGdn8TY0ukkJe8/images/widgets/utilities/divider/divider_dark.png?fit=max&auto=format&n=M1ZGdn8TY0ukkJe8&q=85&s=c60fc9eb5fb03b4ac7ac4fc46f7378b0" noZoom className="hidden dark:block" width="1536" height="384" data-path="images/widgets/utilities/divider/divider_dark.png" />
    </Frame>

    <CodeGroup>
      ```dart Horizontal Divider lines focus={5} theme={null}
      Column(
        children: [
          Text("Above"),
          Gap(theme.spacings.medium),
          NeoDivider(),
          Gap(theme.spacings.medium),
          Text("Below"),
        ],
      ),
      ```

      ```dart Vertical Divider lines focus={5} theme={null}
      Row(
        children: [
          Text("Left"),
          Gap(theme.spacings.medium),
          NeoDivider(),
          Gap(theme.spacings.medium),
          Text("Right"),
        ],
      ),
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Labeled Dividers">
    <Frame caption="Dividers with text labels for semantic separation.">
      <img src="https://mintcdn.com/tvk/M1ZGdn8TY0ukkJe8/images/widgets/utilities/divider/divider_labeled_light.png?fit=max&auto=format&n=M1ZGdn8TY0ukkJe8&q=85&s=ba50f093a9667bbcf7936098f15a677c" noZoom className="block dark:hidden" width="1536" height="384" data-path="images/widgets/utilities/divider/divider_labeled_light.png" />

      <img src="https://mintcdn.com/tvk/M1ZGdn8TY0ukkJe8/images/widgets/utilities/divider/divider_labeled_dark.png?fit=max&auto=format&n=M1ZGdn8TY0ukkJe8&q=85&s=cc6af9058e677edae5834cd28fc1fa81" noZoom className="hidden dark:block" width="1536" height="384" data-path="images/widgets/utilities/divider/divider_labeled_dark.png" />
    </Frame>

    <CodeGroup>
      ```dart Horizontal Labeled lines focus={4} theme={null}
      Column(
        children: [
          // ... Sign in form ...
          NeoDivider(label: "Or"),
          // ... Other sign in options ...
        ],
      ),
      ```

      ```dart Vertical Labeled lines focus={4} theme={null}
      Row(
        children: [
          // ... Left content ...
          NeoDivider(label: "Before -> After"),
          // ... Right content ...
        ],
      ),
      ```
    </CodeGroup>
  </Tab>
</Tabs>

## Properties

### Content

<ParamField path="label" type="String">
  Optional text label displayed in the center of the divider. Useful for semantic separation or indicating transitions between content sections.
</ParamField>

### Styling

<ParamField path="color" type="Color" default="theme.colors.borderTertiary">
  The color of the divider line.
</ParamField>

## Best Practices

* **Semantic Separation**: Use dividers to create logical groupings and improve content hierarchy
* **Label Usage**: Use the `label` property to provide context for content transitions (e.g., "Settings", "OR", "Advanced Options")
* **Spacing**: Combine with appropriate padding or margins for optimal visual balance

## Integration Notes

* **Layout Detection**: The widget automatically inspects its parent widget tree to determine orientation. If placed inside a `Column`, it renders horizontally; if inside a `Row`, it renders vertically.
* **Border Radius**: Uses `theme.radii.full` for fully rounded edge caps in the default theme. Can be customized through the [theming system](/theming/design-tokens).