shadcn.io is not affiliated with official shadcn/ui
AWS List Integration Block for Solid
An integration list section for a cloud cost tool reading from AWS: six cost-allocation tags as rows with a coverage bar, a state word and an Activate switch, a segmented filter with counts, and a working Retry on the one row that timed out.
Installation
Overview
An integration list section for Solid with Ark UI, written for Meterfern, a fictional cloud cost reporting tool, and its AWS connection. A compact header ("Cost-allocation tags, one switch each") has the mark pair at its end. Under a band rule, a polite status line says what stays local beside a segmented filter (All, Active, Needs action) whose counts are derived from the rows. Below it, six tags (team, env, service, owner, cost-center, project) are rail-to-rail rows: the tag key in code, how many of 640 resources carry it as a thin foreground coverage bar and a sentence, its state as a dot and a word, and an Activate switch. The project row timed out: it shows a Retry button in place of its switch, and Retry runs for about a second and then leaves the tag active. The filter dims the rows that don't match with a solid tint and never moves the page. The block ends on its last row, so no rule closes it. The page's rails and top rule come from the Guides spine. It's built from Guides, Switch, Segment Group, Progress, Status and Button, with your theme's tokens for every colour. AWS is named in text only: no AWS logo, colour or wordmark ships with the block. Nothing is sent to AWS, and the tags and counts are example data.
FAQ
How do I change the tags?
Edit START at the top of the file: each tag has an id, its key (name), how many resources carry it (tagged), whether it starts active (on) and its phase (idle or failed). RESOURCES is the number of resources in the account. The coverage percentage, the bar, the filter counts and the dimming are all worked out from those values.
Does a switch or Retry call AWS?
No. A switch changes this page's state, and Retry shows the row as retrying for about 900 milliseconds and then active. The status line under the header says so from the first paint and describes each outcome ("project is active in this demo. Nothing was sent to AWS."). In a real product, wire toggle and retry to the Billing and Cost Management call that activates cost allocation tags. AWS can take up to 24 hours to report a newly activated key, which the header says.
What does the filter do?
All, Active and Needs action each show a count that follows the rows as you switch tags on and off. Choosing one dims the rows that don't match with a solid tint and softer text instead of removing them, so the list never changes height and nothing moves under the pointer. Needs action means the tag is not active.
How is it named for keyboards and screen readers?
Each switch is named by its tag ("Activate team") and each Retry by the row it belongs to ("Retry activating project"). The coverage bar is decorative and hidden from assistive technology because the sentence beside it says "602 of 640 resources". The state is a dot and a word, never colour alone, and only the timed-out row uses the status colour. While a retry runs, the button is marked busy and ignores presses.
How does it fit on a phone, in right-to-left layouts and with reduced motion?
On a phone the state word moves up beside the tag key, the filter stretches full width and each row keeps its bar and switch. Tag keys, counts and percentages keep their reading order in a right-to-left layout while the rows themselves flip. The header fades up once on load and rows change tone with a short transition; reduced motion turns both off, and the working dot stops pulsing.