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