---
title: Divider
description: A thin line that separates content into groups.
---
import Source from './_generated/divider.mdx';

A hairline that separates content, drawn in the platform separator color. Full-bleed by default, with inset and middle variants for list alignment, plus a vertical orientation.

<DemoFrame component="divider" />

## Installation

```bash
npx touchcn add divider
```

## Usage

<CodeGroup>

```html Angular
<tcn-divider />
<tcn-divider variant="inset" />
<tcn-divider vertical />
```

```tsx React
import { TcnDivider } from '@/components/ui/divider';

<TcnDivider />
<TcnDivider variant="inset" />
<TcnDivider vertical />
```

```vue Vue
<script setup lang="ts">
import { TcnDivider } from '@/components/ui/divider';
</script>

<template>
  <TcnDivider />
  <TcnDivider variant="inset" />
  <TcnDivider vertical />
</template>
```

</CodeGroup>

## Props

| Prop       | Type                            | Default  | Description                                   |
| ---------- | ------------------------------- | -------- | --------------------------------------------- |
| `variant`  | `'full' \| 'inset' \| 'middle'` | `'full'` | Full-bleed, list-aligned inset, or both ends. |
| `vertical` | `boolean`                       | `false`  | Draw a vertical rule that stretches to fill.  |

<Source />