// Layout

Scroll Area

Custom scrollable area with styled scrollbars.

// Rendering preview…

// Install

npx shadcn@latest add @dakik/scroll-area

// Usage

1import { ScrollArea, ScrollAreaScrollbar } from "@/components/ui/scroll-area";
2
3<ScrollArea />

// Code

1"use client";
2
3import {
4  ScrollArea as ArkScrollArea,
5  useScrollAreaContext,
6} from "@ark-ui/react/scroll-area";
7import type React from "react";
8import { tv, type VariantProps } from "tailwind-variants";
9import { cn } from "@/lib/utils";
10
11export const useScrollArea = useScrollAreaContext;
12
13const scrollAreaVariants = tv({
14  base: [
15    "h-full",
16    "rounded-[inherit]",
17    "outline-none",
18    "scrollbar-none",
19    "outline-none",
20  ],
21  variants: {
22    scrollFade: {
23      true: [
24        "mask-t-from-[calc(100%-var(--fade-size))]",
25        "mask-b-from-[calc(100%-var(--fade-size))]",
26        "data-at-top:mask-t-from-100%",
27        "data-at-bottom:mask-b-from-100%",
28        "transition-shadow",

// Dependencies

@ark-ui/react tailwind-variants