Deserunt consequat tempor nulla excepteur veniam consectetur elit. Voluptate exercitation consectetur proident tempor nostrud nostrud commodo dolor pariatur reprehenderit culpa consequat. Incididunt labore duis commodo aliqua pariatur ut sunt quis dolore ea.
Sunt qui non cillum irure. Consectetur et est occaecat ipsum veniam sint. Laboris sint excepteur elit nulla est commodo cillum duis cillum pariatur.
Dolore voluptate cillum est sint aliqua ullamco et deserunt officia culpa enim excepteur anim. Occaecat ea voluptate ad officia mollit aute mollit ipsum quis ex veniam. Adipisicing magna occaecat velit amet exercitation Lorem labore.
Lorem officia voluptate eu elit consectetur amet magna officia eiusmod velit. Reprehenderit culpa quis eu exercitation veniam commodo do mollit aliqua amet commodo. Fugiat tempor sunt Lorem labore quis. Cillum enim eiusmod eu in quis occaecat excepteur mollit exercitation Lorem in. Irure labore adipisicing pariatur in culpa. Anim ipsum ullamco aliqua occaecat eu est cillum. Pariatur ad elit in aliqua officia anim elit culpa in eiusmod.
Culpa ut proident commodo dolor adipisicing eiusmod excepteur. Mollit mollit consequat do sint esse sint pariatur laborum. Nulla reprehenderit quis anim irure do adipisicing tempor ullamco culpa elit voluptate et esse anim.
Commodo laborum dolore adipisicing et eu labore sit laboris. Laborum officia commodo cillum pariatur non dolore cillum laboris eiusmod nulla. Laboris eu quis eu culpa excepteur ullamco amet incididunt dolore nisi. Dolore eiusmod veniam nulla culpa aute aute est laboris nisi. Amet in nulla elit occaecat eu enim ex. Duis cupidatat labore deserunt aute. Sit culpa laboris occaecat ullamco ullamco ex aliqua duis sunt cupidatat tempor incididunt duis.
Quis laborum nostrud nulla ex. Lorem cillum exercitation culpa adipisicing magna deserunt consectetur elit sint ipsum. Laboris minim duis aliquip do consectetur pariatur. Aliqua nisi tempor aliquip pariatur do enim ex do sint. Pariatur incididunt quis cillum nisi cillum et qui excepteur est sint excepteur duis velit enim. Ipsum deserunt dolore duis aute cupidatat.
Irure do nostrud sit nulla elit amet amet consectetur sint commodo esse dolore qui. Proident veniam consectetur Lorem occaecat laborum ipsum id sit dolore tempor proident occaecat deserunt. Laborum mollit eiusmod commodo incididunt ullamco et nulla nulla. Ad deserunt qui cupidatat deserunt mollit aliqua incididunt commodo ullamco ipsum enim. In ullamco magna culpa mollit cillum amet ex dolore ex exercitation. Aliquip nisi duis tempor cillum dolor id sint excepteur magna et aute tempor nostrud ad.
Dolore proident labore ex laborum sunt ipsum. Cupidatat consequat anim irure pariatur nisi sunt proident. In commodo deserunt eu nisi et mollit sunt. Sit id excepteur incididunt elit non culpa laborum amet cupidatat. Et aliqua mollit laboris aliquip irure labore aliquip proident ad eiusmod quis sunt aute. Dolore ipsum amet dolore id do. Fugiat incididunt proident nostrud velit sint amet minim culpa Lorem aliquip amet.
Elit nostrud esse aute adipisicing deserunt anim. Duis duis quis laborum veniam minim id voluptate labore magna ex voluptate adipisicing adipisicing. Voluptate incididunt enim fugiat ullamco est.
Installation
npx @park-ui/cli@next 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 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 Scrollbar = withContext(ScrollArea.Scrollbar, 'scrollbar')
export const Thumb = withContext(ScrollArea.Thumb, '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',
},
},
content: {
minWidth: '100%',
},
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: {},
},
variants: {
variant: {
auto: {
scrollbar: {
'&[data-scrolling]': {
'--thumb-bg': '{colors.gray.a8}',
},
},
},
visible: {
content: {
'&[data-overflow-y]': {
pe: 'calc(var(--scrollbar-size) * 2)',
},
'&[data-overflow-x]': {
pb: 'calc(var(--scrollbar-size) * 2)',
},
},
scrollbar: {
bg: 'gray.a3',
borderRadius: 'full',
},
thumb: {
'--thumb-bg': '{colors.gray.a8}',
},
},
},
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',
},
},
},
},
defaultVariants: {
size: 'md',
variant: 'auto',
},
})
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
Variants
Use the variant prop to change the scrollbar visibility behavior.
Variant: auto
Minim non eiusmod quis ea excepteur. Ea aute do do consequat sunt dolore duis cillum dolore quis deserunt. Ipsum et magna veniam nostrud ut laboris sunt.
Dolore non ea tempor Lorem ullamco id id id cillum proident. Esse laborum reprehenderit aute quis mollit mollit voluptate. Mollit nostrud commodo ut excepteur eu aute esse sit. Quis ullamco ullamco magna mollit deserunt aute officia adipisicing enim veniam.
Ullamco irure dolore ad consectetur Lorem dolore. Mollit enim nisi exercitation consequat ullamco dolor consectetur reprehenderit minim minim magna amet. Tempor mollit ex esse deserunt ullamco tempor ex quis. Sit minim aliqua reprehenderit eiusmod irure nisi nulla commodo reprehenderit officia. Veniam esse ex aliquip eu elit ex ex qui. Eu ad in Lorem anim.
Est labore dolor in ipsum nisi laborum id culpa nisi do non ut. Amet nisi ut laborum quis cupidatat qui dolore proident. Enim tempor excepteur voluptate Lorem pariatur nisi exercitation qui consequat labore nisi in laborum.
Ullamco fugiat anim amet ad velit reprehenderit in. Proident ex qui consectetur aute ullamco et Lorem cillum. In consequat pariatur sunt aute nostrud enim ut veniam nulla nulla consectetur eu. Do exercitation culpa consectetur dolore dolore dolore ex. Pariatur et in duis consectetur sint id sit incididunt est fugiat consectetur. Excepteur nulla officia ad sit. Minim Lorem consectetur proident ad exercitation aliqua Lorem.
Et id quis officia magna elit culpa excepteur nostrud magna id officia. Veniam aute nulla nostrud culpa veniam cupidatat laborum velit cupidatat esse commodo amet. Anim proident ullamco ea duis adipisicing aute excepteur mollit et nisi cupidatat proident non nisi. Voluptate ad amet commodo tempor dolor sint.
Minim ad adipisicing labore et eu duis dolore qui velit in enim mollit. Anim nostrud veniam culpa aliquip aute voluptate sint laboris aliqua sunt consequat. Aliqua enim eiusmod mollit fugiat id do eiusmod dolor aliqua pariatur nisi id. Nisi aute culpa esse eu veniam in laboris occaecat duis et. Nostrud eu do excepteur id cupidatat commodo cupidatat cupidatat commodo ea veniam reprehenderit voluptate magna. Aliquip ipsum sit elit non esse nulla amet minim minim. Est occaecat proident voluptate ex ex velit dolore adipisicing cillum consequat est magna laborum amet.
Velit enim adipisicing fugiat laborum velit enim minim ea eu culpa ipsum enim. Voluptate in nulla cupidatat nulla quis enim anim esse ea Lorem adipisicing in. Lorem ipsum pariatur nulla dolor veniam est id. Nulla tempor dolore sint quis et.
Velit sunt ullamco et nulla quis ullamco et aute mollit esse minim exercitation cupidatat. Cillum laborum laborum sunt velit laborum culpa anim elit nostrud laborum. Mollit non enim do laborum dolore quis quis elit Lorem amet veniam. Ut nulla minim quis laborum commodo cillum fugiat reprehenderit labore sunt esse consectetur est duis. Est sint officia esse anim non consectetur deserunt ullamco cupidatat culpa pariatur culpa ad. Ullamco aute ex velit laboris sit ad duis esse enim id.
Sunt eiusmod commodo reprehenderit elit non dolore qui ullamco. Occaecat culpa excepteur mollit excepteur sunt ex enim ipsum deserunt quis sunt mollit est. Exercitation ad et tempor officia eu veniam enim dolore fugiat eu officia duis.
Variant: visible
Ea enim nostrud exercitation id. Exercitation laborum amet consequat laboris veniam do exercitation anim eiusmod mollit deserunt id. Lorem aliquip incididunt tempor cillum magna nulla. Cupidatat enim eiusmod occaecat cupidatat incididunt do. Dolor cupidatat non tempor cupidatat est dolor reprehenderit irure nisi. Mollit aliquip consectetur enim est.
Est Lorem reprehenderit labore sit sunt pariatur fugiat excepteur minim velit non in mollit pariatur. Incididunt tempor velit elit irure ex ipsum nisi commodo nostrud cillum nulla nostrud non quis. Dolor eu do nostrud mollit ut aute labore laboris est ad commodo sit dolore proident. Labore do ullamco commodo elit laboris aliqua officia fugiat. Ex esse do id amet dolor consectetur pariatur fugiat incididunt fugiat voluptate. Elit esse exercitation proident dolore aliquip veniam aliqua magna ex pariatur aute.
Dolore laborum ad adipisicing eiusmod magna. Deserunt commodo duis proident cupidatat. Minim pariatur non commodo adipisicing voluptate sit sit. Commodo et laborum mollit et ex. Ea sunt eiusmod cupidatat non esse.
Do dolore ea irure id amet officia cupidatat mollit. Eu mollit non cupidatat nostrud in et officia anim aliquip nostrud id id. Cillum tempor duis officia nisi cillum veniam id incididunt reprehenderit eiusmod culpa excepteur. Excepteur dolor et cillum qui. Aliquip exercitation mollit ex anim culpa dolor aliqua elit cupidatat officia cupidatat aute minim pariatur. Labore do ut exercitation sint quis veniam dolor exercitation. Reprehenderit tempor culpa eu excepteur fugiat.
In sunt non qui eu laboris adipisicing aliqua ullamco do irure ad in ut. Laboris deserunt sint culpa cillum cillum velit enim reprehenderit. Nisi culpa irure commodo pariatur cillum est Lorem do officia ad. Occaecat ullamco ex commodo tempor. Tempor aliqua ipsum occaecat ipsum elit. Exercitation ex qui commodo ad proident eiusmod cillum aliqua Lorem proident magna non ex eu.
Occaecat fugiat voluptate nisi exercitation sunt. Esse ea ipsum deserunt cillum sint deserunt. Magna ad fugiat laboris nulla. Sit voluptate pariatur excepteur qui cupidatat dolore nisi anim. Labore reprehenderit cillum enim et cillum proident aliqua nulla.
Amet excepteur ad nulla veniam minim ea dolore velit consectetur et. Deserunt in consequat excepteur enim. Aliquip quis nisi ullamco ipsum sunt eu laborum eu veniam ut ut anim mollit aliquip. Pariatur commodo occaecat sit excepteur exercitation aliquip. Elit irure id velit eu irure ullamco dolore. Ad magna nulla cupidatat sunt aliqua magna adipisicing dolor adipisicing nostrud occaecat.
Adipisicing dolor adipisicing do fugiat. In et aliquip est amet exercitation elit. Ex dolor culpa consectetur duis enim. Mollit aliqua est cillum eiusmod sit dolore incididunt aliqua. Cillum aliqua duis in consequat non qui. Aute ea ex exercitation qui anim sint cupidatat officia tempor ut laborum eu dolore et.
Pariatur sit veniam velit aliquip. Consequat id elit veniam tempor aliqua tempor. Magna aute et labore do esse irure velit reprehenderit quis laborum enim.
Non labore aliqua nostrud nulla consectetur voluptate. Ullamco sint ullamco enim eiusmod. Excepteur velit occaecat cillum commodo mollit sint duis pariatur ea cillum aliquip officia Lorem. Consectetur reprehenderit eu commodo incididunt elit dolore pariatur cillum non enim minim minim.
Sizes
Use the size prop to change the size of the scroll area. This affects the scrollbar thickness and content padding.
Size: xs
Consectetur sunt minim cupidatat laboris cillum eiusmod laboris et eu veniam sit irure ut consequat. Eu enim in laborum consequat non enim dolor laboris. Sit elit exercitation elit consectetur velit minim dolor aliqua quis incididunt ad anim. Officia do sunt nulla enim consectetur occaecat cillum est velit. Labore et et dolore et. Est dolore sit tempor laboris ex reprehenderit sint amet consequat ipsum fugiat ut adipisicing.
Ea laborum ex officia culpa est consequat nisi cupidatat dolore aliquip irure commodo est. Ullamco dolor non aliqua cupidatat ex ipsum. Est nostrud veniam officia est ullamco sunt id. Ex aliquip minim sit ipsum cillum reprehenderit veniam culpa. Cupidatat qui sunt quis ex voluptate cillum.
Dolore culpa cupidatat proident id do do nisi irure cupidatat sunt enim ad reprehenderit. Consequat deserunt laborum duis incididunt et occaecat officia ipsum et Lorem. Ex fugiat reprehenderit id non veniam nostrud sit ad aliquip. Dolore culpa tempor ullamco occaecat cillum in minim ea consequat mollit commodo dolor esse. Irure fugiat Lorem nulla adipisicing Lorem quis sunt laboris sunt. In ad nulla amet nisi id amet ipsum est anim exercitation ad dolore.
Dolor deserunt amet irure qui Lorem eiusmod deserunt enim deserunt exercitation id. Non exercitation ut irure laboris eu in. Cupidatat ad anim sunt cillum sit incididunt. Incididunt sunt reprehenderit labore irure ut dolore culpa enim. Ullamco sit do velit fugiat Lorem minim exercitation nisi id quis laborum nisi minim do. Sunt excepteur est duis anim dolor ut ut nisi et pariatur labore do Lorem exercitation.
Aute minim ipsum commodo ullamco. Exercitation mollit dolore aliquip ea exercitation et amet minim irure ad. Dolor veniam ea fugiat occaecat est. Voluptate cupidatat aliquip ipsum culpa quis officia consequat laborum adipisicing veniam. Adipisicing consectetur irure adipisicing elit eu proident ad quis duis enim aliqua ex. Est esse proident anim nostrud dolor enim sunt reprehenderit non.
Enim consectetur officia dolore ea labore commodo. Velit non nostrud incididunt qui aute amet quis ut ea. Dolore ea sunt excepteur esse amet quis ex nulla ad reprehenderit fugiat.
Deserunt duis magna ullamco enim voluptate minim incididunt amet occaecat sunt ad do sunt. Est fugiat aliqua in eu est consequat nulla. Laboris et laboris deserunt proident sint laborum do incididunt. Est commodo do Lorem amet. Ea fugiat consectetur proident culpa commodo reprehenderit exercitation ipsum cupidatat eu id adipisicing sunt aliquip. Ea occaecat enim ex consectetur adipisicing exercitation. Amet nulla sint incididunt laborum non in proident.
Sunt irure est laborum deserunt. Laborum quis mollit cillum fugiat dolore minim culpa reprehenderit do. Pariatur dolor reprehenderit velit reprehenderit eiusmod mollit deserunt velit quis ea. Aliquip do exercitation magna sunt et sint dolor duis non cupidatat.
Ea deserunt officia ipsum non excepteur. Laborum tempor do do non magna. Fugiat do dolore laborum occaecat eu velit ullamco Lorem enim ullamco non. Proident ullamco ad consectetur sit. Enim elit fugiat anim aliquip laboris dolore nostrud dolore. Exercitation sint officia reprehenderit mollit velit occaecat. Culpa aute adipisicing deserunt laboris fugiat exercitation nostrud in exercitation ut veniam veniam quis.
Cupidatat commodo ullamco quis duis reprehenderit occaecat dolor do laboris exercitation enim quis. Commodo sit fugiat consectetur culpa cillum Lorem aute nostrud. Aliquip voluptate consequat excepteur dolore nulla.
Size: sm
Enim aliquip anim sit fugiat mollit do. Occaecat magna non do aute officia. Excepteur officia eu amet aliqua ad anim ad commodo ipsum. Incididunt reprehenderit dolore ullamco duis ullamco magna commodo. Et consectetur ut laboris labore fugiat.
Dolore elit pariatur ut irure voluptate excepteur cillum sint cillum. Proident amet et minim aute qui dolore veniam Lorem tempor veniam sint quis. Nisi non ullamco veniam aute exercitation excepteur qui sit adipisicing in labore. Reprehenderit in occaecat laborum consequat reprehenderit pariatur excepteur pariatur est proident. Lorem officia adipisicing aliquip excepteur fugiat est proident aliqua ad. Lorem minim commodo quis pariatur ut labore. Incididunt ea mollit id consectetur incididunt ullamco ad proident in pariatur pariatur officia consequat.
Enim deserunt id incididunt ea eiusmod in dolore occaecat laborum aute qui cillum. Eiusmod proident dolor cillum exercitation cillum. Sunt pariatur incididunt ex Lorem nulla magna consequat commodo sunt minim irure. Proident tempor tempor magna officia esse sint enim aliqua Lorem aliqua reprehenderit. Sunt velit anim officia qui incididunt nulla nisi. Fugiat nostrud sunt deserunt consectetur Lorem magna excepteur ex.
Incididunt ut magna cillum ullamco adipisicing consectetur sunt. Laborum magna do in sint elit minim esse et in dolore adipisicing in deserunt ipsum. Nisi adipisicing id ullamco est deserunt et cupidatat deserunt tempor. Cupidatat in pariatur excepteur ex reprehenderit nisi anim fugiat consequat. Sint veniam tempor commodo velit est proident ea consectetur in in do deserunt. Elit aute est aliqua dolore amet veniam ex Lorem voluptate voluptate magna commodo excepteur.
Sit anim fugiat ea cupidatat do sint occaecat. Magna minim sit proident nisi ea amet. Consectetur cupidatat esse est amet laboris adipisicing Lorem in eu tempor. Irure exercitation ex fugiat ea ipsum.
Qui reprehenderit cupidatat aliquip duis mollit esse cillum aute. Aliqua qui incididunt nulla dolore ea mollit et amet eu culpa fugiat. Nostrud dolore dolor cupidatat eiusmod commodo deserunt.
Aliqua excepteur dolor enim quis cupidatat est Lorem ad pariatur officia elit amet elit. Dolore exercitation cillum excepteur amet sit sunt laborum mollit in aute id. Id culpa deserunt cillum enim ad irure reprehenderit excepteur aute. Ut commodo ullamco fugiat aliqua eiusmod nulla. Commodo proident sunt in quis. Cupidatat sit exercitation labore cillum cillum irure Lorem et anim quis proident laborum.
Aliquip ex minim duis minim occaecat sit tempor cillum dolore. Irure incididunt proident ut commodo aute ipsum est sint adipisicing cupidatat. Irure eiusmod velit amet ea sint cillum ipsum reprehenderit cillum duis.
Commodo ipsum esse sint labore laboris excepteur labore eu tempor non non Lorem. Irure ipsum consequat irure excepteur sint commodo eiusmod nostrud et. Do esse qui cillum dolore dolore aliquip sunt proident proident. Tempor enim elit dolore enim voluptate eu eu sit qui incididunt deserunt adipisicing cillum consectetur.
Aute id magna exercitation ad amet cupidatat eu eu commodo proident officia eu amet. Sunt Lorem magna proident officia id duis aliqua ipsum minim ea. Culpa veniam aliquip veniam tempor officia laborum eu aliquip commodo ex consectetur anim ipsum. Laboris Lorem ex mollit laborum aliquip aute deserunt. Laborum culpa est sint occaecat commodo proident nisi consequat adipisicing voluptate.
Size: md
Ea deserunt ullamco est nulla aliquip et eu esse. Adipisicing nostrud amet velit veniam dolor ullamco. Do officia nisi non exercitation labore occaecat aliquip proident non duis id ea nostrud.
Ex quis ullamco reprehenderit eiusmod tempor culpa voluptate aliquip cupidatat excepteur officia. Id laborum irure mollit veniam reprehenderit anim proident aute eu. Laborum tempor sint dolor sint ex tempor sit mollit exercitation. Eiusmod esse sint est deserunt officia consectetur cupidatat nisi ex esse dolor.
Duis esse nisi non mollit nisi nulla deserunt aute laboris labore anim deserunt esse sunt. Occaecat esse cillum nostrud aliqua velit aute aliqua in adipisicing voluptate laborum. Aliquip dolore est consectetur culpa pariatur deserunt reprehenderit. Eu consectetur anim reprehenderit sit ipsum ad eiusmod ut nulla laboris ea officia officia.
Occaecat quis eu irure reprehenderit commodo cillum minim. Incididunt non cupidatat ex occaecat nisi nostrud anim do amet nisi dolor est do. Excepteur aute sint ex elit sit cupidatat ex est quis labore.
Deserunt magna nulla ex eu laborum. Eu officia laborum nisi commodo minim fugiat laboris id elit enim id aliquip quis commodo. Culpa laborum aliquip veniam enim sunt duis do adipisicing consectetur dolore deserunt elit. Est dolor non deserunt aliqua aute eiusmod excepteur eu anim non. Ut mollit laborum nostrud non incididunt cupidatat in cupidatat. Velit veniam labore nulla esse ea officia.
Amet duis cillum dolor quis. Id sunt incididunt ex et. Ut velit laboris ullamco sunt adipisicing. Magna id reprehenderit pariatur incididunt dolore. Ipsum quis commodo mollit eiusmod aliquip eiusmod sit magna eiusmod aliqua nisi voluptate consectetur deserunt. Proident aliqua aliquip occaecat qui irure anim exercitation consectetur sint et laboris pariatur eiusmod esse. Proident id nisi qui aliquip culpa incididunt magna.
Veniam laboris sit ullamco sit elit aliquip excepteur. Id est magna ipsum enim officia et et. Id laboris nostrud aliqua ut labore. Amet adipisicing voluptate nostrud eu eu do id mollit ut magna. Nostrud pariatur sit minim aute commodo cillum amet ad cupidatat qui ipsum eu non.
Proident eu proident esse enim do reprehenderit quis eiusmod ad quis nostrud reprehenderit pariatur mollit. Amet elit sit nostrud reprehenderit magna pariatur dolore. Anim eu eiusmod eu id velit. Exercitation officia cupidatat ullamco voluptate anim enim est enim cupidatat proident magna nostrud adipisicing. Ad ipsum irure deserunt deserunt nulla duis fugiat aute ullamco eu excepteur. Cillum est quis excepteur id nisi minim deserunt nisi aliqua ullamco velit enim et eiusmod. Esse minim ut ex nulla commodo anim dolore sint dolor sint incididunt consectetur ut.
Aliquip ipsum id cupidatat laboris dolore qui enim nostrud mollit quis sint deserunt. Irure labore quis anim proident. Laboris ut dolor fugiat cillum fugiat consectetur laborum minim ipsum aliquip mollit non consectetur. Labore culpa est reprehenderit elit nostrud dolore duis aute nostrud amet sit anim excepteur. Laboris pariatur laborum quis aliqua quis. Nisi nulla ad dolore cillum officia pariatur quis minim adipisicing fugiat.
Pariatur reprehenderit labore labore nostrud mollit est anim minim id. Laborum veniam quis nostrud exercitation deserunt sit dolore est anim ipsum ipsum. Sit proident excepteur ullamco esse nulla. Dolore ea Lorem tempor nulla labore sunt elit officia mollit dolore mollit non elit qui.
Size: lg
Veniam dolor occaecat ad ad nulla ut ut sint adipisicing. Et proident consequat cupidatat consequat in. Enim deserunt ut sint quis officia. Reprehenderit proident exercitation aliquip elit pariatur et.
Veniam elit excepteur labore ex non. Commodo in voluptate nisi ut est fugiat tempor nulla. Excepteur veniam sint irure pariatur ex cupidatat veniam amet minim. Non anim fugiat enim ex ea consectetur excepteur commodo amet proident sunt commodo officia. Sit ea non Lorem proident nostrud aute. Consectetur amet qui magna eu ea aute cillum.
Mollit et exercitation cupidatat sit sit non irure. Sint ipsum magna duis sit laborum esse sunt in ex quis eiusmod non. Est nisi culpa nostrud eu eiusmod est cillum esse ea. Esse id adipisicing incididunt aliquip proident consectetur cillum labore velit incididunt in occaecat nostrud et. Laboris quis cupidatat id reprehenderit deserunt. Do excepteur deserunt aute ipsum anim do irure reprehenderit. Consequat id est occaecat magna mollit adipisicing excepteur sint.
Minim reprehenderit mollit veniam do tempor proident non occaecat ad. Aliqua enim culpa pariatur aliqua et pariatur officia consequat cupidatat dolore consectetur. Minim aliqua sunt ut aute qui et magna id reprehenderit nulla ea occaecat elit.
Dolore magna amet commodo adipisicing. Adipisicing cillum aliqua duis deserunt nulla veniam laboris proident eu qui voluptate adipisicing. Ullamco aliqua consectetur tempor occaecat excepteur do velit deserunt eiusmod ipsum est.
Eiusmod proident culpa est qui consectetur culpa voluptate in elit Lorem veniam. Qui enim laborum Lorem elit irure minim reprehenderit. Laboris do ullamco mollit sint et tempor proident Lorem. Sint excepteur sit consequat magna do Lorem quis in veniam.
Non labore commodo aliquip incididunt irure eiusmod. Elit deserunt eiusmod mollit nisi exercitation elit. Eiusmod dolore incididunt quis fugiat consequat est. Et deserunt occaecat do consequat Lorem sunt est ullamco tempor laboris. Reprehenderit nostrud fugiat dolore deserunt eu labore dolore quis quis sunt nulla. Magna et pariatur labore cupidatat elit elit veniam irure.
Est non nostrud consectetur reprehenderit sunt reprehenderit proident culpa incididunt ullamco labore culpa. Nostrud esse cupidatat non do officia minim duis duis minim. Et cupidatat in aliqua laborum esse esse. Id consequat adipisicing labore et ea amet anim tempor culpa amet mollit nostrud amet.
Consequat occaecat ea culpa labore ea laborum quis consectetur adipisicing reprehenderit ipsum ad. Ea cillum culpa occaecat pariatur ut magna magna. Do deserunt sint dolor ut. Minim nulla nulla duis reprehenderit do adipisicing culpa enim cupidatat ullamco. Sit labore laborum anim veniam reprehenderit reprehenderit.
Anim ullamco officia commodo aliqua. Ex laborum magna proident do proident sit amet occaecat enim consequat eiusmod. Ex laborum laboris est mollit ut culpa est ad. Do ut qui anim esse cillum. Reprehenderit enim commodo nisi adipisicing. Aliqua tempor est ullamco velit laboris nostrud elit ipsum nostrud. Ut commodo adipisicing non consequat in pariatur aute ipsum mollit dolor ullamco ad laborum nisi.
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.
Props
Root
| Prop | Default | Type |
|---|---|---|
variant | '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 |