bundui svg logo
Bundui

Avatar

An image element with a fallback for representing the user. Check out use cases for real-world projects.

Docs
CN
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";

export default function Component() {
  return (
    <Avatar>
      <AvatarImage src="https://bundui-images.netlify.app/avatars/01.png" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
  );
}
CN
Online
CN
Offline
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";

export default function Component() {
  return (
    <div className="flex gap-4">
      <div className="relative">
        <Avatar>
          <AvatarImage src="https://bundui-images.netlify.app/avatars/04.png" />
          <AvatarFallback>CN</AvatarFallback>
        </Avatar>
        <div className="border-background absolute -end-0.5 -top-0.5 size-3 rounded-full border-2 bg-green-500">
          <span className="sr-only">Online</span>
        </div>
      </div>

      <div className="relative">
        <Avatar>
          <AvatarImage src="https://bundui-images.netlify.app/avatars/04.png" />
          <AvatarFallback>CN</AvatarFallback>
        </Avatar>
        <div className="border-background absolute -end-0.5 -bottom-0.5 size-3 rounded-full border-2 bg-red-500">
          <span className="sr-only">Offline</span>
        </div>
      </div>
    </div>
  );
}
CNCNCN
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";

export default function Component() {
  return (
    <TooltipProvider>
      <div className="*:data-[slot=tooltip-trigger]:ring-background flex -space-x-2 *:data-[slot=tooltip-trigger]:ring-2 *:data-[slot=tooltip-trigger]:hover:z-10">
        <Tooltip>
          <TooltipTrigger asChild>
            <Avatar>
              <AvatarImage src="https://bundui-images.netlify.app/avatars/06.png" alt="@shadcn" />
              <AvatarFallback>CN</AvatarFallback>
            </Avatar>
          </TooltipTrigger>
          <TooltipContent>
            <p>@tobybelhome</p>
          </TooltipContent>
        </Tooltip>

        <Tooltip>
          <TooltipTrigger asChild>
            <Avatar>
              <AvatarImage src="https://bundui-images.netlify.app/avatars/07.png" alt="@shadcn" />
              <AvatarFallback>CN</AvatarFallback>
            </Avatar>
          </TooltipTrigger>
          <TooltipContent>
            <p>@bunduidotio</p>
          </TooltipContent>
        </Tooltip>

        <Tooltip>
          <TooltipTrigger asChild>
            <Avatar>
              <AvatarImage src="https://bundui-images.netlify.app/avatars/10.png" alt="@shadcn" />
              <AvatarFallback>CN</AvatarFallback>
            </Avatar>
          </TooltipTrigger>
          <TooltipContent>
            <p>@shadcn</p>
          </TooltipContent>
        </Tooltip>
      </div>
    </TooltipProvider>
  );
}
CNCNCN
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";

export default function Component() {
  return (
    <TooltipProvider>
      <div className="*:data-[slot=tooltip-trigger]:ring-background flex -space-x-2 *:data-[slot=tooltip-trigger]:ring-2 *:data-[slot=tooltip-trigger]:hover:z-10">
        <Tooltip>
          <TooltipTrigger asChild>
            <Avatar className="size-14">
              <AvatarImage src="https://bundui-images.netlify.app/avatars/06.png" alt="@shadcn" />
              <AvatarFallback>CN</AvatarFallback>
            </Avatar>
          </TooltipTrigger>
          <TooltipContent>
            <p>@tobybelhome</p>
          </TooltipContent>
        </Tooltip>

        <Tooltip>
          <TooltipTrigger asChild>
            <Avatar className="size-14">
              <AvatarImage src="https://bundui-images.netlify.app/avatars/07.png" alt="@shadcn" />
              <AvatarFallback>CN</AvatarFallback>
            </Avatar>
          </TooltipTrigger>
          <TooltipContent>
            <p>@bunduidotio</p>
          </TooltipContent>
        </Tooltip>

        <Tooltip>
          <TooltipTrigger asChild>
            <Avatar className="size-14">
              <AvatarImage src="https://bundui-images.netlify.app/avatars/10.png" alt="@shadcn" />
              <AvatarFallback>CN</AvatarFallback>
            </Avatar>
          </TooltipTrigger>
          <TooltipContent>
            <p>@shadcn</p>
          </TooltipContent>
        </Tooltip>
      </div>
    </TooltipProvider>
  );
}

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { ChevronDownIcon } from "lucide-react";
import { Button } from "@/components/ui/button";

export default function Component() {
  return (
    <Button variant="ghost" className="rounded-full p-0! pe-3!">
      <Avatar>
        <AvatarImage src="https://bundui-images.netlify.app/avatars/01.png" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
      <ChevronDownIcon />
    </Button>
  );
}

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";

export default function Component() {
  return (
    <Button variant="outline" className="rounded-full p-0! pe-3!">
      <Avatar>
        <AvatarImage src="https://bundui-images.netlify.app/avatars/07.png" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
      <span>Toby Belhome</span>
    </Button>
  );
}
CNLRERER
More then 50+ happy users
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { ChevronDownIcon } from "lucide-react";

export default function Component() {
  return (
    <div className="flex items-center rounded-full border p-1">
      <div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2">
        <Avatar className="size-6">
          <AvatarImage src="https://bundui-images.netlify.app/avatars/06.png" alt="@shadcn" />
          <AvatarFallback>CN</AvatarFallback>
        </Avatar>
        <Avatar className="size-6">
          <AvatarImage src="https://bundui-images.netlify.app/avatars/07.png" alt="@leerob" />
          <AvatarFallback>LR</AvatarFallback>
        </Avatar>
        <Avatar className="size-6">
          <AvatarImage src="https://bundui-images.netlify.app/avatars/10.png" alt="@evilrabbit" />
          <AvatarFallback>ER</AvatarFallback>
        </Avatar>
        <Avatar className="size-6">
          <AvatarImage src="https://bundui-images.netlify.app/avatars/09.png" alt="@evilrabbit" />
          <AvatarFallback>ER</AvatarFallback>
        </Avatar>
      </div>
      <span className="px-3 text-sm whitespace-nowrap">More then 50+ happy users</span>
    </div>
  );
}
CNLRER
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";

export default function Component() {
  return (
    <div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2">
      <Avatar>
        <AvatarImage src="https://bundui-images.netlify.app/avatars/06.png" alt="@shadcn" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage src="https://bundui-images.netlify.app/avatars/07.png" alt="@leerob" />
        <AvatarFallback>LR</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage src="https://bundui-images.netlify.app/avatars/10.png" alt="@evilrabbit" />
        <AvatarFallback>ER</AvatarFallback>
      </Avatar>
      <Button size="icon" variant="outline" className="z-10 size-8 rounded-full text-xs!">
        +10
      </Button>
    </div>
  );
}
TBLR
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";

export default function Component() {
  return (
    <div className="flex items-center gap-4">
      <Avatar>
        <AvatarFallback className="bg-indigo-600 text-white">TB</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarFallback className="bg-teal-600 text-white">LR</AvatarFallback>
      </Avatar>
    </div>
  );
}
TB
import { Avatar, AvatarFallback } from "@/components/ui/avatar";

export default function Component() {
  return (
    <Avatar>
      <AvatarFallback>TB</AvatarFallback>
    </Avatar>
  );
}

Button

Displays a button or a component that looks like a button. Check out use cases for real-world projects.

Tilt Effect

Tilt Effect is an interactive component that creates a perspective effect by making buttons, cards or images respond to mouse movements.