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