Glass Card
A glass card, often used for glassmorphism websites.


# Preview

Preview of element and code usage

#1 Add Glass Card code

components-stuff/glass-card.tsx

import React, { useState } from 'react';
import { Card, CardBody, CardHeader } from '@nextui-org/card'; // Adjust the import path as necessary
import { motion, AnimatePresence } from 'framer-motion';

const GlassCard: React.FC = () => {

  return (
    <div className=" w-72 h-52 bg-gray-200 bg-opacity-30 rounded-xl backdrop-blur-2xl border-2 border-gray-300 border-opacity-50 bg-clip-padding">
        <h1 className="text-lg font-semibold text-center text-gray-100 mt-20">glassmorphism?</h1>
    </div>
  );
};

export default GlassCard;

#2 Import element

page.tsx

import GlassCard from "@/app/components-stuff/glass-card";

Done! 🎉
Nice work, you're all set!

Check out all components