Overlays, new
Profile Peek
A profile card that grows from its mention, carrying the avatar and name into place, then glides between people without closing.
$149 once · every Pro piece
Customize
auto
top
bottom
Install
npx shadcn@latest add @obsyde/profile-peekNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { ProfilePeek } from '@/components/obsyde/ember/profile-peek/ProfilePeek';
export function Example() {
return (
<ProfilePeek />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/profile-peek/ProfilePeek.tsxcomponentember/profile-peek/profile-peek.cssstylesember/profile-peek/ProfilePeekDemo.tsxdemoember/shared/spring.tssharedember/shared/accent.tssharedember/shared/rolling-number.csssharedember/shared/RollingNumber.tsxsharedember/overlays-kit/kit.tssharedember/kit2-kit/kit.tssharedember/blocks-kit/check.csssharedember/blocks-kit/SparkBurst.tssharedember/blocks-kit/Check.tsxsharedember/shared/ember.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
placementPlacement | 'auto' | 'top' | 'bottom' | 'auto' |
delayHover delay | number | 350 |
showStatsShow stats | boolean | true |