shadcn.io is not affiliated with official shadcn/ui
Device Switch Navbar Block for React
A builder navbar for a landing-page tool that switches the preview between desktop, tablet and mobile, shows the viewport size, and undoes those choices.
Installation
Overview
A device-switch navbar for React with Base UI, the bar of Canvasmith, a landing-page builder. The wordmark leads. A toggle group sets the preview to Desktop, Tablet or Mobile, and the readout beside it writes that device's pixels (1280 × 800, 768 × 1024 or 390 × 844). Undo and Redo walk a history of those choices and dim themselves at the ends of it, staying focusable so the keyboard isn't dropped; Z and Y do the same from the keyboard, with a key hint from the lg breakpoint. Publish is the Shine Button: it turns into Published, ignores further presses, and a polite line says the demo stored nothing. On a phone the words hide and every control stays on the one row. The page's rails and top rule come from the Guides spine, and interior hairlines meet that rule with a plus. The block stays 56 pixels high. It's built from Toggle Group, Button, Shine Button, Kbd and Guides, with your theme's tokens for every colour. For builders and design tools whose header is the preview control.
FAQ
How do I change the devices and the sizes?
Edit DEVICES at the top. Each entry is an id, a label, an icon and a width and height in pixels. The readout and the polite line both read that entry, so they can't disagree. Choosing a device pushes it onto the history and drops anything you had redone. Choosing the device that's already on does nothing. The history starts at Desktop.
What do Undo, Redo and the keys actually do?
Undo steps back through the devices you picked, Redo steps forward, and each one is marked aria-disabled and dimmed when there's nowhere to go (a real disabled would drop the focus). Z undoes and Y redoes, unless the key press is in a text field or it includes a modifier. The key hints are visual; the buttons also name the shortcut. Nothing is written to storage. Publish sets a local flag, swaps its label to Published, and then ignores further presses.
How does the device switch work with a keyboard?
The switch is a toggle group named Preview device. One device is always on. The arrow keys move between Desktop, Tablet and Mobile. Space or Enter chooses the focused one. Undo, Redo and Publish follow in the tab order. Z and Y work from anywhere on the page that isn't a text field.
How do I wire Publish to a real release?
Publish is a button, not a link. Replace publish with your own handler. Until you do, it only flips the local label and the polite line "Published. This demo stores nothing."
The button takes onClick, and aria-disabled once it has been published, so focus stays on it.
How does it fit on a phone?
Below the sm breakpoint the wordmark is its icon and Publish is its icon, with the words kept for screen readers. Device names and the Z and Y hints show from lg. The viewport digits stay visible without the spaces around the sign (1280×800) and truncate only if the row is truly out of room. Nothing wraps, and there is no menu. The bar is 56 pixels at every width.
What moves, and what happens with reduced motion?
Nothing moves on load: the navbar is chrome and is simply there. A band of light sweeps across Publish once on hover and keyboard focus. With reduced motion that light fades in where it stands. Undo and Redo change the readout in place, with no transition.
Related
- Pro
Role-Based Navbar
Accounts and scopesAn app bar with a View as toggle (Admin, Editor, Viewer) that swaps the bar's links in one cell, so its width never moves, with a role badge that says what the role can do.
- Pro
Keyboard Shortcuts Navbar
App toolbarsAn app navbar whose shortcuts work: G then H, P or S moves between pages, a question mark opens a dialog with every key in a table, and each link shows its keys on hover and keyboard focus.
- Pro
Icon-Only Navbar
Cells and splitsAn icon-only navbar for a messaging app: six destinations in square cells on shared hairlines, each named by a tooltip, with unread dots and a Show labels toggle that widens the cells to reveal the words.
- Pro
Environment Switcher Navbar
Accounts and scopesAn app bar with a Production, Staging and Development segment control that shows the environment's base URL with a copy button and asks for confirmation before switching to Production.
- Pro
Calendar View Navbar
App toolbarsA calendar navbar for a shared scheduling app that moves a day, week, month or agenda label with Today, previous and next.
- Pro
Contextual Navbar
Cells and splitsA navbar with a Site | App segment control whose two link sets and action sets cross-fade in one grid cell, so the bar's width and height never change.