Rarity

Five tiers of worth, the way a game grades its loot: common, uncommon, rare, epic, legendary, each with its own colour.

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/rarity

Examples

Loot, graded

Rail pass

One ride across the yards.

common

Canal key

Opens the lock at Tower 9.

uncommon

Night permit

Work past 22:00 without a fine.

rare

Sealed crate

Do not open it.

epic

North gate seal

Signs any job, anywhere.

legendary

North gate seal

Found in the rail yards

Legendary

Signs any job, anywhere. Only one is known.

rarity-loot.tsx

import { Badge } from "@/components/zero/badge";import {  Card,  CardAction,  CardContent,  CardDescription,  CardHeader,  CardTitle,} from "@/components/zero/card";import { LockIcon } from "@/components/zero/icons";import {  Item,  ItemActions,  ItemContent,  ItemDescription,  ItemGroup,  ItemMedia,  ItemTitle,} from "@/components/zero/item";const loot = [  { name: "Rail pass", line: "One ride across the yards.", rarity: "common" },  { name: "Canal key", line: "Opens the lock at Tower 9.", rarity: "uncommon" },  {    name: "Night permit",    line: "Work past 22:00 without a fine.",    rarity: "rare",  },  { name: "Sealed crate", line: "Do not open it.", rarity: "epic" },  {    name: "North gate seal",    line: "Signs any job, anywhere.",    rarity: "legendary",  },] as const;export default function RarityLoot() {  return (    <div className="grid w-full max-w-3xl gap-6 md:grid-cols-[minmax(0,1fr)_16rem]">      <ItemGroup className="gap-1">        {loot.map(({ name, line, rarity }) => (          <Item key={name} variant="muted" size="sm" rarity={rarity}>            <ItemMedia variant="icon">              <LockIcon />            </ItemMedia>            <ItemContent>              <ItemTitle>{name}</ItemTitle>              <ItemDescription>{line}</ItemDescription>            </ItemContent>            <ItemActions>              <Badge rarity={rarity}>{rarity}</Badge>            </ItemActions>          </Item>        ))}      </ItemGroup>      <Card rarity="legendary" className="self-start">        <CardHeader>          <CardTitle>North gate seal</CardTitle>          <CardDescription>Found in the rail yards</CardDescription>          <CardAction>            <Badge rarity="legendary">Legendary</Badge>          </CardAction>        </CardHeader>        <CardContent>          <p className="text-zero-text-2">            Signs any job, anywhere. Only one is known.          </p>        </CardContent>      </Card>    </div>  );}

Behaviour

The colours are tokens, --color-zero-rarity-common to --color-zero-rarity-legendary, kept clear of the accent, the focus yellow and danger, and readable as text on every ground zeroUI uses.

Three components take a rarity: Badge fills with the tier's colour, Card gets a top edge in it, and Item colours its title and marks its start edge, as an inventory does. Elsewhere, use the tokens directly (text-zero-rarity-epic, bg-zero-rarity-rare).

Props

Badge, Card, Item

Prop	Type	Default	Description
rarity	"common" \| "uncommon" \| "rare" \| "epic" \| "legendary"	—	The tier, and with it the colour.