---
title: Divider | UI
description: Divider can visually separate content in a given list or group.
pageTitle: Divider
pageDescription: Divider can visually separate content in a given list or group.
showHeader: true
---

import { Meta } from '@storybook/addon-docs';

<Meta title="components/Layout/Divider" />

import { Divider, VStack, HStack } from './Divider';
import { transformedCode } from '../../../utils';
import { AppProvider, CodePreview, Text } from '@gluestack/design-system';

import { styled } from '@dank-style/react';

import Wrapper from '../../Wrapper';

# Installation

This command copies the `Divider` component to your project.

```jsx
npx install @gluestack-ui add divider
```

## Import

```jsx
// import the component from your component folder
import { Divider } from 'components';
```

<br />

# Basic

<AppProvider>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
  <Text>
    Easy
  </Text>
  <Divider />
  <Text>
    Difficult
  </Text>
`,
      transformCode: (code) => {
        return transformedCode(code);
      },
      scope: {
        Wrapper,
        Divider,
        Text,
      },
      argsType: {},
    }}
  />
</AppProvider>
<br />

## Anatomy

The Divider component consists of the following parts:

```jsx
export default () => <Divider />;
```

## API Reference

### Divider

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view#props) component.

<br />
<br />

## Examples

### Variants

<AppProvider>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
<HStack>
  <Text>Simple</Text>
  <Divider
    variant="vertical"
    sx={{ mx: 10, bg: '$emerald500', h: 30 }}
  />
  <Text>Easy</Text>
  <Divider
    sx={{ mx: 10, bg: '$indigo500', h: 30 }}
    variant="vertical"
  />
  <Text>Beautiful</Text>
</HStack>
<VStack>
  <Text>Firefox</Text>
  <Divider variant="horizontal" sx={{ bg: '$red500' }} />
  <Text>Chrome</Text>
</VStack>
`,
transformCode: (code) => {
return transformedCode(code);
},
scope: {
Wrapper,
Divider,
VStack,
HStack,
Text,
},
argsType: {},
}}
/>

</AppProvider>

<br />

# Advanced

## Customizing the Divider

For customizing the Divider, you have to map styled view to Divider. You can refer [dank.style](https://dank.style/) for more information on how to use styled components.

### Usage

```jsx
// import the styles
import { Root } from '../components/core/divider/styled-components';

// import the createDivider function
import { createDivider } from '@gluestack-ui/divider';

// Understanding the API
const Divider = createDivider({
  Root,
});

// Using the Divider component
export default () => <Divider />;
```

Default styling of the component can be found in the `components/divider` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/development/example/storybook/src/ui-components/Divider/index.tsx) of the styled `Divider` component.