Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Dark Mode Usage Dashboard Block for Radix UI

Theme adoption by device group: a Dark, Light and System split, and the share of sessions in dark by hour of day as a line over a night and day band, with the peak and lowest hour read in text.

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

Find out when your users switch the lights off with this theme adoption dashboard for React with Radix UI. A hairline frame with a plus mark on each corner has a list of device groups at the start (All devices, iOS, Android and Desktop), which becomes a row of ToggleGroup buttons on a phone. For the group you pick, Duskfield's split of sessions between Dark, Light and System is one bar with its three shares, and below it a line shows the share of sessions in dark for each hour of the day over a shaded night band. The peak hour and the lowest hour are read in text, with how many times a week people switch themes. It's built from ToggleGroup, a hand-drawn line and Guides. For design systems and product analytics.

FAQ

How do I fill it with my own numbers?

Edit GROUPS: each has dark, light and system in whole percent adding to 100, sessions in thousands, toggles per user a week and a seed. SUNRISE and SUNSET set the shaded band, and DEEP_NIGHT is the hour System users are most likely to be in dark.

Where does the hourly line come from?

It is built from the split, not measured: people on Dark are in dark all day, people on System are in dark more as night falls, so each hour is the Dark share plus the System share times how close the hour is to deep night, with a small seeded wobble so the line isn't a perfect wave. The same seed gives the same line on every load. Replace hourShareOf with your own hourly series.

How do I use it from the keyboard?

The group list is a set of buttons, and the current one is marked. On a phone the same choice is a toggle group you move through with the arrow keys. The chart is hidden from assistive technology, and a table that is hidden from sight lists all 24 hours; a polite line reads the split and the peak when the group changes.

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

Everything: the splits are typed and the curve is computed. Feed GROUPS and a real 24-point series from your session analytics, grouped by the theme the page was rendered with and the user's local hour.

How does it look on a phone?

The group list becomes a toggle row across the top, and the line is shorter so the split and the chart both fit on the first screens. Hours are labelled at 0, 6, 12, 18 and 23.

All 200 dashboard blocks