[{"data":1,"prerenderedAt":681},["ShallowReactive",2],{"navigation":3,"$fMW9jOOkNpZriWVK3P_bZYNOyYR2IEPvrHsC7cDBlJJc":446,"/docs/utilities/scroll-fade":459,"surround-/docs/utilities/scroll-fade":678},[4],{"title":5,"path":6,"stem":7,"children":8,"page":18},"Docs","/docs","docs",[9,294,320,338,351,377,390],{"title":10,"path":11,"stem":12,"children":13,"new":18,"type":293},"Components","/docs/components","docs/02.components",[14,20,24,28,32,37,41,45,49,53,57,61,65,69,73,77,81,85,89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,193,197,201,205,209,213,217,221,225,229,233,237,241,245,249,253,257,261,265,269,273,277,281,285,289],{"title":15,"path":16,"stem":17,"new":18,"type":19,"children":-1},"Accordion","/docs/components/accordion","docs/components/accordion",false,"component",{"title":21,"path":22,"stem":23,"new":18,"type":19,"children":-1},"Alert","/docs/components/alert","docs/components/alert",{"title":25,"path":26,"stem":27,"new":18,"type":19,"children":-1},"Alert Dialog","/docs/components/alert-dialog","docs/components/alert-dialog",{"title":29,"path":30,"stem":31,"new":18,"type":19,"children":-1},"Aspect Ratio","/docs/components/aspect-ratio","docs/components/aspect-ratio",{"title":33,"path":34,"stem":35,"new":36,"type":19,"children":-1},"Attachment","/docs/components/attachment","docs/components/attachment",true,{"title":38,"path":39,"stem":40,"new":18,"type":19,"children":-1},"Avatar","/docs/components/avatar","docs/components/avatar",{"title":42,"path":43,"stem":44,"new":18,"type":19,"children":-1},"Badge","/docs/components/badge","docs/components/badge",{"title":46,"path":47,"stem":48,"new":18,"type":19,"children":-1},"Breadcrumb","/docs/components/breadcrumb","docs/components/breadcrumb",{"title":50,"path":51,"stem":52,"new":36,"type":19,"children":-1},"Bubble","/docs/components/bubble","docs/components/bubble",{"title":54,"path":55,"stem":56,"new":18,"type":19,"children":-1},"Button","/docs/components/button","docs/components/button",{"title":58,"path":59,"stem":60,"new":18,"type":19,"children":-1},"Button Group","/docs/components/button-group","docs/components/button-group",{"title":62,"path":63,"stem":64,"new":18,"type":19,"children":-1},"Calendar","/docs/components/calendar","docs/components/calendar",{"title":66,"path":67,"stem":68,"new":18,"type":19,"children":-1},"Card","/docs/components/card","docs/components/card",{"title":70,"path":71,"stem":72,"new":18,"type":19,"children":-1},"Carousel","/docs/components/carousel","docs/components/carousel",{"title":74,"path":75,"stem":76,"new":18,"type":19,"children":-1},"Chart","/docs/components/chart","docs/components/chart",{"title":78,"path":79,"stem":80,"new":18,"type":19,"children":-1},"Checkbox","/docs/components/checkbox","docs/components/checkbox",{"title":82,"path":83,"stem":84,"new":18,"type":19,"children":-1},"Collapsible","/docs/components/collapsible","docs/components/collapsible",{"title":86,"path":87,"stem":88,"new":18,"type":19,"children":-1},"Combobox","/docs/components/combobox","docs/components/combobox",{"title":90,"path":91,"stem":92,"new":18,"type":19,"children":-1},"Command","/docs/components/command","docs/components/command",{"title":94,"path":95,"stem":96,"new":18,"type":19,"children":-1},"Context Menu","/docs/components/context-menu","docs/components/context-menu",{"title":98,"path":99,"stem":100,"new":18,"type":19,"children":-1},"Data Table","/docs/components/data-table","docs/components/data-table",{"title":102,"path":103,"stem":104,"new":18,"type":19,"children":-1},"Date Picker","/docs/components/date-picker","docs/components/date-picker",{"title":106,"path":107,"stem":108,"new":18,"type":19,"children":-1},"Dialog","/docs/components/dialog","docs/components/dialog",{"title":110,"path":111,"stem":112,"new":18,"type":19,"children":-1},"Drawer","/docs/components/drawer","docs/components/drawer",{"title":114,"path":115,"stem":116,"new":18,"type":19,"children":-1},"Dropdown Menu","/docs/components/dropdown-menu","docs/components/dropdown-menu",{"title":118,"path":119,"stem":120,"new":18,"type":19,"children":-1},"Empty","/docs/components/empty","docs/components/empty",{"title":122,"path":123,"stem":124,"new":18,"type":19,"children":-1},"Field","/docs/components/field","docs/components/field",{"title":126,"path":127,"stem":128,"new":18,"type":19,"children":-1},"Form","/docs/components/form","docs/components/form",{"title":130,"path":131,"stem":132,"new":18,"type":19,"children":-1},"Hover Card","/docs/components/hover-card","docs/components/hover-card",{"title":134,"path":135,"stem":136,"new":18,"type":19,"children":-1},"Input","/docs/components/input","docs/components/input",{"title":138,"path":139,"stem":140,"new":18,"type":19,"children":-1},"Input Group","/docs/components/input-group","docs/components/input-group",{"title":142,"path":143,"stem":144,"new":18,"type":19,"children":-1},"Input OTP","/docs/components/input-otp","docs/components/input-otp",{"title":146,"path":147,"stem":148,"new":18,"type":19,"children":-1},"Item","/docs/components/item","docs/components/item",{"title":150,"path":151,"stem":152,"new":18,"type":19,"children":-1},"Kbd","/docs/components/kbd","docs/components/kbd",{"title":154,"path":155,"stem":156,"new":18,"type":19,"children":-1},"Label","/docs/components/label","docs/components/label",{"title":158,"path":159,"stem":160,"new":36,"type":19,"children":-1},"Marker","/docs/components/marker","docs/components/marker",{"title":162,"path":163,"stem":164,"new":18,"type":19,"children":-1},"Menubar","/docs/components/menubar","docs/components/menubar",{"title":166,"path":167,"stem":168,"new":36,"type":19,"children":-1},"Message","/docs/components/message","docs/components/message",{"title":170,"path":171,"stem":172,"new":36,"type":19,"children":-1},"Message Scroller","/docs/components/message-scroller","docs/components/message-scroller",{"title":174,"path":175,"stem":176,"new":18,"type":19,"children":-1},"Native Select","/docs/components/native-select","docs/components/native-select",{"title":178,"path":179,"stem":180,"new":18,"type":19,"children":-1},"Navigation Menu","/docs/components/navigation-menu","docs/components/navigation-menu",{"title":182,"path":183,"stem":184,"new":18,"type":19,"children":-1},"Number Field","/docs/components/number-field","docs/components/number-field",{"title":186,"path":187,"stem":188,"new":18,"type":19,"children":-1},"Pagination","/docs/components/pagination","docs/components/pagination",{"title":190,"path":191,"stem":192,"new":18,"type":19,"children":-1},"Pin Input","/docs/components/pin-input","docs/components/pin-input",{"title":194,"path":195,"stem":196,"new":18,"type":19,"children":-1},"Popover","/docs/components/popover","docs/components/popover",{"title":198,"path":199,"stem":200,"new":18,"type":19,"children":-1},"Progress","/docs/components/progress","docs/components/progress",{"title":202,"path":203,"stem":204,"new":18,"type":19,"children":-1},"Radio Group","/docs/components/radio-group","docs/components/radio-group",{"title":206,"path":207,"stem":208,"new":18,"type":19,"children":-1},"Range Calendar","/docs/components/range-calendar","docs/components/range-calendar",{"title":210,"path":211,"stem":212,"new":18,"type":19,"children":-1},"Resizable","/docs/components/resizable","docs/components/resizable",{"title":214,"path":215,"stem":216,"new":18,"type":19,"children":-1},"Scroll Area","/docs/components/scroll-area","docs/components/scroll-area",{"title":218,"path":219,"stem":220,"new":18,"type":19,"children":-1},"Select","/docs/components/select","docs/components/select",{"title":222,"path":223,"stem":224,"new":18,"type":19,"children":-1},"Separator","/docs/components/separator","docs/components/separator",{"title":226,"path":227,"stem":228,"new":18,"type":19,"children":-1},"Sheet","/docs/components/sheet","docs/components/sheet",{"title":230,"path":231,"stem":232,"new":18,"type":19,"children":-1},"Sidebar","/docs/components/sidebar","docs/components/sidebar",{"title":234,"path":235,"stem":236,"new":18,"type":19,"children":-1},"Skeleton","/docs/components/skeleton","docs/components/skeleton",{"title":238,"path":239,"stem":240,"new":18,"type":19,"children":-1},"Slider","/docs/components/slider","docs/components/slider",{"title":242,"path":243,"stem":244,"new":18,"type":19,"children":-1},"Sonner","/docs/components/sonner","docs/components/sonner",{"title":246,"path":247,"stem":248,"new":18,"type":19,"children":-1},"Spinner","/docs/components/spinner","docs/components/spinner",{"title":250,"path":251,"stem":252,"new":18,"type":19,"children":-1},"Stepper","/docs/components/stepper","docs/components/stepper",{"title":254,"path":255,"stem":256,"new":18,"type":19,"children":-1},"Switch","/docs/components/switch","docs/components/switch",{"title":258,"path":259,"stem":260,"new":18,"type":19,"children":-1},"Table","/docs/components/table","docs/components/table",{"title":262,"path":263,"stem":264,"new":18,"type":19,"children":-1},"Tabs","/docs/components/tabs","docs/components/tabs",{"title":266,"path":267,"stem":268,"new":18,"type":19,"children":-1},"Tags Input","/docs/components/tags-input","docs/components/tags-input",{"title":270,"path":271,"stem":272,"new":18,"type":19,"children":-1},"Textarea","/docs/components/textarea","docs/components/textarea",{"title":274,"path":275,"stem":276,"new":18,"type":19,"children":-1},"Toast","/docs/components/toast","docs/components/toast",{"title":278,"path":279,"stem":280,"new":18,"type":19,"children":-1},"Toggle","/docs/components/toggle","docs/components/toggle",{"title":282,"path":283,"stem":284,"new":18,"type":19,"children":-1},"Toggle Group","/docs/components/toggle-group","docs/components/toggle-group",{"title":286,"path":287,"stem":288,"new":18,"type":19,"children":-1},"Tooltip","/docs/components/tooltip","docs/components/tooltip",{"title":290,"path":291,"stem":292,"new":18,"type":19,"children":-1},"Typography","/docs/components/typography","docs/components/typography","group",{"title":295,"path":296,"stem":297,"children":298,"new":18,"type":293},"Installation","/docs/installation","docs/02.installation",[299,304,308,312,316],{"title":300,"path":301,"stem":302,"new":18,"type":303,"children":-1},"Vite","/docs/installation/vite","docs/installation/01.vite","page",{"title":305,"path":306,"stem":307,"new":18,"type":303,"children":-1},"Nuxt","/docs/installation/nuxt","docs/installation/02.nuxt",{"title":309,"path":310,"stem":311,"new":18,"type":303,"children":-1},"Astro","/docs/installation/astro","docs/installation/03.astro",{"title":313,"path":314,"stem":315,"new":18,"type":303,"children":-1},"Laravel","/docs/installation/laravel","docs/installation/04.laravel",{"title":317,"path":318,"stem":319,"new":18,"type":303,"children":-1},"Manual Installation","/docs/installation/manual","docs/installation/05.manual",{"title":321,"path":322,"stem":323,"children":324,"new":18,"type":293},"Dark Mode","/docs/dark-mode","docs/05.dark-mode",[325,328,331,335],{"title":300,"path":326,"stem":327,"new":18,"type":303,"children":-1},"/docs/dark-mode/vite","docs/dark-mode/01.vite",{"title":305,"path":329,"stem":330,"new":18,"type":303,"children":-1},"/docs/dark-mode/nuxt","docs/dark-mode/02.nuxt",{"title":332,"path":333,"stem":334,"new":18,"type":303,"children":-1},"Vitepress","/docs/dark-mode/vitepress","docs/dark-mode/03.vitepress",{"title":309,"path":336,"stem":337,"new":18,"type":303,"children":-1},"/docs/dark-mode/astro","docs/dark-mode/04.astro",{"title":339,"path":340,"stem":341,"children":342,"new":18,"type":293},"Forms","/docs/forms","docs/forms",[343,347],{"title":344,"path":345,"stem":346,"new":18,"type":303,"children":-1},"VeeValidate","/docs/forms/vee-validate","docs/forms/01.vee-validate",{"title":348,"path":349,"stem":350,"new":18,"type":303,"children":-1},"TanStack Form","/docs/forms/tanstack-form","docs/forms/02.tanstack-form",{"title":352,"path":353,"stem":354,"children":355,"new":18,"type":293},"Registry","/docs/registry","docs/registry/index",[356,357,361,365,369,373],{"title":352,"path":353,"stem":354,"new":18,"type":303,"children":-1},{"title":358,"path":359,"stem":360,"new":18,"type":303,"children":-1},"Examples","/docs/registry/examples","docs/registry/examples",{"title":362,"path":363,"stem":364,"new":18,"type":303,"children":-1},"FAQ","/docs/registry/faq","docs/registry/faq",{"title":366,"path":367,"stem":368,"new":18,"type":303,"children":-1},"Getting Started","/docs/registry/getting-started","docs/registry/getting-started",{"title":370,"path":371,"stem":372,"new":18,"type":303,"children":-1},"registry-item.json","/docs/registry/registry-item-json","docs/registry/registry-item-json",{"title":374,"path":375,"stem":376,"new":18,"type":303,"children":-1},"registry.json","/docs/registry/registry-json","docs/registry/registry-json",{"title":378,"path":379,"stem":380,"children":381,"page":18,"type":293},"Utilities","/docs/utilities","docs/utilities",[382,386],{"title":383,"path":384,"stem":385,"new":18,"type":303,"children":-1},"scroll-fade","/docs/utilities/scroll-fade","docs/utilities/scroll-fade",{"title":387,"path":388,"stem":389,"new":18,"type":303,"children":-1},"shimmer","/docs/utilities/shimmer","docs/utilities/shimmer",{"path":6,"stem":7,"title":391,"type":293,"children":392},"Get Started",[393,397,404,408,412,418,422,426,430,434,438,442],{"title":394,"path":395,"stem":396,"new":18,"type":303,"children":-1},"Introduction","/docs/introduction","docs/01.introduction",{"title":295,"path":296,"stem":297,"children":398,"new":18,"type":293},[399,400,401,402,403],{"title":300,"path":301,"stem":302,"new":18,"type":303,"children":-1},{"title":305,"path":306,"stem":307,"new":18,"type":303,"children":-1},{"title":309,"path":310,"stem":311,"new":18,"type":303,"children":-1},{"title":313,"path":314,"stem":315,"new":18,"type":303,"children":-1},{"title":317,"path":318,"stem":319,"new":18,"type":303,"children":-1},{"title":405,"path":406,"stem":407,"new":18,"type":303,"children":-1},"components.json","/docs/components-json","docs/03.components-json",{"title":409,"path":410,"stem":411,"new":18,"type":303,"children":-1},"Theming","/docs/theming","docs/04.theming",{"title":321,"path":322,"stem":323,"children":413,"new":18,"type":293},[414,415,416,417],{"title":300,"path":326,"stem":327,"new":18,"type":303,"children":-1},{"title":305,"path":329,"stem":330,"new":18,"type":303,"children":-1},{"title":332,"path":333,"stem":334,"new":18,"type":303,"children":-1},{"title":309,"path":336,"stem":337,"new":18,"type":303,"children":-1},{"title":419,"path":420,"stem":421,"new":18,"type":303,"children":-1},"CLI","/docs/cli","docs/06.cli",{"title":423,"path":424,"stem":425,"new":18,"type":303,"children":-1},"JavaScript","/docs/javascript","docs/07.javascript",{"title":427,"path":428,"stem":429,"new":18,"type":303,"children":-1},"Figma","/docs/figma","docs/09.figma",{"title":431,"path":432,"stem":433,"new":18,"type":303,"children":-1},"Changelog","/docs/changelog","docs/10.changelog",{"title":435,"path":436,"stem":437,"new":18,"type":303,"children":-1},"Legacy Docs","/docs/legacy","docs/11.legacy",{"title":439,"path":440,"stem":441,"new":18,"type":303,"children":-1},"Skills","/docs/skills","docs/skills",{"title":378,"path":379,"stem":380,"children":443,"page":18,"type":293},[444,445],{"title":383,"path":384,"stem":385,"new":18,"type":303,"children":-1},{"title":387,"path":388,"stem":389,"new":18,"type":303,"children":-1},{"repo":447},{"id":448,"name":449,"repo":450,"description":451,"createdAt":452,"updatedAt":453,"pushedAt":454,"stars":455,"watchers":456,"forks":457,"defaultBranch":458},658791894,"shadcn-vue","unovue/shadcn-vue","Vue port of shadcn-ui","2023-06-26T13:53:23Z","2026-07-10T15:52:04Z","2026-07-10T15:50:34Z",10260,37,665,"dev",{"id":460,"title":383,"body":461,"description":671,"extension":672,"links":673,"meta":674,"navigation":36,"new":18,"path":384,"rawbody":675,"seo":676,"stem":385,"__hash__":677},"content/docs/utilities/scroll-fade.md",{"type":462,"value":463,"toc":665},"minimark",[464,468,472,487,491,494,504,617,628,632,643,649],[465,466],"component-preview",{"name":467},"ScrollFadeDemo",[469,470,295],"h2",{"id":471},"installation",[473,474,475,476,480,481,483,484,486],"p",{},"If your project was set up with ",[477,478,479],"code",{},"npx shadcn-vue@latest init",", you already have ",[477,482,383],{},". It ships with the ",[477,485,449],{}," package, which the CLI imports in your global CSS file.",[469,488,490],{"id":489},"usage","Usage",[473,492,493],{},"Add a fade to any scroll container. The fade is driven by CSS scroll-driven animations, so an edge only fades while there is content to reveal in that direction — no JavaScript required.",[495,496,502],"pre",{"className":497,"code":499,"language":500,"meta":501},[498],"language-vue","\u003Ctemplate>\n  \u003Cdiv class=\"scroll-fade h-72 overflow-y-auto\">\n    \u003C!-- long content -->\n  \u003C/div>\n\u003C/template>\n","vue","",[477,503,499],{"__ignoreMap":501},[505,506,507,520],"table",{},[508,509,510],"thead",{},[511,512,513,517],"tr",{},[514,515,516],"th",{},"Class",[514,518,519],{},"Styles",[521,522,523,537,547,557,567,577,587,597,607],"tbody",{},[511,524,525,530],{},[526,527,528],"td",{},[477,529,383],{},[526,531,532,533,536],{},"Fades the top and bottom edges (alias: ",[477,534,535],{},"scroll-fade-y",").",[511,538,539,544],{},[526,540,541],{},[477,542,543],{},"scroll-fade-x",[526,545,546],{},"Fades the start and end edges (logical, RTL-aware).",[511,548,549,554],{},[526,550,551],{},[477,552,553],{},"scroll-fade-t",[526,555,556],{},"Fades the top edge only.",[511,558,559,564],{},[526,560,561],{},[477,562,563],{},"scroll-fade-b",[526,565,566],{},"Fades the bottom edge only.",[511,568,569,574],{},[526,570,571],{},[477,572,573],{},"scroll-fade-s",[526,575,576],{},"Fades the start edge only (logical, RTL-aware).",[511,578,579,584],{},[526,580,581],{},[477,582,583],{},"scroll-fade-e",[526,585,586],{},"Fades the end edge only (logical, RTL-aware).",[511,588,589,594],{},[526,590,591],{},[477,592,593],{},"scroll-fade-l",[526,595,596],{},"Fades the left edge only (physical).",[511,598,599,604],{},[526,600,601],{},[477,602,603],{},"scroll-fade-r",[526,605,606],{},"Fades the right edge only (physical).",[511,608,609,614],{},[526,610,611],{},[477,612,613],{},"scroll-fade-none",[526,615,616],{},"Removes the fade mask (e.g. to disable it responsively).",[473,618,619,620,623,624,627],{},"The effect is pure CSS. The container is painted with a ",[477,621,622],{},"mask-image"," gradient whose transparent stops animate to ",[477,625,626],{},"0"," as the corresponding edge reaches the end of its scroll range. Where scroll-driven animations are unsupported, it falls back to a static fade.",[469,629,631],{"id":630},"size","Size",[473,633,634,635,638,639,642],{},"Set the fade length with ",[477,636,637],{},"scroll-fade-\u003Cnumber>"," (spacing scale) or an arbitrary value. The default is ",[477,640,641],{},"min(12%, 2.5rem)",".",[495,644,647],{"className":645,"code":646,"language":500,"meta":501},[498],"\u003Ctemplate>\n  \u003C!-- 8 * 0.25rem = 2rem fade -->\n  \u003Cdiv class=\"scroll-fade scroll-fade-8 overflow-y-auto\">\n    \u003C!-- long content -->\n  \u003C/div>\n\u003C/template>\n",[477,648,646],{"__ignoreMap":501},[473,650,651,652,655,656,655,659,655,662,642],{},"Per-edge sizes are available too: ",[477,653,654],{},"scroll-fade-t-\u003Cnumber>",", ",[477,657,658],{},"scroll-fade-b-\u003Cnumber>",[477,660,661],{},"scroll-fade-s-\u003Cnumber>",[477,663,664],{},"scroll-fade-e-\u003Cnumber>",{"title":501,"searchDepth":666,"depth":666,"links":667},2,[668,669,670],{"id":471,"depth":666,"text":295},{"id":489,"depth":666,"text":490},{"id":630,"depth":666,"text":631},"Scroll-aware edge-fade utilities that fade the edges of a scroll container as it overflows.","md",null,{},"---\ntitle: scroll-fade\ndescription: Scroll-aware edge-fade utilities that fade the edges of a scroll container as it overflows.\n---\n\n::component-preview\n---\nname: ScrollFadeDemo\n---\n::\n\n## Installation\n\nIf your project was set up with `npx shadcn-vue@latest init`, you already have `scroll-fade`. It ships with the `shadcn-vue` package, which the CLI imports in your global CSS file.\n\n## Usage\n\nAdd a fade to any scroll container. The fade is driven by CSS scroll-driven animations, so an edge only fades while there is content to reveal in that direction — no JavaScript required.\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv class=\"scroll-fade h-72 overflow-y-auto\">\n    \u003C!-- long content -->\n  \u003C/div>\n\u003C/template>\n```\n\n| Class            | Styles                                                            |\n| ---------------- | ----------------------------------------------------------------- |\n| `scroll-fade`    | Fades the top and bottom edges (alias: `scroll-fade-y`).          |\n| `scroll-fade-x`  | Fades the start and end edges (logical, RTL-aware).               |\n| `scroll-fade-t`  | Fades the top edge only.                                          |\n| `scroll-fade-b`  | Fades the bottom edge only.                                       |\n| `scroll-fade-s`  | Fades the start edge only (logical, RTL-aware).                   |\n| `scroll-fade-e`  | Fades the end edge only (logical, RTL-aware).                     |\n| `scroll-fade-l`  | Fades the left edge only (physical).                              |\n| `scroll-fade-r`  | Fades the right edge only (physical).                             |\n| `scroll-fade-none` | Removes the fade mask (e.g. to disable it responsively).        |\n\nThe effect is pure CSS. The container is painted with a `mask-image` gradient whose transparent stops animate to `0` as the corresponding edge reaches the end of its scroll range. Where scroll-driven animations are unsupported, it falls back to a static fade.\n\n## Size\n\nSet the fade length with `scroll-fade-\u003Cnumber>` (spacing scale) or an arbitrary value. The default is `min(12%, 2.5rem)`.\n\n```vue\n\u003Ctemplate>\n  \u003C!-- 8 * 0.25rem = 2rem fade -->\n  \u003Cdiv class=\"scroll-fade scroll-fade-8 overflow-y-auto\">\n    \u003C!-- long content -->\n  \u003C/div>\n\u003C/template>\n```\n\nPer-edge sizes are available too: `scroll-fade-t-\u003Cnumber>`, `scroll-fade-b-\u003Cnumber>`, `scroll-fade-s-\u003Cnumber>`, `scroll-fade-e-\u003Cnumber>`.\n",{"title":383,"description":671},"FjRAkmnr2EtrvyKOT4wkzL3jIVC7Czo2Rkmk2L6gv1I",[679,680],{"title":439,"path":440,"stem":441,"children":-1},{"title":387,"path":388,"stem":389,"children":-1},1783698913129]