shadcn.io is not affiliated with official shadcn/ui
Investor Updates Carousel Block for Ark UI
Eight quarterly investor updates behind a revenue column chart whose columns are the page buttons, each slide showing revenue, growth, customers, run-rate ARR and three highlights with a Copy button.
Installation
Overview
Let the chart be the navigation with this investor updates carousel for React with Ark UI. Boardfold, an investor-update tool, keeps eight quarterly updates. At the start of the panel is a column chart of revenue by quarter drawn from the typed numbers; every column is a button that goes to its quarter, and the quarter in view is the solid one. At the end is the quarter itself on a one-up track: revenue, growth over the previous quarter, customers, run-rate ARR (revenue times four) and three highlights, with a Copy Button that puts the update on the clipboard as plain text. Growth and ARR are worked out from the revenue, and the chart has a one-line summary for screen readers. The foot has the status and the Previous and Next Buttons. On a phone the chart stacks over the slide. The ruled bands come from Guides. It's built from Carousel, Copy Button, Button and Guides, with CSS transitions only. The figures are example data and are labelled as such.
FAQ
How do I use my own quarters?
Edit QUARTERS. Each has an id, a label, a short quarter word and two-digit year for the chart, revenue in thousands of dollars, customers and three highlights. Growth, run-rate ARR, the chart heights, the summary line and the Copy text are all derived from those numbers. Change AS_OF to the end of your latest quarter.
How does it work with a keyboard?
Tab reaches the eight columns, then Copy, Previous and Next. Pressing a column goes to its quarter. With focus inside the slide, the arrow keys move the track (mirrored in a right-to-left layout) and Home and End jump to the first and last quarter. Previous and Next stay in the tab order at the ends, marked as unavailable. Slides that are out of view are hidden from the tab order and from screen readers.
How is the chart described to a screen reader?
Each column is a button named with its quarter and figure, such as "Q3 2026, revenue 2.48 million, show", and the quarter in view is marked as current. A one-line summary sits after the chart: where revenue started, where it ended and the total. The bars are decoration, in foreground weights and never in colour.
What is announced when it moves?
The foot line is the block's one polite live region: after each move a screen reader hears it, for example "Q3 2026, quarter 8 of 8". The track itself is silent, so the same slide is not read twice.
What stays local in the demo?
Everything. The revenue, customers and highlights are typed example figures labelled "Example figures only, not advice", Copy only uses your clipboard, and nothing is fetched or sent. To wire it for real, load each quarter's numbers from your own reporting into QUARTERS.