Scroll Area

Storybook

Augments native scroll functionality with custom, styled scrollbar overlays. Pure client-side — no server roundtrips.

Vertical Scroll

A fixed-height container with a vertical scrollbar. The classic shadcn tags list demo.

Tags

Elixir
Phoenix
LiveView
Tailwind
Alpine
Ecto
Oban
Bandit
Plug
Req
Jason
NimbleCSV
Swoosh
Bamboo
ExUnit
Credo
Dialyxir
Absinthe
Tesla
Flop
Ash
Broadway
GenStage
Flow
Membrane
Nerves
Livebook
Bumblebee

Horizontal Scroll

A row of cards that scrolls horizontally. Use scrollbars="horizontal".

Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
Card 7
Card 8
Card 9
Card 10
Card 11
Card 12

Both Directions

Large content that overflows both axes. Use scrollbars="both".

R1C1
R1C2
R1C3
R1C4
R1C5
R1C6
R2C1
R2C2
R2C3
R2C4
R2C5
R2C6
R3C1
R3C2
R3C3
R3C4
R3C5
R3C6
R4C1
R4C2
R4C3
R4C4
R4C5
R4C6
R5C1
R5C2
R5C3
R5C4
R5C5
R5C6
R6C1
R6C2
R6C3
R6C4
R6C5
R6C6
R7C1
R7C2
R7C3
R7C4
R7C5
R7C6
R8C1
R8C2
R8C3
R8C4
R8C5
R8C6
R9C1
R9C2
R9C3
R9C4
R9C5
R9C6
R10C1
R10C2
R10C3
R10C4
R10C5
R10C6
R11C1
R11C2
R11C3
R11C4
R11C5
R11C6
R12C1
R12C2
R12C3
R12C4
R12C5
R12C6
R13C1
R13C2
R13C3
R13C4
R13C5
R13C6
R14C1
R14C2
R14C3
R14C4
R14C5
R14C6
R15C1
R15C2
R15C3
R15C4
R15C5
R15C6
R16C1
R16C2
R16C3
R16C4
R16C5
R16C6
R17C1
R17C2
R17C3
R17C4
R17C5
R17C6
R18C1
R18C2
R18C3
R18C4
R18C5
R18C6
R19C1
R19C2
R19C3
R19C4
R19C5
R19C6
R20C1
R20C2
R20C3
R20C4
R20C5
R20C6

Custom Heights

The component works at any size. Here are three scroll areas at different heights.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20