Back to Components

Crystal Card

CardsFull Preview

A crystalline card with refractive light effects.

Preview Size:

Crystal Card

Refractive light effects

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-react

Basic Usage

Import and use the component in your React application:

tsx
import { CrystalCard } from '@/components/crystal-card';

export default function MyPage() {
  return (
    <div>
      <h1>My Page</h1>
      <CrystalCard />
    </div>
  );
}

Customization

This component accepts various props for customization. Check the component code to see all available props and their types.

Component Info

Category

Cards

Framework

React + Next.js

Styling

Tailwind CSSCSS

Dependencies

framer-motionlucide-react

Quick Actions

Full Preview

Related Components

Product Card

A beautiful product card with image, title, price, and actio...

User Card

A professional user profile card with avatar, details, and s...

Credit Card

A realistic credit card design with chip and card details....

Browse All Components