# Angled divider (goodtabs UI)

A slanted section edge with a fixed pixel rise and a live angle readout.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/angled-divider.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/angled-divider`

## Usage

```tsx
import { AngledDivider } from "@/components/ui/angled-divider"

<AngledDivider rise={48}>
  <h2>Section title</h2>
</AngledDivider>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| rise | `number` | `48` | Pixels the bottom edge rises across the full width. |

## When to use

- Section breaks where the cut should look the same on phone and desktop
- Pages that explain how an angle follows from a width

## When not to use

- Content that must not be clipped near the edge: the cut hides the corner
- Sections that need a border or shadow on the slanted edge, since clip-path removes them

## Notes for agents

- It keeps the pixel rise, not the angle, so the angle is measured with a ResizeObserver and shown
- Bottom padding grows by the rise so content stays clear of the cut
- Pass a background through className, it defaults to bg-muted

## The maths

- Angle = atan(rise / W), so a 32px rise over 256px is 7.13° and over 1024px is 1.79°.
- Clip-path: polygon(0 0, 100% 0, 100% calc(100% - rise), 0 100%) keeps the rise in pixels at every width.

Docs: https://ui.goodtabs.co/components/angled-divider