) } `,children:(0,n.jsx)(e.code,{className:"language-tsx",children:`import React from "react" import BlurOverlay from "@/delta/backdrop-gradient" export function BackdropGradientDemo() { const sampleImage = "/images/desk.webp" // replace with your image path or URL return (

) } `})})}),` `,(0,n.jsx)(e.h2,{id:"installation",children:"Installation"}),` `,(0,n.jsxs)(m,{defaultValue:"cli",children:[(0,n.jsxs)(p,{children:[(0,n.jsx)(c,{value:"cli",children:"CLI"}),(0,n.jsx)(c,{value:"manual",children:"Manual"})]}),(0,n.jsx)(s,{value:"cli",children:(0,n.jsx)(e.pre,{__rawstring__:`npx shadcn@latest add https://deltacomponents.dev/r/backdrop-gradient.json `,__npmCommand__:`npx shadcn@latest add https://deltacomponents.dev/r/backdrop-gradient.json `,__yarnCommand__:`yarn dlx shadcn@latest add https://deltacomponents.dev/r/backdrop-gradient.json `,__pnpmCommand__:`pnpm dlx shadcn@latest add https://deltacomponents.dev/r/backdrop-gradient.json `,__bunCommand__:`bunx --bun shadcn@latest add https://deltacomponents.dev/r/backdrop-gradient.json `,children:(0,n.jsx)(e.code,{className:"language-bash",children:`npx shadcn@latest add https://deltacomponents.dev/r/backdrop-gradient.json `})})}),(0,n.jsx)(s,{value:"manual",children:(0,n.jsxs)(o,{children:[(0,n.jsx)(t,{children:"Install the following dependencies:"}),(0,n.jsx)(e.pre,{__rawstring__:`npm install [dependencies] `,__npmCommand__:`npm install [dependencies] `,__yarnCommand__:`yarn add [dependencies] `,__pnpmCommand__:`pnpm add [dependencies] `,__bunCommand__:`bun add [dependencies] `,children:(0,n.jsx)(e.code,{className:"language-bash",children:`npm install [dependencies] `})}),(0,n.jsx)(t,{children:"Copy and paste the following code into your project."}),(0,n.jsx)(d,{name:"backdrop-gradient",children:(0,n.jsx)(e.pre,{__src__:"registry/media/backdrop-gradient.tsx",__rawstring__:`import React from "react" import { cn } from "@/lib/utils" export interface BlurOverlayProps { /** Source URL of the image */ src: string /** Alt text for the image */ alt?: string /** Additional container classes */ className?: string } export function BackdropGradient({ src, alt = "", className, }: BlurOverlayProps) { return (

{/* Blurred background layer */}

{/* Foreground image layer */}

) } `,children:(0,n.jsx)(e.code,{className:"language-tsx",children:`import React from "react" import { cn } from "@/lib/utils" export interface BlurOverlayProps { /** Source URL of the image */ src: string /** Alt text for the image */ alt?: string /** Additional container classes */ className?: string } export function BackdropGradient({ src, alt = "", className, }: BlurOverlayProps) { return (

{/* Blurred background layer */}

{/* Foreground image layer */}

) } `})})})]})})]}),` `,(0,n.jsx)(e.h2,{id:"usage",children:"Usage"}),` `,(0,n.jsx)(e.pre,{__rawstring__:`"use client" import * as React from "react" import { BackdropGradient } from "@/registry/components/backdrop-gradient" export function Component() { return } `,children:(0,n.jsx)(e.code,{className:"language-tsx",children:`"use client" import * as React from "react" import { BackdropGradient } from "@/registry/components/backdrop-gradient" export function Component() { return } `})}),` `,(0,n.jsx)(e.h2,{id:"api-reference",children:"API Reference"}),` `,(0,n.jsx)(e.h3,{id:"parameters",children:"Parameters"}),` `,(0,n.jsxs)(e.table,{children:[(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.th,{children:"Name"}),(0,n.jsx)(e.th,{children:"Type"}),(0,n.jsx)(e.th,{children:"Description"})]})}),(0,n.jsx)(e.tbody,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"prop"}),(0,n.jsx)(e.td,{children:"type"}),(0,n.jsx)(e.td,{children:"description"})]})})]}),` `,(0,n.jsx)(a,{name:"backdrop-gradient-artistic-demo",children:(0,n.jsx)(e.pre,{__src__:"registry/examples/backdrop-gradient-artistic-demo.tsx",__rawstring__:`"use client" import React from "react" import BackdropGradient from "@/delta/backdrop-gradient" export function BackdropGradientArtisticDemo() { // Replace with an appropriate image for the demo const demoImage = "/images/desk.webp" return (

) } `,children:(0,n.jsx)(e.code,{className:"language-tsx",children:`"use client" import React from "react" import BackdropGradient from "@/delta/backdrop-gradient" export function BackdropGradientArtisticDemo() { // Replace with an appropriate image for the demo const demoImage = "/images/desk.webp" return (

) } `})})})]})}function _(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(f,{...r})}):f(r)}function i(r,e){throw new Error("Expected "+(e?"component":"object")+" `"+r+"` to be defined: you likely forgot to import, pass, or provide it.")}return C(R);})(); ;return Component;

Backdrop Gradient

Installation

Usage

API Reference

Parameters