Weather Card

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Activate your Pro license (once per machine)
npx koalaui-cli@latest login <key>

# Add this component (its dependencies come along)
npx koalaui-cli@latest add weather-card

Usage#

Anatomy#

A header that names the place and the time, and the content under it: the weather now, the details, the next hours and the days ahead. Every part is droppable: a quick answer needs only the place and the temperature now.

import {
  WeatherCard,
  WeatherCardHeader,
  WeatherCardLocation,
  WeatherCardContent,
  WeatherCardCurrent,
  WeatherCardGlyph,
  WeatherCardTemperature,
  WeatherCardCondition,
  WeatherCardRange,
  WeatherCardStats,
  WeatherCardStat,
  WeatherCardHourly,
  WeatherCardHour,
  WeatherCardDaily,
  WeatherCardDay,
} from "@/components/ui/weather-card"

<WeatherCard>
  <WeatherCardHeader>
    <WeatherCardLocation />
  </WeatherCardHeader>
  <WeatherCardContent>
    <WeatherCardCurrent>
      <WeatherCardGlyph />
      <WeatherCardTemperature />
      <WeatherCardCondition />
      <WeatherCardRange />
    </WeatherCardCurrent>
    <WeatherCardStats>
      <WeatherCardStat />
    </WeatherCardStats>
    <WeatherCardHourly>
      <WeatherCardHour />
    </WeatherCardHourly>
    <WeatherCardDaily>
      <WeatherCardDay />
    </WeatherCardDaily>
  </WeatherCardContent>
</WeatherCard>

Conditions#

Nine skies from Koala Icons, drawn for this card on the same grid as the rest of the set; clear and partly cloudy have a night glyph too. Set the sky once on the root with condition and night; the glyph and the wording follow it. WeatherIcon is the same map on its own, for a forecast anywhere else.

Hourly#

WeatherCardHourly lays the next hours out as a strip that runs to the card's edges and scrolls sideways, snapping hour by hour, with the edge fading while there is more to see. The chance of rain is the one thing in colour, and only when there is a chance. Tab into the strip and the arrow keys scroll it.

Forecast#

WeatherCardDaily sets one scale for the week from the coldest low to the warmest high, so every day's bar sits where it falls on it and a cold snap reads at a glance. The bar takes a quiet hue from the day's mean, cold to hot. Pass current on today to mark the temperature now on its bar.

Compact#

layout="compact" turns the header into one line you can click: the glyph, the place over the sky and the time, the temperature and the range. The card grows to show the forecast underneath, the same object getting taller rather than a panel swapping in. Stack a few for “weather in my three cities”.

In a conversation#

Inside a reply the card takes the message column's width, with no bubble around it. The answer leads in words and the card backs it up with the numbers.

Loading#

While a forecast streams in, WeatherCardSkeleton holds its place in the same frame, with the temperature and the hours where they will land.

API reference#

FAQ#