Scroll-area
Augments native scroll functionality for custom, cross-browser styling.
Installation
Install the following dependencies:
npm install @radix-ui/react-scroll-areaCopy and paste the following code into your project.
'use client';
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
import clsx from 'clsx';
import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react';
import styles from './styles.module.scss';
const ScrollArea = forwardRef<
ElementRef<typeof ScrollAreaPrimitive.Root>,
ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
>(({ className, children, ...props }, ref) => (
<ScrollAreaPrimitive.Root ref={ref} className={clsx(styles.root, className)} {...props}>
<ScrollAreaPrimitive.Viewport className={styles.viewport}>{children}</ScrollAreaPrimitive.Viewport>
<ScrollBar />
<ScrollAreaPrimitive.Corner />
</ScrollAreaPrimitive.Root>
));
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
const ScrollBar = forwardRef<
ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
>(({ className, orientation = 'vertical', ...props }, ref) => (
<ScrollAreaPrimitive.ScrollAreaScrollbar
ref={ref}
orientation={orientation}
className={clsx(
styles.scrollbar__base,
orientation === 'vertical' && styles.scrollbar__vertical,
orientation === 'horizontal' && styles.scrollbar__horizontal,
className
)}
{...props}
>
<ScrollAreaPrimitive.ScrollAreaThumb className={styles.scrollbar__thumb__area} />
</ScrollAreaPrimitive.ScrollAreaScrollbar>
));
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
export { ScrollArea, ScrollBar };Update the import paths to match your project setup.
Usage
import { ScrollArea } from '@/components/ui/scroll-area';<ScrollArea className='h-[200px] w-[350px] rounded-md border 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>
