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