Avatar

A picture, or initials while it loads, in a disc of glass.

Installation#

pnpmnpmyarnbun

$ pnpm dlx shadcn@latest add @liquikit/avatar

Needs the @liquikit registry in your components.json. Set it up once.

import { Avatar } from "@/components/liquikit/avatar"

<Avatar src="/maya.jpg" alt="Maya" fallback="MA" size={48} />

Prop	Type	Default
`theme`	`"light" \| "dark"` Light or dark glass. Falls back to the nearest `GlassThemeProvider`, then light.	—
`lens`	`Partial<LensProfile>` Overrides for the lens profile, such as `thickness`, `bevel`, `ior` and `magnification`.	—
`liquid`	`number` How far the glass squashes and stretches as it moves. `0` keeps it rigid.	—
`src`	`string` URL of the picture.	—
`alt`	`string` Describes the picture.	""
`fallback`	`ReactNode` Shown while the picture loads, or if it fails. Usually initials.	—
`size`	`number` Diameter, in pixels.	40
`refraction`	`"interactive" \| "always"` When the glass bends the page. `interactive` bends it while the component is pressed, dragged or focused, `always` bends it all the time.	"interactive"