Diamond

Diamond uses eight square pixels arranged around a diamond path, each fading in sequence. It reads especially well in game-inspired interfaces, compact status surfaces, and loading states that want a little more character than a standard ring.

import { Diamond } from "@/components/loading-ui/diamond";

export function DiamondDemo() {

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @loading-ui/diamond
Copy

Usage

Copyimport { Diamond } from "@/components/loading-ui/diamond";

Copy<Diamond />

Customization

Diamond keeps the original pixel choreography intact, so the main controls are its overall size-* footprint and the foreground color it inherits via currentColor.

Size

Scale the SVG directly with size-* utilities.

import { Diamond } from "@/components/loading-ui/diamond";

export function DiamondSize() {

Color

Apply text color utilities when you want the pixel diamond to match the tone of its parent surface or status state.

import { Diamond } from "@/components/loading-ui/diamond";

export function DiamondColor() {

Examples

These examples focus on compact UI where the retro diamond shape can stay legible without overpowering the rest of the interface.

Button

Use the diamond as an inline action icon when the loading state should feel playful but still precise.

import { Button } from "@/components/ui/button";
import { Diamond } from "@/components/loading-ui/diamond";

Badge

Status chips are a natural fit because the compact square geometry stays crisp at small sizes.

import { Badge } from "@/components/ui/badge";
import { Diamond } from "@/components/loading-ui/diamond";

Alert

In alerts, the diamond loader gives longer-running system work a little more personality while staying compact.

import { Button } from "@/components/ui/button";
import {
  Alert,