Hover Card - rafty/ui Docs

For sighted users to preview content available behind a link.

This component is made on top of Radix UIs Hover Card Component with our styling conventions. This component has been shared with you, ensuring that all its native properties are accessible. If you need to apply your own styling you can use the isBarebone (to remove styling from entire component and its subcomponents) or isUnstyled (to remove styling from a particular subcomponent).

Anatomy

Import all parts and piece them together.

import { HoverCard, HoverCardTrigger, HoverCardContent } from "@rafty/ui";

<HoverCard>
  <HoverCardTrigger />
  <HoverCardContent />
</HoverCard>;

Usage

<HoverCard>
  <HoverCardTrigger asChild>
    <Image
      alt="Rafty UI"
      className="block h-[45px] w-[45px] cursor-pointer rounded-full"
      height={45}
      src="https://images.unsplash.com/photo-1634195130430-2be61200b66a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjkyfHxjYXJ0b29ufGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
      width={45}
    />
  </HoverCardTrigger>
  <HoverCardContent className="not-prose w-[300px] space-y-4">
    <Image
      alt="Rafty UI"
      className="h-14 w-14 rounded-full"
      height={56}
      src="https://images.unsplash.com/photo-1634195130430-2be61200b66a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjkyfHxjYXJ0b29ufGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
      width={56}
    />
    <div className="flex flex-col gap-4">
      <Text>
        Rafty
      </Text>
      <Text>
        @Rafty/ui
      </Text>
      <Text>
        Components, icons, colors, and templates for building high-quality, accessible UI. Free and open-source.
      </Text>
      <div className="flex gap-[15px]">
        <div className="flex gap-[5px]">
          <div className="text-mauve12 m-0 text-[15px] font-medium leading-[1.5]">
            0
          </div>
          <div className="text-mauve10 m-0 text-[15px] leading-[1.5]">
            Following
          </div>
        </div>
        <div className="flex gap-[5px]">
          <div className="text-mauve12 m-0 text-[15px] font-medium leading-[1.5]">
            2,900
          </div>
          <div className="text-mauve10 m-0 text-[15px] leading-[1.5]">
            Followers
          </div>
        </div>
      </div>
    </div>
  </HoverCardContent>
</HoverCard>