Glass Product Listing
PagesFull Preview
A product listing page with glassmorphism design.
Preview Size:
Premium Collection
Discover our curated selection of premium products with cutting-edge design
NEWSALE
Premium Wireless Headphones
(124)
$299$399
Designer Leather Jacket
(89)
$599
SALE
Smart Home Speaker
(203)
$199$249
NEW
Minimalist Watch
(67)
$449
Viewing in Desktop size (1200px × 800px)View Full Size
Usage Instructions
Installation
Copy the component code and paste it into your project. Make sure you have the required dependencies installed.
bash
npm install framer-motion lucide-reactBasic Usage
Import and use the component in your React application:
tsx
import { GlassProductListing } from '@/components/glass-product-listing';
export default function MyPage() {
return (
<div>
<h1>My Page</h1>
<GlassProductListing />
</div>
);
}Customization
This component accepts various props for customization. Check the component code to see all available props and their types.
Component Info
Category
Pages
Framework
React + Next.jsStyling
Tailwind CSSCSS
Dependencies
framer-motionlucide-react