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