nyuchimzizi
Mzizi — an open-architecture project of the Bundu Foundation, operated and developed by Nyuchi. Built on the Five African Minerals palette.
Built by Nyuchi Africav4.0.39
Simple label + value display row with optional icon. Used on detail pages for key-value information: "Temperature: 28°C", "Location: Harare", "Status: Active". Compact single-line layout with icon left, label middle, value right-aligned. Production-proven in mukoko-weather for atmospheric details.
View the full component source code below.
"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
/* ═══════════════════════════════════════════════════════════════
INFO ROW — Layer 2 Primitive
Label + value row for detail pages.
✅ TOKENS ✅ ARIA ✅ LOADING
═══════════════════════════════════════════════════════════════ */
interface InfoRowProps {
icon?: React.ReactNode
label: string
value: string | React.ReactNode
loading?: boolean
className?: string
}
export function InfoRow({ icon, label, value, loading = false, className }: InfoRowProps) {
if (loading) {
return (
<div data-slot="info-row" data-portal="https://design.nyuchi.com/components/info-row" data-loading className={cn("flex items-center justify-between py-2.5 animate-pulse", className)}>
<div className="flex items-center gap-2"><div className="size-4 rounded bg-muted" /><div className="h-3 w-20 rounded bg-muted" /></div>
<div className="h-3 w-16 rounded bg-muted" />
</div>
)
}
return (
<div data-slot="info-row" className={cn("flex items-center justify-between py-2.5 border-b border-border last:border-0", className)}>
<span className="flex items-center gap-2 text-sm text-muted-foreground">
{icon && <span aria-hidden="true">{icon}</span>}
{label}
</span>
<span className="text-sm font-medium text-foreground">{value}</span>
</div>
)
}
npx shadcn@latest add https://mzizi.dev/api/v1/ui/info-rowFetch this component's metadata and source code from the registry API.
/api/v1/ui/info-row