Saas UI
@saas_js
Design system and React components for startups.
'use client'
import { Stack, Text } from '@saas-ui/react'
import { Avatar, HoverCard, Link } from '@saas-ui/react'
export const HoverCardBasic = () => {
return (
<HoverCard.Root size="sm">
Follow{' '}
<HoverCard.Trigger asChild>
<Link href="#" colorPalette="accent">
@saas_js
</Link>
</HoverCard.Trigger>{' '}
for updates
<HoverCard.Content>
<HoverCard.Arrow />
<Stack gap="4" direction="row">
<Avatar
name="Saas UI"
src="https://pbs.twimg.com/profile_images/1542114663420383235/Otz6CbhI_400x400.png"
/>
<Stack gap="0">
<Text textStyle="sm" fontWeight="semibold">
Saas UI
</Text>
<Text textStyle="xs" color="fg.muted" mb="2">
@saas_js
</Text>
<Text textStyle="sm" color="fg.muted">
Design system and React components for startups.
</Text>
</Stack>
</Stack>
</HoverCard.Content>
</HoverCard.Root>
)
}
Anatomy
import { HoverCard } from '@saas-ui/react/hover-card'<HoverCard.Root>
<HoverCard.Trigger />
<HoverCard.Content>
<HoverCard.Arrow />
</HoverCard.Content>
</HoverCard.Root>Examples
Controlled
Use the open and onOpenChange to control the visibility of the hover card.
Saas UI
@saas_js
Design system and React components for startups.
'use client'
import { useState } from 'react'
import { Stack, Text } from '@saas-ui/react'
import { Avatar, HoverCard, Link } from '@saas-ui/react'
export const HoverCardControlled = () => {
const [open, setOpen] = useState(false)
return (
<HoverCard.Root size="sm" open={open} onOpenChange={(e) => setOpen(e.open)}>
Follow{' '}
<HoverCard.Trigger asChild>
<Link href="#" colorPalette="accent">
@saas_js
</Link>
</HoverCard.Trigger>{' '}
for updates
<HoverCard.Content>
<HoverCard.Arrow />
<Stack gap="4" direction="row">
<Avatar
name="Saas UI"
src="https://pbs.twimg.com/profile_images/1542114663420383235/Otz6CbhI_400x400.png"
/>
<Stack gap="0">
<Text textStyle="sm" fontWeight="semibold">
Saas UI
</Text>
<Text textStyle="xs" color="fg.muted" mb="2">
@saas_js
</Text>
<Text textStyle="sm" color="fg.muted">
Design system and React components for startups.
</Text>
</Stack>
</Stack>
</HoverCard.Content>
</HoverCard.Root>
)
}
Delays
Control the open and close delays using the openDelay and closeDelay props.
Saas UI
@saas_js
Design system and React components for startups.
'use client'
import { Stack, Text } from '@saas-ui/react'
import { Avatar, HoverCard, Link } from '@saas-ui/react'
export const HoverCardWithDelay = () => {
return (
<HoverCard.Root size="sm" openDelay={1000} closeDelay={100}>
Follow{' '}
<HoverCard.Trigger asChild>
<Link href="#" colorPalette="accent">
@saas_js
</Link>
</HoverCard.Trigger>{' '}
for updates
<HoverCard.Content>
<HoverCard.Arrow />
<Stack gap="4" direction="row">
<Avatar
name="Saas UI"
src="https://pbs.twimg.com/profile_images/1542114663420383235/Otz6CbhI_400x400.png"
/>
<Stack gap="0">
<Text textStyle="sm" fontWeight="semibold">
Saas UI
</Text>
<Text textStyle="xs" color="fg.muted" mb="2">
@saas_js
</Text>
<Text textStyle="sm" color="fg.muted">
Design system and React components for startups.
</Text>
</Stack>
</Stack>
</HoverCard.Content>
</HoverCard.Root>
)
}
Placement
Use the positioning.placement prop to configure the underlying floating-ui
positioning logic.
Saas UI
@saas_js
Design system and React components for startups.
'use client'
import { Stack, Text } from '@saas-ui/react'
import { Avatar, HoverCard, Link } from '@saas-ui/react'
export const HoverCardWithPlacement = () => {
return (
<HoverCard.Root size="sm" positioning={{ placement: 'top' }}>
Follow{' '}
<HoverCard.Trigger asChild>
<Link href="#" colorPalette="accent">
@saas_js
</Link>
</HoverCard.Trigger>{' '}
for updates
<HoverCard.Content>
<HoverCard.Arrow />
<Stack gap="4" direction="row">
<Avatar
name="Saas UI"
src="https://pbs.twimg.com/profile_images/1542114663420383235/Otz6CbhI_400x400.png"
/>
<Stack gap="0">
<Text textStyle="sm" fontWeight="semibold">
Saas UI
</Text>
<Text textStyle="xs" color="fg.muted" mb="2">
@saas_js
</Text>
<Text textStyle="sm" color="fg.muted">
Design system and React components for startups.
</Text>
</Stack>
</Stack>
</HoverCard.Content>
</HoverCard.Root>
)
}
Accessibility
HoverCard should be used solely for supplementary information that is not essential for understanding the context.
It is inaccessible to screen readers and cannot be activated via keyboard, so avoid placing crucial content within it.
Props
| Prop | Default | Type |
|---|---|---|
closeDelay | '300' | numberThe duration from when the mouse leaves the trigger or content until the hover card closes. |
lazyMount | false | booleanWhether to enable lazy mounting |
openDelay | '700' | numberThe duration from when the mouse enters the trigger until the hover card opens. |
skipAnimationOnMount | false | booleanWhether to allow the initial presence animation. |
unmountOnExit | false | booleanWhether to unmount on exit. |
colorPalette | 'gray' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'presence' | 'status' | 'sidebar' | 'sidebar.accent' | 'accent' | 'slate'The color palette of the component |
size | 'md' | 'xs' | 'sm' | 'md' | 'lg'The size of the component |
defaultOpen | booleanThe initial open state of the hover card when rendered. Use when you don't need to control the open state of the hover card. | |
id | stringThe unique identifier of the machine. | |
ids | Partial<{ trigger: string; content: string; positioner: string; arrow: string }>The ids of the elements in the popover. Useful for composition. | |
immediate | booleanWhether to synchronize the present change immediately or defer it to the next frame | |
onExitComplete | VoidFunctionFunction called when the animation ends in the closed state | |
onFocusOutside | (event: FocusOutsideEvent) => voidFunction called when the focus is moved outside the component | |
onInteractOutside | (event: InteractOutsideEvent) => voidFunction called when an interaction happens outside the component | |
onOpenChange | (details: OpenChangeDetails) => voidFunction called when the hover card opens or closes. | |
onPointerDownOutside | (event: PointerDownOutsideEvent) => voidFunction called when the pointer is pressed down outside the component | |
open | booleanThe controlled open state of the hover card | |
positioning | PositioningOptionsThe user provided options used to position the popover content | |
present | booleanWhether the node is present (controlled by the user) | |
as | React.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
unstyled | booleanWhether to remove the component's style. |