Aedis UI

Avatar

Image with fallback initials, used for people and agents.

RA

Installation

Once per app, set up Aedis UI. The CLI verifies the signed release before writing anything and pins every dependency:

npx @aedis/cli@0.1.0 init

Import the theme once in your global CSS, after Tailwind:

app/globals.css
@import "tailwindcss";@import "./styles/aedis-theme.css";

Then add the component:

npx @aedis/cli@0.1.0 add avatar# pnpm dlx @aedis/cli@0.1.0 add avatar · yarn dlx @aedis/cli@0.1.0 add avatar · bunx @aedis/cli@0.1.0 add avatar

Props

PropTypeDefaultDescription
...props@base-ui/react Avatar props—Every prop of the underlying Base UI part, including render for composition.

Security

  • Load avatar images from origins your CSP allows; the fallback renders when the image fails.