shadcn.io is not affiliated with official shadcn/ui
Sign-in Usage Dashboard Account Block for Solid
Sign-ins by day and by method (passkey, password, Google) as a stacked bar chart over 7, 30 or 90 days, three tiles for sign-ins, failed attempts and distinct devices, and a switch that shows the same numbers as a table.
Installation
Overview
Show how an account's people actually sign in, with this sign-in usage dashboard for Solid with Ark UI. A hairline frame with a plus mark on each corner opens with three tiles (sign-ins, failed attempts and distinct devices) over a stacked bar chart with one bar a day, split into passkey, password and Google in three weights of the foreground colour with a legend that carries each method's total. A Toggle Group in the header chooses the last 7, 30 or 90 days, and the tiles, the axis, the bars and the legend are all worked out from the same typed series. The Switch "Show as table" swaps the chart for a table of the same numbers, one row a day with a total, in a scroll region of the same height. A live line at the foot names the busiest day. It's built from Toggle Group, Switch and Guides, with the chart drawn in CSS and a CSS entrance only. For the security page of any app that wants to show how its sign-ins are changing.
FAQ
How do I use my own sign-in numbers?
Replace SERIES with one object per day, oldest first: the ISO date, the sign-ins for passkey, password and google, the failed attempts, and the ids of the devices that signed in. The demo builds ninety days from a repeatable formula rather than the clock; once you have real rows you can delete dayOf. The tiles, the axis, the legend and the busiest day are derived from the series.
How is the chart read without colour?
The three methods differ in weight, from solid to a light tint, with a hairline between segments, and the legend names each with its total. The chart itself is hidden from screen readers because the same numbers are in the tiles, the legend and the table: turn on Show as table, or read the foot line for the busiest day. Nothing relies on hue.
What does Show as table do?
It swaps the chart for a real table of the same days, newest first, with a column for each method, the failed attempts and the total. Both views sit in the same grid cell at the same height, so the page doesn't move, and the one that is hidden is removed from the tab order and from assistive technology. The table region scrolls and can be reached with the keyboard.
What stays local?
Everything: the series is generated in the page, there are no requests, and the period and the switch only change what is shown. For real data query your sign-in log by day and method on the server, return the counts for the longest period you offer, and let the page slice them, as it does here. Count a device once for the whole period, not once a day.
How does it look on a phone?
The three tiles stay in a row, the period buttons share the width, and the chart keeps its height with thinner bars; the table is always one switch away for the exact numbers. The axis labels and the dates under the chart always read start to end, in a right-to-left page too.