Scroll Area component
Scroll area
Installation
npx shadcn@latest add @caprice/scroll-areanpm install @caprice-ui/reactInstall the following dependencies:
npm install @base-ui/react lucide-reactAdd a cn helper
import { defineConfig, type VariantProps } from 'cva';import { twMerge } from 'tailwind-merge';export const { compose, cva, cx: cn,} = defineConfig({ hooks: { onComplete: (className: string) => twMerge(className), },});export type { VariantProps };Copy and paste the following code into your project.
'use client';import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';import type * as React from 'react';import { cn } from '@/lib/utils';/** * Groups all parts of the scroll area. * Renders a `<div>` element. * * Documentation: [Caprice UI Scroll Area](https://caprice-ui.com/docs/components/scroll-area) * * API Reference: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area#root) */export namespace ScrollArea { export type State = ScrollAreaPrimitive.Root.State; export type Props = React.ComponentProps<typeof ScrollAreaPrimitive.Root>;}export function ScrollArea({ className, children, ...props }: ScrollArea.Props) { return ( <ScrollAreaPrimitive.Root className={cn('', className)} data-slot="scroll-area" {...props}> <ScrollAreaPrimitive.Viewport className="" data-slot="scroll-area-viewport"> {children} </ScrollAreaPrimitive.Viewport> <ScrollBar data-slot="scroll-area-scrollbar" /> <ScrollAreaPrimitive.Corner data-slot="scroll-area-corner" /> </ScrollAreaPrimitive.Root> );}/** * A vertical or horizontal scrollbar for the scroll area. * Renders a `<div>` element. * * Documentation: [Caprice UI Scroll Area](https://caprice-ui.com/docs/components/scroll-area) * * API Reference: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area#scrollbar) */export namespace ScrollBar { export type State = ScrollAreaPrimitive.Scrollbar.State; export type Props = React.ComponentProps<typeof ScrollAreaPrimitive.Scrollbar>;}export function ScrollBar({ className, orientation = 'vertical', ...props }: ScrollBar.Props) { return ( <ScrollAreaPrimitive.Scrollbar className={cn('', className)} data-slot="scroll-area-scrollbar" orientation={orientation} {...props} > <ScrollAreaPrimitive.Thumb className="" data-slot="scroll-area-thumb" /> </ScrollAreaPrimitive.Scrollbar> );}Update the import paths to match your project setup.
Usage
import { ScrollArea } from "@/components/caprice-ui/scroll-area"import { ScrollArea } from "@caprice-ui/react/scroll-area"