Weather Metrics

Four-cell grid of atmospheric stats with uppercase labels, bold tabular values, and an optional detail line.

Humidity64%

Wind12 km/hNE

Pressure1018 hPa

UV Index6High

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Weather5 } from "@/components/beste/piece/weather5";

<Weather5
  metrics={[
    {
      "label": "Humidity",
      "value": "64%"
    },
    {
      "label": "Wind",
      "value": "12 km/h",
      "detail": "NE"
    },
    {
      "label": "Pressure",
      "value": "1018 hPa"
    },
    {
      "label": "UV Index",
      "value": "6",
      "detail": "High"
    }
  ]}
/>