Scroller
Use Scroller for horizontal content that should preserve native scrolling and expose visible navigation controls.
Source
LLM docs
Package
Examples
5
Properties
39
Hooks
1
Basics
Controls appear only when there is content to scroll in their direction.
Loading demo…
import { Badge, Block, Scroller } from '@plocks/ui';
export function Demo() {
return (
<Block fullWidth>
<Scroller>
{Array.from({ length: 20 }, (_, i) => (
<Badge key={i} m="xs">
Badge {i + 1}
</Badge>
))}
</Scroller>
</Block>
);
}Controls and Scroll Amount
controlSize and scrollAmount tune the edge controls and their movement.Loading demo…
import { Badge, Block, Scroller } from '@plocks/ui';
export function Demo() {
return (
<Block fullWidth>
<Scroller scrollAmount={300} controlSize="lg" showEndControl>
{Array.from({ length: 20 }, (_, i) => (
<Badge key={i} m="xs">
Item {i + 1}
</Badge>
))}
</Scroller>
</Block>
);
}Mouse Drag Scrolling
Drag with a mouse on web; touch scrolling remains native.
Loading demo…
import { Badge, Block, Scroller } from '@plocks/ui';
export function Demo() {
return (
<Block fullWidth>
<Scroller draggable>
{Array.from({ length: 20 }, (_, i) => (
<Badge key={i} m="xs">
Item {i + 1}
</Badge>
))}
</Scroller>
</Block>
);
}Custom Icons
startControlIcon and endControlIcon replace the chevrons.Loading demo…
import { Badge, Block, Icon, Scroller } from '@plocks/ui';
export function Demo() {
return (
<Block fullWidth>
<Scroller
startControlIcon={<Icon name="arrow-left" />}
endControlIcon={<Icon name="arrow-right" />}
showStartControl
showEndControl
>
{Array.from({ length: 20 }, (_, i) => (
<Badge key={i} m="xs">
Item {i + 1}
</Badge>
))}
</Scroller>
</Block>
);
}Tab-like Chips
Scroller can hold a long horizontal row of navigation chips.
Loading demo…
import { Block, Chip, Scroller } from '@plocks/ui';
export function Demo() {
return (
<Block fullWidth>
<Scroller>
{Array.from({ length: 16 }, (_, i) => (
<Chip key={i} m="xs">
Section {i + 1}
</Chip>
))}
</Scroller>
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources