Vercel Card

Minimal monochrome card with a fading grid, corner plus markers and a pointer spotlight that lights up the grid lines.

Instant rollbacks

Every deploy is immutable. Revert production to any previous build in a single click.

~300msLearn more

Edge by default

Static assets and functions run close to your users in regions across the globe.

18 regionsLearn more

Secure previews

Password-protect preview URLs and share them with reviewers without leaking drafts.

SSO readyLearn more

Open

gridSize24

grid

markers

spotlightSize320

Installation

npx shadcn@latest add @glint-ui/vercel-card

First time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/vercel-card.json

Usage

import { VercelCard } from "@/components/ui/vercel-card";

<VercelCard>
  <div className="p-7">
    <h3>Instant rollbacks</h3>
    <p>Revert production in one click.</p>
  </div>
</VercelCard>

Props

Prop	Type	Default	Description
children	ReactNode	—	Card content.
gridSize	number	24	Grid cell size in px.
grid	boolean	true	Show the grid pattern.
markers	boolean	true	Plus markers on the corners.
spotlightSize	number	320	Spotlight radius in px.
className	string	—	Extra classes for the root element.