Faber UI
Components

HoverCard

A preview revealed on hover.

HoverCard is built on the Base UI PreviewCard primitive. It displays additional content when the user hovers over a trigger.

Installation

Terminal
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/hover-card.json

Usage

typescript
"use client";

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

export default function Example() {
  return (
    <HoverCard>
      <HoverCardTrigger>Hover me</HoverCardTrigger>
      <HoverCardContent>Additional content.</HoverCardContent>
    </HoverCard>
  );
}

Examples

Default

Hover me

API

Each part forwards every prop of what it is built on, including className and render where Base UI supports it. The props column lists only what Faber UI adds on top.

PartBuilt onProps
HoverCarddata-slot="hover-card"PreviewCard.RootBase UI—
HoverCardTriggerdata-slot="hover-card-trigger"PreviewCard.TriggerBase UI—
HoverCardContentdata-slot="hover-card-content"PreviewCard.PopupBase UI
  • align? = "center"PreviewCard.Positioner["align"]
  • alignOffset? = 0PreviewCard.Positioner["alignOffset"]
  • side? = "bottom"PreviewCard.Positioner["side"]
  • sideOffset? = 4PreviewCard.Positioner["sideOffset"]

Changelog

  1. v0.3.0Popover, DropdownMenu, ContextMenu, Menubar, Select, Combobox, HoverCard, Tooltip, Dialog and AlertDialog enter and exit with interruptible transitions on the kit easing tokens, and tw-animate-css is no longer a depen…minor
  2. v0.1.0Restore open and close animations on every menu-family popup.patch
Full HoverCard history

Last updated on

Field

A layout primitive for form fields.

InputGroup

Composes an input with leading and trailing addons.

On this page

InstallationUsageExamplesDefaultAPIChangelog