Bleed
Component
A built-in component to slightly expand content beyond the container’s width, <Bleed>
allows it
to overflow on both sides.
It’s ideal for enhancing the presentation of graphical elements, offering a more immersive and visually appealing reading experience.
Exported from nextra/components
.
Props
Name | Type | Default |
---|---|---|
full | boolean Extend content to the very edges of its container. | |
...props | HTMLAttributes<HTMLDivElement> |
Example
You can put text, image, video or any component inside.
Text
There is nothing to writing. All you do is sit down at a typewriter and bleed.
— Ernest Hemingway
Video
Full-bleed
You can even make it full-bleed by using <Bleed full>
:

Usage
MDX
import { Bleed } from 'nextra/components'
<Bleed>Hey, I can use **Markdown** syntax here.</Bleed>
<Bleed full></Bleed>
<Bleed full>
<iframe
src="https://codesandbox.io/embed/swr-states-4une7"
width="100%"
height="500px"
title="SWR-States"
/>
</Bleed>