Tilt Card

The TiltCard component is a stylish, interactive card that tilts and scales when hovered over, providing a dynamic visual effect. It's perfect for highlighting important information or adding a touch of interactivity to your UI.

Features

Interactive Hover Effect: Tilts and scales on hover for a dynamic look.
Customizable Hover Color: Easily change the hover background color using Tailwind CSS classes.
Theming Support: Integrated with shadcn theme for consistent styling.
Responsive Design: Adapts to different screen sizes and layouts.

Props

title: string - The text displayed on the card.
hoverColor: string - Tailwind CSS class for the hover background color (e.g., hover:bg-blue-500).
className: string - Additional classes for custom styling.

by Laxmi Lamichhane

import { TiltCard } from "@/components/ui/tilt-card";

function DefaultDemo() {
  return (
    <div className="flex items-center justify-center min-h-screen">
      <TiltCard title="Hover Me!" hoverColor="hover:bg-blue-500" className="m-4" />
      <TiltCard title="I'm Tilted!" hoverColor="hover:bg-green-500" className="m-4" />
    </div>
  );
}

export { DefaultDemo };

Published

11/27/2024

Similar components

Explore more

Card components1780 Interactive components426 Hover Effect components649 Tilted Card components19 Tilt components95

Dependencies

Tags

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Dependencies

Tags

Tilt Card

Tags

Published

Similar components

Explore more