Flight 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 flight-card

Usage#

Times, dates and prices go in already formatted, in the airport's local time. Format them where you know the traveller's locale and the airport's time zone, with Intl.DateTimeFormat("en-US", { timeZone: "America/Denver" }), so the server and the browser print the same thing.

Anatomy#

A header with the airline, the route as the core, and a footer with the fare and the actions. Every part is droppable: a result row needs no actions, a status update needs no price.

import {
  FlightCardList,
  FlightCard,
  FlightCardHeader,
  FlightCardAirline,
  FlightCardTag,
  FlightCardStatus,
  FlightCardLeg,
  FlightCardRoute,
  FlightCardEndpoint,
  FlightCardPath,
  FlightCardStop,
  FlightCardDetails,
  FlightCardDetail,
  FlightCardFooter,
  FlightCardPrice,
  FlightCardActions,
  FlightCardSkeleton,
} from "@/components/ui/flight-card"

<FlightCardList>
  <FlightCard>
    <FlightCardHeader>
      <FlightCardAirline />
      <FlightCardTag />
      <FlightCardStatus />
    </FlightCardHeader>
    <FlightCardLeg>
      <FlightCardRoute>
        <FlightCardEndpoint />
        <FlightCardPath>
          <FlightCardStop />
        </FlightCardPath>
        <FlightCardEndpoint />
      </FlightCardRoute>
    </FlightCardLeg>
    <FlightCardDetails>
      <FlightCardDetail />
    </FlightCardDetails>
    <FlightCardFooter>
      <FlightCardPrice />
      <FlightCardActions />
    </FlightCardFooter>
  </FlightCard>
  <FlightCardSkeleton />
</FlightCardList>

Stops and legs#

Each FlightCardStop sets its airport code on the line, and the caption under it counts them: “Nonstop”, “1 stop · 1h 05m”, “2 stops”. A red-eye that lands the next day takes dayOffset={1} and prints a small +1 after the time. For a round trip, wrap each direction in a FlightCardLeg, as in the card at the top of the page: the legs part with a hairline and share one price.

Results list#

When the assistant finds several, put them in a FlightCardList. They share one frame and part with hairlines. Give the list a value and each card becomes one option of a radio group: click anywhere on a card, or move with the arrow keys. The picked card fills its circle in ink and takes a faint wash, so the choice reads without turning the list into a rainbow.

Booked flight and status#

Once it is booked, set status on the root and drop in FlightCardStatus: on time, delayed, boarding, departed, landed or cancelled, worded and toned for you. A delay keeps the scheduled time struck through above the new one, which turns amber; a cancellation strikes both times through. FlightCardDetails holds the booking facts a traveller looks for at the airport.

In a conversation#

The card sits in the assistant's reply at the column's width, under the sentence that explains it. The route is a grid with the path as the flexible column, so the times keep their size and never wrap in a 360px column; the path and the city give way first.

For a search, echo the query back as chips above the list so the traveller can see what was searched before they compare.

Loading#

While results stream in, FlightCardSkeleton holds the shape of a row inside the same list, so the frame and its hairlines are already in place when the flights arrive.

API reference#

FAQ#