Lodex Studio Cards: A collection of beautiful, interactive React card components with motion, micro-interactions, and modern UI. Perfect for portfolios, landing pages, and creative showcases. Built with React, Tailwind CSS, and Framer Motion.

Lodex Studio Cards – React UI Card Components

See all cards in action

Live Demo | Report Bug

Overview

Lodex Studio Cards is a collection of 6 beautiful, interactive React card components, focusing on motion, micro-interactions, and modern UI. Ideal for portfolios, landing pages, and creative showcases.

Keywords: react, cards, ui, animation, components, tailwindcss, framer-motion, micro-interactions, portfolio, open source

🎥 Preview

🎨 Card Components

• Tilt Shine Card — 3D tilt and shine effect
• Swipe Cards — Tinder-style swipeable cards
• Shimmer Border Card — Animated shimmer border
• Drag Cards — Draggable floating cards
• Outline Cards — Minimal outline hover cards
• Color Change Cards — Colorful hover transitions

Individual Repositories

Prefer using just one card?

• Tilt Shine → https://github.com/lodsa-ntos/lodexstudio-tilt-card
• Swipe Cards → https://github.com/lodsa-ntos/lodexstudio-swipe-cards
• Drag Cards → https://github.com/lodsa-ntos/lodexstudio-drag-cards
• Shimmer Border → https://github.com/lodsa-ntos/lodexstudio-shimmer-border-card
• Outline Cards → https://github.com/lodsa-ntos/lodexstudio-outline-cards
• Color Change → https://github.com/lodsa-ntos/lodexstudio-colorchange-card

⚡ Features

• ✅ 6 unique components ready for production
• ✅ Made with React + Tailwind CSS + Framer Motion
• ✅ Fully responsive and accessible
• ✅ Simple customisation (plug & play)
• ✅ MIT — free for personal and commercial use

🚀 Quick Start

git clone https://github.com/lodsa-ntos/lodexstudio-cards.git
cd lodexstudio-cards
npm install
npm run dev

Open Lodex Studio Cards to view the demo grid.

📦 Installation

# via npm
npm install lodexstudio-cards

# via yarn
yarn add lodexstudio-cards

# via pnpm
pnpm add lodexstudio-cards

💻 Usage

Import any card component into your project:

import { TiltShineCard } from "lodexstudio-cards";

export default function App() {
  return <TiltShineCard />;
}

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to open an issue or submit a pull request.

📜 License

Distributed under the MIT License. See LICENSE for details.

---

⭐ If this project helped you, leave a star on GitHub!

Made with ❤️ by Lodex Studio