---
title: Hover Card
description: "For sighted users to preview content available behind a link."
---

```tsx
import * as stylex from '@stylexjs/stylex';

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button';
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from '@/components/ui/hover-card';
import { space, fontSize, fontWeight } from '@/lib/constants.stylex';
import { colors } from '@/lib/tokens.stylex';

export default function HoverCardDemo() {
  return (
    <HoverCard>
      <HoverCardTrigger render={<Button variant="ghost" />}>
        @nextjs
      </HoverCardTrigger>
      <HoverCardContent>
        <div {...stylex.props(styles.row)}>
          <Avatar>
            <AvatarImage src="https://github.com/vercel.png" alt="@vercel" />
            <AvatarFallback>VC</AvatarFallback>
          </Avatar>
          <div {...stylex.props(styles.info)}>
            <span {...stylex.props(styles.name)}>@nextjs</span>
            <span>The React framework — created and maintained by Vercel.</span>
            <span {...stylex.props(styles.muted)}>Joined December 2021</span>
          </div>
        </div>
      </HoverCardContent>
    </HoverCard>
  );
}

const styles = stylex.create({
  row: {
    display: 'flex',
    gap: space.s3,
  },
  info: {
    display: 'flex',
    flexDirection: 'column',
    gap: space.s1,
  },
  name: {
    fontWeight: fontWeight.semibold,
  },
  muted: {
    color: colors.mutedForeground,
    fontSize: fontSize.xs,
  },
});
```

## Install

```bash
npx shadcn@latest add @madeui/hover-card
```

## Usage

```tsx
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from '@/components/ui/hover-card';
```

## Composition

```tsx
<HoverCard>
  <HoverCardTrigger />
  <HoverCardContent />
</HoverCard>
```

## Sides

```tsx
import * as stylex from '@stylexjs/stylex';

import { Button } from '@/components/ui/button';
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from '@/components/ui/hover-card';
import { space } from '@/lib/constants.stylex';

const sides = ['top', 'right', 'bottom', 'left'] as const;

export default function HoverCardSides() {
  return (
    <div {...stylex.props(styles.row)}>
      {sides.map((side) => (
        <HoverCard key={side}>
          <HoverCardTrigger render={<Button variant="outline" />}>
            {side}
          </HoverCardTrigger>
          <HoverCardContent side={side}>
            Hover card on {side}
          </HoverCardContent>
        </HoverCard>
      ))}
    </div>
  );
}

const styles = stylex.create({
  row: {
    alignItems: 'center',
    display: 'flex',
    flexWrap: 'wrap',
    gap: space.s2,
  },
});
```

## API reference

Built on [Base UI Preview Card](https://base-ui.com/react/components/preview-card). The table below covers the props this library adds or changes — every other prop is forwarded to the underlying Base UI part; see the [Base UI Preview Card API reference](https://base-ui.com/react/components/preview-card#api-reference).

### HoverCardContent

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `side` | `'top' \| 'right' \| 'bottom' \| 'left'` | `'bottom'` |  |
| `sideOffset` | `number` | `4` | Distance from the trigger, in px. |
| `align` | `'start' \| 'center' \| 'end'` | `'center'` |  |
| `alignOffset` | `number` | `4` |  |
| `style` | `StyleXStyles` | — | StyleX styles merged last — always win over the component's own styles. |