Hover Card

For sighted users to preview content available behind a link.

Preview

@nextjs

VC

@nextjs

The React Framework – created and maintained by @vercel.

Joined December 2021

Code

import Avatar from '@dinui/react/avatar'
import Button from '@dinui/react/button'
import HoverCard from '@dinui/react/hover-card'
import { IconCalendar } from '@tabler/icons-react'

export default function HoverCardDemo() {
  return (
    <HoverCard open>
      <HoverCard.Trigger asChild>
        <Button variant="ghost">@nextjs</Button>
      </HoverCard.Trigger>
      <HoverCard.Content className="w-80">
        <div className="flex justify-between gap-4">
          <Avatar>
            <Avatar.Image src="https://github.com/vercel.png" />
            <Avatar.Fallback>VC</Avatar.Fallback>
          </Avatar>
          <div className="space-y-1">
            <h4 className="text-sm font-semibold">@nextjs</h4>
            <p className="text-sm">The React Framework – created and maintained by @vercel.</p>
            <div className="flex items-center pt-2 text-fg-weaker">
              <IconCalendar className="mr-2 h-4 w-4" />{' '}
              <span className="text-xs">Joined December 2021</span>
            </div>
          </div>
        </div>
      </HoverCard.Content>
    </HoverCard>
  )
}

Installation

Default

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. All done

   You now can start using this component in your project.

CLI

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Run the following command in your project

   npm

   npx @dinui/cli@latest add hover-card

   yarn

   yarn dlx @dinui/cli@latest add hover-card

   pnpm

   pnpm dlx @dinui/cli@latest add hover-card

   bun

   bunx @dinui/cli@latest add hover-card

3. Update the import paths to match your project setup

4. All done

   You now can start using this component in your project.

Manual

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Install dependencies

   npm

   npm install @radix-ui/react-hover-card tailwind-variants

   yarn

   yarn add @radix-ui/react-hover-card tailwind-variants

   pnpm

   pnpm add @radix-ui/react-hover-card tailwind-variants

   bun

   bun add @radix-ui/react-hover-card tailwind-variants

3. Copy and paste the following code into your project

   'use client'
   
   import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
   import { forwardRef } from 'react'
   import { tv } from 'tailwind-variants'
   
   const hoverCard = tv({
     slots: {
       content: [
         'z-50 rounded-md border bg-bg--contrast p-4 shadow-md',
         'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
         'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2',
         'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
       ],
     },
   })
   
   const HoverCardContent = forwardRef<
     React.ElementRef<typeof HoverCardPrimitive.Content>,
     React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
   >((props, ref) => {
     const { content } = hoverCard()
   
     return (
       <HoverCardPrimitive.Content
         align={'center'}
         sideOffset={4}
         {...props}
         ref={ref}
         className={content({ className: props.className })}
       />
     )
   })
   HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
   
   const HoverCard = Object.assign(HoverCardPrimitive.Root, {
     Trigger: HoverCardPrimitive.Trigger,
     Content: HoverCardContent,
   })
   
   export default HoverCard
   export { hoverCard, HoverCardPrimitive }

4. Update the import paths to match your project setup

5. All done

   You now can start using this component in your project.