HoverCardSides() — ui Function Reference

Architecture documentation for the HoverCardSides() function in hover-card-sides.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ HoverCardSides() — ui Function Reference

Dependency Diagram

graph TD
  40f2718e_6fab_66f9_043c_99c272c34007["HoverCardSides()"]
  e05b95d2_0e00_b10d_96ce_ea96b6f29b5f["hover-card-sides.tsx"]
  40f2718e_6fab_66f9_043c_99c272c34007 -->|defined in| e05b95d2_0e00_b10d_96ce_ea96b6f29b5f
  style 40f2718e_6fab_66f9_043c_99c272c34007 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/hover-card-sides.tsx lines 10–32

export function HoverCardSides() {
  return (
    <div className="flex flex-wrap justify-center gap-2">
      {HOVER_CARD_SIDES.map((side) => (
        <HoverCard key={side}>
          <HoverCardTrigger
            delay={100}
            closeDelay={100}
            render={<Button variant="outline" className="capitalize" />}
          >
            {side}
          </HoverCardTrigger>
          <HoverCardContent side={side}>
            <div className="flex flex-col gap-1">
              <h4 className="font-medium">Hover Card</h4>
              <p>This hover card appears on the {side} side of the trigger.</p>
            </div>
          </HoverCardContent>
        </HoverCard>
      ))}
    </div>
  )
}