Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Toggle Grid Checkered Mode Switch Features Block for React

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.

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

A mode switch for React with Base 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.

How does the checkered pattern work?

Each cell has a solid tint or the plain background for one, two and three columns. A solid mix of the muted and background tokens is used because a translucent fill would show the hairlines through it.

What moves, and what happens with reduced motion?

The digits roll when you change the mode and the block fades up once on load. With reduced motion the digits change in place and nothing fades.

  • Pro

    Before After Toggle Features

    Live controls

    A Before and After control that cross-fades a settings screen between a cluttered version (warning banners, a nested menu, badges everywhere) and a clean one, in a frame that never changes height.

  • Pro

    Toggle Switch Control Panel Features

    Live controls

    A notification matrix for an alerting product: five events by four channels, every cell a working Switch, a counter that rolls as you flip them and a footer that offers Save and Discard in reserved space.

  • Pro

    Free vs Pro Pricing

    Single plan

    One card with a big Free and Pro switch: flipping it rolls the price and turns the locks on Pro's features into checks, in a single list of eight.

  • Pro

    Inset Border Card Grid Features

    Live controls

    Six ring-inset preference cells for a team-settings app, each holding one working control: a switch, a slider, a toggle group, a select, a checkbox and a segmented control.

  • Pro

    Vs Competitor Comparison Table Features

    Proof and comparisons

    An eight-row comparison of a project suite with an unnamed typical tool, with real values, a monochrome check or dash, a count of where it leads and a Switch that shows only the rows that differ.

  • Pro

    Before After Visual Features

    Proof and comparisons

    Three measured outcomes as ruled rows, each with its own Before and After control that swaps both the figure and the bar: page weight, load time and weekly support tickets.

All 170 features blocks