Ipsum proident exercitation cupidatat occaecat ea anim reprehenderit consequat officia culpa quis in ipsum et. Sit duis anim dolor est occaecat tempor ad esse esse mollit et do dolore. Cupidatat ea minim laborum incididunt ullamco sint dolore incididunt adipisicing est duis reprehenderit. Reprehenderit do elit reprehenderit elit do cillum ex duis anim culpa occaecat.
Deserunt consequat amet ad qui minim ullamco minim nostrud commodo ex fugiat officia cillum. Excepteur dolore aliquip adipisicing do anim exercitation Lorem. Dolor excepteur nisi duis magna est elit dolore dolore laborum sint aliqua eu ut proident. Sunt reprehenderit ex eu sint in esse aute veniam laborum aliquip ipsum amet pariatur. Nisi mollit adipisicing ullamco aliqua id labore ullamco sint aliqua veniam incididunt amet veniam adipisicing. Velit mollit commodo consectetur et cillum minim magna exercitation et excepteur incididunt ex. Exercitation duis consectetur elit nulla ea velit cillum.
Magna incididunt voluptate Lorem proident ipsum veniam quis elit. Aliquip ullamco incididunt dolore velit elit velit amet. Magna Lorem enim qui excepteur reprehenderit pariatur.
Nisi culpa minim ipsum consequat irure minim proident cupidatat ea adipisicing aliqua. Nisi nisi magna reprehenderit quis eiusmod enim enim adipisicing culpa culpa occaecat Lorem ea cupidatat. Excepteur laborum duis excepteur ad in do.
Aute excepteur mollit officia amet fugiat ex excepteur in incididunt dolor ea ex minim. Sit culpa sunt ex ad mollit do aliqua. Ea exercitation do aute ipsum. Ad anim dolor fugiat adipisicing dolor excepteur commodo nulla laboris anim voluptate. Labore id anim veniam adipisicing amet ex ea velit id id. Elit duis laborum do deserunt do sit ipsum enim minim dolore voluptate nostrud qui. Ullamco ex fugiat adipisicing reprehenderit dolore id laboris pariatur esse eu adipisicing duis.
Excepteur duis consequat velit voluptate tempor fugiat nostrud voluptate do. Culpa sunt quis in pariatur. Voluptate exercitation nisi deserunt nulla sint magna. Irure ea est cupidatat incididunt id cupidatat id occaecat mollit. Aute esse adipisicing non enim ad. Occaecat laboris occaecat in ex do nostrud fugiat enim. Occaecat fugiat sint ea incididunt enim qui laboris commodo do quis id.
Tempor in officia in nostrud sunt labore. Eu nisi amet nisi aute do esse minim laborum aliqua minim quis. Laboris aliquip tempor Lorem sunt. Enim enim veniam sunt deserunt cillum culpa cillum ex elit. Do reprehenderit cupidatat reprehenderit est. Ex do ex elit ut proident occaecat veniam labore sint officia tempor et adipisicing. Do fugiat tempor id nisi cillum proident velit.
Id ea ad non deserunt ea aute Lorem commodo velit enim fugiat cillum incididunt id. Nulla in elit ex aute voluptate labore minim id consequat laboris. Id laboris culpa incididunt amet nulla labore non nostrud irure esse nulla. Excepteur quis nulla exercitation laboris consequat occaecat occaecat ad dolore laboris reprehenderit excepteur. Duis aliqua id velit sunt pariatur eiusmod culpa commodo aliqua aliqua nisi. Duis consequat veniam ullamco amet amet ad consectetur.
Lorem et sunt aute anim cupidatat ex voluptate ad velit dolor. Pariatur cillum ea nostrud qui aliqua Lorem consectetur ullamco exercitation quis in ad amet. Irure sunt laboris duis magna dolore dolor do ea mollit. Incididunt aute reprehenderit minim eiusmod dolor occaecat. Nisi aute veniam laborum dolor fugiat magna. Anim aute qui veniam aute tempor deserunt quis ex nisi sint ad veniam ut exercitation.
Dolore et est excepteur enim. Voluptate ad enim ullamco Lorem ea. Commodo consequat labore ex est proident consequat magna duis id tempor eu et nulla duis. Qui excepteur qui nisi aliqua Lorem officia laboris cillum ipsum officia dolor ipsum. Cupidatat sit excepteur nulla excepteur nisi nulla mollit qui est anim fugiat.
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 pariatur pariatur id dolor duis id deserunt esse qui. Cupidatat nisi ea nostrud anim sint irure enim incididunt culpa do sint duis ea. Pariatur incididunt proident consectetur in deserunt sint dolore ut tempor culpa aute sunt. Adipisicing nulla officia pariatur tempor occaecat excepteur sunt sunt ullamco mollit adipisicing amet. Ullamco qui labore consequat ad commodo labore do ad et Lorem proident laboris officia exercitation.
Adipisicing anim exercitation consectetur ad esse proident laboris voluptate mollit excepteur incididunt consequat qui irure. Magna sit enim cillum mollit officia incididunt laboris cupidatat do. Esse aliqua aliqua voluptate veniam aliquip veniam quis aliquip.
Nostrud Lorem ex aute incididunt enim est elit. Veniam ut commodo aliquip cillum est in exercitation ex ad dolor. Lorem reprehenderit et amet velit consectetur irure ipsum dolor consectetur deserunt eu. Amet do Lorem id ex aute Lorem culpa velit esse. Elit et excepteur proident ipsum quis reprehenderit cillum quis non.
Est pariatur eiusmod culpa sunt aliquip dolor. Tempor et commodo ea Lorem sit cillum laborum consectetur eu cillum consectetur velit. Pariatur veniam cillum proident ad.
Lorem enim occaecat amet anim adipisicing tempor sunt. Laboris cupidatat dolor sit pariatur deserunt duis exercitation veniam minim eiusmod irure. Culpa ad aliquip cupidatat excepteur labore Lorem consectetur.
Dolore ad irure magna cillum tempor ipsum do ut culpa duis. Ut aliquip commodo eu adipisicing aliquip non enim nisi proident aliquip ex aliqua. Elit ea commodo labore aliqua adipisicing fugiat fugiat officia. Aliqua eiusmod adipisicing amet incididunt occaecat dolore sint ex deserunt laborum duis dolor aliquip. Proident ut Lorem incididunt aute commodo anim ipsum reprehenderit ipsum.
Nostrud ut eu ullamco officia. Laborum Lorem excepteur exercitation ex commodo nisi reprehenderit. Et mollit occaecat aute ea consectetur. Consectetur ipsum in ea deserunt anim sit do et magna. Deserunt reprehenderit ad ut ea reprehenderit dolore.
Duis elit esse id laboris et officia laborum pariatur. Velit commodo ex mollit tempor. Lorem velit amet cupidatat velit velit id sint eu dolor. Velit officia cillum ea culpa et cillum ex mollit velit veniam. Culpa exercitation sit fugiat ut commodo voluptate. Voluptate consectetur do dolor aute. Ad sunt aute esse sunt.
Occaecat ex exercitation ut enim irure. Nostrud ut Lorem culpa minim sint dolor labore exercitation do quis ipsum eu non Lorem. Ipsum nulla in minim qui. Elit fugiat mollit aliqua ex veniam enim irure cupidatat duis aliqua proident proident laborum. Duis est nostrud enim consectetur officia eiusmod ut magna id cupidatat excepteur exercitation in eiusmod.
Mollit occaecat fugiat sunt dolor fugiat qui ut fugiat in consequat deserunt in voluptate velit. Do enim aliqua incididunt consequat adipisicing Lorem ex nostrud. Laboris deserunt adipisicing occaecat occaecat qui cupidatat voluptate.
Scrollbar: visible
Non quis et consequat cillum ullamco fugiat minim mollit ipsum occaecat. Eiusmod duis elit ea sint eu veniam duis labore culpa labore. Aliqua labore cupidatat adipisicing consectetur eu officia minim magna ex sint.
Exercitation dolore quis Lorem elit quis voluptate. Nostrud non ad laborum officia quis. Voluptate velit exercitation enim velit eiusmod officia tempor esse mollit sit nisi minim.
Dolor est eiusmod sunt fugiat irure nulla elit elit ea consectetur. Pariatur amet dolore aliquip aute elit dolore minim aliquip dolore. In culpa elit eu elit. Aliqua nostrud quis dolore minim sint ut pariatur nulla in aliqua.
Qui deserunt cillum deserunt fugiat proident esse velit ullamco occaecat est proident in nostrud ea. Et nostrud sit non enim id officia enim eiusmod ea officia. Officia cupidatat fugiat aliqua proident laboris enim id pariatur. Ullamco qui laboris incididunt aliqua ad non cillum minim mollit. Pariatur dolor aute ad ad nisi exercitation. Qui officia magna sunt exercitation. Officia minim dolore dolore nulla Lorem do laboris sint.
Nisi nisi veniam Lorem Lorem cillum deserunt exercitation irure eiusmod ut ad veniam do. Nulla sunt non nisi consequat velit. Nulla minim sint sunt proident officia. Cupidatat reprehenderit exercitation est aliqua non eu. Irure esse enim minim mollit fugiat aute ut ex ea.
Sit reprehenderit nulla minim nisi ipsum. Do ipsum labore enim magna irure fugiat ad voluptate laborum ex esse occaecat voluptate nulla. Proident sit consequat ex magna sunt. Ad veniam reprehenderit labore nulla.
Reprehenderit ipsum incididunt exercitation minim pariatur. Voluptate sunt labore ad aute velit anim consectetur. Nisi occaecat proident Lorem aliqua labore labore occaecat culpa. Eu proident culpa amet eu. Est incididunt ad dolore elit adipisicing magna enim incididunt. Laborum sunt est reprehenderit consectetur occaecat eu deserunt dolor aliqua dolore culpa. Ullamco cupidatat labore pariatur ea nulla enim reprehenderit magna dolore ullamco.
Amet fugiat anim aliquip reprehenderit eu. Eiusmod aute nisi eu minim sit consequat non labore nulla reprehenderit aute occaecat. Aliqua eiusmod sint deserunt cillum tempor voluptate do non fugiat aliquip. Reprehenderit velit ullamco cupidatat occaecat sit veniam officia cupidatat proident eiusmod. Velit occaecat non minim ipsum cillum sit consectetur reprehenderit adipisicing. Ea mollit in labore est est deserunt est nostrud labore nisi sit cupidatat ipsum.
Enim pariatur deserunt ipsum excepteur. Laboris quis magna velit ad nostrud. Occaecat ex dolore cillum adipisicing cillum et. Exercitation quis commodo consectetur labore laboris laborum culpa ex culpa est ut. Ut occaecat est duis nulla sint esse excepteur reprehenderit sunt nulla nulla labore ea. Irure proident ex ea nisi cillum est esse tempor ipsum et pariatur incididunt. Exercitation ut do labore velit Lorem elit voluptate ullamco deserunt enim aute do.
Ex ex sint pariatur cillum veniam irure nostrud sunt nostrud. Reprehenderit officia voluptate reprehenderit laboris dolore officia. Ipsum sit incididunt in aliqua adipisicing culpa. Aliquip enim ea in mollit pariatur elit est ipsum nulla id labore nisi officia laboris.
Sizes
Use the size prop to change the size of the scroll area. This affects the scrollbar thickness and content padding.
Size: xs
Dolore exercitation eu magna ipsum in Lorem irure minim sit laborum incididunt. Et sunt anim veniam culpa nostrud irure ullamco excepteur incididunt. Fugiat veniam reprehenderit Lorem eu aliquip do laboris ipsum laborum commodo reprehenderit nulla amet dolore. Adipisicing excepteur dolore Lorem velit nostrud esse minim eiusmod id mollit. Reprehenderit irure cillum id exercitation labore ea laboris non sint nostrud aliqua dolore. Ex veniam elit sunt adipisicing. Id deserunt laboris cupidatat enim duis qui officia ut deserunt nulla laborum sunt consequat.
Do tempor nulla nostrud ut nulla cillum mollit quis. Velit sunt laborum laborum deserunt aliquip et eu id. Ex dolore excepteur consectetur nisi ex non sunt labore excepteur voluptate amet aliquip ut amet. Dolore ut dolor officia in sint minim eiusmod veniam ipsum ad voluptate est magna. Cupidatat aliquip sunt velit dolor duis cupidatat et. Nisi ullamco cillum adipisicing deserunt quis labore incididunt irure. Sunt elit amet ea commodo consectetur mollit quis dolor.
Laboris ea consectetur in sint enim reprehenderit id sunt esse tempor consequat. Officia sint in laborum voluptate pariatur occaecat proident cupidatat magna sunt. Occaecat laboris cillum irure pariatur incididunt adipisicing nulla velit proident incididunt voluptate dolore velit Lorem.
Anim anim cillum id ea Lorem ullamco occaecat et. Voluptate voluptate labore excepteur sit esse amet aliquip enim tempor fugiat consequat elit tempor. Voluptate veniam officia ex adipisicing pariatur nisi eiusmod. Ullamco eu reprehenderit cillum nisi ullamco sit aliqua Lorem irure ea mollit. Non eiusmod sint nisi duis ad enim quis nisi non in nisi.
Nisi ullamco anim Lorem tempor aliquip quis deserunt consectetur. Sit anim ullamco Lorem velit ex occaecat labore nulla eu laborum enim. Nostrud mollit duis labore id aliquip duis voluptate consequat magna ut enim ullamco incididunt. Tempor fugiat consequat labore exercitation occaecat in id amet duis voluptate. Consequat anim consequat nostrud dolore consectetur non adipisicing quis incididunt eu velit aute. Nulla in eu aliquip pariatur ad irure ipsum tempor. Excepteur reprehenderit officia aute irure reprehenderit et velit adipisicing.
Velit sint non fugiat sint voluptate exercitation aliquip nostrud officia nostrud. Non incididunt ad veniam id dolor velit elit fugiat. Non adipisicing id cillum ex. Exercitation cupidatat anim occaecat aliqua magna adipisicing minim commodo consequat consequat laboris cillum velit.
Elit cupidatat tempor irure nostrud consequat cillum ex. Irure eu ipsum eiusmod Lorem culpa id. Irure esse laboris pariatur consectetur occaecat. Proident officia do aliqua consequat voluptate velit adipisicing id adipisicing proident deserunt velit. Et officia esse culpa nulla.
Sunt Lorem nostrud magna ea ea ea ad. Irure sunt sunt deserunt deserunt duis incididunt sunt sit. Aliqua elit sunt nostrud quis ad Lorem amet fugiat aute. Enim ipsum commodo qui Lorem cillum commodo sit culpa.
Ea ullamco consequat deserunt excepteur. Voluptate exercitation ullamco ipsum eiusmod aute sit quis dolor consectetur consectetur mollit occaecat. Minim tempor excepteur ea nulla laboris. Eiusmod eiusmod voluptate labore ea officia qui id. Incididunt mollit dolore consectetur ad non labore reprehenderit amet qui amet amet.
Non amet laboris et voluptate qui reprehenderit labore id consectetur elit. Officia ipsum labore tempor ad ut laboris. Incididunt enim minim non ea excepteur qui laborum laboris excepteur. Labore id eiusmod nostrud nulla cillum excepteur pariatur fugiat et exercitation. Occaecat laboris cupidatat fugiat fugiat consequat incididunt aliquip anim minim tempor. Voluptate occaecat Lorem do et dolore id id id aliqua pariatur aliqua pariatur. Adipisicing tempor et consectetur excepteur pariatur pariatur incididunt eiusmod.
Size: sm
In eu excepteur amet magna. Excepteur aliqua esse adipisicing nisi ipsum elit nostrud irure consectetur laboris mollit officia id. Mollit sit nostrud duis amet aliquip irure culpa voluptate. Ut aliquip magna mollit deserunt voluptate elit ut cillum. Veniam laboris aliquip esse ipsum in deserunt anim adipisicing sit cillum.
Qui sunt enim adipisicing id reprehenderit Lorem dolore pariatur labore ad ex. Sit aliquip commodo consectetur aute irure deserunt. Ad cillum voluptate duis culpa adipisicing sit. Ea anim nostrud eiusmod laborum consequat sit quis exercitation dolore sint adipisicing magna. Quis mollit ad nostrud sunt pariatur in adipisicing est do mollit nulla proident aliqua.
Mollit irure occaecat tempor dolore magna adipisicing aute reprehenderit ea in commodo sit sit fugiat. Laborum sit velit commodo exercitation magna nostrud cupidatat adipisicing velit consectetur nulla dolor sint quis. Culpa pariatur quis occaecat laboris culpa irure nisi. Proident in occaecat aute adipisicing velit voluptate quis veniam incididunt.
Anim do aliqua voluptate enim sunt occaecat velit veniam pariatur sunt consequat. Irure qui esse magna ex magna elit anim nostrud. Adipisicing dolor nisi aliqua do mollit. Eiusmod proident deserunt ut et et labore minim eu occaecat. Aliqua elit labore adipisicing ullamco.
Reprehenderit laborum sint officia adipisicing do consectetur cupidatat dolor labore laboris dolore et. In ad elit proident eu labore do non aute cillum velit nulla. Officia anim pariatur ex non mollit anim mollit incididunt minim veniam pariatur officia. Non elit excepteur deserunt aliqua sint mollit eiusmod mollit excepteur ad minim esse. Excepteur ex excepteur irure qui esse tempor.
Occaecat esse laboris in labore minim consequat ea. Consectetur adipisicing nulla tempor pariatur aute et aliquip. Fugiat ullamco culpa voluptate elit laborum.
Tempor esse enim pariatur sint anim irure ex dolor minim exercitation. Sint non id magna cillum eiusmod cupidatat duis magna sint. Consequat nostrud sunt nostrud eiusmod cupidatat consequat culpa id eu ipsum nostrud velit ea occaecat. Ullamco excepteur minim in elit ut. Fugiat cillum non reprehenderit ipsum nostrud et officia id non ipsum eu. In ipsum do culpa qui deserunt officia laboris do aliquip et quis ullamco aute.
Magna adipisicing elit aute dolor tempor mollit magna. Pariatur eu incididunt ad consectetur ut ipsum laboris aute veniam veniam reprehenderit consectetur. Officia do et est in laboris mollit fugiat sint fugiat ipsum anim ad. Qui ea esse nisi exercitation et nostrud tempor in voluptate labore occaecat incididunt. Consectetur sunt reprehenderit exercitation est anim ex ex sit ipsum. Et sit ea deserunt sit ut irure cillum consequat pariatur consequat eiusmod.
Lorem deserunt pariatur non elit. Nostrud in commodo elit cillum cillum incididunt officia. Tempor ipsum consequat dolor adipisicing.
Do voluptate laborum anim dolore anim consequat cupidatat qui enim. Tempor elit labore dolor anim proident velit ullamco ipsum irure ut magna. Sit ea nulla aliqua sunt dolor id voluptate deserunt nisi mollit.
Size: md
Ad sunt occaecat amet amet ad enim mollit adipisicing ullamco officia. Laboris eiusmod ut magna duis deserunt excepteur minim enim nisi voluptate. Dolore dolor est nisi cupidatat nisi Lorem minim occaecat. Nisi laboris cupidatat amet minim excepteur reprehenderit elit enim eiusmod eu ea pariatur labore commodo. Enim deserunt mollit nisi fugiat irure velit aliquip voluptate aliqua. Enim id reprehenderit laborum in eu amet consectetur velit dolore.
Eiusmod cillum officia est sit dolore deserunt id. Amet duis do velit labore Lorem enim Lorem consectetur. In nulla est incididunt quis sunt consectetur fugiat excepteur ut. Est pariatur voluptate anim proident aliquip consectetur proident sit. Aliqua laboris reprehenderit laboris fugiat officia eu aute qui eu ex duis laboris. Officia ipsum reprehenderit ea anim enim non laborum culpa ea aliqua minim aute do Lorem. Consequat dolore esse nulla do voluptate do quis reprehenderit ea consequat.
Est sint minim voluptate dolore aute nulla sit officia laboris qui excepteur ad culpa. Qui labore do amet ut eiusmod laborum ullamco dolore cupidatat. Ea mollit do ullamco dolore nulla deserunt aliqua esse reprehenderit in dolore nostrud enim eiusmod. Culpa consectetur ullamco reprehenderit non eiusmod pariatur esse laboris culpa sint laboris quis. Dolor nostrud cillum elit velit ullamco.
Nostrud ea esse eu minim dolore fugiat cillum Lorem eiusmod eu id. Sint labore et deserunt nostrud reprehenderit. Deserunt cillum officia commodo sit exercitation in irure proident enim. Lorem ad id incididunt officia incididunt qui.
Exercitation consequat do labore officia cupidatat eiusmod duis incididunt exercitation deserunt amet. Est cillum Lorem enim ad consectetur velit. Sit sit cupidatat nulla eiusmod dolore duis minim.
Est nostrud esse magna aute eiusmod eiusmod consequat. Occaecat eu aliqua consequat aliqua ex proident qui id anim cupidatat eu nulla culpa. Cillum ex pariatur exercitation dolore labore ipsum enim proident consectetur aliquip.
Aliquip officia ea deserunt consectetur nisi incididunt pariatur ad. Do ipsum nostrud duis anim. Lorem elit cillum cupidatat esse est cillum ea et. Nostrud proident minim ea nulla qui incididunt quis eiusmod culpa id ex id. Enim voluptate dolor aute sint labore.
Culpa elit in aliquip veniam adipisicing. Ullamco nulla esse dolore eiusmod ut consequat non ad in nulla voluptate irure. Elit esse incididunt fugiat ipsum reprehenderit voluptate Lorem non incididunt ea culpa non. Magna nostrud elit Lorem dolor aute voluptate aute.
Ex enim proident sint aliquip ea fugiat ex culpa velit ut elit est cupidatat qui. Veniam amet consequat minim do eiusmod. Sit velit ipsum cupidatat veniam qui fugiat sunt sit ullamco ullamco enim proident. Tempor voluptate reprehenderit non laborum. Adipisicing sunt veniam est proident adipisicing nisi labore anim consectetur deserunt Lorem. Culpa ex amet qui qui velit enim sint aliqua.
Ex ipsum eiusmod id ea eu eiusmod enim et commodo eu. In aliquip pariatur dolore in qui consequat in laboris aliqua adipisicing. Cillum elit velit elit nostrud dolore id cupidatat labore consectetur aliqua. Proident aliquip sit incididunt dolor aliqua ipsum irure non esse est ad commodo.
Size: lg
Ipsum aliqua proident duis magna esse mollit ut. Do qui excepteur quis dolor enim do. Dolore aliqua dolor adipisicing voluptate nisi velit enim laborum esse sunt ex. Magna quis labore nisi deserunt velit elit incididunt ut sit dolore ad excepteur. Labore anim aute et tempor anim elit. Reprehenderit irure nulla nostrud quis aliquip velit ea sint. Ad nostrud dolor sint excepteur reprehenderit reprehenderit ut sunt sit dolor reprehenderit cupidatat.
Deserunt laboris reprehenderit irure elit consectetur eu incididunt reprehenderit. Ullamco amet et fugiat occaecat incididunt dolor mollit reprehenderit incididunt cupidatat reprehenderit. Elit nisi nostrud quis incididunt magna velit. Deserunt id exercitation sunt dolore anim quis id officia deserunt quis laborum irure.
Et ullamco fugiat voluptate amet exercitation sint nisi commodo amet duis veniam commodo magna magna. Ut duis laboris aute enim duis in exercitation irure. Laboris irure fugiat do exercitation amet est culpa dolore exercitation fugiat ex sint. Aute reprehenderit tempor elit culpa. Cillum et nulla quis in adipisicing elit excepteur consequat. Non ipsum deserunt nisi ea amet.
Cillum incididunt proident magna pariatur sunt adipisicing irure minim occaecat ex est ullamco id ad. Deserunt sint consectetur nulla pariatur officia nulla tempor. Et sint ipsum consectetur velit. Consequat aliquip excepteur eu aute reprehenderit et velit enim culpa aute velit. Anim magna officia anim consectetur aute anim sit dolore. Enim cillum ullamco enim officia enim. Adipisicing eu id irure cillum minim cupidatat qui non.
Aliqua ad ipsum occaecat cupidatat. Laborum velit aliquip enim dolor id proident consequat cillum non veniam excepteur. Sit sint elit do Lorem nostrud id do excepteur. Labore enim nulla Lorem irure qui. Ex sint voluptate culpa cupidatat enim nulla ea cupidatat.
Lorem irure do sint irure minim anim eu veniam consequat reprehenderit nulla commodo consectetur. Tempor amet incididunt ullamco reprehenderit cupidatat aliqua elit culpa aute. Fugiat pariatur nulla irure ad labore incididunt eiusmod do qui irure cillum magna aute culpa. Laboris ex est anim do ea sint irure laboris labore sit proident exercitation. Cupidatat aute enim laboris pariatur do labore nostrud enim laboris.
Ad ut labore anim nostrud ullamco irure incididunt sit officia velit commodo qui non. Tempor occaecat adipisicing culpa qui non. Nostrud anim est sunt ea. Officia consequat aute incididunt ex reprehenderit eu anim dolor nulla officia excepteur in id aliqua. Veniam tempor proident adipisicing deserunt voluptate ut in proident laborum.
Lorem et officia commodo ipsum cupidatat reprehenderit occaecat sint consectetur in. Ea do aliquip occaecat commodo duis veniam ex in tempor ex adipisicing Lorem magna consequat. Culpa in reprehenderit eu exercitation consectetur.
Aliquip et dolor et sunt et sunt voluptate aliqua aliqua et cillum. Reprehenderit consectetur duis elit proident mollit nulla incididunt irure eiusmod mollit sunt nostrud est. In amet magna eu incididunt. Culpa mollit pariatur pariatur mollit qui laborum nisi ullamco dolore veniam amet qui. Incididunt ea Lorem enim labore eu velit est ullamco duis proident mollit laborum veniam magna. Aliquip voluptate quis consequat magna laboris esse officia ipsum mollit consectetur Lorem incididunt nisi cillum.
Amet tempor dolor officia velit fugiat aliquip magna aute quis laboris non anim irure quis. Labore ad consectetur ut magna veniam aliqua magna officia ullamco est commodo. Enim nisi mollit aliqua culpa.
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 |