Components
Entity Image
Team or region logo, unstyled. Falls back to initials when the image is missing.
"use client"import { EntityImage } from "@/registry/mrdoge-ui/entity-image/entity-image"import { useMatch } from "@/registry/mrdoge-ui/use-match/use-match"import { FINISHED_MATCH_ID } from "@/components/docs/sample-data"// Public, unauthenticated, cached CDN. Not part of the Team/Region shape// itself; see /docs/reference/images.function teamLogoUrl(teamId: number) { return `https://api.mrdoge.co/images/teams/${teamId}.png`}function regionLogoUrl(regionId: number) { return `https://api.mrdoge.co/images/regions/${regionId}.png`}export function EntityImageDemo() { const match = useMatch({ matchId: FINISHED_MATCH_ID }) if (match === null) { return <p className="text-sm text-fd-muted-foreground">Couldn't load this match right now.</p> } if (match === undefined) { return ( <div className="flex items-center gap-4"> <span className="size-10 animate-pulse rounded-full bg-muted" /> <span className="size-10 animate-pulse rounded-full bg-muted" /> <span className="size-10 animate-pulse rounded-full bg-muted" /> </div> ) } return ( <div className="flex items-center gap-4"> <EntityImage src={teamLogoUrl(match.homeTeam.id)} name={match.homeTeam.name} size="lg"/> <EntityImage src={regionLogoUrl(match.region.id)} name={match.region.name} size="lg"/> <EntityImage src={teamLogoUrl(match.awayTeam.id)} name={match.awayTeam.name} size="lg" /> </div> )}Installation
pnpm dlx shadcn@latest add https://mrdoge.co/r/entity-image.jsonUsage
import { EntityImage } from "@/components/entity-image"
<EntityImage src="https://api.mrdoge.co/images/teams/1.png" name="Palmeiras" />A loaded image has no background, border, or corner radius: it renders at
its native shape, so team crests and region flags don't get forced into a
circle. Pass a size (sm / default / lg) or a className like
size-6 to control dimensions; className wins if both are set.
When src is missing or fails to load, it falls back to a small
muted-background circle with the entity's initials.
Use with the Mr. Doge SDK
Team and region logos are served from a stable public CDN: no SDK call,
no auth, just the entity's id.
export function teamLogo(id: number) {
return `https://api.mrdoge.co/images/teams/${id}.png`
}
export function regionFlag(id: number) {
return `https://api.mrdoge.co/images/regions/${id}.png`
}See Images for the full CDN reference (caching, response codes).
Props
Prop
Type