fab uifab ui

Avatar

An easily stylable avatar component.

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

export function AvatarDemo() {
  return (
    <Avatar>
      <AvatarImage
        alt='Avatar image'
        src='https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80'
      />
      <AvatarFallback>AI</AvatarFallback>
    </Avatar>
  );
}

Installation

pnpm dlx shadcn@latest add @fab-ui/avatar

Usage

import {
  Avatar,
  AvatarFallback,
  AvatarImage
} from "@/components/ui/avatar"
<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" alt="Shadcn avatar" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

Autocomplete

An input that suggests options as you type.

Badge

Displays a badge or a component that looks like a badge.

On this page

InstallationUsage