uix-uiAvatar
User image / initials. 5 sizes × 2 types × 2 shapes.
NJ
import { Avatar } from "@/components/ui/avatar";
export default function Example() {
return <Avatar initials="NJ" />;
}
Installation
$ npx uix-ui@latest add avatarThis copies the file into components/ui/avatar.tsx in your project. npx shadcn@latest add @uix/avatar works too.
Usage
import { Avatar } from "@/components/ui/avatar";
<Avatar initials="NJ" />
Examples
Sizes
IJIJIJIJIJ
import { Avatar } from "@/components/ui/avatar";
export default function Example() {
return (
<div className="flex flex-wrap items-center gap-3">
{(["xs", "sm", "md", "lg", "xl"] as const).map(s => <Avatar key={s} size={s} initials="IJ" />)}
</div>
);
}
Shape, icon, status and badge
TASRFK3
import { Avatar } from "@/components/ui/avatar";
export default function Example() {
return (
<div className="flex flex-wrap items-center gap-3">
<Avatar shape="rounded" initials="TA" />
<Avatar type="icon" aria-label="Guest" />
<Avatar initials="SR" status />
<Avatar initials="FK" badge={<span className="text-label-small">3</span>} />
</div>
);
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | xs | sm | md | lg | xl | "md" | |
shape | circle | rounded | "circle" | |
type | initials | icon | "initials" | |
src | string | – | Photo; initials or the icon show when it is missing. |
alt | string | "" | |
initials | string | – | |
status | boolean | false | Online dot on the corner. |
badge | React.ReactNode | – | Count pill on the corner. |
Everything else is passed to the root element, so className, aria-* and event handlers work as usual.
Dependencies
Installed for you by the CLI.
class-variance-authorityclsxtailwind-merge
lib/utils.tscomponents/ui/icons.tsx