Glass CardGlassmorphism content cards with 3D tilt-on-hover, spring physics, and a cursor-following glare highlight.
.png?updatedAt=1775226802133)
Analytics
Real-time metrics and insights for your application.
Automation
Streamline your workflows with intelligent triggers.
Security
Enterprise-grade protection for your data.
Add to your project
One command adds this component to your project.
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/glass-cardFor dark mode, add the dark class to your <html> element:
<html class="dark">Install with AI Canvas MCP
With AI Canvas MCP, your AI knows every component we ship. Ask for one inside Claude Code, Codex, or Cursor and it installs the component you pick. Works with any AI Canvas account, free or premium.
About Glass Card
Glass Card is a glassmorphism content card with three Motion-driven flourishes that wake up on hover: a subtle 3D tilt that follows the cursor, a spring physics return when you leave, and a soft glare highlight that tracks your pointer across the surface. The glass effect uses native backdrop-filter so the card always picks up the texture behind it. Reach for it for pricing tiers, marketing-site features, dashboard widgets, or any layout where individual cards deserve a moment of attention.
Built with
Frequently asked questions
- Is Glass Card free to use?
- Yes. Glass Card is part of the free AI Canvas library and is open source under the MIT license, so you can use it in personal and commercial projects.
- How do I install Glass Card?
- One command: npx shadcn@latest add https://aicanvas.me/r/glass-card.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Glass Card for you. You can also copy the source straight from the Code tab, no account needed. It works in any React project with Tailwind CSS.
- What is Glass Card built with?
- Glass Card is built with React and TypeScript, using Motion and Tailwind CSS.
- Where would I use Glass Card?
- Common uses include Marketing site, Dashboard, and Pricing. Like every AI Canvas component, it is self-contained and drops into any React project.
- Can I remix Glass Card with AI?
- Yes. Glass Card ships with expert prompts for Claude Code, Lovable, and V0, so you can recreate and customize it in your AI builder of choice.
AI Canvas