{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-scroll-area-4","type":"registry:block","title":"Scroll area with fade effect","description":"Scroll area with fade effect","dependencies":["cn"],"registryDependencies":["scroll-area"],"files":[{"path":"c-scroll-area-4.tsx","type":"registry:block","content":"import { cn } from \"cn\"\nimport { ScrollArea } from \"@/components/ui/scroll-area\"\n\nexport function Pattern() {\n  return (\n    <ScrollArea\n      className={cn(\n        \"rounded-2xl h-72 w-48 border\",\n        \"**:data-[slot=scroll-area-thumb]:bg-foreground/15 **:data-[slot=scroll-area-thumb]:rounded-full\",\n        \"**:data-[slot=scroll-area-viewport]:mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))]\",\n        \"**:data-[slot=scroll-area-viewport]:mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))]\",\n        \"**:data-[slot=scroll-area-viewport]:mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))]\",\n        \"**:data-[slot=scroll-area-viewport]:mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))]\",\n        \"**:data-[slot=scroll-area-viewport]:[--fade-size:1.5rem]\"\n      )}\n    >\n      <div className=\"flex w-max flex-col gap-4 p-4\">\n        {Array.from({ length: 10 }).map((_, i) => (\n          <div\n            key={i}\n            className=\"rounded-2xl relative h-36 w-40 shrink-0 overflow-hidden border\"\n          >\n            <img\n              src={`https://picsum.photos/400/300?random=${i + 1}`}\n              alt={`Image ${i + 1}`}\n              className=\"h-full w-full object-cover\"\n            />\n          </div>\n        ))}\n      </div>\n    </ScrollArea>\n  )\n}","target":"components/examples/c-scroll-area-4.tsx"}],"meta":{"order":4}}