Radix Homepage
Radix Homepage
ThemesThemesPrimitivesPrimitivesIconsIconsColorsColors
DocumentationPlayground
Components

Hover Card

For sighted users to preview content available behind a link.

View sourceReport an issueView in Playground
Follow @radix_ui for updates.
<Text>

  Follow{' '}

  <HoverCard.Root>

    <HoverCard.Trigger>

      <Link href="https://twitter.com/radix_ui" target="_blank">

        @radix_ui

      </Link>

    </HoverCard.Trigger>

    <HoverCard.Content>

      <Flex gap="4">

        <Avatar
          size="3"
          fallback="R"
          radius="full"
          src="https://pbs.twimg.com/profile_images/1337055608613253126/r_eiMp2H_400x400.png"
        />

        <Box>

          <Heading size="3" as="h3">

            Radix

          </Heading>

          <Text as="div" size="2" color="gray">

            @radix_ui

          </Text>



          <Text as="div" size="2" style={{ maxWidth: 300 }} mt="3">

            React components, icons, and colors for building high-quality,

            accessible UI.

          </Text>

        </Box>

      </Flex>

    </HoverCard.Content>

  </HoverCard.Root>{' '}

  for updates.

</Text>

API Reference

This component inherits props from the HoverCard primitive.

Root

Contains all the parts of a hover card.

Trigger

Wraps the link that will open the hover card.

Content

Contains the content of the open hover card. This component is based on the div element.

PropTypeDefault
size
Responsive<"1" | "2" | "3">
"2"

Examples

Size

Use the size prop to control the size.

<Flex gap="4">

  <HoverCard.Root>

    <HoverCard.Trigger>

      <Link href="#">Size one</Link>

    </HoverCard.Trigger>

    <HoverCard.Content size="1">

      <Text as="div" size="1" style={{ maxWidth: 325 }}>

        <Strong>Typography</Strong> is the art and technique of arranging type

        to make written language legible, readable and appealing when displayed.

      </Text>

    </HoverCard.Content>

  </HoverCard.Root>



  <HoverCard.Root>

    <HoverCard.Trigger>

      <Link href="#">Size two</Link>

    </HoverCard.Trigger>

    <HoverCard.Content size="2">

      <Text as="div" size="2" style={{ maxWidth: 350 }}>

        <Strong>Typography</Strong> is the art and technique of arranging type

        to make written language legible, readable and appealing when displayed.

      </Text>

    </HoverCard.Content>

  </HoverCard.Root>



  <HoverCard.Root>

    <HoverCard.Trigger>

      <Link href="#">Size three</Link>

    </HoverCard.Trigger>

    <HoverCard.Content size="3">

      <Text as="div" size="3" style={{ maxWidth: 400 }}>

        <Strong>Typography</Strong> is the art and technique of arranging type

        to make written language legible, readable and appealing when displayed.

      </Text>

    </HoverCard.Content>

  </HoverCard.Root>

</Flex>

With inset content

Use the Inset component to align content flush with the sides of the hover card.

Technology revolutionized typography in the latter twentieth century.
<Text>

  Technology revolutionized{' '}

  <HoverCard.Root>

    <HoverCard.Trigger>

      <Link href="#">typography</Link>

    </HoverCard.Trigger>



    <HoverCard.Content>

      <Flex>

        <Inset side="left" pr="current">

          <img
            src="https://images.unsplash.com/photo-1617050318658-a9a3175e34cb?&auto=format&fit=crop&w=300&q=80"
            alt="Bold typography"
            style={{
              display: 'block',
              objectFit: 'cover',
              height: '100%',
              width: 150,
              backgroundColor: 'var(--gray-5)',
            }}
          />

        </Inset>



        <Text size="2" style={{ maxWidth: 250 }} as="p">

          <Strong>Typography</Strong> is the art and technique of arranging type

          to make written language legible, readable and appealing when

          displayed. The arrangement of type involves selecting typefaces, point

          sizes, line lengths, line-spacing (leading), and letter-spacing

          (tracking)…

        </Text>

      </Flex>

    </HoverCard.Content>

  </HoverCard.Root>{' '}

  in the latter twentieth century.

</Text>
PreviousDropdown Menu
NextIcon Button
Edit this page on GitHub.