Components
Glowing Grid
Glowing Grid
Interactive grid layout with glowing hover effects and smooth animations.
UI Studio Components
Build stunning interfaces with our premium component collection.
Easy Integration
Copy, paste, and customize. No complex setup required.
Production Ready
Battle-tested components used by thousands of developers.
Modern Design
Beautiful animations and micro-interactions included.
UI Studio Library
Discover hundreds of components for every use case.
Installation
1
Install the packages
npm i motion lucide-react clsx tailwind-merge2
Add util file
lib/util.ts
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
3
Copy and paste the following code into your project
glowing-grid.tsx
"use client";
import { Box, Lock, Search, Settings, Sparkles } from "lucide-react";
import React, { useState } from "react";
import { motion } from "motion/react";
import { cn } from "@/lib/utils";
export function GlowingGrid() {
return (
<ul className="grid grid-cols-1 grid-rows-none gap-4 md:grid-cols-12 md:grid-rows-3 lg:gap-4 xl:max-h-[34rem] xl:grid-rows-2">
<GridItem
area="md:[grid-area:1/1/2/7] xl:[grid-area:1/1/2/5]"
icon={<Box className="h-4 w-4 text-black dark:text-neutral-400" />}
title="UI Studio Components"
description="Build stunning interfaces with our premium component collection."
/>
<GridItem
area="md:[grid-area:1/7/2/13] xl:[grid-area:2/1/3/5]"
icon={<Settings className="h-4 w-4 text-black dark:text-neutral-400" />}
title="Easy Integration"
description="Copy, paste, and customize. No complex setup required."
/>
<GridItem
area="md:[grid-area:2/1/3/7] xl:[grid-area:1/5/3/8]"
icon={<Lock className="h-4 w-4 text-black dark:text-neutral-400" />}
title="Production Ready"
description="Battle-tested components used by thousands of developers."
/>
<GridItem
area="md:[grid-area:2/7/3/13] xl:[grid-area:1/8/2/13]"
icon={<Sparkles className="h-4 w-4 text-black dark:text-neutral-400" />}
title="Modern Design"
description="Beautiful animations and micro-interactions included."
/>
<GridItem
area="md:[grid-area:3/1/4/13] xl:[grid-area:2/8/3/13]"
icon={<Search className="h-4 w-4 text-black dark:text-neutral-400" />}
title="UI Studio Library"
description="Discover hundreds of components for every use case."
/>
</ul>
);
}
interface GridItemProps {
area: string;
icon: React.ReactNode;
title: string;
description: React.ReactNode;
}
const GridItem = ({ area, icon, title, description }: GridItemProps) => {
const [isHovered, setIsHovered] = useState(false);
return (
<li className={`min-h-[14rem] list-none ${area}`}>
<div
className="relative h-full rounded-2xl border p-2 md:rounded-3xl md:p-3 overflow-hidden cursor-pointer"
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
{/* Glowing effect */}
<motion.div
animate={{
opacity: isHovered ? 1 : 0,
scale: isHovered ? 1 : 0.8,
}}
transition={{ duration: 0.3 }}
className="absolute inset-0 bg-gradient-to-br from-teal-400/20 to-cyan-500/20 blur-xl"
/>
{/* Border glow */}
<motion.div
animate={{
opacity: isHovered ? 1 : 0,
}}
transition={{ duration: 0.3 }}
className="absolute inset-0 rounded-2xl md:rounded-3xl border border-teal-400/50 shadow-lg shadow-teal-400/25"
/>
<div className="relative flex h-full flex-col justify-between gap-6 overflow-hidden rounded-xl p-6 md:p-6 bg-white/50 dark:bg-gray-900/50 backdrop-blur-sm dark:shadow-[0px_0px_27px_0px_#2D2D2D] border border-gray-200/50 dark:border-gray-700/50">
<div className="relative flex flex-1 flex-col justify-between gap-3">
<motion.div
className="w-fit rounded-lg border border-teal-600 p-2 bg-teal-50 dark:bg-teal-900/20"
whileHover={{ scale: 1.05 }}
transition={{ duration: 0.2 }}
>
{icon}
</motion.div>
<div className="space-y-3">
<motion.h3
className="pt-0.5 font-sans text-xl/[1.375rem] font-semibold text-balance text-black md:text-2xl/[1.875rem] dark:text-white"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.1 }}
>
{title}
</motion.h3>
<motion.h2
className="font-sans text-sm/[1.125rem] text-black md:text-base/[1.375rem] dark:text-neutral-400"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.2 }}
>
{description}
</motion.h2>
</div>
</div>
</div>
{/* Corner accent */}
<motion.div
animate={{
opacity: isHovered ? 1 : 0,
rotate: isHovered ? 45 : 0,
}}
transition={{ duration: 0.3 }}
className="absolute top-2 right-2 w-2 h-2 bg-teal-400 rounded-full"
/>
</div>
</li>
);
};
export default GlowingGrid;"use client";
import { Box, Lock, Search, Settings, Sparkles } from "lucide-react";
import React, { useState } from "react";
import { motion } from "motion/react";
import { cn } from "@/lib/utils";
export function GlowingGrid() {
return (
<ul className="grid grid-cols-1 grid-rows-none gap-4 md:grid-cols-12 md:grid-rows-3 lg:gap-4 xl:max-h-[34rem] xl:grid-rows-2">
<GridItem
area="md:[grid-area:1/1/2/7] xl:[grid-area:1/1/2/5]"
icon={<Box className="h-4 w-4 text-black dark:text-neutral-400" />}
title="UI Studio Components"
description="Build stunning interfaces with our premium component collection."
/>
<GridItem
area="md:[grid-area:1/7/2/13] xl:[grid-area:2/1/3/5]"
icon={<Settings className="h-4 w-4 text-black dark:text-neutral-400" />}
title="Easy Integration"
description="Copy, paste, and customize. No complex setup required."
/>
<GridItem
area="md:[grid-area:2/1/3/7] xl:[grid-area:1/5/3/8]"
icon={<Lock className="h-4 w-4 text-black dark:text-neutral-400" />}
title="Production Ready"
description="Battle-tested components used by thousands of developers."
/>
<GridItem
area="md:[grid-area:2/7/3/13] xl:[grid-area:1/8/2/13]"
icon={<Sparkles className="h-4 w-4 text-black dark:text-neutral-400" />}
title="Modern Design"
description="Beautiful animations and micro-interactions included."
/>
<GridItem
area="md:[grid-area:3/1/4/13] xl:[grid-area:2/8/3/13]"
icon={<Search className="h-4 w-4 text-black dark:text-neutral-400" />}
title="UI Studio Library"
description="Discover hundreds of components for every use case."
/>
</ul>
);
}
interface GridItemProps {
area: string;
icon: React.ReactNode;
title: string;
description: React.ReactNode;
}
const GridItem = ({ area, icon, title, description }: GridItemProps) => {
const [isHovered, setIsHovered] = useState(false);
return (
<li className={`min-h-[14rem] list-none ${area}`}>
<div
className="relative h-full rounded-2xl border p-2 md:rounded-3xl md:p-3 overflow-hidden cursor-pointer"
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
{/* Glowing effect */}
<motion.div
animate={{
opacity: isHovered ? 1 : 0,
scale: isHovered ? 1 : 0.8,
}}
transition={{ duration: 0.3 }}
className="absolute inset-0 bg-gradient-to-br from-teal-400/20 to-cyan-500/20 blur-xl"
/>
{/* Border glow */}
<motion.div
animate={{
opacity: isHovered ? 1 : 0,
}}
transition={{ duration: 0.3 }}
className="absolute inset-0 rounded-2xl md:rounded-3xl border border-teal-400/50 shadow-lg shadow-teal-400/25"
/>
<div className="relative flex h-full flex-col justify-between gap-6 overflow-hidden rounded-xl p-6 md:p-6 bg-white/50 dark:bg-gray-900/50 backdrop-blur-sm dark:shadow-[0px_0px_27px_0px_#2D2D2D] border border-gray-200/50 dark:border-gray-700/50">
<div className="relative flex flex-1 flex-col justify-between gap-3">
<motion.div
className="w-fit rounded-lg border border-teal-600 p-2 bg-teal-50 dark:bg-teal-900/20"
whileHover={{ scale: 1.05 }}
transition={{ duration: 0.2 }}
>
{icon}
</motion.div>
<div className="space-y-3">
<motion.h3
className="pt-0.5 font-sans text-xl/[1.375rem] font-semibold text-balance text-black md:text-2xl/[1.875rem] dark:text-white"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.1 }}
>
{title}
</motion.h3>
<motion.h2
className="font-sans text-sm/[1.125rem] text-black md:text-base/[1.375rem] dark:text-neutral-400"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.2 }}
>
{description}
</motion.h2>
</div>
</div>
</div>
{/* Corner accent */}
<motion.div
animate={{
opacity: isHovered ? 1 : 0,
rotate: isHovered ? 45 : 0,
}}
transition={{ duration: 0.3 }}
className="absolute top-2 right-2 w-2 h-2 bg-teal-400 rounded-full"
/>
</div>
</li>
);
};
export default GlowingGrid;4
Update the import paths to match your project setup
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | Additional CSS classes for the grid container. |