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