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