shadcn.io is not affiliated with official shadcn/ui
Cluster Scaled Success Block for Svelte
A confirmation window for a scaled cluster: twelve node slots in a framed canvas that a number field redraws, an Autoscale switch that dashes the room to grow, and the vCPU, memory, requests and monthly cost worked out from typed per-node figures.
Installation
Overview
Show what a new node count buys with this confirmation window for Svelte with Ark UI. It is the Hivecrate console, managed Kubernetes, just after a cluster was scaled, in a fixed-height window with no title bar: a top bar with a success mark, the heading and the one action, the Shine Button that opens the metrics. The page side is a canvas of twelve node slots in a framed box (the nodes the cluster had solid, the nodes added outlined, the rest dashed) with a control bar docked under it: a Number Input for the node count, 3 to 12, and a Switch for Autoscale that dashes the slots the cluster could grow into. Changing the count redraws the canvas and works out the vCPU, memory, requests per second and monthly cost. For managed clusters, node pools and any capacity you can resize.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was scaled and nothing is billed. The node figures (4 vCPU, 16 GB, 1,200 requests a second and 160 dollars a month per node) are typed sample data, and the count only redraws the window. To wire it, set PER_NODE from your node pool, EXISTING from the size before the change and MIN and MAX from your limits; every figure and the sentence in the foot are worked out from them, and the cost uses whole cents.
How does the node field behave?
It takes a whole number from 3 to 12 with plus and minus steppers. The canvas follows each valid number as it is typed, a number outside the range is cut to it when the field loses focus (40 becomes 12, 1 becomes 3), and an empty field goes back to the count shown.
What does Autoscale do?
It is a switch, off on load. Turned on, the slots beyond the count are drawn dashed and hatched as room to grow, and the sentence adds how many more nodes the cluster could take and the most that would cost a month; at 12 nodes it says there is no room left. Nothing is enabled: it only changes what the window shows.
Is the canvas accessible?
Each slot has its number and, for assistive technology, what it is (existing node, added node, room for autoscale or free slot), the key under the canvas names the three looks, and the sentence in the foot, which is the window's one live region, says what the count gives each time it changes. The canvas always has twelve slots, so it never changes height.
How does the window behave on a phone?
It keeps its height (36rem on a phone, 46rem from the medium breakpoint) and scrolls inside itself. Below the large breakpoint the control bar moves above the canvas so the number field is on the first screen, and the three figures stay in a row under the canvas.