Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Monitoring blocks

Pro

Kubernetes Pod Logs Viewer Block for React

A window with six pods as a radio list, a Current / Previous container switch, a typed 60-line tail with Pause, search that marks matches and a download of the visible lines, including what the crashed container printed last.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Read one pod's logs, and the last words of the container that died, with this viewer for React with Base UI. It is Podlantern, a cluster log viewer, showing six made-up pods of the shop-prod namespace in a fixed-height window with no sidebar. The top bar names the chosen pod in monospace, gives its state and restarts and holds a Pause button that is first in the tab order. The pods are a radio list at the start (a select on a phone), with a dot, a hollow ring or an alert icon for Running, Completed and CrashLoop. A Current / Previous switch picks the container: Current is a typed 60-line tail that gains a line every 1.6 seconds until "End of sample"; Previous exists only for pods that restarted and shows what the earlier container printed before it was killed. A search field marks matches and the foot downloads the visible lines as a .log file. The log pane is dark in either theme. Guides draw the frame; nothing is measured.

FAQ

How do I use my own pods?

Edit PODS: each has a name, a state, a restart count and a pool of message templates the current tail is built from ({n} is filled with a number that depends on the line). Previous logs are the CART_PREVIOUS and INDEXER_PREVIOUS arrays of time|level|message. In your app load the log for the chosen pod and container from your cluster API.

Why is Previous sometimes disabled?

A pod has a previous container only after it restarted. The two restarted pods in the sample can show it; the rest have it disabled, as a real cluster would answer. Previous is not a tail: it is the finished log, shown whole and scrolled to its last lines.

Does it really tail?

The current container replays a typed sample, one line every 1.6 seconds, then stops on End of sample with a Replay button. With reduced motion on it shows the whole sample, paused. The status speaks a line count about every six seconds, never each line.

How does the pod list work on a phone?

Below the medium breakpoint the list becomes a select above the log, with the state and restarts in each option; the window height does not change.

What stays local in the demo?

No cluster is contacted and the pods, lines and timestamps are invented; Pause, the container switch and the search only change state in the tab. The download is real: it writes the visible lines to a file in your browser.

All 100 monitoring blocks