NOCTA UI

Hovercard

Contextual hovercards for showing lightweight profiles or previews on pointer hover with Ariakit primitives and smart positioning

Installation

Install the Hovercard component with the nocta-ui CLI:

npx @nocta-ui/cli add hovercard

Import the parts you need:

import {
  Hovercard,
  HovercardTrigger,
  HovercardContent
} from '@/components/ui/hovercard';

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Dropdown Menu

A dropdown menu component triggered with a standard click, featuring separators, submenus, and disabled states

Popover

Advanced popover component with smart positioning, collision detection, and smooth animations for displaying rich content