Premium card

Pro

A refined card with edge light for featured offers.

Installs components/ui/premium-card.tsxDepends on none beyond ReactMotion none in component source

pnpm dlx shadcn@latest add @caliper/premium-card

Speed

Builds in under a minute

Incremental builds and shared caches keep feedback fast, even in a monorepo with fifty packages.

Uptime

99.98%over the last 90 days+0.03 pts

Across three regions, with automatic failover.

Customer

“We passed our security review the first time. The audit trail did most of the talking.”

Maya Chen, Platform lead

Most chosen

Team plan

Everything in Starter, plus single sign-on, history and priority support.

$24 per seat

When to use #

Use it for

Highlighting a plan or product.

Skip it when

Every card on the page.

Installation #

terminal

pnpm dlx shadcn@latest add @caliper/premium-card

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source. It is built from PremiumCard and PremiumCardSet.

example.tsx

import { PremiumCard, PremiumCardSet } from "@/components/ui/premium-card"

The worked example comes with Pro

The 34-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

PremiumCard

component

PropTypeDefaultDescription

iconReactNode—

eyebrowstring—

titleReactNode—

stat{ value: string; label: string; trend?: string | undefined; }—A large figure, with what it measures.

childrenReactNode—

footerReactNode—

featuredbooleanfalse

hrefstring—

classNamestring—

PremiumCardSet