Quick Links Card

Cards 33

About

Quick Links Card

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

Code

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

Usage.tsx

import { 
  NavCardWrapper, 
  NavCardHeading, 
  NavCardLink 
} from "@/components/ui/quick-links-card"; // Adjust import path as needed

export default function DemoEleven() {
  return (
    <div className={'h-screen w-full flex gap-12 items-center justify-center bg-gray-100'}>
      <NavCardWrapper>
        <NavCardHeading>
          Quick Links
        </NavCardHeading>
        <nav className="flex flex-col gap-2">
            <NavCardLink href="/dashboard">Dashboard</NavCardLink>
            <NavCardLink href="/settings">Settings</NavCardLink>
            <NavCardLink href="/profile">My Profile</NavCardLink>
            <NavCardLink href="/help">Help & Support</NavCardLink>
        </nav>
      </NavCardWrapper>
    </div>
  )
}