Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Cost Optimization Dashboard Block for Svelte

Ten cloud savings recommendations with a checkbox each and a category toggle, a running total of the savings ticked, and an apply action that moves them into an Applied in this demo ledger.

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

Tick the savings you would take and see what they add up to, with this cost optimization panel for Svelte with Ark UI. A hairline frame with a plus mark on each corner lists ten recommendations (right-sizing, archiving, commitments, spot capacity and more), each with a Checkbox, an impact badge, the hours of work and the dollars saved a month. A Toggle Group in the header picks a category and dims the rows of the others. The foot adds up what is ticked a month, a year and in hours, and "Apply selected" moves those rows into an "Applied in this demo" ledger at the end of the panel, where they total up and lower the amount still available. It's built from Checkbox, Toggle Group, Badge, Button, Shine Button, Empty and Guides. For cloud cost tools and savings reviews.

FAQ

How do I fill it with my recommendations?

Edit RECOMMENDATIONS: each has a name, a category, an impact, the effort in hours and the saving in dollars a month. The categories in the toggle come from CATEGORIES. The yearly figure is the monthly one times twelve, and everything else is added up from the rows.

What does the category toggle do?

It highlights one category and dims the rest, so the table never changes height. Dimmed rows can't be newly ticked, but anything you already ticked stays ticked and counted until you untick it. "All" clears the dimming.

What happens when I apply?

The ticked rows are marked Applied in the table, listed in the ledger with their savings, and taken out of "still available". Undo all puts everything back. Rows stay where they were, so the table keeps its height.

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

All of it. Applying only edits this page and says that nothing changed in any account. To make it real, load the recommendations from your cost tool, send the ticked ids to the action that makes each change (or opens a ticket for it) and fill the ledger from what that action returns.

Is it usable without a mouse?

Yes. Each checkbox is named for its recommendation, the toggle group steps with the arrow keys, and Apply selected is a button that answers with a polite status line even when nothing is ticked.

How does it look on a phone?

The impact and effort columns fold into the line under each name, the ledger stacks under the table, and the action foot stays pinned to the bottom of the screen.

All 200 dashboard blocks