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