---
title: Bleed
description: Used to break an element from the boundaries of its container
links:
  source: components/bleed
  storybook: layout-bleed--basic
---

<ExampleTabs name="bleed-basic" />

## Usage

```jsx
import { Bleed } from "@chakra-ui/react"
```

```jsx
<Bleed>
  <div />
</Bleed>
```

## Examples

### Vertical

Use the `block` prop to make the element bleed vertically.

<ExampleTabs name="bleed-vertical" />

### Specific Direction

Use the `inlineStart`, `inlineEnd`, `blockStart`, and `blockEnd` props to make
the element bleed in a specific direction.

<ExampleTabs name="bleed-with-direction" />

## Props

<PropTable component="Bleed" part="Bleed" />
