DynamicInfo

An interactive profile pill that shows avatar, name, role, and a live ticking clock. Click to reveal social links and a status indicator. Drop-in floatable via the position prop.

UniqueUI CLI

npx uniqueui add dynamic-info

shadcn CLI

npx shadcn@latest add https://uniqueui.com/r/dynamic-info.json -y

shadcn path expects @/lib/utils (run shadcn init first). Same source file is installed to components/ui/.

Preview

Available

Usage

"use client";
import { DynamicInfo } from "@/components/ui/dynamic-info";
import { Github, Linkedin, Twitter } from "lucide-react";

export default function Example() {
  return (
    <DynamicInfo
      name="James Doe"
      role="Designer"
      avatar="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=160&h=160&fit=crop"
      defaultExpanded
      socials={[
        { id: "x", icon: <Twitter size={14} />, href: "https://x.com" },
        { id: "in", icon: <Linkedin size={14} />, href: "https://linkedin.com" },
        { id: "gh", icon: <Github size={14} />, href: "https://github.com" },
      ]}
      status={{ label: "Available", color: "#22c55e" }}
    />
  );
}

Props

Prop	Type	Description
`name`	`string`	Display name shown next to the avatar.
`role`	`string`	Subtitle rendered under the name (e.g. "Designer").
`avatar`	`string`	Image URL for the avatar. Falls back to initials when omitted.
`fallback`	`string`	Override the auto-generated initials shown when no avatar is provided.
`position`	`"top-left" \| "top-right" \| "top-center" \| "bottom-left" \| "bottom-right" \| "bottom-center" \| "static"`	Pin the card to a screen edge with fixed positioning, or render inline with "static".
`mergeEdge`	`"top" \| "bottom" \| "none"`	Which edge of the card melts into the surrounding background with a full-width merge bar and concave corner notches. Auto-derived from position (top-* → "top", bottom-* → "bottom", static → "none") but can be overridden.
`cornerSize`	`number`	Pixel radius of the concave corner notches that flow out from the merged edge.
`socials`	`{ id: string; icon: ReactNode; label?: string; href?: string; onClick?: () => void }[]`	Social links revealed when the card expands.
`status`	`{ label: string; color?: string }`	Status pill shown when expanded. The dot pulses softly using the supplied color.
`showTime`	`boolean`	Show the live ticking clock on the right of the header.
`timeFormat`	`"12h" \| "24h"`	Clock format.
`expanded`	`boolean`	Controlled expansion state. When omitted, the component manages its own state.
`defaultExpanded`	`boolean`	Initial expansion state when uncontrolled.
`onExpandedChange`	`(expanded: boolean) => void`	Fires when the card expands or collapses.
`theme`	`"light" \| "dark" \| "system" \| DynamicInfoCustomTheme`	Color scheme. Pass "system" to follow prefers-color-scheme, or an object with any of background, foreground, mutedForeground, border, avatarBackground, socialBackground, socialForeground, socialHoverBackground, socialHoverForeground, statusBackground for a fully custom palette.
`className`	`string`	Additional classes merged onto the outer container.