> ## Documentation Index > Fetch the complete documentation index at: https://docs.flowx.ai/llms.txt > Use this file to discover all available pages before exploring further. # Separator > A visual divider component used to group and separate UI content in screens. ## Overview Use a Separator when you need a clear visual boundary between two regions of a screen — for example, between a form section and an action bar, between repeated rows in a list, or between groups of related fields. Unlike empty containers or padding, a Separator carries explicit meaning to the reader: "this is one section, this is another." The Separator is allowed inside any container component (Card, Container, Collection) as well as inside chat layouts and process screens. ## Properties | Property | Type | Description | | ------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------ | | **Visibility** | Expression | JavaScript expression that hides the Separator when truthy. | | **Theme overrides** | Object | Override `color`, `borderWidth`, or other theme tokens for this instance only. See the Conditional styling guide for examples. | The Separator has no process-data binding — it is purely presentational. ## Theme configuration Defaults from the platform theme: | Token | Default | Description | | ------- | -------------------- | ------------------------------------------------------------------------------------------------ | | `color` | `color@neutrals#200` | Line color. Override at the theme level for global changes, or per instance via theme overrides. | To override the default for an entire workspace, edit the **Theme → Components → Separator** section in the Designer. ## Related resources Compose screens in the UI Designer. Apply dynamic styles and theme overrides.