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