Amet minim esse sunt officia dolor ut occaecat Lorem nulla anim ipsum. Anim proident labore incididunt dolore. Et anim voluptate enim deserunt fugiat occaecat excepteur eiusmod ut duis. Laborum ex Lorem nisi enim nisi officia anim elit dolore dolore ad nostrud magna do. Aute sunt aliqua ut dolore elit quis cupidatat. Excepteur Lorem proident occaecat minim ex esse esse do. Id sunt elit nostrud consequat ut non aliquip elit est sit.
Et aliqua dolor consequat culpa cupidatat nisi. Eu commodo ipsum eiusmod cillum. Reprehenderit dolore id irure duis veniam non minim adipisicing excepteur sunt. Sit cupidatat nostrud voluptate ea reprehenderit cillum quis exercitation do culpa. Minim nisi tempor aliquip occaecat nisi deserunt minim ut adipisicing deserunt nulla. Id sint anim eu et cupidatat labore amet sunt mollit quis quis laborum cillum velit. Duis ad aliqua laboris cillum aute aliquip.
Mollit aliqua ea dolor incididunt et cillum quis minim reprehenderit ea dolor id aute pariatur. Voluptate duis ad tempor est cillum nulla aliquip consectetur elit non. Ut duis pariatur ullamco sit quis eu et sint labore enim. Incididunt sint incididunt cillum laborum sit magna incididunt aute pariatur consectetur.
Ut est fugiat et fugiat est ad Lorem labore qui elit deserunt fugiat tempor. Adipisicing mollit adipisicing velit Lorem commodo ipsum. Eiusmod non laborum labore in amet consequat labore. Minim do voluptate occaecat consectetur tempor laborum anim sunt elit ea deserunt. Cupidatat qui labore reprehenderit dolor eiusmod sit. Ad consequat irure velit velit duis duis non adipisicing anim mollit consequat occaecat deserunt.
Est cupidatat voluptate excepteur deserunt ea sit veniam ea exercitation sunt. Consectetur commodo laboris cupidatat do sint officia laborum aliquip cupidatat. Qui commodo in eiusmod anim dolor quis. Culpa fugiat aliqua qui in qui adipisicing qui laboris occaecat enim deserunt eiusmod adipisicing.
Fugiat ea fugiat tempor qui est consectetur dolor minim pariatur dolor et nulla. Commodo ad Lorem occaecat occaecat est velit et nulla pariatur Lorem. Et officia laborum mollit amet ullamco et adipisicing officia sunt eiusmod cupidatat laborum aliqua officia. Do ut dolore nulla quis veniam magna laboris excepteur. Non tempor quis irure ullamco. Enim mollit labore minim occaecat commodo consequat.
Cupidatat ea consequat consequat in deserunt sit eu irure sit do ipsum velit adipisicing. Ex consectetur nisi nostrud voluptate excepteur velit et aliquip incididunt eu Lorem. Sit elit veniam ipsum id occaecat minim duis voluptate ex elit.
Lorem eu aliqua laboris duis anim et labore eiusmod. Minim et ullamco consectetur commodo proident elit. Dolore irure do quis tempor mollit voluptate do exercitation labore sit eiusmod ea mollit. Sit et ex cupidatat aliqua quis ad consectetur fugiat. Irure proident Lorem pariatur pariatur. Laborum aliquip enim sint pariatur fugiat laborum culpa et do. Ut laboris pariatur non minim ex fugiat.
Qui id anim enim officia irure. Ut id ut ut Lorem adipisicing occaecat velit id sint magna cupidatat minim dolore laboris. Enim mollit cupidatat dolore magna sint culpa tempor cupidatat est excepteur ut. Ullamco sit exercitation commodo nisi dolore ut. Consectetur ullamco nisi exercitation id dolor quis magna cillum et ullamco in. Ex id in aute amet duis ad ut in sint labore excepteur commodo dolore. Cupidatat est proident ea laboris sunt sint aliquip.
Mollit duis aute sit elit. Tempor ut esse ex nulla enim velit est aliqua anim eiusmod fugiat anim. Do et aute duis non id. Eu in deserunt consectetur amet adipisicing eiusmod ipsum laborum est dolor irure velit. In minim pariatur ea aliqua pariatur voluptate irure laborum sint incididunt occaecat labore do. Reprehenderit consequat cillum sit eu labore sit veniam elit fugiat pariatur eiusmod.
Installation
npx @park-ui/cli add scroll-areaAdd Component
Copy the code snippet below into you components folder.
'use client'
import { ScrollArea } from '@ark-ui/react/scroll-area'
import type { ComponentProps } from 'react'
import { createStyleContext } from 'styled-system/jsx'
import { scrollArea } from 'styled-system/recipes'
const { withProvider, withContext } = createStyleContext(scrollArea)
export type RootProps = ComponentProps<typeof Root>
export type ContentProps = ComponentProps<typeof Content>
export const Root = withProvider(ScrollArea.Root, 'root')
export const RootProvider = withProvider(ScrollArea.Root, 'root')
export const Content = withContext(ScrollArea.Content, 'content')
export const Corner = withContext(ScrollArea.Corner, 'corner')
export const Thumb = withContext(ScrollArea.Thumb, 'thumb')
export const Scrollbar = withContext(ScrollArea.Scrollbar, 'scrollbar', {
defaultProps: { children: <Thumb /> },
})
export const Viewport = withContext(ScrollArea.Viewport, 'viewport')
export { ScrollAreaContext as Context } from '@ark-ui/react/scroll-area'
Integrate Recipe
Integrate this recipe in to your Panda config.
import { defineSlotRecipe } from '@pandacss/dev'
export const scrollArea = defineSlotRecipe({
className: 'scroll-area',
slots: ['root', 'viewport', 'content', 'scrollbar', 'thumb', 'corner'],
base: {
root: {
display: 'flex',
flexDirection: 'column',
width: '100%',
height: '100%',
position: 'relative',
overflow: 'hidden',
'--scrollbar-margin': '0px',
'--scrollbar-size': 'calc(var(--thumb-size) + calc(var(--scrollbar-margin) * 2))',
},
viewport: {
display: 'flex',
flexDirection: 'column',
height: '100%',
width: '100%',
WebkitOverflowScrolling: 'touch',
scrollbarWidth: 'none',
'&::-webkit-scrollbar': {
display: 'none',
},
'&[data-overflow-x] [data-pinned]': {
_after: {
content: '""',
position: 'absolute',
pointerEvents: 'none',
top: '0',
bottom: '-1px',
width: '32px',
},
},
'&[data-overflow-x]:not([data-at-left]) [data-pinned="left"]': {
_after: {
insetInlineEnd: '0',
translate: '100% 0',
boxShadow: 'inset',
},
},
},
scrollbar: {
alignItems: 'center',
display: 'flex',
position: 'relative',
touchAction: 'none',
userSelect: 'none',
zIndex: 'overlay',
_vertical: {
flexDirection: 'column',
width: 'var(--scrollbar-size)',
py: 'var(--scrollbar-margin)',
'&:not([data-overflow-y])': {
display: 'none',
},
},
_horizontal: {
flexDirection: 'row',
height: 'var(--scrollbar-size)',
px: 'var(--scrollbar-margin)',
'&:not([data-overflow-x])': {
display: 'none',
},
},
},
thumb: {
borderRadius: 'full',
bg: 'var(--thumb-bg)',
transitionDuration: 'normal',
transitionProperty: 'background, color, box-shadow',
transitionTimingFunction: 'default',
_vertical: { width: 'var(--thumb-size)' },
_horizontal: { height: 'var(--thumb-size)' },
},
corner: {},
},
defaultVariants: {
size: 'md',
scrollbar: 'auto',
},
variants: {
scrollbar: {
auto: {
scrollbar: {
'&[data-scrolling], &[data-hover]': {
'--thumb-bg': '{colors.gray.subtle.bg.active}',
},
},
},
visible: {
content: {
'&[data-overflow-y]': {
pe: 'var(--scrollbar-size)',
},
'&[data-overflow-x]': {
pb: 'var(--scrollbar-size)',
},
},
scrollbar: {
bg: 'gray.subtle.bg',
borderRadius: 'full',
},
thumb: {
'--thumb-bg': '{colors.gray.subtle.bg.active}',
},
},
},
size: {
xs: { root: { '--thumb-size': 'sizes.1' } },
sm: { root: { '--thumb-size': 'sizes.1.5' } },
md: { root: { '--thumb-size': 'sizes.2' } },
lg: { root: { '--thumb-size': 'sizes.2.5' } },
},
},
})
Usage
import { ScrollArea } from '@/components/ui'
<ScrollArea.Root>
<ScrollArea.Viewport>
<ScrollArea.Content />
</ScrollArea.Viewport>
<ScrollArea.Scrollbar>
<ScrollArea.Thumb />
</ScrollArea.Scrollbar>
<ScrollArea.Corner />
</ScrollArea.Root>
Examples
Visibility
Use the scrollbar prop to change the scrollbar visibility behavior.
Scrollbar: auto
Cupidatat amet aute incididunt duis sit sint voluptate officia. Laborum minim quis voluptate aute. Velit aliquip incididunt voluptate adipisicing aliqua commodo duis ex proident ipsum commodo in. Culpa qui commodo proident voluptate reprehenderit ea ex adipisicing duis nulla. Nulla reprehenderit occaecat aliqua irure nulla culpa ut id consectetur veniam ea.
Pariatur dolor eu in ut ut veniam nisi fugiat cupidatat in amet minim. Ut incididunt Lorem culpa fugiat ullamco in nostrud eu consectetur do cupidatat Lorem sit. Id qui reprehenderit esse minim laboris esse anim duis et exercitation non id. Ea non duis nisi amet duis aliquip commodo proident ipsum reprehenderit veniam consequat ea. Culpa reprehenderit voluptate in eu veniam enim non aliqua.
Consectetur eiusmod proident est mollit laborum officia dolore irure aliquip aliquip ea occaecat irure est. Elit enim laborum officia amet aliqua proident eiusmod deserunt enim qui duis nisi. Aliquip occaecat irure irure quis magna do mollit veniam commodo sunt est eiusmod do. Enim esse dolore tempor ex velit sunt incididunt elit sit reprehenderit sunt anim.
Nostrud Lorem enim pariatur elit ex. Irure duis tempor sit cillum nostrud fugiat officia aliqua esse excepteur laboris aute sit ipsum. Ipsum sit enim aliquip veniam dolore exercitation veniam reprehenderit. Reprehenderit anim est ad quis esse consequat cillum amet. Laborum ex et dolor cupidatat aute eu veniam officia proident enim non velit enim. Consequat non id aute dolore tempor sit. Officia do reprehenderit do id quis.
Duis adipisicing enim consectetur reprehenderit culpa anim ea elit anim. Pariatur aliquip aliqua enim non aliquip eiusmod. Adipisicing anim ea adipisicing est nisi labore. Minim ullamco aliquip occaecat elit culpa est velit sunt amet amet. Culpa sunt ex ex id. Consectetur in commodo nulla ea ut sint culpa ipsum laboris adipisicing labore. Aute irure sint ipsum irure.
Eiusmod ea sunt ad culpa exercitation minim sit tempor. Est sint excepteur pariatur elit in ullamco. Irure ad tempor do veniam. Cupidatat aliqua reprehenderit incididunt ea. Tempor ex sit pariatur Lorem do tempor. Enim irure incididunt reprehenderit id consectetur laboris labore eu cupidatat veniam cillum laboris dolor officia.
Nulla Lorem magna anim Lorem sit incididunt est ad sint consequat aliqua ex. Minim laboris dolor velit culpa sit sint sint laboris cillum proident ut proident excepteur dolore. Cupidatat Lorem fugiat proident velit velit aliqua consectetur quis eu. Ad culpa quis consectetur veniam cupidatat ad tempor duis voluptate. Lorem id incididunt dolore nostrud.
Esse reprehenderit excepteur eu quis sit nostrud fugiat pariatur ullamco dolor minim veniam do deserunt. Duis sit sit ad exercitation esse proident ut Lorem consequat. Adipisicing voluptate enim dolore sint deserunt id non sint eu adipisicing pariatur. Eu ipsum veniam excepteur do et ad enim dolore.
Fugiat minim est proident officia id. Esse minim aliquip dolor nulla ullamco sit sit excepteur officia sint. Pariatur commodo minim in ut enim laborum nisi id proident tempor ut sunt et ea. Non Lorem consectetur voluptate dolore reprehenderit velit. Sint qui excepteur esse pariatur ullamco ipsum ut commodo anim officia qui qui.
Fugiat laborum mollit nisi ad aliquip occaecat duis consequat esse cupidatat. In nisi eu consequat ea id ea. Aute minim ea ea magna pariatur exercitation culpa. Velit adipisicing aliqua magna ex nostrud ipsum dolor. Laborum labore in dolore veniam. Qui minim deserunt irure reprehenderit ex consectetur et. In et aliqua non et.
Scrollbar: visible
Mollit nulla culpa consectetur ut labore. Aliquip irure labore Lorem pariatur eiusmod pariatur ad. Laborum quis quis deserunt non mollit eiusmod et eiusmod aliquip dolore veniam aliquip elit reprehenderit. Et id quis consequat magna incididunt quis consequat et non tempor excepteur anim irure ipsum. Sunt pariatur ea est sunt duis cupidatat consectetur minim nisi cupidatat sint. Excepteur eiusmod Lorem quis incididunt qui excepteur Lorem eu.
Culpa aliqua nisi culpa ex ad consequat ea commodo esse. Excepteur incididunt magna ullamco velit fugiat in exercitation elit mollit id sunt voluptate eiusmod cupidatat. Lorem laborum et ex labore ea ullamco eu. Do sunt velit dolor magna. Sunt occaecat et irure cillum aliqua enim reprehenderit et quis non. Adipisicing ullamco culpa est dolore ipsum amet ad.
Est laborum qui nostrud deserunt ea excepteur tempor ea. Excepteur in sunt adipisicing do aliqua mollit exercitation culpa officia non ullamco incididunt reprehenderit. Non ipsum aliquip labore ipsum quis non.
Elit veniam incididunt esse cillum aliquip fugiat reprehenderit. Laborum adipisicing in laborum cillum cupidatat mollit. Occaecat minim amet anim ex nulla eu veniam. Velit qui laboris labore nisi duis laborum elit quis. Qui reprehenderit non velit nulla aute qui sit ex fugiat ad.
Dolor enim aute nostrud id sint ut quis sit. Ipsum non adipisicing sint pariatur dolore consequat eiusmod ullamco voluptate tempor mollit sint. In commodo elit commodo magna voluptate sint.
Lorem nostrud laboris et do et quis consectetur commodo. Magna sint minim nostrud labore ad deserunt tempor. Eiusmod in cupidatat ea eu aliqua sunt est nisi consequat nostrud. Consectetur esse nulla reprehenderit ex. Sit exercitation fugiat adipisicing pariatur quis do et laboris et sunt elit. Aute aute labore veniam incididunt consectetur deserunt fugiat nisi ut mollit eu.
Non anim nulla duis aliquip minim id adipisicing. Aliqua ut consectetur exercitation qui eu ullamco sint. Consequat quis et quis est aliquip exercitation. Do laborum qui aliquip cupidatat duis exercitation est qui aute labore officia excepteur eiusmod.
Cillum ex Lorem esse exercitation in ad magna sunt. Amet eu sint ut commodo exercitation incididunt. Ipsum laboris reprehenderit commodo nisi culpa sunt consectetur ullamco esse ea deserunt incididunt quis excepteur. Ullamco mollit consectetur adipisicing quis occaecat deserunt laboris excepteur deserunt incididunt aliqua. Veniam consectetur laborum qui amet nulla tempor tempor.
Minim amet nostrud voluptate minim ipsum proident nostrud ut nisi. Quis minim ex ea anim laboris ea. Exercitation irure mollit elit ex laboris veniam do et tempor eu tempor cillum. Consectetur occaecat quis anim commodo eiusmod pariatur magna nostrud ut.
Aliqua esse tempor ad labore consectetur. Reprehenderit pariatur amet mollit ad ex adipisicing quis eiusmod enim. Reprehenderit Lorem commodo voluptate eu Lorem eu culpa non aliqua sunt fugiat. Sit Lorem tempor irure in elit non esse culpa proident fugiat anim in.
Sizes
Use the size prop to change the size of the scroll area. This affects the scrollbar thickness and content padding.
Size: xs
Amet ea incididunt fugiat est duis dolore cillum. Non dolore ea quis sit duis ut voluptate incididunt. Fugiat culpa reprehenderit culpa elit incididunt laboris pariatur commodo id aliqua esse.
Cillum fugiat duis id non. Nostrud laboris consequat reprehenderit nisi exercitation nostrud consequat eu non culpa. Eu nisi veniam Lorem esse labore duis id anim laboris irure proident quis. Labore voluptate qui consectetur ea sint. Ipsum enim sunt tempor sit enim excepteur irure pariatur amet est nulla duis elit commodo.
Pariatur id enim ex dolor Lorem irure consectetur veniam occaecat. Ut eu anim excepteur nisi dolor anim aliquip pariatur. Adipisicing culpa quis in exercitation et voluptate non culpa eiusmod adipisicing adipisicing esse consequat. Adipisicing ex cillum occaecat excepteur. Ea laboris eu ad ipsum aliquip eu culpa eiusmod occaecat culpa duis ea aute occaecat.
Excepteur sit duis consectetur laborum voluptate consectetur incididunt. Enim Lorem pariatur ex aliqua voluptate ullamco. Id enim eiusmod ut tempor adipisicing amet eu aute. Sunt reprehenderit id excepteur tempor irure velit. Nisi consequat pariatur consequat aliqua. Nostrud amet aliquip aliquip enim consectetur.
Quis est mollit officia consectetur fugiat laboris commodo. Eiusmod ipsum id minim veniam eu sunt fugiat laborum non labore. Reprehenderit irure mollit velit dolor veniam. Fugiat ut quis sit dolor pariatur ipsum elit est voluptate tempor dolore ipsum ea. Adipisicing consequat id fugiat nulla labore ipsum exercitation. Sunt velit eiusmod incididunt amet voluptate. Aliqua ipsum consequat tempor voluptate eiusmod elit ipsum.
Exercitation laborum anim quis enim. Ad exercitation nostrud pariatur laborum non aliquip ex aliqua. Officia veniam in labore cupidatat reprehenderit dolor labore ut quis ullamco veniam consequat proident.
Ut labore eu qui laboris non sunt sit exercitation id do irure proident occaecat. Exercitation nostrud nostrud deserunt fugiat cupidatat. Cupidatat aute aliqua quis ullamco reprehenderit et laboris est adipisicing est aliqua consectetur. Elit in cupidatat ut aliquip.
Amet occaecat ea non cupidatat magna aliquip. Adipisicing culpa nostrud duis enim duis incididunt. Amet est in enim enim consequat tempor deserunt ad velit cupidatat amet sit eu. Adipisicing enim laborum et ut laboris non ex. Ex commodo duis ad commodo elit mollit in sit in tempor amet cillum proident cillum.
Sit elit ad pariatur ipsum irure nostrud tempor. Ut cillum sit adipisicing eiusmod. Id pariatur ut fugiat anim nulla aute nostrud nostrud. Do sint anim ad dolore elit officia duis labore qui mollit sunt qui. Ea esse sunt qui nulla culpa consectetur ea culpa nulla anim duis. Enim ad nisi deserunt ea. Adipisicing velit laboris aliquip qui ex labore.
Ullamco est ipsum deserunt occaecat nulla irure ipsum. Amet id do elit ea reprehenderit ad anim aliqua. Irure ut cupidatat minim est sit tempor ad aliqua enim minim consectetur ex qui. Laboris sit voluptate eu consequat qui proident sunt nulla tempor ullamco. Voluptate dolore cillum mollit ad adipisicing.
Size: sm
Labore fugiat minim quis in dolor culpa. Elit elit eu incididunt aliquip quis pariatur culpa et cupidatat veniam irure. Anim in sunt exercitation reprehenderit amet incididunt labore irure laboris sint mollit enim ad ut. Adipisicing pariatur proident fugiat duis dolor sit magna cupidatat consectetur. Ad id aute labore laborum deserunt eu consequat cupidatat duis dolore Lorem amet. Eiusmod proident est mollit sit nostrud velit reprehenderit voluptate esse sunt velit dolor qui eu. Duis laborum voluptate in et laboris commodo velit qui.
Esse minim id occaecat commodo velit culpa cupidatat. Tempor commodo ad nisi eu deserunt in ad. Aliqua eu sint sunt consectetur sit in veniam exercitation ut excepteur id reprehenderit tempor. Occaecat sit nostrud consectetur aliquip velit nostrud nisi.
Minim quis duis et elit velit non mollit Lorem mollit consequat et. Ut cupidatat ea do cillum elit magna officia officia non ex in commodo. Nostrud nulla velit do cillum. Minim sunt aute nulla est fugiat adipisicing tempor irure ex occaecat.
Cillum amet deserunt do Lorem nisi amet. Ex et sit id dolore proident do eu officia ea. Non fugiat laboris deserunt reprehenderit duis fugiat qui veniam proident. Duis ut dolore minim minim voluptate quis reprehenderit minim. Cillum ut esse aliquip cupidatat eiusmod occaecat sunt ex cillum amet labore mollit Lorem. Reprehenderit voluptate nisi irure esse officia non occaecat officia excepteur. Cillum reprehenderit amet sint velit mollit cupidatat dolore ipsum sit.
Incididunt amet pariatur exercitation quis ullamco do minim consequat. Laboris mollit nisi occaecat veniam deserunt do minim sint. Labore et laborum aliquip non cillum aliquip sit id aliqua voluptate commodo proident. Officia velit id nulla labore sunt id enim enim nulla eu et. Cillum enim aliqua Lorem ex dolor eiusmod enim non eu cillum dolor quis sunt.
Qui qui consequat anim in proident ullamco. Pariatur exercitation cupidatat ut dolore aute est sit tempor culpa enim pariatur consequat tempor elit. Reprehenderit labore veniam laboris ullamco ad. Laboris velit pariatur eu est pariatur ad ad nulla. Consequat anim nisi reprehenderit proident nisi est minim enim nostrud non pariatur. Ullamco enim nisi reprehenderit cupidatat veniam eu Lorem. Lorem commodo ipsum voluptate aute elit occaecat.
Sit nostrud officia eu esse ut et ullamco. Ut sint proident mollit nulla excepteur tempor quis veniam. Incididunt non eu mollit irure aute nisi laboris ullamco laboris aute sunt aliquip non. Laborum non sunt consequat cupidatat aute ad mollit. Lorem ut occaecat minim irure mollit et ipsum labore laboris sint. Minim fugiat officia velit incididunt id nostrud occaecat. Dolor dolor velit sunt consectetur excepteur excepteur sit non sunt cillum commodo.
Ex occaecat deserunt dolore tempor et adipisicing cupidatat do ipsum voluptate dolore veniam est. Ipsum ullamco ullamco tempor do cupidatat aute fugiat. Enim id veniam duis laboris. Laboris quis pariatur anim ullamco. Esse labore consequat nisi veniam nostrud do officia enim aute enim consectetur sint.
Pariatur est in consequat incididunt ad enim in eiusmod consequat consequat ullamco dolor ad proident. Nisi adipisicing et nostrud fugiat. Proident aliquip anim ut deserunt in laboris elit sit ea in minim non.
Incididunt est laborum sunt nostrud proident irure laborum consectetur sint. Quis amet nostrud irure quis minim occaecat deserunt duis id est nisi velit. Non quis deserunt cillum proident sunt sit. Fugiat culpa exercitation velit esse anim amet laborum aliquip non sunt aliqua pariatur deserunt. Ipsum sunt excepteur ut tempor exercitation occaecat veniam qui sunt. Nostrud minim est pariatur ex aliquip. Pariatur id qui culpa incididunt sunt veniam pariatur adipisicing consectetur ut mollit.
Size: md
Amet laborum consectetur qui non commodo fugiat. In excepteur eu exercitation ullamco velit nulla in reprehenderit sunt dolor culpa sunt. Tempor non officia mollit voluptate veniam cupidatat esse. Proident velit labore do officia consequat tempor consequat. Reprehenderit amet amet et nisi.
Incididunt adipisicing consequat anim velit incididunt dolor adipisicing adipisicing mollit occaecat eiusmod esse. Ipsum proident minim officia aliquip non laboris est laboris quis consequat sit. Cupidatat magna ea qui sunt aute. Consectetur nulla consectetur et elit est quis ipsum laborum laboris magna magna. Ex labore laborum aute laborum ex laboris nulla occaecat incididunt cillum fugiat exercitation amet.
Elit laboris duis labore est. Sint fugiat ea deserunt proident id laboris ex Lorem ut dolor mollit officia occaecat. Ullamco anim magna qui anim.
Reprehenderit ex ex exercitation veniam duis deserunt nulla nulla pariatur aliquip dolore deserunt occaecat. Ipsum sit nostrud eu dolore ea. Dolor commodo sint sunt id labore quis est consectetur veniam aliqua proident. Elit enim proident laboris quis ex excepteur culpa sit commodo ullamco.
Ut sint commodo reprehenderit eu dolore elit anim ad. Proident tempor amet tempor laborum. Aliquip qui aliquip mollit veniam nulla id voluptate nisi adipisicing incididunt ut culpa. Enim ad velit adipisicing cupidatat consequat minim pariatur.
Aliquip eu commodo nisi ullamco ea proident quis anim excepteur deserunt. Commodo sit magna culpa excepteur. Esse minim aliquip irure amet aute Lorem adipisicing eu id fugiat. Irure consequat aliqua mollit eu cupidatat minim consequat culpa. Aliquip ea et sit sit enim aute. Do veniam aliquip nisi sint consequat non aliquip id cillum do sint laboris laborum. Excepteur nostrud id amet est nisi veniam sit exercitation excepteur.
Anim nulla velit elit pariatur. Duis quis ullamco consequat proident do tempor nulla et cillum dolore voluptate occaecat do. In id sint esse laboris voluptate incididunt reprehenderit quis commodo et labore pariatur et.
Minim mollit reprehenderit eiusmod est reprehenderit duis ullamco esse excepteur adipisicing consectetur mollit elit. Sunt sint in ut proident sint tempor ad ut laborum cupidatat deserunt sit ipsum. Laboris fugiat dolor ex duis voluptate laborum nisi ut magna enim sunt duis et. Excepteur eu ut consectetur ad qui magna magna officia ex aliquip reprehenderit non.
Dolor proident deserunt nisi adipisicing consequat dolor. Cillum culpa anim incididunt nisi elit anim ad aliqua exercitation dolore deserunt veniam consectetur do. Est aliqua deserunt ea id magna excepteur occaecat exercitation excepteur minim elit quis eiusmod. Eiusmod ullamco magna dolore duis nostrud ex Lorem ex labore nulla ad voluptate exercitation. Sunt nisi pariatur enim qui.
Lorem aute dolore commodo in. Tempor excepteur excepteur cupidatat ut deserunt duis nulla. Culpa labore magna qui Lorem ipsum ea eu do quis. Labore laboris deserunt dolore do irure deserunt dolor esse irure id velit mollit fugiat.
Size: lg
Eu adipisicing non quis nisi. Mollit veniam et cupidatat minim elit quis laborum voluptate officia occaecat quis do. Non irure ad laborum adipisicing duis laborum tempor occaecat. Magna anim aute deserunt in anim.
Non in nostrud aliqua ex exercitation et ex ex fugiat pariatur amet ut labore. Occaecat non qui proident aliqua sint dolore ut adipisicing exercitation. Amet nostrud qui consectetur voluptate incididunt sint cupidatat non.
Do ea est sunt laborum ea. Ullamco laboris enim velit ut aliquip adipisicing sint. Commodo in do sint fugiat consectetur officia enim nisi pariatur. Consectetur reprehenderit qui cupidatat officia aliqua commodo occaecat anim. Nulla aliqua adipisicing occaecat irure laboris aliquip dolor ipsum pariatur qui officia dolor non.
Ipsum cupidatat proident sint anim laborum aute enim sit deserunt et dolore. Ullamco nisi culpa consequat velit esse. Laboris non proident consectetur veniam culpa in magna est qui velit commodo veniam. Quis laboris sunt duis officia aliqua et occaecat laboris reprehenderit eu consequat magna eu adipisicing. Non consectetur reprehenderit cillum cillum.
Irure ut eiusmod eu minim sint fugiat consequat ipsum pariatur. Ad proident pariatur veniam occaecat irure consequat fugiat fugiat sunt commodo officia adipisicing. Labore anim duis fugiat voluptate aliqua eiusmod voluptate do amet laboris ut.
Anim ut eiusmod dolore magna eiusmod elit ut deserunt. Officia deserunt aliquip tempor deserunt est ipsum exercitation irure et Lorem tempor sint. Nisi fugiat commodo pariatur proident enim commodo veniam. Aliqua eiusmod consequat officia consectetur elit incididunt sit incididunt qui tempor enim adipisicing aliquip. Elit tempor pariatur do sint duis.
Ullamco sunt Lorem consequat magna aliquip. Qui quis occaecat amet commodo. Culpa deserunt incididunt deserunt eiusmod sint dolor consectetur sunt irure aliqua eu. Eiusmod eu amet magna in culpa irure mollit do nisi elit. Non fugiat nostrud cupidatat esse officia exercitation adipisicing esse aute ad. Exercitation id eu duis proident enim irure et fugiat anim esse veniam magna occaecat incididunt. Aliquip duis aliquip elit elit anim.
Culpa minim consectetur laboris mollit labore laboris eiusmod. Excepteur eu mollit aliquip ea eiusmod et id ullamco do velit incididunt sint. Reprehenderit enim enim nulla esse reprehenderit et Lorem sint eu Lorem minim exercitation. Minim reprehenderit cupidatat mollit adipisicing exercitation minim aute id est cillum. Labore sunt anim tempor aute tempor in tempor id laboris aliquip magna.
Do fugiat fugiat anim magna sint culpa do. Voluptate enim consequat consectetur aute exercitation qui. Labore eu sunt dolor proident ipsum aliqua ad et cillum consequat voluptate. Tempor culpa reprehenderit mollit dolore nulla sunt ex dolore. Pariatur est et aliquip aute nostrud deserunt sint elit tempor et ad reprehenderit non veniam. Consectetur tempor dolor aliquip qui nostrud cillum labore veniam excepteur reprehenderit. Reprehenderit est fugiat officia enim nostrud velit irure sint anim ut velit ea.
Ex pariatur esse commodo id nisi pariatur incididunt fugiat minim veniam. Commodo aliqua do commodo anim ut aliqua excepteur commodo irure nostrud ipsum duis nisi. Do sunt tempor nostrud ea minim exercitation ullamco eu ad. Deserunt fugiat minim esse excepteur Lorem in fugiat amet in in. Irure aliquip labore labore eiusmod magna est id dolor laboris laborum sunt laboris elit. Non sunt excepteur ad est nulla ullamco. Laborum nostrud mollit ad labore eiusmod eu proident minim.
Horizontal
The scroll area automatically supports horizontal scrolling when content overflows horizontally.
Virtualization
Use @tanstack/react-virtual to handle large datasets efficiently by rendering only visible items.
Infinite Scroll
Here is an example of implementing infinite scroll with the scroll area component.
Props
Root
| Prop | Default | Type |
|---|---|---|
scrollbar | 'auto' | 'auto' | 'visible' |
size | 'md' | 'xs' | 'sm' | 'md' | 'lg' |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. | |
ids | Partial<{ root: string; viewport: string; content: string; scrollbar: string; thumb: string }>The ids of the scroll area elements |
Scrollbar
| Prop | Default | Type |
|---|---|---|
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. | |
orientation | Orientation |