Atoms

Avatar

An image element with a fallback for user profiles.

shadcn/uiBased on shadcn/ui with Formance brand styling.

Installation#

npx shadcn@latest add @formance/avatar

Install the following dependencies:

npm install radix-ui

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'

<Avatar>
  <AvatarImage src="https://github.com/formancehq.png" alt="Formance" />
  <AvatarFallback>FC</AvatarFallback>
</Avatar>