Components
- AccordionNew
- Alert
- Alert DialogNew
- AutocompleteNew
- AvatarNew
- Badge
- Breadcrumb
- Button
- CalendarNew
- CardNew
- Checkbox
- Checkbox GroupNew
- CollapsibleNew
- ComboboxNew
- CommandNew
- Context MenuNew
- Date PickerNew
- DialogNew
- DrawerNew
- EmptyNew
- FieldNew
- FieldsetNew
- FormNew
- FrameNew
- GroupNew
- Input
- Input GroupNew
- KbdNew
- Label
- MenuNew
- MeterNew
- Number Field
- OTP FieldNew
- Pagination
- PopoverNew
- Preview CardNew
- Progress
- Radio Group
- Scroll AreaNew
- Select
- Separator
- SheetNew
- SkeletonNew
- Slider
- Spinner
- StepperNew
- Switch
- Table
- TabsNew
- Textarea
- ToastNew
- ToggleNew
- Toggle GroupNew
- ToolbarNew
- Tooltip
Avatar
An image element with a fallback for representing the user.
LT
import { Avatar, AvatarFallback, AvatarImage } from "mako-ui/components/avatar";
export default function Particle() {
return (
<Avatar>
<AvatarImage alt="Luke Tracy" src="/images/portrait-1.jpg" />
<AvatarFallback>LT</AvatarFallback>
</Avatar>
);
}
Usage
import { Avatar, AvatarFallback, AvatarImage } from "mako-ui/components/avatar"<Avatar>
<AvatarImage src="/avatars/01.png" alt="User avatar" />
<AvatarFallback>JD</AvatarFallback>
</Avatar>API Reference
Avatar
Root component. Includes default size of 32px (8 units) and rounded-full styling.
AvatarImage
Image element for the avatar.
AvatarFallback
Fallback content displayed when the image fails to load. Includes muted background.
Examples
Fallback Only
LT
import { Avatar, AvatarFallback } from "mako-ui/components/avatar";
export default function Particle() {
return (
<Avatar>
<AvatarFallback>LT</AvatarFallback>
</Avatar>
);
}
Different Sizes
AVAVAV
import { Avatar, AvatarFallback, AvatarImage } from "mako-ui/components/avatar";
export default function Particle() {
return (
<div className="flex items-center gap-4">
<Avatar>
<AvatarImage alt="User" src="/images/portrait-1.jpg" />
<AvatarFallback>AV</AvatarFallback>
</Avatar>
<Avatar className="size-12">
<AvatarImage alt="User" src="/images/portrait-1.jpg" />
<AvatarFallback>AV</AvatarFallback>
</Avatar>
<Avatar className="size-16">
<AvatarImage alt="User" src="/images/portrait-1.jpg" />
<AvatarFallback>AV</AvatarFallback>
</Avatar>
</div>
);
}
Different Radius
AVAVAV
import { Avatar, AvatarFallback, AvatarImage } from "mako-ui/components/avatar";
export default function Particle() {
return (
<div className="flex items-center gap-4">
<Avatar className="rounded-md">
<AvatarImage alt="User" src="/images/portrait-1.jpg" />
<AvatarFallback>AV</AvatarFallback>
</Avatar>
<Avatar className="rounded-xl">
<AvatarImage alt="User" src="/images/portrait-1.jpg" />
<AvatarFallback>AV</AvatarFallback>
</Avatar>
<Avatar className="rounded-full">
<AvatarImage alt="User" src="/images/portrait-1.jpg" />
<AvatarFallback>AV</AvatarFallback>
</Avatar>
</div>
);
}
Group Avatars
U1U2U3
import { Avatar, AvatarFallback, AvatarImage } from "mako-ui/components/avatar";
export default function Particle() {
return (
<div className="flex -space-x-[0.6rem]">
<Avatar className="ring-2 ring-background">
<AvatarImage alt="U1" src="/images/portrait-1.jpg" />
<AvatarFallback>U1</AvatarFallback>
</Avatar>
<Avatar className="ring-2 ring-background">
<AvatarImage alt="U2" src="/images/portrait-2.jpg" />
<AvatarFallback>U2</AvatarFallback>
</Avatar>
<Avatar className="ring-2 ring-background">
<AvatarImage alt="U3" src="/images/portrait-3.jpg" />
<AvatarFallback>U3</AvatarFallback>
</Avatar>
</div>
);
}