Linked feature card on a paper metal face in silver, gold or graphite, with a top-right light pool, a frosted glass icon chip, title and description. Also exports the finish alone as MetalFace.
The source comes with full access.
One payment of $149 ($49 for now) opens the source right here and lets the CLI install every paid component, with lifetime updates.
pnpm dlx shadcn add @01orbital/metal-cardnpx shadcn add @01orbital/metal-cardyarn shadcn add @01orbital/metal-cardbunx --bun shadcn add @01orbital/metal-cardPart of the 01orbital library. With a license, put ORBITAL_TOKEN in .env.local and the same command installs it (licensed install, pricing).
It lands at components/card/metal-card.tsx, as source you own and edit.
The example also imports @phosphor-icons/react from npm, which the install does not add:
pnpm add @phosphor-icons/reactnpm install @phosphor-icons/reactyarn add @phosphor-icons/reactbun add @phosphor-icons/reactimport { BankIcon, CoinsIcon } from "@phosphor-icons/react/dist/ssr"
import { MetalCard } from "@/components/card/metal-card"
const COPY = {
treasury: {
title: "Treasury",
description: "Keep reserves where they earn, with a same-day path to cash.",
},
payouts: {
title: "Payouts",
description: "Pay suppliers in forty currencies from one balance.",
},
}
export default function MetalCardDemo() {
return (
<div className="grid w-full max-w-3xl gap-6 sm:grid-cols-2">
<MetalCard
href="#"
metal="silver"
icon={<BankIcon />}
{...COPY.treasury}
/>
<MetalCard
href="#"
metal="graphite"
icon={<CoinsIcon />}
{...COPY.payouts}
/>
</div>
)
}Metal Card is built from 3 parts. In the example they nest like this:
MetalCardMetalCard: A linked card with a metal finish: a grained gradient lit from the top right, an icon in a GlassChip at the top, and a title and description at the bottom. The whole card is one link, so pass href and any other anchor props.MetalFace: The metal finish from MetalCard on its own, for a surface you already have. Pass that surface as render, for example render={<PricingCard />}, and it gets the metal gradient, the light and the lit top edge, with your content laid on top.GlassChip: A round frosted-glass chip, 44px across, for an icon. It blurs what is behind it and carries a white rim and highlight. An svg inside is centered and sized to 24px unless it has its own size- class.A linked card with a metal finish: a grained gradient lit from the top right, an icon in a GlassChip at the top, and a title and description at the bottom. The whole card is one link, so pass href and any other anchor props.
On hover a soft shadow spreads around the card, its face dims slightly and its top edge brightens. className lands on the link.
Prop
Type
It also accepts the HTML attributes of the element it renders.
The metal finish from MetalCard on its own, for a surface you already have. Pass that surface as render, for example render={<PricingCard />}, and it gets the metal gradient, the light and the lit top edge, with your content laid on top.
Muted text inside takes 80% of the text color so it stays readable on the metal. Without render it is a plain div; with render, the rendered part keeps its own data-slot.
Prop
Type
It also accepts the props of the Base UI part it wraps, and the HTML attributes of the element it renders.
A round frosted-glass chip, 44px across, for an icon. It blurs what is behind it and carries a white rim and highlight. An svg inside is centered and sized to 24px unless it has its own size- class.
It accepts the HTML attributes of the element it renders.
npm: @base-ui/react, cn. The CLI installs them for you.
No other registry pieces.
Limned Surface
Dark panel lit at its rim by inset light, with a halo or top-cast glow derived from a ground and glow palette, optional overlay grain and a hover or focus bloom that drops its transition under reduced motion.
Simple Card
Lightweight card shell with an 8px inset that seats a bevelled preview frame, followed by header, title, description and footer. The default variant has a shadow and ring; subtle uses a faint tint.