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