Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Monitoring blocks

Pro

User Session Count Monitoring Block for React Aria

A snapshot of the last 30 minutes of concurrent sessions as a line with the peak marked, a cursor that rolls the headline number and splits desktop from mobile, and the average session and bounce rate.

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

See how many people were on your product, minute by minute, with this session counter for React with React Aria. It is Doorcount, a sessions counter (made up), showing a snapshot of the last 30 minutes rather than a live feed: one typed sample a minute is drawn as a line and the peak is marked with a diamond. A hidden range over the plot is the cursor; moving it rolls the headline Sliding Number to that minute's sessions, redraws a two-part bar that splits them between desktop and mobile, and tells you how far under the peak that minute was. Beneath the bar sit the average session, the bounce rate and the peak. The header says plainly that this is a snapshot. Guides draw the frame and its bands; the entrance is CSS only, and the number's roll respects reduced motion. For product dashboards, launch watching and capacity notes.

FAQ

How do I use my own sessions?

Edit DESKTOP and MOBILE: 30 numbers each, one per minute, oldest first, and AS_OF_MINUTES for the time of the newest. The total, the peak, the axis range and the split are derived; the average session and the bounce rate are typed constants.

Why is it not live?

Nothing ticks, so the panel does not claim to be live: it says it is a snapshot. To make it live, replace the arrays with a feed and keep the helpers; the cursor and the headline already follow whatever the arrays hold.

How does the cursor work?

It is a native range named Minute, laid over the plot, with the time as its value text. Arrow keys move it one minute, Home and End jump to the ends, and a polite status line speaks the minute about 600 ms after the last change.

What is real here and what is typed?

All of it is typed and nothing is counted. The figures are examples; in your app feed the series from your analytics.

How does it look on a phone?

The plot is 160 px tall, the time labels stay under it and the three figures stack.

All 100 monitoring blocks