The frame prop controls the width of the metallic edge. Give the card its shape and spacing through className.
Installation
$pnpm dlx shadcn@latest add https://your-docs-domain.com/r/metal-card.json
Usage
"use client"
import { MetalCard } from "@/components/ui/metal-card"
export default function Demo() {
return (
<MetalCard className="w-full max-w-sm rounded-3xl p-10">
<p className="text-sm text-muted-foreground">Afterglow studio</p>
<h2 className="mt-4 text-3xl font-medium">
Consider every edge.
</h2>
<p className="mt-6 text-sm leading-6 text-muted-foreground">
A quiet surface, framed in moving chrome.
</p>
</MetalCard>
)
}
API
| Property | Type | Description |
|---|
frame? | number | thickness of the metal frame in px |
Standard element attributes are supported where the props extend a React element type. Required properties appear without a question mark.
Dependencies
motion
Shared local files are included in the Code panel. See project setup for Tailwind, path aliases, and theme tokens.