HoverCard

For sighted users to preview content available behind a link. Built on Radix UI.

Installation

# Install @opencosmos/ui to use HoverCard
pnpm add @opencosmos/ui

Preview

Loading preview...

Usage

Import

import { HoverCard } from '@opencosmos/ui';

Example

<HoverCard>
  Content
</HoverCard>

Eject

Copy this component into your project for full customization

Code Examples

Basic Usage

Hover card with preview content

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

<HoverCard>
  <HoverCardTrigger>Hover me</HoverCardTrigger>
  <HoverCardContent>
    The React Framework for the Web
  </HoverCardContent>
</HoverCard>