Component
Scroll Area
Scroll Area
Augments native scroll functionality for custom, cross-browser styling.
Installation
Install the following dependencies
npm i @radix-ui/react-scroll-areaCopy and paste the following code into your project
components/ui/scroll-area/index.tsx
'use client'
import * as React from 'react'
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
import { createStyleContext } from '@shadow-panda/style-context'
import { styled } from '@shadow-panda/styled-system/jsx'
import { scrollArea } from '@shadow-panda/styled-system/recipes'
const { withProvider, withContext } = createStyleContext(scrollArea)
const Viewport = withContext(ScrollAreaPrimitive.Viewport, 'viewport')
const Corner = withContext(ScrollAreaPrimitive.Corner, 'corner')
const Thumb = withContext(ScrollAreaPrimitive.ScrollAreaThumb, 'thumb')
const BaseScrollBar = React.forwardRef<
React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
>(({ orientation = 'vertical', ...props }, ref) => (
<ScrollAreaPrimitive.ScrollAreaScrollbar
ref={ref}
orientation={orientation}
data-orientation={orientation}
{...props}
>
<Thumb />
</ScrollAreaPrimitive.ScrollAreaScrollbar>
))
BaseScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
export const ScrollBar = withContext(styled(BaseScrollBar), 'scrollbar')
const BaseScrollArea = React.forwardRef<
React.ElementRef<typeof ScrollAreaPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
>(({ children, ...props }, ref) => (
<ScrollAreaPrimitive.Root ref={ref} {...props}>
<Viewport>{children}</Viewport>
<ScrollBar />
<Corner />
</ScrollAreaPrimitive.Root>
))
BaseScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
export const ScrollArea = withProvider(styled(BaseScrollArea), 'root')Update the import paths to match your project setup
Usage
import { ScrollArea } from '@/components/ui/scroll-area'<ScrollArea h="200px" w="350px" rounded="md" border="base" p="4">
Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the
place: under the king's pillow, in his soup, even in the royal toilet. The king was furious, but
he couldn't seem to stop Jokester. And then, one day, the people of the kingdom discovered that
the jokes left by Jokester were so funny that they couldn't help but laugh. And once they started
laughing, they couldn't stop.
</ScrollArea>