shadcn.io is not affiliated with official shadcn/ui
Toggle Grid Checkered Mode Switch Features Block for Radix UI
A Managed or Self-hosted switch that flips six capability cells at once: each swaps its sentence and ticks, rolls its metric to the other mode's figure and shows by how much that mode leads or trails, on a checkered grid.
Installation
Overview
A mode switch for React with Radix UI. A compact header has a two-option Segment Group at its end, Managed or Self-hosted, and below it six capability cells in shared hairlines, tinted in a checkered pattern that follows the column count (three across from lg, two from md, one on a phone). Choosing a mode swaps every cell's sentence and its two ticks, rolls the cell's metric to the other mode's figure with Sliding Number, and changes a badge that says how many times that mode leads or trails the other, worked out from the two figures. The grid runs rail to rail and ends the block. It's built from Segment Group, Sliding Number, Badge and Guides, with CSS for the entrance and your theme's tokens for every colour. For products that run two ways, where the trade-off is the point.
FAQ
How do I change the capabilities?
Edit CAPABILITIES at the top of the file. Each has a title, a unit, a metric label and, for managed and self, a sentence, two ticks and a figure. lowerIsBetter says which direction wins, and the badge text ("24× faster", "24× slower") is worked out from the two figures and the ahead and behind words.
Does the grid change height when the mode changes?
No. Both modes' sentences and ticks sit in one grid cell, the hidden one invisible and inert, so every cell is as tall as the taller of the two. Only the figures roll.
How is the switch read by a screen reader?
It is a Segment Group named "How Twinhost runs", with two radio options. The cell that is hidden is aria-hidden and inert, so only the active mode's text is read, and the metric reads its full number from a hidden text next to the rolling digits.