ISO-proportioned metal card painted with a ContourField strata pattern in seven metals from graphite to lime, with a contact chip, an optional printed wordmark and horizontal or vertical orientation.
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/engraved-cardnpx shadcn add @01orbital/engraved-cardyarn shadcn add @01orbital/engraved-cardbunx --bun shadcn add @01orbital/engraved-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/engraved-card.tsx, as source you own and edit.
import { EngravedCard } from "@/components/card/engraved-card"
export default function Demo() {
return (
<EngravedCard
from="sulaco"
metal="graphite"
wordmark="sulaco"
label="A graphite Sulaco card"
className="w-full max-w-sm"
/>
)
}Prop
Type
It also accepts the HTML attributes of the element it renders.
npm: cn. The CLI installs them for you.
Registry pieces it installs with it:
font-hanken-groteskCredit Card
Presentational payment card drawn in SVG with dark, black and glass finishes, a 3D flip to the back and a button that reveals the masked number and CVV. Client component with translatable labels.
Glow Card
Frosted glass card tinted by the surrounding lamp color, with a corner highlight and either a deep floating shadow with light spill or a short contact shadow. Follows a GlowSection's bulb when nested.