Aki UI

Glimpse

グリンプス

A link preview card that opens on hover after a short delay, built on the Base UI Preview Card↗↗with a Framer Motion entrance.

This component is built on top of Base UI, which handles the positioning and the hover intent.

Installation

Install the following dependencies:1

npm install @base-ui-components/reactnpm install framer-motion

Copy and paste the following code into a new component file:2

"use client"

import { PreviewCard } from '@base-ui-components/react/preview-card'

import { motion } from "framer-motion"

import type { ComponentProps, HTMLAttributes, ReactNode } from "react"

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

export type GlimpseProps = ComponentProps<typeof PreviewCard.Root>

export function Glimpse(props: GlimpseProps) {

How to use it3

"use client"

import { Glimpse, GlimpseContent, GlimpseDescription, GlimpseImage, GlimpseTitle, GlimpseTrigger } from "@/components/ui/glimpse"

export default function Page() {

return (

Built on top of{" "}

Props

Glimpse

Name	Default	Description
children	—	ReactNode GlimpseTrigger and GlimpseContent
delay	600	number Milliseconds to wait before opening on hover
closeDelay	0	number Milliseconds to wait before closing

Name

Default

Description

children

—

ReactNode

GlimpseTrigger and GlimpseContent

delay

600

number

Milliseconds to wait before opening on hover

closeDelay

number

Milliseconds to wait before closing

GlimpseTrigger

Name	Default	Description
children	—	ReactNode The element users hover, usually a link
render	—	ReactElement Render the trigger as another element, for example an anchor

Name

Default

Description

children

—

ReactNode

The element users hover, usually a link

render

—

ReactElement

Render the trigger as another element, for example an anchor

GlimpseContent

Name	Default	Description
children	—	ReactNode GlimpseImage, GlimpseTitle and GlimpseDescription
sideOffset	7	number Distance in pixels between the trigger and the card
dark	false	boolean Applies the dark theme inside the portal

Name

Default

Description

children

—

ReactNode

GlimpseImage, GlimpseTitle and GlimpseDescription

sideOffset

number

Distance in pixels between the trigger and the card

dark

false

boolean

Applies the dark theme inside the portal

GlimpseImage

Name	Default	Description
src	—	string Image source
alt	""	string Alternative text

Name

Default

Description

src

—

string

Image source

alt

string

Alternative text

GlimpseTitle / GlimpseDescription

Name	Default	Description
children	—	ReactNode Text content. The description is clamped to two lines
className	—	string Additional classes on the text

Name

Default

Description

children

—

ReactNode

Text content. The description is clamped to two lines

className

—

string

Additional classes on the text