shuip

DocumentationBlocks
X

Hover Reveal

Provides an elegant way to display additional information on hover, creating a more interactive and informative interface without cluttering the main content.

npx shadcn@latest add https://shuip.plvo.dev/r/hover-reveal.json
pnpm dlx shadcn@latest add https://shuip.plvo.dev/r/hover-reveal.json
bun x shadcn@latest add https://shuip.plvo.dev/r/hover-reveal.json
import type * as React from 'react';
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';


export interface HoverRevealProps extends React.RefAttributes<HTMLDivElement> {
  children: React.ReactNode;
  content: React.ReactNode;
}


export function HoverReveal({ children, content, ...props }: HoverRevealProps) {
  return (
    <HoverCard {...props}>
      <HoverCardTrigger className='cursor-pointer'>{children}</HoverCardTrigger>
      <HoverCardContent className='text-sm w-full'>{content}</HoverCardContent>
    </HoverCard>
  );
}
Hover me

Common use cases

// Help text on hover
<HoverReveal content="This field is required for account verification">
    <Label>Email Address</Label>
</HoverReveal>

User profile preview

// User profile preview
<HoverReveal 
    content={
      <div className="flex items-center space-x-2">
        <Avatar>
          <AvatarImage src={user.avatar} />
          <AvatarFallback>{user.initials}</AvatarFallback>
        </Avatar>
        <div>
          <p className="font-medium">{user.name}</p>
          <p className="text-sm text-muted-foreground">{user.role}</p>
        </div>
      </div>
    }
>
    @{user.username}
</HoverReveal>

Feature explanation

<HoverReveal 
    content={
      <div className="max-w-xs">
        <h4 className="font-semibold mb-2">Premium Feature</h4>
        <p className="text-sm">
          This feature is available for premium subscribers. 
          Upgrade your plan to access advanced analytics.
        </p>
      </div>
    }
>
    <Button variant="outline" disabled>
      <Lock className="mr-2 h-4 w-4" />
      Advanced Analytics
    </Button>
</HoverReveal>

Quick preview

<HoverReveal 
    content={
      <img 
        src={image.url} 
        alt={image.alt}
        className="w-48 h-32 object-cover rounded"
      />
    }
>
    <span className="text-blue-600 hover:underline">
      View image preview
    </span>
</HoverReveal>

Examples

Default

Hover me
import { HoverReveal } from '@/components/ui/shuip/hover-reveal';


export default function HoverRevealExample() {
  return <HoverReveal content={'Description'}>Hover me</HoverReveal>;
}

Props

Prop

Type

On this page

Common use cases
User profile preview
Feature explanation
Quick preview
Examples
Props