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