#### Standard Use

```jsx padded
import { useState } from 'react';

const [dIsVisible, setDIsVisible] = useState(false);
const [uIsVisible, setUIsVisible] = useState(false);
const [lIsVisible, setLIsVisible] = useState(false);
const [rIsVisible, setRIsVisible] = useState(false);
<>
	<div style={{ display: 'flex', alignItems: 'center' }}>
		<button onClick={() => setDIsVisible(!dIsVisible)}>Toggle Down</button>
		<button onClick={() => setUIsVisible(!uIsVisible)}>Toggle Up</button>
		<button onClick={() => setLIsVisible(!lIsVisible)}>Toggle Left</button>
		<button onClick={() => setRIsVisible(!rIsVisible)}>Toggle Right</button>
	</div>
	<Slide direction="down" isVisible={dIsVisible}>
		<p>Content</p>
	</Slide>
	<Slide direction="up" isVisible={uIsVisible}>
		<p>Content</p>
	</Slide>
	<Slide direction="left" isVisible={lIsVisible}>
		<p>Content</p>
	</Slide>
	<Slide direction="right" isVisible={rIsVisible}>
		<p>Content</p>
	</Slide>
</>;
```

#### Retract Enabled

```jsx padded
import { useState } from 'react';

const [dIsVisible, setDIsVisible] = useState(false);
const [uIsVisible, setUIsVisible] = useState(false);
const [lIsVisible, setLIsVisible] = useState(false);
const [rIsVisible, setRIsVisible] = useState(false);
<>
	<div style={{ display: 'flex', alignItems: 'center' }}>
		<button onClick={() => setDIsVisible(!dIsVisible)}>Toggle Down</button>
		<button onClick={() => setUIsVisible(!uIsVisible)}>Toggle Up</button>
		<button onClick={() => setLIsVisible(!lIsVisible)}>Toggle Left</button>
		<button onClick={() => setRIsVisible(!rIsVisible)}>Toggle Right</button>
	</div>
	<Slide direction="down" retract isVisible={dIsVisible}>
		<p>Content</p>
	</Slide>
	<Slide direction="up" retract isVisible={uIsVisible}>
		<p>Content</p>
	</Slide>
	<Slide direction="left" retract isVisible={lIsVisible}>
		<p>Content</p>
	</Slide>
	<Slide direction="right" retract isVisible={rIsVisible}>
		<p>Content</p>
	</Slide>
</>;
```

#### Varied Distance

```jsx padded
import { useState } from 'react';

const [dIsVisible, setDIsVisible] = useState(false);
const [uIsVisible, setUIsVisible] = useState(false);
const [lIsVisible, setLIsVisible] = useState(false);
const [rIsVisible, setRIsVisible] = useState(false);
<>
	<div style={{ display: 'flex', alignItems: 'center' }}>
		<button onClick={() => setDIsVisible(!dIsVisible)}>Toggle 50 Down</button>
		<button onClick={() => setUIsVisible(!uIsVisible)}>Toggle 500 Up</button>
		<button onClick={() => setLIsVisible(!lIsVisible)}>Toggle 500 Left</button>
		<button onClick={() => setRIsVisible(!rIsVisible)}>Toggle 50 Right</button>
	</div>
	<Slide direction="down" distance={50} isVisible={dIsVisible}>
		<p>Content</p>
	</Slide>
	<Slide direction="up" distance={500} isVisible={uIsVisible}>
		<p>Content</p>
	</Slide>
	<Slide direction="left" distance={500} isVisible={lIsVisible}>
		<p>Content</p>
	</Slide>
	<Slide direction="right" distance={50} isVisible={rIsVisible}>
		<p>Content</p>
	</Slide>
</>;
```