From b9be66bae34a6732d81e86249e82f67a93005bad Mon Sep 17 00:00:00 2001 From: Abdimajid Shire Date: Fri, 27 Mar 2026 18:43:45 +0300 Subject: [PATCH 1/6] feat: add backlight component --- apps/www/config/docs.ts | 6 + .../www/content/docs/components/backlight.mdx | 75 +++++++ apps/www/public/llms-full.txt | 186 ++++++++++++++++++ apps/www/public/llms.txt | 4 + apps/www/public/r/backlight-image-demo.json | 16 ++ apps/www/public/r/backlight-svg-demo.json | 16 ++ apps/www/public/r/backlight-video-demo.json | 16 ++ apps/www/public/r/backlight.json | 17 ++ apps/www/public/r/registry.json | 57 ++++++ apps/www/public/registry.json | 57 ++++++ apps/www/registry.json | 57 ++++++ apps/www/registry/__index__.tsx | 68 +++++++ .../registry/example/backlight-image-demo.tsx | 15 ++ .../registry/example/backlight-svg-demo.tsx | 90 +++++++++ .../registry/example/backlight-video-demo.tsx | 18 ++ apps/www/registry/magicui/backlight.tsx | 37 ++++ apps/www/registry/registry-examples.ts | 36 ++++ apps/www/registry/registry-ui.ts | 13 ++ 18 files changed, 784 insertions(+) create mode 100644 apps/www/content/docs/components/backlight.mdx create mode 100644 apps/www/public/r/backlight-image-demo.json create mode 100644 apps/www/public/r/backlight-svg-demo.json create mode 100644 apps/www/public/r/backlight-video-demo.json create mode 100644 apps/www/public/r/backlight.json create mode 100644 apps/www/registry/example/backlight-image-demo.tsx create mode 100644 apps/www/registry/example/backlight-svg-demo.tsx create mode 100644 apps/www/registry/example/backlight-video-demo.tsx create mode 100644 apps/www/registry/magicui/backlight.tsx diff --git a/apps/www/config/docs.ts b/apps/www/config/docs.ts index f568ca9c6..94373d121 100644 --- a/apps/www/config/docs.ts +++ b/apps/www/config/docs.ts @@ -609,6 +609,12 @@ export const docsConfig: DocsConfig = { items: [], label: "", }, + { + title: "Backlight", + href: `/docs/components/backlight`, + items: [], + label: "New", + }, ], }, ], diff --git a/apps/www/content/docs/components/backlight.mdx b/apps/www/content/docs/components/backlight.mdx new file mode 100644 index 000000000..ffb8e3f59 --- /dev/null +++ b/apps/www/content/docs/components/backlight.mdx @@ -0,0 +1,75 @@ +--- +title: Backlight +date: 2026-03-27 +description: A backlight glow effect for videos, images, and SVGs. +author: abdmjd1 +published: true +--- + + + +## Installation + + + + + CLI + Manual + + + +```bash +npx shadcn@latest add @magicui/backlight +``` + + + + + + + +Copy and paste the following code into your project. + + + +Update the import paths to match your project setup. + + + + + + + +## Examples + +### Image + + + +### SVG + + + +## Usage + +```tsx showLineNumbers +import Backlight from "@/components/ui/backlight" +``` + +```tsx showLineNumbers + + + +``` + +## Props + +| Prop | Type | Default | Description | +| ----------- | -------------------- | ------- | ------------------------------------------------------------------ | +| `blur` | `number` | `20` | The blur intensity of the backlight glow effect. | +| `children` | `React.ReactElement` | `-` | The video, image, or SVG element to apply the backlight effect to. | +| `className` | `string` | `-` | Additional class names for the wrapper div. | + +## Credits + +- Credit to [@abdmjd1](https://github.com/abdmjd1) diff --git a/apps/www/public/llms-full.txt b/apps/www/public/llms-full.txt index 0b3dae9c8..e63f7702d 100644 --- a/apps/www/public/llms-full.txt +++ b/apps/www/public/llms-full.txt @@ -3436,6 +3436,192 @@ export default function AvatarCirclesDemo() { +===== COMPONENT: backlight ===== +Title: Backlight +Description: A backlight glow effect for videos, images, and SVGs. + +--- file: magicui/backlight.tsx --- +import { useId } from "react" + +type BacklightProps = { + children?: React.ReactElement + className?: string + blur?: number +} + +export default function Backlight({ + blur = 20, + children, + className, +}: BacklightProps) { + const id = useId() + + return ( +
+ + +
{children}
+
+ ) +} + + +===== EXAMPLE: backlight-video-demo ===== +Title: backlight-video-demo + +--- file: example/backlight-video-demo.tsx --- +import Backlight from "@/registry/magicui/backlight" + +export default function BacklightVideoDemo() { + return ( + + + + ) +} + + +===== EXAMPLE: backlight-image-demo ===== +Title: backlight-image-demo + +--- file: example/backlight-image-demo.tsx --- +import Backlight from "@/registry/magicui/backlight" + +export default function BacklightImageDemo() { + return ( + + fancy gradient background + + ) +} + + +===== EXAMPLE: backlight-svg-demo ===== +Title: backlight-svg-demo + +--- file: example/backlight-svg-demo.tsx --- +import Backlight from "@/registry/magicui/backlight" + +export default function BacklightSVGDemo() { + return ( + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + ) +} + + + ===== COMPONENT: bento-grid ===== Title: Bento Grid Description: Bento grid is a layout used to showcase the features of a product in a simple and elegant way. diff --git a/apps/www/public/llms.txt b/apps/www/public/llms.txt index 6257d84cb..bbed3d35b 100644 --- a/apps/www/public/llms.txt +++ b/apps/www/public/llms.txt @@ -16,6 +16,7 @@ This file provides LLM-friendly entry points to documentation and examples. - [Theme Toggler](https://magicui.design/docs/components/animated-theme-toggler): A component for theme changing animation. - [Aurora Text](https://magicui.design/docs/components/aurora-text): A beautiful aurora text effect - [Avatar Circles](https://magicui.design/docs/components/avatar-circles): Overlapping circles of avatars. +- [Backlight](https://magicui.design/docs/components/backlight): A backlight glow effect for videos, images, and SVGs. - [Bento Grid](https://magicui.design/docs/components/bento-grid): Bento grid is a layout used to showcase the features of a product in a simple and elegant way. - [Blur Fade](https://magicui.design/docs/components/blur-fade): Blur fade in and out animation. Used to smoothly fade in and out content. - [Border Beam](https://magicui.design/docs/components/border-beam): An animated beam of light which travels along the border of its container. @@ -216,6 +217,9 @@ This file provides LLM-friendly entry points to documentation and examples. - [Dotted Map Demo](https://github.com/magicuidesign/magicui/blob/main/example/dotted-map-demo.tsx): Example usage - [Dotted Map Demo 2](https://github.com/magicuidesign/magicui/blob/main/example/dotted-map-demo-2.tsx): Example usage - [Dotted Map Demo 3](https://github.com/magicuidesign/magicui/blob/main/example/dotted-map-demo-3.tsx): Example usage +- [backlight-video-demo](https://github.com/magicuidesign/magicui/blob/main/example/backlight-video-demo.tsx): Example usage +- [backlight-image-demo](https://github.com/magicuidesign/magicui/blob/main/example/backlight-image-demo.tsx): Example usage +- [backlight-svg-demo](https://github.com/magicuidesign/magicui/blob/main/example/backlight-svg-demo.tsx): Example usage ## Optional diff --git a/apps/www/public/r/backlight-image-demo.json b/apps/www/public/r/backlight-image-demo.json new file mode 100644 index 000000000..30c73a37b --- /dev/null +++ b/apps/www/public/r/backlight-image-demo.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "backlight-image-demo", + "type": "registry:example", + "description": "An example of the backlight component with a image.", + "registryDependencies": [ + "@magicui/backlight" + ], + "files": [ + { + "path": "registry/example/backlight-image-demo.tsx", + "content": "import Backlight from \"@/registry/magicui/backlight\"\n\nexport default function BacklightImageDemo() {\n return (\n \n \n \n )\n}\n", + "type": "registry:example" + } + ] +} \ No newline at end of file diff --git a/apps/www/public/r/backlight-svg-demo.json b/apps/www/public/r/backlight-svg-demo.json new file mode 100644 index 000000000..fb95d675d --- /dev/null +++ b/apps/www/public/r/backlight-svg-demo.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "backlight-svg-demo", + "type": "registry:example", + "description": "An example of the backlight component with SVGs.", + "registryDependencies": [ + "@magicui/backlight" + ], + "files": [ + { + "path": "registry/example/backlight-svg-demo.tsx", + "content": "import Backlight from \"@/registry/magicui/backlight\"\n\nexport default function BacklightSVGDemo() {\n return (\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n )\n}\n", + "type": "registry:example" + } + ] +} \ No newline at end of file diff --git a/apps/www/public/r/backlight-video-demo.json b/apps/www/public/r/backlight-video-demo.json new file mode 100644 index 000000000..065ff3f2d --- /dev/null +++ b/apps/www/public/r/backlight-video-demo.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "backlight-video-demo", + "type": "registry:example", + "description": "An example of the backlight component with a video.", + "registryDependencies": [ + "@magicui/backlight" + ], + "files": [ + { + "path": "registry/example/backlight-video-demo.tsx", + "content": "import Backlight from \"@/registry/magicui/backlight\"\n\nexport default function BacklightVideoDemo() {\n return (\n \n \n \n )\n}\n", + "type": "registry:example" + } + ] +} \ No newline at end of file diff --git a/apps/www/public/r/backlight.json b/apps/www/public/r/backlight.json new file mode 100644 index 000000000..1b24aed65 --- /dev/null +++ b/apps/www/public/r/backlight.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "backlight", + "type": "registry:ui", + "title": "Backlight", + "description": "A backlight glow effect for videos, images, and SVGs.", + "dependencies": [ + "motion" + ], + "files": [ + { + "path": "registry/magicui/backlight.tsx", + "content": "import { useId } from \"react\"\n\ntype BacklightProps = {\n children?: React.ReactElement\n className?: string\n blur?: number\n}\n\nexport default function Backlight({\n blur = 20,\n children,\n className,\n}: BacklightProps) {\n const id = useId()\n\n return (\n
\n \n \n \n \n \n \n \n\n
{children}
\n
\n )\n}\n", + "type": "registry:ui" + } + ] +} \ No newline at end of file diff --git a/apps/www/public/r/registry.json b/apps/www/public/r/registry.json index ec7e83ecd..7d3e39de0 100644 --- a/apps/www/public/r/registry.json +++ b/apps/www/public/r/registry.json @@ -1246,6 +1246,21 @@ } ] }, + { + "name": "backlight", + "type": "registry:ui", + "title": "Backlight", + "description": "A backlight glow effect for videos, images, and SVGs.", + "dependencies": [ + "motion" + ], + "files": [ + { + "path": "registry/magicui/backlight.tsx", + "type": "registry:ui" + } + ] + }, { "name": "magic-card-demo", "type": "registry:example", @@ -3376,6 +3391,48 @@ } ] }, + { + "name": "backlight-video-demo", + "type": "registry:example", + "description": "An example of the backlight component with a video.", + "registryDependencies": [ + "@magicui/backlight" + ], + "files": [ + { + "path": "registry/example/backlight-video-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "backlight-image-demo", + "type": "registry:example", + "description": "An example of the backlight component with a image.", + "registryDependencies": [ + "@magicui/backlight" + ], + "files": [ + { + "path": "registry/example/backlight-image-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "backlight-svg-demo", + "type": "registry:example", + "description": "An example of the backlight component with SVGs.", + "registryDependencies": [ + "@magicui/backlight" + ], + "files": [ + { + "path": "registry/example/backlight-svg-demo.tsx", + "type": "registry:example" + } + ] + }, { "name": "utils", "type": "registry:lib", diff --git a/apps/www/public/registry.json b/apps/www/public/registry.json index ec7e83ecd..7d3e39de0 100644 --- a/apps/www/public/registry.json +++ b/apps/www/public/registry.json @@ -1246,6 +1246,21 @@ } ] }, + { + "name": "backlight", + "type": "registry:ui", + "title": "Backlight", + "description": "A backlight glow effect for videos, images, and SVGs.", + "dependencies": [ + "motion" + ], + "files": [ + { + "path": "registry/magicui/backlight.tsx", + "type": "registry:ui" + } + ] + }, { "name": "magic-card-demo", "type": "registry:example", @@ -3376,6 +3391,48 @@ } ] }, + { + "name": "backlight-video-demo", + "type": "registry:example", + "description": "An example of the backlight component with a video.", + "registryDependencies": [ + "@magicui/backlight" + ], + "files": [ + { + "path": "registry/example/backlight-video-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "backlight-image-demo", + "type": "registry:example", + "description": "An example of the backlight component with a image.", + "registryDependencies": [ + "@magicui/backlight" + ], + "files": [ + { + "path": "registry/example/backlight-image-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "backlight-svg-demo", + "type": "registry:example", + "description": "An example of the backlight component with SVGs.", + "registryDependencies": [ + "@magicui/backlight" + ], + "files": [ + { + "path": "registry/example/backlight-svg-demo.tsx", + "type": "registry:example" + } + ] + }, { "name": "utils", "type": "registry:lib", diff --git a/apps/www/registry.json b/apps/www/registry.json index ec7e83ecd..7d3e39de0 100644 --- a/apps/www/registry.json +++ b/apps/www/registry.json @@ -1246,6 +1246,21 @@ } ] }, + { + "name": "backlight", + "type": "registry:ui", + "title": "Backlight", + "description": "A backlight glow effect for videos, images, and SVGs.", + "dependencies": [ + "motion" + ], + "files": [ + { + "path": "registry/magicui/backlight.tsx", + "type": "registry:ui" + } + ] + }, { "name": "magic-card-demo", "type": "registry:example", @@ -3376,6 +3391,48 @@ } ] }, + { + "name": "backlight-video-demo", + "type": "registry:example", + "description": "An example of the backlight component with a video.", + "registryDependencies": [ + "@magicui/backlight" + ], + "files": [ + { + "path": "registry/example/backlight-video-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "backlight-image-demo", + "type": "registry:example", + "description": "An example of the backlight component with a image.", + "registryDependencies": [ + "@magicui/backlight" + ], + "files": [ + { + "path": "registry/example/backlight-image-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "backlight-svg-demo", + "type": "registry:example", + "description": "An example of the backlight component with SVGs.", + "registryDependencies": [ + "@magicui/backlight" + ], + "files": [ + { + "path": "registry/example/backlight-svg-demo.tsx", + "type": "registry:example" + } + ] + }, { "name": "utils", "type": "registry:lib", diff --git a/apps/www/registry/__index__.tsx b/apps/www/registry/__index__.tsx index a573d7e6b..1719d025d 100644 --- a/apps/www/registry/__index__.tsx +++ b/apps/www/registry/__index__.tsx @@ -1188,6 +1188,23 @@ export const Index: Record = { }), meta: undefined, }, + "backlight": { + name: "backlight", + description: "A backlight glow effect for videos, images, and SVGs.", + type: "registry:ui", + registryDependencies: undefined, + files: [{ + path: "registry/magicui/backlight.tsx", + type: "registry:ui", + target: "" + }], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/backlight.tsx") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') ?? item.name + return { default: mod.default ?? mod[exportName] } + }), + meta: undefined, + }, "magic-card-demo": { name: "magic-card-demo", description: "Example showing a spotlight effect that follows your mouse cursor and highlights borders on hover.", @@ -3538,6 +3555,57 @@ export const Index: Record = { }), meta: undefined, }, + "backlight-video-demo": { + name: "backlight-video-demo", + description: "An example of the backlight component with a video.", + type: "registry:example", + registryDependencies: ["@magicui/backlight"], + files: [{ + path: "registry/example/backlight-video-demo.tsx", + type: "registry:example", + target: "" + }], + component: React.lazy(async () => { + const mod = await import("@/registry/example/backlight-video-demo.tsx") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') ?? item.name + return { default: mod.default ?? mod[exportName] } + }), + meta: undefined, + }, + "backlight-image-demo": { + name: "backlight-image-demo", + description: "An example of the backlight component with a image.", + type: "registry:example", + registryDependencies: ["@magicui/backlight"], + files: [{ + path: "registry/example/backlight-image-demo.tsx", + type: "registry:example", + target: "" + }], + component: React.lazy(async () => { + const mod = await import("@/registry/example/backlight-image-demo.tsx") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') ?? item.name + return { default: mod.default ?? mod[exportName] } + }), + meta: undefined, + }, + "backlight-svg-demo": { + name: "backlight-svg-demo", + description: "An example of the backlight component with SVGs.", + type: "registry:example", + registryDependencies: ["@magicui/backlight"], + files: [{ + path: "registry/example/backlight-svg-demo.tsx", + type: "registry:example", + target: "" + }], + component: React.lazy(async () => { + const mod = await import("@/registry/example/backlight-svg-demo.tsx") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') ?? item.name + return { default: mod.default ?? mod[exportName] } + }), + meta: undefined, + }, "utils": { name: "utils", description: "", diff --git a/apps/www/registry/example/backlight-image-demo.tsx b/apps/www/registry/example/backlight-image-demo.tsx new file mode 100644 index 000000000..68b16f447 --- /dev/null +++ b/apps/www/registry/example/backlight-image-demo.tsx @@ -0,0 +1,15 @@ +import Backlight from "@/registry/magicui/backlight" + +export default function BacklightImageDemo() { + return ( + + fancy gradient background + + ) +} diff --git a/apps/www/registry/example/backlight-svg-demo.tsx b/apps/www/registry/example/backlight-svg-demo.tsx new file mode 100644 index 000000000..5f6398e6a --- /dev/null +++ b/apps/www/registry/example/backlight-svg-demo.tsx @@ -0,0 +1,90 @@ +import Backlight from "@/registry/magicui/backlight" + +export default function BacklightSVGDemo() { + return ( + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + ) +} diff --git a/apps/www/registry/example/backlight-video-demo.tsx b/apps/www/registry/example/backlight-video-demo.tsx new file mode 100644 index 000000000..11a165d91 --- /dev/null +++ b/apps/www/registry/example/backlight-video-demo.tsx @@ -0,0 +1,18 @@ +import Backlight from "@/registry/magicui/backlight" + +export default function BacklightVideoDemo() { + return ( + + + + ) +} diff --git a/apps/www/registry/magicui/backlight.tsx b/apps/www/registry/magicui/backlight.tsx new file mode 100644 index 000000000..16bb78843 --- /dev/null +++ b/apps/www/registry/magicui/backlight.tsx @@ -0,0 +1,37 @@ +import { useId } from "react" + +type BacklightProps = { + children?: React.ReactElement + className?: string + blur?: number +} + +export default function Backlight({ + blur = 20, + children, + className, +}: BacklightProps) { + const id = useId() + + return ( +
+ + +
{children}
+
+ ) +} diff --git a/apps/www/registry/registry-examples.ts b/apps/www/registry/registry-examples.ts index c91afdeaa..702f6aa65 100644 --- a/apps/www/registry/registry-examples.ts +++ b/apps/www/registry/registry-examples.ts @@ -1840,4 +1840,40 @@ export const examples: Registry["items"] = [ }, ], }, + { + name: "backlight-video-demo", + description: "An example of the backlight component with a video.", + type: "registry:example", + registryDependencies: ["@magicui/backlight"], + files: [ + { + path: "example/backlight-video-demo.tsx", + type: "registry:example", + }, + ], + }, + { + name: "backlight-image-demo", + description: "An example of the backlight component with a image.", + type: "registry:example", + registryDependencies: ["@magicui/backlight"], + files: [ + { + path: "example/backlight-image-demo.tsx", + type: "registry:example", + }, + ], + }, + { + name: "backlight-svg-demo", + description: "An example of the backlight component with SVGs.", + type: "registry:example", + registryDependencies: ["@magicui/backlight"], + files: [ + { + path: "example/backlight-svg-demo.tsx", + type: "registry:example", + }, + ], + }, ] diff --git a/apps/www/registry/registry-ui.ts b/apps/www/registry/registry-ui.ts index fb00913d7..f12f289f9 100644 --- a/apps/www/registry/registry-ui.ts +++ b/apps/www/registry/registry-ui.ts @@ -1186,4 +1186,17 @@ export const ui: Registry["items"] = [ }, ], }, + { + name: "backlight", + type: "registry:ui", + title: "Backlight", + description: "A backlight glow effect for videos, images, and SVGs.", + dependencies: ["motion"], + files: [ + { + path: "magicui/backlight.tsx", + type: "registry:ui", + }, + ], + }, ] From 63ba5e90b2173644f90bfee9850073e0cd2c811c Mon Sep 17 00:00:00 2001 From: Jinho Yeom Date: Sun, 29 Mar 2026 01:07:58 +0900 Subject: [PATCH 2/6] fix(backlight): use ReactElement type import instead of React namespace --- apps/www/public/llms-full.txt | 4 ++-- apps/www/public/r/backlight.json | 2 +- apps/www/registry/magicui/backlight.tsx | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/www/public/llms-full.txt b/apps/www/public/llms-full.txt index e63f7702d..d2e94b17d 100644 --- a/apps/www/public/llms-full.txt +++ b/apps/www/public/llms-full.txt @@ -3441,10 +3441,10 @@ Title: Backlight Description: A backlight glow effect for videos, images, and SVGs. --- file: magicui/backlight.tsx --- -import { useId } from "react" +import { ReactElement, useId } from "react" type BacklightProps = { - children?: React.ReactElement + children?: ReactElement className?: string blur?: number } diff --git a/apps/www/public/r/backlight.json b/apps/www/public/r/backlight.json index 1b24aed65..6a77aabfd 100644 --- a/apps/www/public/r/backlight.json +++ b/apps/www/public/r/backlight.json @@ -10,7 +10,7 @@ "files": [ { "path": "registry/magicui/backlight.tsx", - "content": "import { useId } from \"react\"\n\ntype BacklightProps = {\n children?: React.ReactElement\n className?: string\n blur?: number\n}\n\nexport default function Backlight({\n blur = 20,\n children,\n className,\n}: BacklightProps) {\n const id = useId()\n\n return (\n
\n \n \n \n \n \n \n \n\n
{children}
\n
\n )\n}\n", + "content": "import { ReactElement, useId } from \"react\"\n\ntype BacklightProps = {\n children?: ReactElement\n className?: string\n blur?: number\n}\n\nexport default function Backlight({\n blur = 20,\n children,\n className,\n}: BacklightProps) {\n const id = useId()\n\n return (\n
\n \n \n \n \n \n \n \n\n
{children}
\n
\n )\n}\n", "type": "registry:ui" } ] diff --git a/apps/www/registry/magicui/backlight.tsx b/apps/www/registry/magicui/backlight.tsx index 16bb78843..a4ecf5bf5 100644 --- a/apps/www/registry/magicui/backlight.tsx +++ b/apps/www/registry/magicui/backlight.tsx @@ -1,7 +1,7 @@ -import { useId } from "react" +import { ReactElement, useId } from "react" type BacklightProps = { - children?: React.ReactElement + children?: ReactElement className?: string blur?: number } From a7358251a90386eabc85d1616b3a7beb24a4ff2b Mon Sep 17 00:00:00 2001 From: Jinho Yeom Date: Sun, 29 Mar 2026 01:10:39 +0900 Subject: [PATCH 3/6] fix(backlight): remove unused motion dependency from registry metadata --- apps/www/public/r/backlight.json | 4 +--- apps/www/public/r/registry.json | 4 +--- apps/www/public/registry.json | 4 +--- apps/www/registry.json | 4 +--- apps/www/registry/registry-ui.ts | 2 +- 5 files changed, 5 insertions(+), 13 deletions(-) diff --git a/apps/www/public/r/backlight.json b/apps/www/public/r/backlight.json index 6a77aabfd..3e9690234 100644 --- a/apps/www/public/r/backlight.json +++ b/apps/www/public/r/backlight.json @@ -4,9 +4,7 @@ "type": "registry:ui", "title": "Backlight", "description": "A backlight glow effect for videos, images, and SVGs.", - "dependencies": [ - "motion" - ], + "dependencies": [], "files": [ { "path": "registry/magicui/backlight.tsx", diff --git a/apps/www/public/r/registry.json b/apps/www/public/r/registry.json index 7d3e39de0..2bbad9d0e 100644 --- a/apps/www/public/r/registry.json +++ b/apps/www/public/r/registry.json @@ -1251,9 +1251,7 @@ "type": "registry:ui", "title": "Backlight", "description": "A backlight glow effect for videos, images, and SVGs.", - "dependencies": [ - "motion" - ], + "dependencies": [], "files": [ { "path": "registry/magicui/backlight.tsx", diff --git a/apps/www/public/registry.json b/apps/www/public/registry.json index 7d3e39de0..2bbad9d0e 100644 --- a/apps/www/public/registry.json +++ b/apps/www/public/registry.json @@ -1251,9 +1251,7 @@ "type": "registry:ui", "title": "Backlight", "description": "A backlight glow effect for videos, images, and SVGs.", - "dependencies": [ - "motion" - ], + "dependencies": [], "files": [ { "path": "registry/magicui/backlight.tsx", diff --git a/apps/www/registry.json b/apps/www/registry.json index 7d3e39de0..2bbad9d0e 100644 --- a/apps/www/registry.json +++ b/apps/www/registry.json @@ -1251,9 +1251,7 @@ "type": "registry:ui", "title": "Backlight", "description": "A backlight glow effect for videos, images, and SVGs.", - "dependencies": [ - "motion" - ], + "dependencies": [], "files": [ { "path": "registry/magicui/backlight.tsx", diff --git a/apps/www/registry/registry-ui.ts b/apps/www/registry/registry-ui.ts index f12f289f9..c9e0de4cd 100644 --- a/apps/www/registry/registry-ui.ts +++ b/apps/www/registry/registry-ui.ts @@ -1191,7 +1191,7 @@ export const ui: Registry["items"] = [ type: "registry:ui", title: "Backlight", description: "A backlight glow effect for videos, images, and SVGs.", - dependencies: ["motion"], + dependencies: [], files: [ { path: "magicui/backlight.tsx", From 85dcda208e3db5c9c4cbc79f86c6070f3d7128fd Mon Sep 17 00:00:00 2001 From: Jinho Yeom Date: Sun, 29 Mar 2026 01:11:34 +0900 Subject: [PATCH 4/6] fix(backlight-video-demo): remove autoplay query from iframe source --- apps/www/public/llms-full.txt | 2 +- apps/www/public/r/backlight-video-demo.json | 2 +- apps/www/registry/example/backlight-video-demo.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/www/public/llms-full.txt b/apps/www/public/llms-full.txt index d2e94b17d..262c5a6a8 100644 --- a/apps/www/public/llms-full.txt +++ b/apps/www/public/llms-full.txt @@ -3493,7 +3493,7 @@ export default function BacklightVideoDemo() { className="block aspect-video max-w-lg rounded-xl" width="512" height="288" - src="https://www.youtube.com/embed/qxzbh6vPRZg?&autoplay=1" + src="https://www.youtube.com/embed/qxzbh6vPRZg" title="Gradient Loop Background" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" diff --git a/apps/www/public/r/backlight-video-demo.json b/apps/www/public/r/backlight-video-demo.json index 065ff3f2d..718c27a90 100644 --- a/apps/www/public/r/backlight-video-demo.json +++ b/apps/www/public/r/backlight-video-demo.json @@ -9,7 +9,7 @@ "files": [ { "path": "registry/example/backlight-video-demo.tsx", - "content": "import Backlight from \"@/registry/magicui/backlight\"\n\nexport default function BacklightVideoDemo() {\n return (\n \n \n \n )\n}\n", + "content": "import Backlight from \"@/registry/magicui/backlight\"\n\nexport default function BacklightVideoDemo() {\n return (\n \n \n \n )\n}\n", "type": "registry:example" } ] diff --git a/apps/www/registry/example/backlight-video-demo.tsx b/apps/www/registry/example/backlight-video-demo.tsx index 11a165d91..bc5b22ed2 100644 --- a/apps/www/registry/example/backlight-video-demo.tsx +++ b/apps/www/registry/example/backlight-video-demo.tsx @@ -7,7 +7,7 @@ export default function BacklightVideoDemo() { className="block aspect-video max-w-lg rounded-xl" width="512" height="288" - src="https://www.youtube.com/embed/qxzbh6vPRZg?&autoplay=1" + src="https://www.youtube.com/embed/qxzbh6vPRZg" title="Gradient Loop Background" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" From bb9a5d958ab888cc518e067a1c6c824996362796 Mon Sep 17 00:00:00 2001 From: Jinho Yeom Date: Sun, 29 Mar 2026 01:15:01 +0900 Subject: [PATCH 5/6] style(backlight): remove extra whitespace around children --- apps/www/public/llms-full.txt | 2 +- apps/www/public/r/backlight.json | 2 +- apps/www/registry/magicui/backlight.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/www/public/llms-full.txt b/apps/www/public/llms-full.txt index 262c5a6a8..e2a2fd893 100644 --- a/apps/www/public/llms-full.txt +++ b/apps/www/public/llms-full.txt @@ -3474,7 +3474,7 @@ export default function Backlight({ -
{children}
+
{children}
) } diff --git a/apps/www/public/r/backlight.json b/apps/www/public/r/backlight.json index 3e9690234..827f97609 100644 --- a/apps/www/public/r/backlight.json +++ b/apps/www/public/r/backlight.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/magicui/backlight.tsx", - "content": "import { ReactElement, useId } from \"react\"\n\ntype BacklightProps = {\n children?: ReactElement\n className?: string\n blur?: number\n}\n\nexport default function Backlight({\n blur = 20,\n children,\n className,\n}: BacklightProps) {\n const id = useId()\n\n return (\n
\n \n \n \n \n \n \n \n\n
{children}
\n
\n )\n}\n", + "content": "import { ReactElement, useId } from \"react\"\n\ntype BacklightProps = {\n children?: ReactElement\n className?: string\n blur?: number\n}\n\nexport default function Backlight({\n blur = 20,\n children,\n className,\n}: BacklightProps) {\n const id = useId()\n\n return (\n
\n \n \n \n \n \n \n \n\n
{children}
\n
\n )\n}\n", "type": "registry:ui" } ] diff --git a/apps/www/registry/magicui/backlight.tsx b/apps/www/registry/magicui/backlight.tsx index a4ecf5bf5..2399a0d8f 100644 --- a/apps/www/registry/magicui/backlight.tsx +++ b/apps/www/registry/magicui/backlight.tsx @@ -31,7 +31,7 @@ export default function Backlight({ -
{children}
+
{children}
) } From 97dfd4fc4e6ca44d90aca7a343e9e1cfc936b286 Mon Sep 17 00:00:00 2001 From: Jinho Yeom Date: Sun, 29 Mar 2026 01:20:01 +0900 Subject: [PATCH 6/6] fix: align backlight with named exports --- apps/www/content/docs/components/backlight.mdx | 2 +- apps/www/public/llms-full.txt | 14 +++++--------- apps/www/public/r/backlight-image-demo.json | 2 +- apps/www/public/r/backlight-svg-demo.json | 2 +- apps/www/public/r/backlight-video-demo.json | 2 +- apps/www/public/r/backlight.json | 2 +- apps/www/registry/example/backlight-image-demo.tsx | 2 +- apps/www/registry/example/backlight-svg-demo.tsx | 2 +- apps/www/registry/example/backlight-video-demo.tsx | 2 +- apps/www/registry/magicui/backlight.tsx | 8 ++------ 10 files changed, 15 insertions(+), 23 deletions(-) diff --git a/apps/www/content/docs/components/backlight.mdx b/apps/www/content/docs/components/backlight.mdx index ffb8e3f59..e4f422d01 100644 --- a/apps/www/content/docs/components/backlight.mdx +++ b/apps/www/content/docs/components/backlight.mdx @@ -53,7 +53,7 @@ npx shadcn@latest add @magicui/backlight ## Usage ```tsx showLineNumbers -import Backlight from "@/components/ui/backlight" +import { Backlight } from "@/components/ui/backlight" ``` ```tsx showLineNumbers diff --git a/apps/www/public/llms-full.txt b/apps/www/public/llms-full.txt index e2a2fd893..60be77c95 100644 --- a/apps/www/public/llms-full.txt +++ b/apps/www/public/llms-full.txt @@ -3441,7 +3441,7 @@ Title: Backlight Description: A backlight glow effect for videos, images, and SVGs. --- file: magicui/backlight.tsx --- -import { ReactElement, useId } from "react" +import { useId, type ReactElement } from "react" type BacklightProps = { children?: ReactElement @@ -3449,11 +3449,7 @@ type BacklightProps = { blur?: number } -export default function Backlight({ - blur = 20, - children, - className, -}: BacklightProps) { +export function Backlight({ blur = 20, children, className }: BacklightProps) { const id = useId() return ( @@ -3484,7 +3480,7 @@ export default function Backlight({ Title: backlight-video-demo --- file: example/backlight-video-demo.tsx --- -import Backlight from "@/registry/magicui/backlight" +import { Backlight } from "@/registry/magicui/backlight" export default function BacklightVideoDemo() { return ( @@ -3508,7 +3504,7 @@ export default function BacklightVideoDemo() { Title: backlight-image-demo --- file: example/backlight-image-demo.tsx --- -import Backlight from "@/registry/magicui/backlight" +import { Backlight } from "@/registry/magicui/backlight" export default function BacklightImageDemo() { return ( @@ -3529,7 +3525,7 @@ export default function BacklightImageDemo() { Title: backlight-svg-demo --- file: example/backlight-svg-demo.tsx --- -import Backlight from "@/registry/magicui/backlight" +import { Backlight } from "@/registry/magicui/backlight" export default function BacklightSVGDemo() { return ( diff --git a/apps/www/public/r/backlight-image-demo.json b/apps/www/public/r/backlight-image-demo.json index 30c73a37b..8be944b7e 100644 --- a/apps/www/public/r/backlight-image-demo.json +++ b/apps/www/public/r/backlight-image-demo.json @@ -9,7 +9,7 @@ "files": [ { "path": "registry/example/backlight-image-demo.tsx", - "content": "import Backlight from \"@/registry/magicui/backlight\"\n\nexport default function BacklightImageDemo() {\n return (\n \n \n \n )\n}\n", + "content": "import { Backlight } from \"@/registry/magicui/backlight\"\n\nexport default function BacklightImageDemo() {\n return (\n \n \n \n )\n}\n", "type": "registry:example" } ] diff --git a/apps/www/public/r/backlight-svg-demo.json b/apps/www/public/r/backlight-svg-demo.json index fb95d675d..7e083fa34 100644 --- a/apps/www/public/r/backlight-svg-demo.json +++ b/apps/www/public/r/backlight-svg-demo.json @@ -9,7 +9,7 @@ "files": [ { "path": "registry/example/backlight-svg-demo.tsx", - "content": "import Backlight from \"@/registry/magicui/backlight\"\n\nexport default function BacklightSVGDemo() {\n return (\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n )\n}\n", + "content": "import { Backlight } from \"@/registry/magicui/backlight\"\n\nexport default function BacklightSVGDemo() {\n return (\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n )\n}\n", "type": "registry:example" } ] diff --git a/apps/www/public/r/backlight-video-demo.json b/apps/www/public/r/backlight-video-demo.json index 718c27a90..d4bb77cf9 100644 --- a/apps/www/public/r/backlight-video-demo.json +++ b/apps/www/public/r/backlight-video-demo.json @@ -9,7 +9,7 @@ "files": [ { "path": "registry/example/backlight-video-demo.tsx", - "content": "import Backlight from \"@/registry/magicui/backlight\"\n\nexport default function BacklightVideoDemo() {\n return (\n \n \n \n )\n}\n", + "content": "import { Backlight } from \"@/registry/magicui/backlight\"\n\nexport default function BacklightVideoDemo() {\n return (\n \n \n \n )\n}\n", "type": "registry:example" } ] diff --git a/apps/www/public/r/backlight.json b/apps/www/public/r/backlight.json index 827f97609..282f5fc6f 100644 --- a/apps/www/public/r/backlight.json +++ b/apps/www/public/r/backlight.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/magicui/backlight.tsx", - "content": "import { ReactElement, useId } from \"react\"\n\ntype BacklightProps = {\n children?: ReactElement\n className?: string\n blur?: number\n}\n\nexport default function Backlight({\n blur = 20,\n children,\n className,\n}: BacklightProps) {\n const id = useId()\n\n return (\n
\n \n \n \n \n \n \n \n\n
{children}
\n
\n )\n}\n", + "content": "import { useId, type ReactElement } from \"react\"\n\ntype BacklightProps = {\n children?: ReactElement\n className?: string\n blur?: number\n}\n\nexport function Backlight({ blur = 20, children, className }: BacklightProps) {\n const id = useId()\n\n return (\n
\n \n \n \n \n \n \n \n\n
{children}
\n
\n )\n}\n", "type": "registry:ui" } ] diff --git a/apps/www/registry/example/backlight-image-demo.tsx b/apps/www/registry/example/backlight-image-demo.tsx index 68b16f447..e4b2256d9 100644 --- a/apps/www/registry/example/backlight-image-demo.tsx +++ b/apps/www/registry/example/backlight-image-demo.tsx @@ -1,4 +1,4 @@ -import Backlight from "@/registry/magicui/backlight" +import { Backlight } from "@/registry/magicui/backlight" export default function BacklightImageDemo() { return ( diff --git a/apps/www/registry/example/backlight-svg-demo.tsx b/apps/www/registry/example/backlight-svg-demo.tsx index 5f6398e6a..8a6778335 100644 --- a/apps/www/registry/example/backlight-svg-demo.tsx +++ b/apps/www/registry/example/backlight-svg-demo.tsx @@ -1,4 +1,4 @@ -import Backlight from "@/registry/magicui/backlight" +import { Backlight } from "@/registry/magicui/backlight" export default function BacklightSVGDemo() { return ( diff --git a/apps/www/registry/example/backlight-video-demo.tsx b/apps/www/registry/example/backlight-video-demo.tsx index bc5b22ed2..a8b47e2e6 100644 --- a/apps/www/registry/example/backlight-video-demo.tsx +++ b/apps/www/registry/example/backlight-video-demo.tsx @@ -1,4 +1,4 @@ -import Backlight from "@/registry/magicui/backlight" +import { Backlight } from "@/registry/magicui/backlight" export default function BacklightVideoDemo() { return ( diff --git a/apps/www/registry/magicui/backlight.tsx b/apps/www/registry/magicui/backlight.tsx index 2399a0d8f..94fcf5563 100644 --- a/apps/www/registry/magicui/backlight.tsx +++ b/apps/www/registry/magicui/backlight.tsx @@ -1,4 +1,4 @@ -import { ReactElement, useId } from "react" +import { useId, type ReactElement } from "react" type BacklightProps = { children?: ReactElement @@ -6,11 +6,7 @@ type BacklightProps = { blur?: number } -export default function Backlight({ - blur = 20, - children, - className, -}: BacklightProps) { +export function Backlight({ blur = 20, children, className }: BacklightProps) { const id = useId() return (