Components
Loading preview...
Tooltip
@shugar
npx shadcn@latest add https://21st.dev/r/shugar/context-cardimport 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>
)