3b:T15d8,

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

const Demo = () => (
  <HoverCard>
    <HoverCardTrigger render={<Button variant="link" />}>
      @yea-ui
    </HoverCardTrigger>
    <HoverCardContent>
      <span className="text-body-bold">yea-ui</span>
      <span className="text-compact text-glass-text-secondary">
        Copy-paste components on Base UI and Tailwind CSS v4.
      </span>
    </HoverCardContent>
  </HoverCard>
)

export default Demo

38:["$","div",null,{"className":"relative overflow-hidden rounded-16 bg-background-secondary","children":[["$","div",null,{"className":"overflow-x-auto p-16 pr-48 font-mono text-compact leading-[20px] [&_pre]:bg-transparent!","dangerouslySetInnerHTML":{"__html":"$3b"}}],"$L3c"]}] 3d:T2f73,

"use client"

import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card"

import { cn } from "@/lib/utils"

const HoverCard = (props: PreviewCardPrimitive.Root.Props) => (
  <PreviewCardPrimitive.Root data-slot="hover-card" {...props} />
)

const HoverCardTrigger = (props: PreviewCardPrimitive.Trigger.Props) => (
  <PreviewCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
)

const HoverCardContent = ({
  className,
  side = "bottom",
  sideOffset = 8,
  align = "center",
  ...props
}: PreviewCardPrimitive.Popup.Props &
  Pick<
    PreviewCardPrimitive.Positioner.Props,
    "align" | "side" | "sideOffset"
  >) => (
  <PreviewCardPrimitive.Portal>
    <PreviewCardPrimitive.Positioner
      align={align}
      side={side}
      sideOffset={sideOffset}
      className="z-50 outline-none"
    >
      <PreviewCardPrimitive.Popup
        data-slot="hover-card-content"
        className={cn(
          "flex w-280 origin-(--transform-origin) flex-col gap-8 rounded-20 bg-glass-background-primary p-16 text-glass-text-primary shadow-glass backdrop-glass transition-[opacity,scale] duration-150 ease-out outline-none data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0",
          className
        )}
        {...props}
      />
    </PreviewCardPrimitive.Positioner>
  </PreviewCardPrimitive.Portal>
)

export { HoverCard, HoverCardContent, HoverCardTrigger }

3a:["$","div",null,{"className":"relative overflow-hidden rounded-16 bg-background-secondary","children":[["$","div",null,{"className":"overflow-x-auto p-16 pr-48 font-mono text-compact leading-[20px] [&_pre]:bg-transparent!","dangerouslySetInnerHTML":{"__html":"$3d"}}],"$L3e"]}]

Installation

Usage