Profile chip

A player profile chip for React: avatar, name, an experience bar with the points on it, and the level, on one slab cut on both sides.

Install

terminal

# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/profile-chip

Examples

Earning experience

profile-chip-basic.tsx

import { useState } from "react";import { Avatar, AvatarFallback } from "@/components/zero/avatar";import { Button } from "@/components/zero/button";import { ProfileChip } from "@/components/zero/profile-chip";export default function ProfileChipBasic() {  const [xp, setXp] = useState(685);  const [level, setLevel] = useState(8);  const max = 790;  return (    <div className="grid justify-items-start gap-5">      <ProfileChip        name="Wren"        level={level}        xp={xp}        xpMax={max}        avatar={          <Avatar size="sm">            <AvatarFallback>WR</AvatarFallback>          </Avatar>        }      />      <Button        size="sm"        variant="secondary"        onClick={() => {          if (xp + 60 >= max) {            setLevel((l) => l + 1);            setXp(xp + 60 - max);          } else setXp(xp + 60);        }}      >        Deliver (+60 xp)      </Button>    </div>  );}

Behaviour

A slab of fixed height, cut on both sides, holding the avatar, the name over a thin experience bar in the rare blue with the points written on it, and the level big and leaning with LEVEL under it. The bar eases to its new length on the slow timing.

Screen readers get one sentence instead of the parts: "Wren, level 8, 685 of 790 experience".

Props

ProfileChip

Prop	Type	Default	Description
name	string	—	Who.
level	number	—	Their level.
xp / xpMax	number	—	Experience so far, and to the next level.
avatar	ReactNode	—	An Avatar.