ComponentReactregistry:ui2 dependencies
Glyph Card
glyph-card
A hairline card whose background resolves into tiny plus marks on hover, gathering inside the glyph. Draws itself from a single SVG path on a 24x24 grid.
Notes from the author
## Installation
```bash
npx shadcn@latest add @akoder/glyph-card
```
## Usage
```tsx
import { GlyphCard } from "@/components/ui/glyph-card";
const NEXTJS_GLYPH =
"M18.665 21.978C16.758 23.255 14.465 24 12 24 5.377 24 0 18.623 0 12S5.377 0 12 0s12 5.377 12 12c0 3.583-1.574 6.801-4.067 9.001L9.219 7.2H7.2v9.596h1.615V9.251l9.85 12.727Zm-3.332-8.533 1.6 2.061V7.2h-1.6v6.245Z";
export function Stack() {
return (
<GlyphCard
eyebrow="Framework"
title="Next.js"
subtitle="The React framework"
href="https://nextjs.org"
glyph={NEXTJS_GLYPH}
/>
);
}
```
`glyph` is SVG path data authored on a 24x24 grid. Omit `href` for a static card, pass `accent` to tint the artwork, and use `glyphOffset` in grid units when a mark is drawn off-center.
@akoder