Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Server Resources Dashboard Block for Svelte

Eight hosts by CPU, memory and disk as a printed heat matrix, sorted by a header toggle and filtered by region, with six hourly readings and the state word for the chosen host.

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

Spot the hot host at a glance with this fleet panel for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds eight Rackstead hosts as rows and CPU, memory and disk as columns, each cell its latest percent printed inside one of five solid steps of foreground, so colour never decides. A Toggle Group in the header sorts the hosts by the metric you pick, a Native Select in the toolbar filters them by region with a "Showing 5 of 8 hosts" count, and pressing a host opens a reading band with its six hourly readings for each metric as three small lines and its state as a word: Online, Degraded or Offline. It's built from Toggle Group, Native Select, Badge, Empty and Guides. For infrastructure consoles and capacity reviews.

FAQ

How do I fill it with my hosts?

Edit HOSTS: an id, a region, a state and six hourly percentages each for cpu, mem and disk (leave them empty for an offline host). The cells, the sort, the header count of hosts at 80% or more and the lines are all worked out from those arrays.

How is the heat shown without colour?

Each cell is a solid step of foreground over the card (under 20, 20, 40, 60 and 80 percent and up) and always prints its number, so the shade is a second cue, never the only one. An offline host prints a dash and reads "No reading" to a screen reader.

Does filtering change the height?

No. The matrix keeps the height of eight rows, so a region with fewer hosts leaves room, and the retired region in the select shows the empty state in the same box.

What stays local, and how do I wire it for real?

Everything: the readings are typed and nothing is measured. To make it live, replace HOSTS with a fetch of each host's last six hourly averages and keep the helpers, which only read the arrays.

How do I use it with a keyboard?

The sort toggle takes arrow keys, the region select is native, and each host name is a button; the chosen row carries aria-current. The reading band updates in place and focus stays where it was.

How does it look on a phone?

The matrix stays with narrower columns and the region shows under the host name; the reading band sits under it with its three lines stacked.

All 200 dashboard blocks