Components
Loading preview...
This is hover card component.
npx shadcn@latest add https://21st.dev/r/lyanchouss/new-hover-card"use client";
import {
HoverCard,
HoverCardContent,
HoverCardTrigger,
} from "../components/ui/hover-card-1";
export function HoverCardPreview() {
return (
<div className="flex min-h-[400px] items-center justify-center">
<HoverCard>
<div className="flex flex-col items-center gap-4 text-center">
<HoverCardTrigger asChild>
<a href="#"
className="text-sm font-medium underline underline-offset-4"
onClick={(e) => e.preventDefault()}
>
View profile
</a>
</HoverCardTrigger>
<p className="max-w-sm text-sm text-muted-foreground">
Hover for delayed reveal or focus the trigger to compare the same API on the dedicated Radix Hover Card primitive.
</p>
</div>
<HoverCardContent className="w-72">
<div className="space-y-1">
<h4 className="text-sm font-semibold">@edwinvakayil</h4>
<p className="text-[13px] leading-5 text-muted-foreground">
@edwinvakayil · Design Engineer
</p>
<p className="text-[14px] leading-6 text-muted-foreground">
Leading onboarding, motion systems, and dense product surfaces
across the core workspace.
</p>
</div>
</HoverCardContent>
</HoverCard>
</div>
);
}
export default HoverCardPreview;