# Source: https://www.plain.com/docs/ui-components/divider.md

> ## Documentation Index
> Fetch the complete documentation index at: https://www.plain.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Divider

> Useful when you need a bit of structure.

<Frame><img src="https://mintcdn.com/plain/EjhjILX5S36Y2AF-/public/images/ui-component-divider.png?fit=max&auto=format&n=EjhjILX5S36Y2AF-&q=85&s=485fb9eb03e1e3b75005c867540520fe" alt="Example divider" data-og-width="1664" width="1664" data-og-height="300" height="300" data-path="public/images/ui-component-divider.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/plain/EjhjILX5S36Y2AF-/public/images/ui-component-divider.png?w=280&fit=max&auto=format&n=EjhjILX5S36Y2AF-&q=85&s=b6074a001e984253fe109f85d6f8b9d0 280w, https://mintcdn.com/plain/EjhjILX5S36Y2AF-/public/images/ui-component-divider.png?w=560&fit=max&auto=format&n=EjhjILX5S36Y2AF-&q=85&s=e16130cebf2304db36ef113a101994c3 560w, https://mintcdn.com/plain/EjhjILX5S36Y2AF-/public/images/ui-component-divider.png?w=840&fit=max&auto=format&n=EjhjILX5S36Y2AF-&q=85&s=9be6645eabcc9a355e5e0f6cf44f33ae 840w, https://mintcdn.com/plain/EjhjILX5S36Y2AF-/public/images/ui-component-divider.png?w=1100&fit=max&auto=format&n=EjhjILX5S36Y2AF-&q=85&s=cb98a0a23dab4da2431c1736051a1060 1100w, https://mintcdn.com/plain/EjhjILX5S36Y2AF-/public/images/ui-component-divider.png?w=1650&fit=max&auto=format&n=EjhjILX5S36Y2AF-&q=85&s=20d3bc062836d999ed5a7ebebcfef393 1650w, https://mintcdn.com/plain/EjhjILX5S36Y2AF-/public/images/ui-component-divider.png?w=2500&fit=max&auto=format&n=EjhjILX5S36Y2AF-&q=85&s=b6d2f3b4b6d4a824a9a887fac403eab8 2500w" /></Frame>

A divider has the following properties:

* `dividerSpacingSize` (optional): the spacing the divider should have before and after the component. One of `XS`, `S`,
  `M`, `L`, `XL`. Defaults to `S`.

For example:

<Tabs>
  <Tab title="Typescript SDK">
    <Snippet file="typescript-sdk/ui-divider.mdx" />
  </Tab>

  <Tab title="GraphQL">
    <Snippet file="graphql/ui-divider.mdx" />
  </Tab>
</Tabs>