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