# Scroll Fade (/components/layout/scroll-fade)
Use `ScrollFade` when scrollable content should fade to indicate more content instead of showing a
native scrollbar. When the browser does not support the fade, the native scrollbar remains visible.
Read [Layout](/docs/layout#choose-a-layout-component) to choose a layout component.
apps/docs/src/examples/scroll-fade/basic.tsx
```tsx
import { Box } from '@luke-ui/react/box';
import { ScrollFade } from '@luke-ui/react/scroll-fade';
import { Text } from '@luke-ui/react/text';
export default () => {
return (
{['First item', 'Second item', 'Third item', 'Fourth item'].map((item) => (
{item}
))}
);
};
```
## Block axis [#block-axis]
Pass `axis="block"` to scroll on the block axis. The default `axis="inline"` scrolls on the inline
axis. Both values follow the element's writing mode.
apps/docs/src/examples/scroll-fade/block-axis.tsx
```tsx
import { ScrollFade } from '@luke-ui/react/scroll-fade';
import { Stack } from '@luke-ui/react/stack';
import { Text } from '@luke-ui/react/text';
export default () => {
return (
{['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item', 'Sixth item'].map(
(item) => (
{item}
),
)}
);
};
```
## Accessibility [#accessibility]
Pass exactly one of `aria-label` or `aria-labelledby`.
When content overflows, ScrollFade becomes a focusable, named region with a focus-visible treatment.
When the content fits, ScrollFade has no region role, accessible-name attribute, or extra tab stop.
ScrollFade always renders a `div`. Compose semantic structure around or inside it.
## API [#api]