Occaecat sit laboris fugiat nisi reprehenderit excepteur nulla excepteur irure enim ut qui non. Veniam deserunt ea qui tempor dolore pariatur ullamco id amet id consequat eiusmod irure. Officia quis consectetur pariatur do cillum. Eu quis irure est quis reprehenderit.
Veniam fugiat adipisicing sint ea ipsum incididunt aliquip non est deserunt. Ullamco velit laboris cillum minim aliquip sunt consectetur eu elit in ut. Sit culpa id incididunt reprehenderit laboris non ullamco id mollit sint non in. Est aliquip ea tempor ipsum sunt pariatur culpa reprehenderit.
Qui laborum in occaecat elit sunt qui ex ad veniam sunt. Consequat reprehenderit sit occaecat sit aliqua nulla consectetur proident minim officia commodo culpa. Officia adipisicing aute incididunt deserunt nisi adipisicing duis commodo do consequat enim. Voluptate irure ad mollit consectetur exercitation enim occaecat do ut do ullamco Lorem elit. Sit nisi laborum aliquip consectetur fugiat.
Eu minim dolor adipisicing enim in laborum deserunt ipsum velit mollit aute velit nisi. Ad ea officia incididunt duis velit. Veniam tempor reprehenderit in deserunt enim amet aliqua officia nulla quis ipsum. Et eu reprehenderit non in quis nulla Lorem occaecat fugiat elit.
Laboris dolore aliquip aliqua pariatur sit enim. Amet quis adipisicing esse adipisicing. Occaecat eu mollit minim enim sint nostrud deserunt et nulla fugiat eiusmod proident aute nostrud.
Aute exercitation laboris est eu est deserunt ea adipisicing reprehenderit exercitation ipsum. Enim amet duis ex occaecat sunt elit incididunt duis magna duis elit reprehenderit sit. Ad ad consectetur cupidatat est aute excepteur laboris deserunt.
Ea occaecat quis ex laboris eiusmod reprehenderit pariatur dolore id sint deserunt proident exercitation Lorem. Magna mollit velit sunt aute ex magna eiusmod est commodo proident anim aliqua. Voluptate aliqua ex quis amet ut dolore cillum sit aliquip aliqua exercitation. Aliqua qui non fugiat enim aute quis non sunt culpa ad magna anim.
Sunt voluptate incididunt fugiat cupidatat tempor. Cillum elit officia culpa occaecat velit. Ut dolore reprehenderit aliquip duis sunt nostrud incididunt consectetur. Consequat laborum nostrud ea eu amet. Veniam occaecat anim id labore ea non qui. Aute labore laboris ex quis sunt cupidatat anim irure enim aliqua consectetur anim.
Ipsum qui labore laborum elit sunt incididunt id amet sint pariatur. Do mollit ipsum officia dolor enim nisi occaecat commodo. Excepteur eiusmod ut aliqua officia ut elit ut sint Lorem officia aute commodo deserunt velit. Tempor nostrud anim ullamco eiusmod deserunt adipisicing id nisi amet. Magna anim sunt do consequat.
Esse pariatur ea ut et ex tempor non ex. Exercitation incididunt amet incididunt nisi labore duis ullamco. Esse velit do occaecat incididunt. Ipsum irure commodo sint sunt consectetur nisi amet et consectetur. Sit incididunt tempor ullamco sit magna consectetur eu ad est dolore proident commodo fugiat.
Installation
npx @park-ui/cli add scroll-areaAdd Component
Copy the code snippet below into you components folder.
'use client'
import { ScrollArea } from '@ark-ui/react/scroll-area'
import type { ComponentProps } from 'react'
import { createStyleContext } from 'styled-system/jsx'
import { scrollArea } from 'styled-system/recipes'
const { withProvider, withContext } = createStyleContext(scrollArea)
export type RootProps = ComponentProps<typeof Root>
export type ContentProps = ComponentProps<typeof Content>
export const Root = withProvider(ScrollArea.Root, 'root')
export const RootProvider = withProvider(ScrollArea.Root, 'root')
export const Content = withContext(ScrollArea.Content, 'content')
export const Corner = withContext(ScrollArea.Corner, 'corner')
export const Thumb = withContext(ScrollArea.Thumb, 'thumb')
export const Scrollbar = withContext(ScrollArea.Scrollbar, 'scrollbar', {
defaultProps: { children: <Thumb /> },
})
export const Viewport = withContext(ScrollArea.Viewport, 'viewport')
export { ScrollAreaContext as Context } from '@ark-ui/react/scroll-area'
Integrate Recipe
Integrate this recipe in to your Panda config.
import { defineSlotRecipe } from '@pandacss/dev'
export const scrollArea = defineSlotRecipe({
className: 'scroll-area',
slots: ['root', 'viewport', 'content', 'scrollbar', 'thumb', 'corner'],
base: {
root: {
display: 'flex',
flexDirection: 'column',
width: '100%',
height: '100%',
position: 'relative',
overflow: 'hidden',
'--scrollbar-margin': '0px',
'--scrollbar-size': 'calc(var(--thumb-size) + calc(var(--scrollbar-margin) * 2))',
},
viewport: {
display: 'flex',
flexDirection: 'column',
height: '100%',
width: '100%',
WebkitOverflowScrolling: 'touch',
scrollbarWidth: 'none',
'&::-webkit-scrollbar': {
display: 'none',
},
'&[data-overflow-x] [data-pinned]': {
_after: {
content: '""',
position: 'absolute',
pointerEvents: 'none',
top: '0',
bottom: '-1px',
width: '32px',
},
},
'&[data-overflow-x]:not([data-at-left]) [data-pinned="left"]': {
_after: {
insetInlineEnd: '0',
translate: '100% 0',
boxShadow: 'inset',
},
},
},
scrollbar: {
alignItems: 'center',
display: 'flex',
position: 'relative',
touchAction: 'none',
userSelect: 'none',
zIndex: 'overlay',
_vertical: {
flexDirection: 'column',
width: 'var(--scrollbar-size)',
py: 'var(--scrollbar-margin)',
'&:not([data-overflow-y])': {
display: 'none',
},
},
_horizontal: {
flexDirection: 'row',
height: 'var(--scrollbar-size)',
px: 'var(--scrollbar-margin)',
'&:not([data-overflow-x])': {
display: 'none',
},
},
},
thumb: {
borderRadius: 'full',
bg: 'var(--thumb-bg)',
transitionDuration: 'normal',
transitionProperty: 'background, color, box-shadow',
transitionTimingFunction: 'default',
_vertical: { width: 'var(--thumb-size)' },
_horizontal: { height: 'var(--thumb-size)' },
},
corner: {},
},
defaultVariants: {
size: 'md',
scrollbar: 'auto',
},
variants: {
scrollbar: {
auto: {
scrollbar: {
'&[data-scrolling], &[data-hover]': {
'--thumb-bg': '{colors.gray.subtle.bg.active}',
},
},
},
visible: {
content: {
'&[data-overflow-y]': {
pe: 'var(--scrollbar-size)',
},
'&[data-overflow-x]': {
pb: 'var(--scrollbar-size)',
},
},
scrollbar: {
bg: 'gray.subtle.bg',
borderRadius: 'full',
},
thumb: {
'--thumb-bg': '{colors.gray.subtle.bg.active}',
},
},
},
size: {
xs: { root: { '--thumb-size': 'sizes.1' } },
sm: { root: { '--thumb-size': 'sizes.1.5' } },
md: { root: { '--thumb-size': 'sizes.2' } },
lg: { root: { '--thumb-size': 'sizes.2.5' } },
},
},
})
Usage
import { ScrollArea } from '@/components/ui'
<ScrollArea.Root>
<ScrollArea.Viewport>
<ScrollArea.Content />
</ScrollArea.Viewport>
<ScrollArea.Scrollbar>
<ScrollArea.Thumb />
</ScrollArea.Scrollbar>
<ScrollArea.Corner />
</ScrollArea.Root>
Examples
Visibility
Use the scrollbar prop to change the scrollbar visibility behavior.
Scrollbar: auto
Aliqua fugiat ad esse id aute laboris irure voluptate Lorem cupidatat. Sunt in eiusmod ullamco laboris voluptate minim in exercitation qui magna sint aliqua ex. Qui eiusmod est ad duis voluptate duis labore occaecat aute fugiat aliqua Lorem exercitation. Commodo et ad culpa cillum.
Laboris adipisicing id cillum amet reprehenderit laboris adipisicing ut enim nulla eu enim. Minim irure aliquip non sunt et. Esse consectetur esse non dolore non voluptate enim incididunt dolor ex amet occaecat. Ex nostrud minim ut sit voluptate reprehenderit laborum ipsum eiusmod nisi labore velit. Amet labore aute consectetur ut amet nisi esse ex magna in officia. Ut et officia laborum elit ipsum. Eu cillum eiusmod officia enim aute est ad anim.
Duis excepteur fugiat reprehenderit culpa tempor veniam mollit veniam. Duis fugiat fugiat irure in occaecat. Culpa dolore reprehenderit nostrud elit consectetur eu.
Eiusmod eu dolore consequat commodo excepteur id ut reprehenderit ea. Sint voluptate duis magna fugiat consectetur reprehenderit. Elit reprehenderit excepteur ea nisi ullamco consequat qui. Tempor enim pariatur velit reprehenderit nostrud non cillum cillum velit mollit est cupidatat consequat exercitation.
Anim sunt duis do nostrud velit sit nulla commodo elit id cillum commodo anim. Aliqua ullamco commodo quis adipisicing ea deserunt tempor consequat. Consequat tempor enim Lorem qui pariatur nisi irure labore voluptate reprehenderit ipsum dolore dolor. Et eiusmod in ut cillum sunt incididunt sint. Culpa veniam non sit enim magna laboris dolore occaecat proident aliquip. Dolore qui do deserunt amet quis sit do.
Voluptate duis incididunt proident cillum esse voluptate. Veniam ad eiusmod magna tempor mollit id dolor sit laborum nostrud cupidatat mollit. Ipsum et commodo dolore non sint laboris.
Nostrud ad aute consequat est eiusmod veniam consectetur quis sit. Anim ea do veniam reprehenderit ea officia elit in adipisicing tempor ullamco Lorem proident velit. Laborum duis exercitation sit exercitation esse et dolor voluptate sit dolor aliqua. Occaecat do aliquip laborum anim in nisi cillum do ut do est adipisicing et.
Et aliquip ea ea nulla pariatur. Ipsum eu et do sint dolor sint eiusmod laboris ipsum officia magna. Cupidatat id exercitation esse mollit deserunt sint ad ea enim laboris. Ea duis irure sunt consequat deserunt officia cillum voluptate irure. Culpa sunt mollit laboris et sint sit quis dolor. Qui labore esse consectetur exercitation eiusmod irure sint officia velit commodo irure anim.
Officia non aliqua irure est ea commodo dolore. Id ea dolor qui consectetur cillum culpa dolor cillum excepteur tempor labore et adipisicing commodo. Dolore enim occaecat esse eiusmod qui commodo ut fugiat occaecat. Dolor excepteur ad aute deserunt. Laborum sit duis ex sit. Non commodo id aute labore excepteur velit adipisicing Lorem velit eu. Id eu est eu qui anim.
Veniam exercitation id consequat labore eu occaecat duis nulla exercitation anim dolore nostrud cupidatat aliquip. Dolore mollit sit enim sunt irure anim esse nulla enim magna deserunt. Consequat culpa laboris adipisicing irure id nisi anim dolore amet ad commodo. Consectetur pariatur duis reprehenderit officia officia.
Scrollbar: visible
Sunt proident sit ullamco nulla commodo amet. Esse mollit non dolor dolor anim. Dolore culpa excepteur exercitation voluptate eiusmod nulla. Qui eu ea in excepteur aliquip amet. Voluptate esse nostrud tempor non eu consectetur eu laboris amet proident incididunt. Id anim officia aute aute est deserunt occaecat tempor dolor aute pariatur.
Adipisicing aute et laboris velit culpa reprehenderit occaecat excepteur veniam ad sit. Voluptate occaecat culpa esse magna. Voluptate ut deserunt Lorem non. Elit exercitation adipisicing in nulla. Laboris consectetur ut labore ad nisi aliqua quis. Quis cillum anim et sit aute qui duis aute culpa. Sunt culpa aliquip mollit est dolore est.
Id aliqua id ullamco ut. Ullamco ut quis in sit laborum velit. Adipisicing incididunt eiusmod magna exercitation duis mollit. Exercitation tempor non proident fugiat in officia dolor et veniam.
Reprehenderit aliqua voluptate incididunt elit consequat adipisicing. Sint sit incididunt aliquip ipsum quis exercitation ipsum velit in fugiat officia Lorem aliquip. Enim duis nisi anim laborum esse dolor pariatur do.
Cillum officia sit dolor veniam occaecat ullamco et aliqua occaecat dolor dolore cupidatat incididunt. Et aliquip sit ullamco proident elit sint et tempor do. Lorem anim quis aute consectetur exercitation culpa labore sunt irure in consectetur.
In ullamco ut ullamco nostrud velit ea amet culpa sint mollit dolore sit consequat ea. Aliquip pariatur veniam anim labore enim nulla esse excepteur. Excepteur elit anim excepteur sint.
Qui proident laborum veniam sunt cupidatat dolore proident ut officia enim enim. Duis pariatur enim adipisicing minim ea sit duis. Labore anim esse Lorem occaecat quis velit nisi duis do eiusmod mollit anim cupidatat consectetur.
Ut reprehenderit nisi commodo id duis non consequat. Nulla id dolor proident pariatur proident ad. Consequat anim duis non labore excepteur laborum magna enim amet reprehenderit incididunt officia proident. Duis cillum exercitation laborum consectetur quis duis labore in. Fugiat laboris do ut adipisicing ipsum sit velit do est amet labore id ut.
Ad ipsum culpa exercitation exercitation cupidatat eiusmod nulla incididunt veniam reprehenderit. Est officia ipsum excepteur laboris incididunt commodo duis ex irure nisi aliqua magna deserunt. Nostrud in velit quis eu. Est aliquip id aliqua ex consequat anim consectetur ea qui eu. Cillum eiusmod veniam reprehenderit nostrud fugiat. Occaecat velit magna nulla dolor consectetur Lorem eiusmod. Cillum ea id cillum non do adipisicing adipisicing ipsum adipisicing pariatur.
Enim labore exercitation mollit dolore minim in esse aliquip. Sint id id in id sunt. Laborum ipsum ut non irure. Id et incididunt ea ut consectetur aliquip est ex qui veniam non ullamco.
Sizes
Use the size prop to change the size of the scroll area. This affects the scrollbar thickness and content padding.
Size: xs
Fugiat nisi incididunt dolore Lorem voluptate qui laboris excepteur ad. Consectetur enim ad dolore officia id reprehenderit mollit. Laboris velit ex ad veniam deserunt fugiat sint cillum aliquip cillum. Minim ex aute qui aliqua ullamco ex amet esse. Nulla in Lorem excepteur amet quis. Eu mollit eiusmod dolor ex occaecat sunt sit deserunt excepteur cupidatat.
Irure pariatur Lorem nulla esse labore fugiat. Culpa qui labore in minim nisi. Ullamco deserunt quis amet deserunt quis dolor incididunt. Ex ex incididunt incididunt cillum proident pariatur sit proident. Ex sint dolor amet id dolore qui fugiat duis. Aute voluptate amet sunt anim do deserunt nisi ea in aliquip ad excepteur.
Occaecat ad enim amet do aliqua do pariatur et irure culpa. Nulla cillum ut esse voluptate dolore irure fugiat pariatur adipisicing. Esse eiusmod esse in Lorem anim Lorem esse labore in irure commodo irure mollit nisi.
Adipisicing aute dolor duis est ullamco. Culpa pariatur nostrud laboris aute ullamco aliquip nisi. Tempor nostrud tempor fugiat est ad ut ipsum reprehenderit aliqua fugiat voluptate.
Dolore amet do mollit amet incididunt sit sunt enim excepteur labore consectetur in proident. Non velit quis aliquip ea Lorem commodo dolor ipsum. Elit amet adipisicing laboris ea exercitation qui reprehenderit laboris cupidatat fugiat culpa culpa. Quis voluptate excepteur ex deserunt enim dolore.
Ex ut aute reprehenderit deserunt nostrud quis velit amet sint. Pariatur pariatur tempor ullamco nisi est eu dolor tempor sit sunt officia nisi non. Dolor culpa nisi laboris magna sunt qui excepteur mollit ex reprehenderit nostrud cillum nulla tempor.
Ea irure veniam id tempor labore labore. Enim in quis ad pariatur et ipsum proident aute anim. Exercitation qui magna sunt officia pariatur ullamco sit ad reprehenderit. Sit cillum sit deserunt minim amet fugiat ut et. Culpa officia ex laborum irure sunt velit dolore dolor elit velit laborum proident dolore. Do deserunt magna exercitation enim ullamco voluptate et voluptate pariatur adipisicing do ipsum id magna.
Ad quis consequat quis laborum dolore ea in deserunt proident deserunt culpa anim. Esse labore veniam ullamco sunt voluptate aliquip eu Lorem laborum est magna non dolore exercitation. Fugiat culpa sunt velit dolor veniam consectetur est occaecat ullamco proident esse labore in aute. Sunt deserunt exercitation elit consectetur irure ullamco aliqua velit laboris do anim. Cupidatat cupidatat dolor nulla sit quis aliquip duis sint. Ad dolore nulla sit ullamco et sint. Sit id eu anim consectetur ullamco exercitation consectetur occaecat elit eu laboris officia.
Reprehenderit et sit ipsum ullamco. Officia sint culpa enim aliqua eiusmod laboris Lorem deserunt dolor tempor non ullamco. In incididunt esse minim consectetur excepteur ex esse laborum enim. Labore est dolor aliquip mollit. Irure cillum duis enim laborum anim cupidatat fugiat irure nostrud ullamco commodo qui. Ad pariatur enim occaecat consectetur pariatur qui sunt consectetur voluptate quis amet aute veniam.
In non qui cillum elit nulla cupidatat magna ullamco qui consequat dolor ad do commodo. Exercitation ut minim irure fugiat est non cillum deserunt. Nostrud incididunt duis dolor amet do enim cupidatat aliquip. Consequat proident anim ullamco ex labore dolor anim nulla duis aliquip anim. Aliqua labore excepteur sit laboris laboris. Ea cupidatat cupidatat voluptate eu incididunt laborum occaecat ex in.
Size: sm
Anim sint ea culpa irure sint esse ad laborum nostrud tempor ipsum exercitation duis. Esse dolore veniam amet laborum sint mollit amet aliqua quis incididunt velit. Mollit amet in in exercitation sunt mollit occaecat nulla Lorem tempor labore minim ea.
Labore sunt esse qui cillum in sint id nisi laborum elit minim pariatur esse. Anim mollit adipisicing cillum aliquip ipsum elit. Officia ex quis duis ad ea laboris fugiat reprehenderit deserunt. Enim adipisicing cupidatat ea proident dolor sunt. Dolor eiusmod minim sint anim mollit fugiat incididunt elit qui laboris proident.
Sunt Lorem sit magna fugiat fugiat pariatur quis ullamco eu ex esse. Lorem qui aliqua proident minim cillum do. Duis deserunt ex ad commodo quis ea aliqua irure tempor excepteur esse incididunt labore. Eu non laboris laboris elit. Commodo voluptate proident fugiat sunt cupidatat quis dolore irure cillum velit. Elit commodo fugiat sint consectetur nulla excepteur nostrud commodo non tempor cillum.
Ullamco labore consectetur ea laboris incididunt duis officia sint occaecat. Et mollit excepteur ex incididunt laboris. Aute ipsum dolor ut in sit minim pariatur. Ea labore magna aliqua eu esse sit qui do consectetur Lorem. Aliquip velit cupidatat sunt velit quis consectetur duis excepteur do.
In deserunt laboris ad pariatur adipisicing. Esse excepteur reprehenderit tempor cupidatat ut irure ipsum quis. Pariatur adipisicing quis adipisicing duis consequat qui eu laboris sit ex. Magna sunt eu consectetur quis aliquip deserunt laborum.
Nulla dolor ex proident cupidatat id commodo. Dolore labore sunt ad ea nisi nisi sint mollit deserunt. Excepteur quis aliquip labore laboris veniam anim veniam velit. Consequat ad nulla cillum nostrud id. Deserunt ut aute magna enim proident ut anim quis do occaecat nisi consequat.
Laboris laborum adipisicing commodo elit culpa cillum irure. Cillum do officia Lorem aliquip laboris voluptate exercitation veniam. Aliquip ullamco fugiat id sunt cillum proident sunt adipisicing ut nostrud. Consectetur incididunt tempor ad aliqua occaecat adipisicing duis sint do ad tempor anim.
Ad fugiat reprehenderit aliqua occaecat amet do occaecat enim aute nulla. Nisi voluptate proident quis esse proident irure eiusmod est mollit excepteur. Laboris Lorem incididunt sunt veniam sit ad nostrud anim esse. Voluptate commodo excepteur reprehenderit voluptate ipsum do Lorem eu consequat non. Quis proident cupidatat voluptate nulla nostrud et dolor veniam do dolor sint ea adipisicing. Proident occaecat voluptate irure amet eiusmod laboris et mollit do.
Nisi labore velit cillum laborum sunt deserunt minim proident est enim nisi magna. Ut mollit consectetur pariatur et tempor id et non adipisicing. Fugiat quis deserunt occaecat ut et voluptate do consequat ut consequat id amet excepteur consectetur. Quis dolor sit non enim fugiat irure. Cillum est tempor adipisicing enim minim incididunt culpa eu ullamco magna in officia minim duis. Sunt pariatur non et est elit duis cillum amet proident incididunt consectetur ex ut id. Cillum excepteur irure irure magna aliqua aute incididunt aliquip amet do non occaecat culpa.
Eiusmod fugiat laboris deserunt qui adipisicing voluptate et adipisicing nisi qui consequat quis ex deserunt. Nulla esse eu voluptate ad veniam duis. Cupidatat dolore exercitation sint dolore fugiat ea nisi cupidatat dolore velit cupidatat laborum anim adipisicing.
Size: md
Ea sint officia commodo sit in. Qui sunt voluptate nulla est laboris occaecat. Irure laboris nisi id adipisicing laboris quis exercitation velit incididunt proident ea minim.
In mollit qui et Lorem commodo. Occaecat laboris officia culpa labore. Tempor adipisicing aliqua veniam cupidatat in elit deserunt voluptate nulla tempor minim.
Esse irure fugiat enim sit ut reprehenderit eiusmod anim non exercitation cupidatat ea ad deserunt. Velit anim aliqua elit eu mollit do officia consectetur incididunt consectetur eu deserunt proident ex. Dolore aute esse eu sit mollit Lorem. Mollit eu et commodo mollit. Commodo enim amet aute tempor duis labore eiusmod sunt ea irure laboris anim aute commodo. Id ea nulla exercitation in culpa ex.
Laboris duis cillum eu tempor consectetur. Qui aute consectetur esse ex officia id velit laboris velit ullamco. Proident adipisicing est culpa nostrud in sit veniam. Aute cillum dolor dolore incididunt consequat anim minim elit enim laborum.
Eu voluptate culpa laboris est minim eu ea nulla esse. Sit occaecat sunt duis sit sit dolore magna tempor ut adipisicing laboris ea quis labore. Ex aute qui tempor dolore. Nulla nulla sint ex tempor do nostrud laboris. Est incididunt enim aliqua culpa. Consectetur occaecat laboris occaecat culpa enim qui enim exercitation fugiat qui consequat ullamco. Minim irure amet voluptate dolor in ea nulla dolor nostrud adipisicing proident ut dolore aliqua.
Lorem amet eu qui quis nostrud qui Lorem sint et labore. Ut sint minim exercitation anim sunt do excepteur ullamco est irure veniam excepteur ex. Elit do ex adipisicing tempor exercitation. Labore enim minim nostrud proident anim ea. Nisi ullamco est sit tempor id. Minim in nisi fugiat nulla excepteur magna.
Esse officia culpa cillum aliquip dolor consequat ex exercitation ad reprehenderit. Minim ex in pariatur sunt in exercitation nostrud nostrud ad labore. Ea voluptate cillum minim ut veniam eu amet ea deserunt reprehenderit ex laboris irure consequat. Magna reprehenderit nulla velit in duis deserunt aute duis id anim sint. Minim irure est culpa aute.
Labore ipsum qui mollit ad quis minim. Labore ut commodo non adipisicing qui non dolor non consequat exercitation nisi esse eiusmod. Cupidatat anim cupidatat occaecat ad eu aliqua exercitation velit culpa consequat consequat ad duis excepteur. Id sunt veniam dolor anim sunt aliqua officia anim do cupidatat. Dolor dolore reprehenderit esse et minim sunt. Cupidatat anim mollit in laborum excepteur consequat occaecat do nostrud fugiat ad enim velit. Fugiat occaecat ad dolore magna adipisicing pariatur.
Aute amet sunt culpa aliqua adipisicing amet deserunt deserunt sint sunt nisi. Consequat cupidatat magna pariatur eu laboris dolore proident qui excepteur pariatur. Deserunt laboris duis do consectetur mollit laboris ea dolor velit cillum. Consequat qui nostrud adipisicing sint consectetur est enim occaecat officia laboris duis duis aute mollit. Excepteur ut laboris est ipsum est laborum ipsum id sit eu excepteur laborum. Labore Lorem laboris duis minim. Nisi eiusmod voluptate dolore dolor eiusmod commodo culpa cillum mollit minim in aliquip enim commodo.
Occaecat culpa aliquip ipsum et nisi aliqua veniam incididunt laboris consectetur. Commodo id incididunt nisi aliqua eiusmod occaecat mollit. Exercitation pariatur pariatur consequat do ad aliqua sint ipsum eu pariatur et ipsum consectetur. Irure fugiat ad tempor mollit ex officia aliquip proident officia excepteur ullamco sit nulla. Lorem commodo ipsum eu adipisicing Lorem et est qui in pariatur qui nisi.
Size: lg
Qui adipisicing sit laboris dolor sunt sunt enim. Qui irure esse magna velit pariatur incididunt dolore duis velit officia excepteur ea dolore. Cupidatat est occaecat duis culpa non dolor qui dolore mollit sit labore in aliqua duis. Cillum laborum tempor tempor magna occaecat exercitation fugiat. Reprehenderit eu mollit ipsum incididunt. Cillum pariatur excepteur est officia nisi sit voluptate ipsum eu voluptate est. Sunt nostrud consectetur sit aliquip adipisicing.
In duis cupidatat commodo qui velit tempor elit culpa pariatur qui dolore commodo. Aliquip adipisicing anim ut sunt eu laborum ex do. Ullamco incididunt veniam consectetur ex. Fugiat id excepteur minim dolor veniam nulla non est consequat ut fugiat. Dolor et sint eu fugiat qui. Consequat est anim nisi ipsum ex laboris qui officia non pariatur.
Et minim cillum cupidatat excepteur in laborum aliquip irure. Pariatur non consectetur incididunt nulla qui sit et ea. Amet ad aute sint nulla consectetur sunt adipisicing dolore id velit. Excepteur commodo amet qui do commodo minim nulla. Ea velit excepteur pariatur sunt aliquip anim quis aliquip voluptate consequat. Dolor aliqua ad amet qui eu culpa do et est adipisicing culpa nostrud incididunt.
Ad esse duis commodo laboris veniam ut. Dolor id velit laborum consectetur eiusmod sunt elit qui occaecat non consequat. Anim occaecat commodo fugiat elit qui aute do magna nisi amet excepteur aute. Eiusmod nulla elit occaecat labore eu non adipisicing mollit. Quis velit ad et occaecat non.
Id aliqua minim deserunt eiusmod nostrud. Id veniam cillum exercitation tempor sunt labore ipsum exercitation reprehenderit eu. Occaecat anim mollit in cupidatat culpa est.
Qui amet sit anim qui nostrud sit aute ullamco ut minim quis quis culpa. Non irure esse reprehenderit veniam et deserunt eiusmod quis proident. Cupidatat eu reprehenderit tempor mollit cupidatat nisi ullamco duis esse duis.
Minim aute velit enim amet ea. Ea aute dolore elit consequat culpa proident minim ullamco anim aliquip nulla fugiat eu. Anim proident mollit minim ullamco culpa dolor veniam est. Nisi nisi consectetur labore adipisicing anim incididunt labore. Laborum laborum dolore ad eiusmod elit consectetur minim sunt ex. Aliquip cillum labore magna ad nulla cillum consectetur veniam non duis. Elit amet aute sunt anim et.
Est Lorem consectetur cillum est sit mollit voluptate proident. Et ea eu eiusmod est ut et quis qui ipsum nostrud in excepteur excepteur. Reprehenderit reprehenderit incididunt velit magna magna tempor veniam cupidatat anim sunt nostrud incididunt ea veniam.
Cillum proident pariatur cupidatat duis consequat Lorem veniam nisi ea elit et sunt nisi. Anim do dolore fugiat eiusmod duis sunt ullamco veniam exercitation. Quis excepteur dolore laboris adipisicing incididunt eu enim. Labore quis incididunt esse aliqua aute non consequat enim pariatur voluptate ex ad amet id. Irure magna culpa quis veniam mollit non pariatur ea est ea dolor.
Excepteur elit do eiusmod excepteur anim aliqua sint aliquip in adipisicing voluptate. Officia minim aliquip nisi sunt laboris aute culpa dolor esse do anim. Esse Lorem commodo nostrud ex id magna dolore in esse aute Lorem irure fugiat. Labore ex cillum officia minim laborum do eu officia adipisicing nisi sint aliquip pariatur incididunt. Fugiat sunt excepteur enim amet enim in Lorem commodo aliqua ad ipsum voluptate elit velit. Esse incididunt in nisi in dolor cillum commodo laboris veniam consequat aliqua magna anim. Sit id eiusmod eu voluptate aliqua exercitation elit esse pariatur.
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 |