diff --git a/apps/www/app/(blog)/blog/[...slug]/page.tsx b/apps/www/app/(blog)/blog/[...slug]/page.tsx
index 59dc89466..5fff4ca24 100644
--- a/apps/www/app/(blog)/blog/[...slug]/page.tsx
+++ b/apps/www/app/(blog)/blog/[...slug]/page.tsx
@@ -4,14 +4,15 @@ import Link from "next/link"
 import { notFound } from "next/navigation"
 import { mdxComponents } from "@/mdx-components"
 import { ArrowLeftIcon } from "lucide-react"
-import { Badge } from "@/components/ui/badge"
 import type { BlogPosting, BreadcrumbList, WithContext } from "schema-dts"
+
 import { siteConfig } from "@/config/site"
 import { blogSource } from "@/lib/source"
 import { absoluteUrl, calculateReadingTime, formatDate } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
 import { buttonVariants } from "@/components/ui/button"
-import { BlogTableOfContents } from "@/components/blog/table-of-contents"
 import { MobileTOC } from "@/components/blog/mobile-toc"
+import { BlogTableOfContents } from "@/components/blog/table-of-contents"
 import { SidebarCTA } from "@/components/sidebar-cta"
 
 export const revalidate = false
@@ -188,7 +189,7 @@ export default async function BlogPage({ params }: PageProps) {
                 <img
                   src={doc.image}
                   alt={doc.title}
-                  className="size-full rounded-xl object-cover object-left border border-border"
+                  className="border-border size-full rounded-xl border object-cover object-left"
                 />
               </div>
               <div className="mx-auto flex flex-col items-center justify-center gap-y-2 p-5">
@@ -219,14 +220,16 @@ export default async function BlogPage({ params }: PageProps) {
 
                   return (
                     tags.length > 0 && (
-                      <div className="flex flex-wrap gap-1 items-center justify-center">
+                      <div className="flex flex-wrap items-center justify-center gap-1">
                         {tags.map((tag) => (
                           <Link
                             key={tag}
                             href={`/blog?tag=${encodeURIComponent(tag)}`}
-
                           >
-                            <Badge variant="secondary" className="border border-border text-xs">
+                            <Badge
+                              variant="secondary"
+                              className="border-border border text-xs"
+                            >
                               {tag}
                             </Badge>
                           </Link>
diff --git a/apps/www/app/(blog)/blog/page.tsx b/apps/www/app/(blog)/blog/page.tsx
index 658c8c601..6f3164f3c 100644
--- a/apps/www/app/(blog)/blog/page.tsx
+++ b/apps/www/app/(blog)/blog/page.tsx
@@ -127,7 +127,7 @@ export default async function Page({
           __html: serializedBreadcrumbStructuredData,
         }}
       />
-      <main className="container mx-auto py-10 md:py-14 px-10">
+      <main className="container mx-auto px-10 py-10 md:py-14">
         <header className="mb-12 space-y-3">
           <div>
             <h1 className="text-3xl font-semibold tracking-tight">Blog</h1>
@@ -202,20 +202,20 @@ export default async function Page({
                 >
                   <Link href={post.url} className="flex h-full flex-col">
                     {post.data?.image && (
-                      <div className="border-b overflow-hidden rounded-t-lg">
+                      <div className="overflow-hidden rounded-t-lg border-b">
                         <img
                           src={post.data.image}
                           alt={post.data?.title ?? post.url}
                           width={640}
                           height={360}
-                          className="w-full h-auto object-contain transition-transform duration-300 group-hover:scale-[1.02]"
+                          className="h-auto w-full object-contain transition-transform duration-300 group-hover:scale-[1.02]"
                         />
                       </div>
                     )}
 
                     <div className="flex flex-1 flex-col space-y-3 p-6">
                       <div className="flex-1 space-y-2">
-                        <h2 className="group-hover:text-primary line-clamp-2 text-xl font-semibold leading-tight transition-colors">
+                        <h2 className="group-hover:text-primary line-clamp-2 text-xl leading-tight font-semibold transition-colors">
                           {post.data?.title ?? post.url}
                         </h2>
                         {post.data?.description && (
@@ -239,15 +239,17 @@ export default async function Page({
 
                       {normalizeTag(post.data?.tags).length > 0 && (
                         <div className="flex flex-wrap gap-1.5">
-                          {normalizeTag(post.data.tags).slice(0, 3).map((tag) => (
-                            <Badge
-                              key={tag}
-                              variant="secondary"
-                              className="border border-border text-xs"
-                            >
-                              {tag}
-                            </Badge>
-                          ))}
+                          {normalizeTag(post.data.tags)
+                            .slice(0, 3)
+                            .map((tag) => (
+                              <Badge
+                                key={tag}
+                                variant="secondary"
+                                className="border-border border text-xs"
+                              >
+                                {tag}
+                              </Badge>
+                            ))}
                         </div>
                       )}
                     </div>
diff --git a/apps/www/components/blog/table-of-contents.tsx b/apps/www/components/blog/table-of-contents.tsx
index 557b1e62d..6a65bca64 100644
--- a/apps/www/components/blog/table-of-contents.tsx
+++ b/apps/www/components/blog/table-of-contents.tsx
@@ -16,10 +16,10 @@ const generateHeadingId = (text: string) => {
     .trim()
 }
 
-export function BlogTableOfContents({ 
+export function BlogTableOfContents({
   className,
   onLinkClick,
-}: { 
+}: {
   className?: string
   onLinkClick?: () => void
 }) {
diff --git a/apps/www/config/docs.ts b/apps/www/config/docs.ts
index 4e3ee6eae..8a40ed792 100644
--- a/apps/www/config/docs.ts
+++ b/apps/www/config/docs.ts
@@ -244,6 +244,12 @@ export const docsConfig: DocsConfig = {
           href: `/docs/components/magic-card`,
           items: [],
         },
+        {
+          title: "Glare Hover",
+          href: `/docs/components/glare-hover`,
+          items: [],
+          label: "New",
+        },
         {
           title: "Meteors",
           href: `/docs/components/meteors`,
diff --git a/apps/www/content/blog/typescript-vs-javascript-differences.mdx b/apps/www/content/blog/typescript-vs-javascript-differences.mdx
index 04ecda5d5..86d260d31 100644
--- a/apps/www/content/blog/typescript-vs-javascript-differences.mdx
+++ b/apps/www/content/blog/typescript-vs-javascript-differences.mdx
@@ -39,7 +39,7 @@ This comparison isn't about crowning a winner. It’s about helping you make the
 <div className="my-6 w-full overflow-x-auto rounded-lg border">
   <table className="relative w-full text-sm">
     <thead className="bg-muted border-b">
-      <tr className="m-0 border-b transition-colors hover:bg-muted/50">
+      <tr className="hover:bg-muted/50 m-0 border-b transition-colors">
         <th
           scope="col"
           className="min-w-[120px] px-4 py-3 text-left font-semibold"
@@ -61,7 +61,7 @@ This comparison isn't about crowning a winner. It’s about helping you make the
       </tr>
     </thead>
     <tbody>
-      <tr className="m-0 border-b transition-colors hover:bg-muted/50">
+      <tr className="hover:bg-muted/50 m-0 border-b transition-colors">
         <td className="min-w-[120px] px-4 py-3 text-left font-medium">
           Project Scope
         </td>
@@ -73,7 +73,7 @@ This comparison isn't about crowning a winner. It’s about helping you make the
           maintainability.
         </td>
       </tr>
-      <tr className="m-0 border-b transition-colors hover:bg-muted/50">
+      <tr className="hover:bg-muted/50 m-0 border-b transition-colors">
         <td className="min-w-[120px] px-4 py-3 text-left font-medium">
           Error Detection
         </td>
@@ -84,7 +84,7 @@ This comparison isn't about crowning a winner. It’s about helping you make the
           Catches type-related errors during compilation, before code is run.
         </td>
       </tr>
-      <tr className="m-0 border-b transition-colors hover:bg-muted/50 last:border-b-0">
+      <tr className="hover:bg-muted/50 m-0 border-b transition-colors last:border-b-0">
         <td className="min-w-[120px] px-4 py-3 text-left font-medium">
           Developer Experience
         </td>
diff --git a/apps/www/content/docs/components/glare-hover.mdx b/apps/www/content/docs/components/glare-hover.mdx
new file mode 100644
index 000000000..7bb6685b3
--- /dev/null
+++ b/apps/www/content/docs/components/glare-hover.mdx
@@ -0,0 +1,124 @@
+---
+title: Glare Hover
+date: 2024-12-19
+description: A component that creates a subtle glare effect that animates across the element on hover.
+author: magicui
+published: true
+---
+
+<ComponentPreview name="glare-hover-demo" />
+
+## Examples
+
+### Custom Color - Blue
+
+<ComponentPreview name="glare-hover-demo-blue" />
+
+### Custom Color - Purple
+
+<ComponentPreview name="glare-hover-demo-purple" />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add @magicui/glare-hover
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="glare-hover" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx showLineNumbers
+import { GlareHover } from "@/registry/magicui/glare-hover"
+```
+
+```tsx showLineNumbers
+<GlareHover className="rounded-lg">
+  <Card>
+    <CardContent>
+      <CardTitle>Hello World</CardTitle>
+      <CardDescription>Hover over this card to see the effect</CardDescription>
+    </CardContent>
+  </Card>
+</GlareHover>
+```
+
+```tsx showLineNumbers
+<GlareHover className="rounded-lg" rotate={30}>
+  <Card>
+    <CardContent>
+      <CardTitle>Custom Rotation</CardTitle>
+      <CardDescription>With custom rotation angle</CardDescription>
+    </CardContent>
+  </Card>
+</GlareHover>
+```
+
+### Customizing the Glare Color
+
+You can customize the glare effect color by using the `glareClassName` prop with Tailwind's `via-<color>` utility classes. The component uses a gradient with `via-black/15` by default (and `via-white/50` in dark mode), which you can override.
+
+```tsx showLineNumbers
+<GlareHover 
+  className="rounded-lg" 
+  glareClassName="via-blue-500/30 dark:via-blue-400/40"
+>
+  <Card>
+    <CardContent>
+      <CardTitle>Custom Color</CardTitle>
+      <CardDescription>With blue glare effect</CardDescription>
+    </CardContent>
+  </Card>
+</GlareHover>
+```
+
+```tsx showLineNumbers
+<GlareHover 
+  className="rounded-lg" 
+  glareClassName="via-purple-500/40 dark:via-purple-300/50"
+>
+  <Card>
+    <CardContent>
+      <CardTitle>Purple Glare</CardTitle>
+      <CardDescription>With purple glare effect</CardDescription>
+    </CardContent>
+  </Card>
+</GlareHover>
+```
+
+## Props
+
+### GlareHover
+
+| Prop name        | Type              | Default | Description                                          |
+| ---------------- | ----------------- | ------- | ---------------------------------------------------- |
+| `children`       | `React.ReactNode` | `-`     | The content to be wrapped with the glare effect     |
+| `className`      | `string`          | `-`     | Additional CSS classes for the root container       |
+| `glareClassName` | `string`          | `-`     | Additional CSS classes for the glare element. Use `via-<color>` Tailwind classes to customize the glare color (e.g., `via-blue-500/30`) |
+| `rotate`         | `number`          | `45`    | Rotation angle in degrees for the glare effect      |
+
+The glare effect uses a gradient that automatically adapts to light and dark themes, creating a subtle shine effect that moves across the element on hover. By default, it uses `via-black/15` in light mode and `via-white/50` in dark mode, but you can customize it using the `glareClassName` prop with Tailwind's `via-<color>` utility classes.
diff --git a/apps/www/mdx-components.tsx b/apps/www/mdx-components.tsx
index 35f658e7c..94ef6cf06 100644
--- a/apps/www/mdx-components.tsx
+++ b/apps/www/mdx-components.tsx
@@ -100,10 +100,7 @@ export const mdxComponents = {
     />
   ),
   p: ({ className, ...props }: React.ComponentProps<"p">) => (
-    <p
-      className={cn("leading-relaxed not-first:mt-6", className)}
-      {...props}
-    />
+    <p className={cn("leading-relaxed not-first:mt-6", className)} {...props} />
   ),
   strong: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
     <strong className={cn("font-medium", className)} {...props} />
@@ -119,7 +116,10 @@ export const mdxComponents = {
   ),
   blockquote: ({ className, ...props }: React.ComponentProps<"blockquote">) => (
     <blockquote
-      className={cn("mt-6 border-l-2 pl-6 pr-4 italic bg-muted/50 py-4 rounded-r-md", className)}
+      className={cn(
+        "bg-muted/50 mt-6 rounded-r-md border-l-2 py-4 pr-4 pl-6 italic",
+        className
+      )}
       {...props}
     />
   ),
@@ -128,40 +128,30 @@ export const mdxComponents = {
     <img className={cn("rounded-md", className)} alt={alt} {...props} />
   ),
   iframe: ({ className, ...props }: React.ComponentProps<"iframe">) => (
-    <iframe
-      className={cn("mt-6 rounded-md w-full", className)}
-      {...props}
-    />
+    <iframe className={cn("mt-6 w-full rounded-md", className)} {...props} />
   ),
   hr: ({ className, ...props }: React.ComponentProps<"hr">) => (
-    <div className={cn("my-4 flex items-center justify-center md:my-8", className)}>
+    <div
+      className={cn("my-4 flex items-center justify-center md:my-8", className)}
+    >
       <hr
-        className="mx-4 h-px w-full border-0 bg-linear-to-r from-transparent via-border to-transparent"
+        className="via-border mx-4 h-px w-full border-0 bg-linear-to-r from-transparent to-transparent"
         {...props}
       />
     </div>
   ),
   table: ({ className, ...props }: React.ComponentProps<"table">) => (
     <div className="my-6 w-full overflow-x-auto rounded-lg border">
-      <table
-        className={cn(
-          "relative w-full text-sm",
-          className
-        )}
-        {...props}
-      />
+      <table className={cn("relative w-full text-sm", className)} {...props} />
     </div>
   ),
   thead: ({ className, ...props }: React.ComponentProps<"thead">) => (
-    <thead
-      className={cn("bg-muted border-b", className)}
-      {...props}
-    />
+    <thead className={cn("bg-muted border-b", className)} {...props} />
   ),
   tr: ({ className, ...props }: React.ComponentProps<"tr">) => (
     <tr
       className={cn(
-        "m-0 border-b transition-colors hover:bg-muted/50 last:border-b-0",
+        "hover:bg-muted/50 m-0 border-b transition-colors last:border-b-0",
         className
       )}
       {...props}
diff --git a/apps/www/public/llms-full.txt b/apps/www/public/llms-full.txt
index df815d333..9172c95ea 100644
--- a/apps/www/public/llms-full.txt
+++ b/apps/www/public/llms-full.txt
@@ -6804,6 +6804,224 @@ export default function FlickeringGridRoundedDemo() {
 
 
 
+===== COMPONENT: glare-hover =====
+Title: Glare Hover
+Description: A component that creates a subtle glare effect that animates across the element on hover.
+
+--- file: magicui/glare-hover.tsx ---
+import type * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface GlareHoverProps extends React.ComponentProps<"div"> {
+  /**
+   * The rotation angle in degrees for the glare effect.
+   * @default 45
+   */
+  rotate?: number
+  /**
+   * Additional CSS classes to apply to the glare element.
+   */
+  glareClassName?: string
+}
+
+function GlareHover({
+  children,
+  rotate = 45,
+  className,
+  glareClassName,
+  ...props
+}: GlareHoverProps) {
+  return (
+    <div
+      className={cn("group/glare relative w-fit overflow-hidden", className)}
+    >
+      {children}
+      <span
+        className={cn(
+          "absolute inset-0 size-full opacity-30 blur-sm transition-transform",
+          "translate-x-[-100%] bg-gradient-to-t from-transparent via-black/15 to-transparent duration-500 dark:via-white/50",
+          "group-hover/glare:translate-x-[100%]",
+          glareClassName
+        )}
+        style={{ rotate: `${rotate}deg` }}
+        aria-hidden="true"
+        role="presentation"
+        {...props}
+      />
+    </div>
+  )
+}
+
+export { GlareHover }
+
+
+===== EXAMPLE: glare-hover-demo =====
+Title: Glare Hover Demo
+
+--- file: example/glare-hover-demo.tsx ---
+"use client"
+
+import { Sparkles } from "lucide-react"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { GlareHover } from "@/registry/magicui/glare-hover"
+
+export default function GlareHoverDemo() {
+  return (
+    <div className="relative flex w-full items-center justify-center">
+      <GlareHover className="w-full max-w-lg rounded-xl">
+        <Card>
+          <CardHeader>
+            <div className="mb-4 flex items-center gap-3">
+              <div className="bg-primary/10 flex size-12 items-center justify-center rounded-lg">
+                <Sparkles className="text-primary size-6" />
+              </div>
+              <div>
+                <CardTitle>Interactive Glare Effect</CardTitle>
+                <CardDescription className="mt-1">
+                  Hover to see the magic
+                </CardDescription>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <p className="text-muted-foreground">
+              This component adds a subtle glare effect that smoothly animates
+              across the element when you hover over it. Perfect for adding a
+              premium, polished feel to your UI components.
+            </p>
+          </CardContent>
+        </Card>
+      </GlareHover>
+    </div>
+  )
+}
+
+
+===== EXAMPLE: glare-hover-demo-blue =====
+Title: Glare Hover Demo - Blue
+
+--- file: example/glare-hover-demo-blue.tsx ---
+"use client"
+
+import { TrendingUp, Users, Zap } from "lucide-react"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { GlareHover } from "@/registry/magicui/glare-hover"
+
+export default function GlareHoverDemoBlue() {
+  return (
+    <div className="relative flex w-full items-center justify-center">
+      <GlareHover
+        className="w-full max-w-lg rounded-xl"
+        glareClassName="via-blue-500/30 dark:via-blue-400/40"
+      >
+        <Card>
+          <CardHeader>
+            <CardTitle>Performance Metrics</CardTitle>
+            <CardDescription>Real-time analytics dashboard</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-3 gap-4">
+              <div className="flex flex-col items-center gap-2 rounded-lg border p-4">
+                <Zap className="size-5 text-blue-500" />
+                <div className="text-2xl font-bold">98%</div>
+                <div className="text-muted-foreground text-xs">Uptime</div>
+              </div>
+              <div className="flex flex-col items-center gap-2 rounded-lg border p-4">
+                <TrendingUp className="size-5 text-blue-500" />
+                <div className="text-2xl font-bold">+24%</div>
+                <div className="text-muted-foreground text-xs">Growth</div>
+              </div>
+              <div className="flex flex-col items-center gap-2 rounded-lg border p-4">
+                <Users className="size-5 text-blue-500" />
+                <div className="text-2xl font-bold">12.5k</div>
+                <div className="text-muted-foreground text-xs">Users</div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </GlareHover>
+    </div>
+  )
+}
+
+
+===== EXAMPLE: glare-hover-demo-purple =====
+Title: Glare Hover Demo - Purple
+
+--- file: example/glare-hover-demo-purple.tsx ---
+"use client"
+
+import { Award, CheckCircle2 } from "lucide-react"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { GlareHover } from "@/registry/magicui/glare-hover"
+
+export default function GlareHoverDemoPurple() {
+  return (
+    <div className="relative flex w-full items-center justify-center">
+      <GlareHover
+        className="w-full max-w-lg rounded-xl"
+        glareClassName="via-purple-500/40 dark:via-purple-300/50"
+      >
+        <Card>
+          <CardHeader>
+            <div className="flex items-center gap-3">
+              <div className="flex size-12 items-center justify-center rounded-full bg-purple-500/10">
+                <Award className="size-6 text-purple-500" />
+              </div>
+              <div className="flex-1">
+                <CardTitle>Achievement Unlocked!</CardTitle>
+                <CardDescription className="mt-1">
+                  You&apos;ve reached a new milestone
+                </CardDescription>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-3">
+              <div className="flex items-center gap-2">
+                <CheckCircle2 className="size-4 text-purple-500" />
+                <span className="text-sm">Completed 100 tasks</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <CheckCircle2 className="size-4 text-purple-500" />
+                <span className="text-sm">Maintained 30-day streak</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <CheckCircle2 className="size-4 text-purple-500" />
+                <span className="text-sm">Earned Expert badge</span>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </GlareHover>
+    </div>
+  )
+}
+
+
+
 ===== COMPONENT: globe =====
 Title: Globe
 Description: An autorotating, interactive, and highly performant globe made using WebGL.
diff --git a/apps/www/public/llms.txt b/apps/www/public/llms.txt
index 94f1e90c9..2b771dfcd 100644
--- a/apps/www/public/llms.txt
+++ b/apps/www/public/llms.txt
@@ -29,6 +29,7 @@ This file provides LLM-friendly entry points to documentation and examples.
 - [Dotted Map](https://magicui.design/docs/components/dotted-map): A component with a dotted map.
 - [File Tree](https://magicui.design/docs/components/file-tree): A component used to showcase the folder and file structure of a directory.
 - [Flickering Grid](https://magicui.design/docs/components/flickering-grid): A flickering grid background made with SVGs, fully customizable using Tailwind CSS.
+- [Glare Hover](https://magicui.design/docs/components/glare-hover): A component that creates a subtle glare effect that animates across the element on hover.
 - [Globe](https://magicui.design/docs/components/globe): An autorotating, interactive, and highly performant globe made using WebGL.
 - [Grid Pattern](https://magicui.design/docs/components/grid-pattern): A background grid pattern made with SVGs, fully customizable using Tailwind CSS.
 - [Hero Video Dialog](https://magicui.design/docs/components/hero-video-dialog): A hero video dialog component.
@@ -114,6 +115,9 @@ This file provides LLM-friendly entry points to documentation and examples.
 - [Marquee Logos](https://github.com/magicuidesign/magicui/blob/main/example/marquee-logos.tsx): Example usage
 - [Marquee 3D](https://github.com/magicuidesign/magicui/blob/main/example/marquee-3d.tsx): Example usage
 - [Globe Demo](https://github.com/magicuidesign/magicui/blob/main/example/globe-demo.tsx): Example usage
+- [Glare Hover Demo](https://github.com/magicuidesign/magicui/blob/main/example/glare-hover-demo.tsx): Example usage
+- [Glare Hover Demo - Blue](https://github.com/magicuidesign/magicui/blob/main/example/glare-hover-demo-blue.tsx): Example usage
+- [Glare Hover Demo - Purple](https://github.com/magicuidesign/magicui/blob/main/example/glare-hover-demo-purple.tsx): Example usage
 - [Tweet Card Demo](https://github.com/magicuidesign/magicui/blob/main/example/tweet-card-demo.tsx): Example usage
 - [Tweet Card Images](https://github.com/magicuidesign/magicui/blob/main/example/tweet-card-images.tsx): Example usage
 - [Tweet Card Meta Preview](https://github.com/magicuidesign/magicui/blob/main/example/tweet-card-meta-preview.tsx): Example usage
diff --git a/apps/www/public/r/glare-hover-demo-blue.json b/apps/www/public/r/glare-hover-demo-blue.json
new file mode 100644
index 000000000..afb3cebab
--- /dev/null
+++ b/apps/www/public/r/glare-hover-demo-blue.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "glare-hover-demo-blue",
+  "type": "registry:example",
+  "title": "Glare Hover Demo - Blue",
+  "description": "Example showing a blue glare effect using custom color classes.",
+  "registryDependencies": [
+    "@magicui/glare-hover"
+  ],
+  "files": [
+    {
+      "path": "registry/example/glare-hover-demo-blue.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp, Users, Zap } from \"lucide-react\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { GlareHover } from \"@/registry/magicui/glare-hover\"\n\nexport default function GlareHoverDemoBlue() {\n  return (\n    <div className=\"relative flex w-full items-center justify-center\">\n      <GlareHover\n        className=\"w-full max-w-lg rounded-xl\"\n        glareClassName=\"via-blue-500/30 dark:via-blue-400/40\"\n      >\n        <Card>\n          <CardHeader>\n            <CardTitle>Performance Metrics</CardTitle>\n            <CardDescription>Real-time analytics dashboard</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <div className=\"grid grid-cols-3 gap-4\">\n              <div className=\"flex flex-col items-center gap-2 rounded-lg border p-4\">\n                <Zap className=\"size-5 text-blue-500\" />\n                <div className=\"text-2xl font-bold\">98%</div>\n                <div className=\"text-muted-foreground text-xs\">Uptime</div>\n              </div>\n              <div className=\"flex flex-col items-center gap-2 rounded-lg border p-4\">\n                <TrendingUp className=\"size-5 text-blue-500\" />\n                <div className=\"text-2xl font-bold\">+24%</div>\n                <div className=\"text-muted-foreground text-xs\">Growth</div>\n              </div>\n              <div className=\"flex flex-col items-center gap-2 rounded-lg border p-4\">\n                <Users className=\"size-5 text-blue-500\" />\n                <div className=\"text-2xl font-bold\">12.5k</div>\n                <div className=\"text-muted-foreground text-xs\">Users</div>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </GlareHover>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/glare-hover-demo-purple.json b/apps/www/public/r/glare-hover-demo-purple.json
new file mode 100644
index 000000000..bac883614
--- /dev/null
+++ b/apps/www/public/r/glare-hover-demo-purple.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "glare-hover-demo-purple",
+  "type": "registry:example",
+  "title": "Glare Hover Demo - Purple",
+  "description": "Example showing a purple glare effect using custom color classes.",
+  "registryDependencies": [
+    "@magicui/glare-hover"
+  ],
+  "files": [
+    {
+      "path": "registry/example/glare-hover-demo-purple.tsx",
+      "content": "\"use client\"\n\nimport { Award, CheckCircle2 } from \"lucide-react\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { GlareHover } from \"@/registry/magicui/glare-hover\"\n\nexport default function GlareHoverDemoPurple() {\n  return (\n    <div className=\"relative flex w-full items-center justify-center\">\n      <GlareHover\n        className=\"w-full max-w-lg rounded-xl\"\n        glareClassName=\"via-purple-500/40 dark:via-purple-300/50\"\n      >\n        <Card>\n          <CardHeader>\n            <div className=\"flex items-center gap-3\">\n              <div className=\"flex size-12 items-center justify-center rounded-full bg-purple-500/10\">\n                <Award className=\"size-6 text-purple-500\" />\n              </div>\n              <div className=\"flex-1\">\n                <CardTitle>Achievement Unlocked!</CardTitle>\n                <CardDescription className=\"mt-1\">\n                  You&apos;ve reached a new milestone\n                </CardDescription>\n              </div>\n            </div>\n          </CardHeader>\n          <CardContent>\n            <div className=\"space-y-3\">\n              <div className=\"flex items-center gap-2\">\n                <CheckCircle2 className=\"size-4 text-purple-500\" />\n                <span className=\"text-sm\">Completed 100 tasks</span>\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <CheckCircle2 className=\"size-4 text-purple-500\" />\n                <span className=\"text-sm\">Maintained 30-day streak</span>\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <CheckCircle2 className=\"size-4 text-purple-500\" />\n                <span className=\"text-sm\">Earned Expert badge</span>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </GlareHover>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/glare-hover-demo.json b/apps/www/public/r/glare-hover-demo.json
new file mode 100644
index 000000000..e120003c5
--- /dev/null
+++ b/apps/www/public/r/glare-hover-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "glare-hover-demo",
+  "type": "registry:example",
+  "title": "Glare Hover Demo",
+  "description": "Example showing a subtle glare effect that animates across the element on hover.",
+  "registryDependencies": [
+    "@magicui/glare-hover"
+  ],
+  "files": [
+    {
+      "path": "registry/example/glare-hover-demo.tsx",
+      "content": "\"use client\"\n\nimport { Sparkles } from \"lucide-react\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { GlareHover } from \"@/registry/magicui/glare-hover\"\n\nexport default function GlareHoverDemo() {\n  return (\n    <div className=\"relative flex w-full items-center justify-center\">\n      <GlareHover className=\"w-full max-w-lg rounded-xl\">\n        <Card>\n          <CardHeader>\n            <div className=\"mb-4 flex items-center gap-3\">\n              <div className=\"bg-primary/10 flex size-12 items-center justify-center rounded-lg\">\n                <Sparkles className=\"text-primary size-6\" />\n              </div>\n              <div>\n                <CardTitle>Interactive Glare Effect</CardTitle>\n                <CardDescription className=\"mt-1\">\n                  Hover to see the magic\n                </CardDescription>\n              </div>\n            </div>\n          </CardHeader>\n          <CardContent>\n            <p className=\"text-muted-foreground\">\n              This component adds a subtle glare effect that smoothly animates\n              across the element when you hover over it. Perfect for adding a\n              premium, polished feel to your UI components.\n            </p>\n          </CardContent>\n        </Card>\n      </GlareHover>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/glare-hover.json b/apps/www/public/r/glare-hover.json
new file mode 100644
index 000000000..d31911ba9
--- /dev/null
+++ b/apps/www/public/r/glare-hover.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "glare-hover",
+  "type": "registry:ui",
+  "title": "Glare Hover",
+  "description": "A component that creates a subtle glare effect that animates across the element on hover.",
+  "files": [
+    {
+      "path": "registry/magicui/glare-hover.tsx",
+      "content": "import type * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface GlareHoverProps extends React.ComponentProps<\"div\"> {\n  /**\n   * The rotation angle in degrees for the glare effect.\n   * @default 45\n   */\n  rotate?: number\n  /**\n   * Additional CSS classes to apply to the glare element.\n   */\n  glareClassName?: string\n}\n\nfunction GlareHover({\n  children,\n  rotate = 45,\n  className,\n  glareClassName,\n  ...props\n}: GlareHoverProps) {\n  return (\n    <div\n      className={cn(\"group/glare relative w-fit overflow-hidden\", className)}\n    >\n      {children}\n      <span\n        className={cn(\n          \"absolute inset-0 size-full opacity-30 blur-sm transition-transform\",\n          \"translate-x-[-100%] bg-gradient-to-t from-transparent via-black/15 to-transparent duration-500 dark:via-white/50\",\n          \"group-hover/glare:translate-x-[100%]\",\n          glareClassName\n        )}\n        style={{ rotate: `${rotate}deg` }}\n        aria-hidden=\"true\"\n        role=\"presentation\"\n        {...props}\n      />\n    </div>\n  )\n}\n\nexport { GlareHover }\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 9a498d52b..77058a588 100644
--- a/apps/www/public/r/registry.json
+++ b/apps/www/public/r/registry.json
@@ -417,6 +417,18 @@
         }
       ]
     },
+    {
+      "name": "glare-hover",
+      "type": "registry:ui",
+      "title": "Glare Hover",
+      "description": "A component that creates a subtle glare effect that animates across the element on hover.",
+      "files": [
+        {
+          "path": "registry/magicui/glare-hover.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "shimmer-button",
       "type": "registry:ui",
@@ -1808,6 +1820,51 @@
         }
       ]
     },
+    {
+      "name": "glare-hover-demo",
+      "type": "registry:example",
+      "title": "Glare Hover Demo",
+      "description": "Example showing a subtle glare effect that animates across the element on hover.",
+      "registryDependencies": [
+        "@magicui/glare-hover"
+      ],
+      "files": [
+        {
+          "path": "registry/example/glare-hover-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "glare-hover-demo-blue",
+      "type": "registry:example",
+      "title": "Glare Hover Demo - Blue",
+      "description": "Example showing a blue glare effect using custom color classes.",
+      "registryDependencies": [
+        "@magicui/glare-hover"
+      ],
+      "files": [
+        {
+          "path": "registry/example/glare-hover-demo-blue.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "glare-hover-demo-purple",
+      "type": "registry:example",
+      "title": "Glare Hover Demo - Purple",
+      "description": "Example showing a purple glare effect using custom color classes.",
+      "registryDependencies": [
+        "@magicui/glare-hover"
+      ],
+      "files": [
+        {
+          "path": "registry/example/glare-hover-demo-purple.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
     {
       "name": "tweet-card-demo",
       "type": "registry:example",
diff --git a/apps/www/public/registry.json b/apps/www/public/registry.json
index 9a498d52b..77058a588 100644
--- a/apps/www/public/registry.json
+++ b/apps/www/public/registry.json
@@ -417,6 +417,18 @@
         }
       ]
     },
+    {
+      "name": "glare-hover",
+      "type": "registry:ui",
+      "title": "Glare Hover",
+      "description": "A component that creates a subtle glare effect that animates across the element on hover.",
+      "files": [
+        {
+          "path": "registry/magicui/glare-hover.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "shimmer-button",
       "type": "registry:ui",
@@ -1808,6 +1820,51 @@
         }
       ]
     },
+    {
+      "name": "glare-hover-demo",
+      "type": "registry:example",
+      "title": "Glare Hover Demo",
+      "description": "Example showing a subtle glare effect that animates across the element on hover.",
+      "registryDependencies": [
+        "@magicui/glare-hover"
+      ],
+      "files": [
+        {
+          "path": "registry/example/glare-hover-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "glare-hover-demo-blue",
+      "type": "registry:example",
+      "title": "Glare Hover Demo - Blue",
+      "description": "Example showing a blue glare effect using custom color classes.",
+      "registryDependencies": [
+        "@magicui/glare-hover"
+      ],
+      "files": [
+        {
+          "path": "registry/example/glare-hover-demo-blue.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "glare-hover-demo-purple",
+      "type": "registry:example",
+      "title": "Glare Hover Demo - Purple",
+      "description": "Example showing a purple glare effect using custom color classes.",
+      "registryDependencies": [
+        "@magicui/glare-hover"
+      ],
+      "files": [
+        {
+          "path": "registry/example/glare-hover-demo-purple.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
     {
       "name": "tweet-card-demo",
       "type": "registry:example",
diff --git a/apps/www/registry.json b/apps/www/registry.json
index 9a498d52b..77058a588 100644
--- a/apps/www/registry.json
+++ b/apps/www/registry.json
@@ -417,6 +417,18 @@
         }
       ]
     },
+    {
+      "name": "glare-hover",
+      "type": "registry:ui",
+      "title": "Glare Hover",
+      "description": "A component that creates a subtle glare effect that animates across the element on hover.",
+      "files": [
+        {
+          "path": "registry/magicui/glare-hover.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "shimmer-button",
       "type": "registry:ui",
@@ -1808,6 +1820,51 @@
         }
       ]
     },
+    {
+      "name": "glare-hover-demo",
+      "type": "registry:example",
+      "title": "Glare Hover Demo",
+      "description": "Example showing a subtle glare effect that animates across the element on hover.",
+      "registryDependencies": [
+        "@magicui/glare-hover"
+      ],
+      "files": [
+        {
+          "path": "registry/example/glare-hover-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "glare-hover-demo-blue",
+      "type": "registry:example",
+      "title": "Glare Hover Demo - Blue",
+      "description": "Example showing a blue glare effect using custom color classes.",
+      "registryDependencies": [
+        "@magicui/glare-hover"
+      ],
+      "files": [
+        {
+          "path": "registry/example/glare-hover-demo-blue.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "glare-hover-demo-purple",
+      "type": "registry:example",
+      "title": "Glare Hover Demo - Purple",
+      "description": "Example showing a purple glare effect using custom color classes.",
+      "registryDependencies": [
+        "@magicui/glare-hover"
+      ],
+      "files": [
+        {
+          "path": "registry/example/glare-hover-demo-purple.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
     {
       "name": "tweet-card-demo",
       "type": "registry:example",
diff --git a/apps/www/registry/__index__.tsx b/apps/www/registry/__index__.tsx
index 28b83d4ca..c47a1175a 100644
--- a/apps/www/registry/__index__.tsx
+++ b/apps/www/registry/__index__.tsx
@@ -389,6 +389,23 @@ export const Index: Record<string, any> = {
     }),
     meta: undefined,
   },
+  "glare-hover": {
+    name: "glare-hover",
+    description: "A component that creates a subtle glare effect that animates across the element on hover.",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/magicui/glare-hover.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/magicui/glare-hover.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,
+  },
   "shimmer-button": {
     name: "shimmer-button",
     description: "A button with a shimmering light which travels around the perimeter.",
@@ -1800,6 +1817,57 @@ export const Index: Record<string, any> = {
     }),
     meta: undefined,
   },
+  "glare-hover-demo": {
+    name: "glare-hover-demo",
+    description: "Example showing a subtle glare effect that animates across the element on hover.",
+    type: "registry:example",
+    registryDependencies: ["@magicui/glare-hover"],
+    files: [{
+      path: "registry/example/glare-hover-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/example/glare-hover-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,
+  },
+  "glare-hover-demo-blue": {
+    name: "glare-hover-demo-blue",
+    description: "Example showing a blue glare effect using custom color classes.",
+    type: "registry:example",
+    registryDependencies: ["@magicui/glare-hover"],
+    files: [{
+      path: "registry/example/glare-hover-demo-blue.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/example/glare-hover-demo-blue.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,
+  },
+  "glare-hover-demo-purple": {
+    name: "glare-hover-demo-purple",
+    description: "Example showing a purple glare effect using custom color classes.",
+    type: "registry:example",
+    registryDependencies: ["@magicui/glare-hover"],
+    files: [{
+      path: "registry/example/glare-hover-demo-purple.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/example/glare-hover-demo-purple.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,
+  },
   "tweet-card-demo": {
     name: "tweet-card-demo",
     description: "Example showing a tweet card with author info.",
diff --git a/apps/www/registry/example/glare-hover-demo-blue.tsx b/apps/www/registry/example/glare-hover-demo-blue.tsx
new file mode 100644
index 000000000..e977fd16c
--- /dev/null
+++ b/apps/www/registry/example/glare-hover-demo-blue.tsx
@@ -0,0 +1,49 @@
+"use client"
+
+import { TrendingUp, Users, Zap } from "lucide-react"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { GlareHover } from "@/registry/magicui/glare-hover"
+
+export default function GlareHoverDemoBlue() {
+  return (
+    <div className="relative flex w-full items-center justify-center">
+      <GlareHover
+        className="w-full max-w-lg rounded-xl"
+        glareClassName="via-blue-500/30 dark:via-blue-400/40"
+      >
+        <Card>
+          <CardHeader>
+            <CardTitle>Performance Metrics</CardTitle>
+            <CardDescription>Real-time analytics dashboard</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-3 gap-4">
+              <div className="flex flex-col items-center gap-2 rounded-lg border p-4">
+                <Zap className="size-5 text-blue-500" />
+                <div className="text-2xl font-bold">98%</div>
+                <div className="text-muted-foreground text-xs">Uptime</div>
+              </div>
+              <div className="flex flex-col items-center gap-2 rounded-lg border p-4">
+                <TrendingUp className="size-5 text-blue-500" />
+                <div className="text-2xl font-bold">+24%</div>
+                <div className="text-muted-foreground text-xs">Growth</div>
+              </div>
+              <div className="flex flex-col items-center gap-2 rounded-lg border p-4">
+                <Users className="size-5 text-blue-500" />
+                <div className="text-2xl font-bold">12.5k</div>
+                <div className="text-muted-foreground text-xs">Users</div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </GlareHover>
+    </div>
+  )
+}
diff --git a/apps/www/registry/example/glare-hover-demo-purple.tsx b/apps/www/registry/example/glare-hover-demo-purple.tsx
new file mode 100644
index 000000000..026ce6093
--- /dev/null
+++ b/apps/www/registry/example/glare-hover-demo-purple.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import { Award, CheckCircle2 } from "lucide-react"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { GlareHover } from "@/registry/magicui/glare-hover"
+
+export default function GlareHoverDemoPurple() {
+  return (
+    <div className="relative flex w-full items-center justify-center">
+      <GlareHover
+        className="w-full max-w-lg rounded-xl"
+        glareClassName="via-purple-500/40 dark:via-purple-300/50"
+      >
+        <Card>
+          <CardHeader>
+            <div className="flex items-center gap-3">
+              <div className="flex size-12 items-center justify-center rounded-full bg-purple-500/10">
+                <Award className="size-6 text-purple-500" />
+              </div>
+              <div className="flex-1">
+                <CardTitle>Achievement Unlocked!</CardTitle>
+                <CardDescription className="mt-1">
+                  You&apos;ve reached a new milestone
+                </CardDescription>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-3">
+              <div className="flex items-center gap-2">
+                <CheckCircle2 className="size-4 text-purple-500" />
+                <span className="text-sm">Completed 100 tasks</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <CheckCircle2 className="size-4 text-purple-500" />
+                <span className="text-sm">Maintained 30-day streak</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <CheckCircle2 className="size-4 text-purple-500" />
+                <span className="text-sm">Earned Expert badge</span>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </GlareHover>
+    </div>
+  )
+}
diff --git a/apps/www/registry/example/glare-hover-demo.tsx b/apps/www/registry/example/glare-hover-demo.tsx
new file mode 100644
index 000000000..db08a8818
--- /dev/null
+++ b/apps/www/registry/example/glare-hover-demo.tsx
@@ -0,0 +1,43 @@
+"use client"
+
+import { Sparkles } from "lucide-react"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { GlareHover } from "@/registry/magicui/glare-hover"
+
+export default function GlareHoverDemo() {
+  return (
+    <div className="relative flex w-full items-center justify-center">
+      <GlareHover className="w-full max-w-lg rounded-xl">
+        <Card>
+          <CardHeader>
+            <div className="mb-4 flex items-center gap-3">
+              <div className="bg-primary/10 flex size-12 items-center justify-center rounded-lg">
+                <Sparkles className="text-primary size-6" />
+              </div>
+              <div>
+                <CardTitle>Interactive Glare Effect</CardTitle>
+                <CardDescription className="mt-1">
+                  Hover to see the magic
+                </CardDescription>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <p className="text-muted-foreground">
+              This component adds a subtle glare effect that smoothly animates
+              across the element when you hover over it. Perfect for adding a
+              premium, polished feel to your UI components.
+            </p>
+          </CardContent>
+        </Card>
+      </GlareHover>
+    </div>
+  )
+}
diff --git a/apps/www/registry/magicui/glare-hover.tsx b/apps/www/registry/magicui/glare-hover.tsx
new file mode 100644
index 000000000..1fcb8d74d
--- /dev/null
+++ b/apps/www/registry/magicui/glare-hover.tsx
@@ -0,0 +1,45 @@
+import type * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface GlareHoverProps extends React.ComponentProps<"div"> {
+  /**
+   * The rotation angle in degrees for the glare effect.
+   * @default 45
+   */
+  rotate?: number
+  /**
+   * Additional CSS classes to apply to the glare element.
+   */
+  glareClassName?: string
+}
+
+function GlareHover({
+  children,
+  rotate = 45,
+  className,
+  glareClassName,
+  ...props
+}: GlareHoverProps) {
+  return (
+    <div
+      className={cn("group/glare relative w-fit overflow-hidden", className)}
+    >
+      {children}
+      <span
+        className={cn(
+          "absolute inset-0 size-full opacity-30 blur-sm transition-transform",
+          "translate-x-[-100%] bg-gradient-to-t from-transparent via-black/15 to-transparent duration-500 dark:via-white/50",
+          "group-hover/glare:translate-x-[100%]",
+          glareClassName
+        )}
+        style={{ rotate: `${rotate}deg` }}
+        aria-hidden="true"
+        role="presentation"
+        {...props}
+      />
+    </div>
+  )
+}
+
+export { GlareHover }
diff --git a/apps/www/registry/registry-examples.ts b/apps/www/registry/registry-examples.ts
index e99cb2547..3970f51a6 100644
--- a/apps/www/registry/registry-examples.ts
+++ b/apps/www/registry/registry-examples.ts
@@ -479,6 +479,48 @@ export const examples: Registry["items"] = [
       },
     ],
   },
+  {
+    name: "glare-hover-demo",
+    type: "registry:example",
+    title: "Glare Hover Demo",
+    description:
+      "Example showing a subtle glare effect that animates across the element on hover.",
+    registryDependencies: ["@magicui/glare-hover"],
+    files: [
+      {
+        path: "example/glare-hover-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "glare-hover-demo-blue",
+    type: "registry:example",
+    title: "Glare Hover Demo - Blue",
+    description:
+      "Example showing a blue glare effect using custom color classes.",
+    registryDependencies: ["@magicui/glare-hover"],
+    files: [
+      {
+        path: "example/glare-hover-demo-blue.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "glare-hover-demo-purple",
+    type: "registry:example",
+    title: "Glare Hover Demo - Purple",
+    description:
+      "Example showing a purple glare effect using custom color classes.",
+    registryDependencies: ["@magicui/glare-hover"],
+    files: [
+      {
+        path: "example/glare-hover-demo-purple.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
   {
     name: "tweet-card-demo",
     type: "registry:example",
diff --git a/apps/www/registry/registry-ui.ts b/apps/www/registry/registry-ui.ts
index c7cadab21..a61520e1f 100644
--- a/apps/www/registry/registry-ui.ts
+++ b/apps/www/registry/registry-ui.ts
@@ -386,6 +386,19 @@ export const ui: Registry["items"] = [
       },
     ],
   },
+  {
+    name: "glare-hover",
+    type: "registry:ui",
+    title: "Glare Hover",
+    description:
+      "A component that creates a subtle glare effect that animates across the element on hover.",
+    files: [
+      {
+        path: "magicui/glare-hover.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
   {
     name: "shimmer-button",
     type: "registry:ui",