Components
Loading preview...
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.
@llaxmi
npx shadcn@latest add https://21st.dev/r/llaxmi/tilt-cardimport { 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 };