Hover Card
A popup that appears when a link is hovered, showing a preview for sighted users.
Hover card wraps the Base UI Preview Card
primitive, positions its popup with Base UI's Positioner and marks each part
with data-slot. It exports HoverCard aliases over coss's PreviewCard names.
The popup stays mounted and animates open and closed with
Motion, so positioning stays with Base UI's Positioner and
is never animated.
Installation
npx shadcn@latest add @kosori/hover-cardExample
hover-card-example.tsx
'use client';
import { IconCornerUpLeft, IconStar } from '@tabler/icons-react';
import { buttonVariants } from '@/components/ui/button';
import {
HoverCard,
HoverCardContent,
HoverCardTrigger,
} from '@/components/ui/hover-card';
const HoverCardExample = () => (
<HoverCard>
<HoverCardTrigger
render={
<button
className={buttonVariants({ variant: 'ghost' })}
type='button'
/>
}
>
kosori
</HoverCardTrigger>
<HoverCardContent>
<div className='flex flex-col gap-4'>
<div className='flex flex-col gap-1'>
<h4 className='font-medium text-sm'>kosori</h4>
<p className='text-muted-foreground text-sm'>
Components you copy into your project and own from then on.
</p>
</div>
<div className='flex items-center gap-4 text-muted-foreground text-xs'>
<div className='flex items-center gap-1'>
<span aria-hidden='true' className='size-2 rounded-full bg-info' />
<span>TypeScript</span>
</div>
<div className='flex items-center gap-1'>
<IconStar className='size-3' />
<span>58.2k</span>
</div>
<div className='flex items-center gap-1'>
<IconCornerUpLeft className='size-3' />
<span>5.1k</span>
</div>
</div>
</div>
</HoverCardContent>
</HoverCard>
);
export default HoverCardExample;
Usage
'use client';
import { buttonVariants } from '@/components/ui/button';
import {
HoverCard,
HoverCardContent,
HoverCardTrigger,
} from '@/components/ui/hover-card';
const HoverCardDemo = () => (
<HoverCard>
<HoverCardTrigger
render={
<button className={buttonVariants({ variant: 'ghost' })} type='button' />
}
>
coss.com/ui
</HoverCardTrigger>
<HoverCardContent>
Beautifully designed components you can copy and own.
</HoverCardContent>
</HoverCard>
);