Context Card

Cards 14

About

Tooltip

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

Code

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

Usage.tsx

import React from "react";
import { ContextCard } from "@/components/ui/context-card";

export const Demo = () => {
  return (
    <div className="flex flex-col gap-8">
      <div className="flex flex-col gap-2 px-96 w-full">
        <div className="flex justify-between gap-4">
          <ContextCard.Trigger
            content="The Evil Rabbit Jumped over the Fence"
            side="top"
          >
            <span className="dark:text-white">Top</span>
          </ContextCard.Trigger>
          <ContextCard.Trigger
            content="The Evil Rabbit Jumped over the Fence"
            side="bottom"
          >
            <span className="dark:text-white">Bottom</span>
          </ContextCard.Trigger>
          <ContextCard.Trigger
            content="The Evil Rabbit Jumped over the Fence"
            side="left"
          >
            <span className="dark:text-white">Left</span>
          </ContextCard.Trigger>
          <ContextCard.Trigger
            content="The Evil Rabbit Jumped over the Fence"
            side="right"
          >
            <span className="dark:text-white">Right</span>
          </ContextCard.Trigger>
        </div>
      </div>

    </div>
  );
};

export const Top = () => (
    <div className="flex flex-col">
        <div className="flex justify-between gap-4">
            <ContextCard.Trigger
                content="The Evil Rabbit Jumped over the Fence"
                side="top"
            >
                <span className="dark:text-white">Hover Me - Top</span>
            </ContextCard.Trigger>
        </div>
    </div>
)

export const Bottom = () => (
    <div className="flex flex-col">
        <div className="flex justify-between gap-4">
            <ContextCard.Trigger
                content="The Evil Rabbit Jumped over the Fence"
                side="bottom"
            >
                <span className="dark:text-white">Hover Me - Bottom</span>
            </ContextCard.Trigger>
        </div>
    </div>
)

export const Left = () => (
    <div className="flex flex-col">
        <div className="flex justify-between gap-4">
            <ContextCard.Trigger
                content="The Evil Rabbit Jumped over the Fence"
                side="left"
            >
                <span className="dark:text-white">Hover Me - Left</span>
            </ContextCard.Trigger>
        </div>
    </div>
)

export const Right = () => (
    <div className="flex flex-col">
        <div className="flex justify-between gap-4">
            <ContextCard.Trigger
                content="The Evil Rabbit Jumped over the Fence"
                side="right"
            >
                <span className="dark:text-white">Hover Me - Right</span>
            </ContextCard.Trigger>
        </div>
    </div>
)