Preview
Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
Card 7
Card 8
Installation
<> import.ts
import { Fade } from "@/components/ui/fade"Code
<> component.tsx
import { Fade } from "@/components/ui/fade"
<Fade />API Reference
Fade
Adds gradient fade overlays to the left and/or right edges of content.
<> import.ts
import { Fade } from "@/components/ui/fade"Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | Scrollable content to wrap |
className | string | "" | Additional CSS classes |
fadeLeft | boolean | true | Show left fade |
fadeRight | boolean | true | Show right fade |
fadeWidth | "sm" | "md" | "lg" | "md" | Fade overlay width |
fadeOpacity | number | 0.8 | Fade intensity (0-1) |