Link Card

Cards

About

A clickable preview card that turns a bare URL into a glass-styled tile showing the host and path with a LED "LINK" tag and an "OPEN" action that opens the link in a new tab.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Link Card to your project and fits it to your theme.

Code

How Link Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { LinkCard } from "@/components/ui/link-card";

export default function LinkCardDemo() {
  return (
    <div className="flex w-full flex-wrap items-start justify-center gap-6 p-10">
      <LinkCard href="https://lanterns.photo/night-market" />
      <LinkCard href="https://github.com/unlocalhosted/metalui" />
      <LinkCard href="https://metalui.dev/components/link-card" />
    </div>
  );
}