Switch 3D
Cube switch that rolls between “off” and a glowing “on”. Pro · 3D and motion › 3D buttons, shapes and text
A switch you can almost touch: a little block that rolls over in 3D between its "off" and its lit "on" face, on the theme's spring. A real role="switch" button with aria-checked, Space and Enter, a focus ring and a visible label that switches it too; the faces are decoration, hidden from assistive technology. Reduced motion: the faces swap without the roll.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add switch-3dnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { Switch3D } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
checked | boolean | Whether it is on (controlled). | |
defaultChecked | boolean | false | Whether it is on at first (uncontrolled). |
onCheckedChange | (checked: boolean) => void | Called when it is switched. | |
size | 'sm' | 'md' | 'lg' | 'md' | Height, width and text size. |
label | ReactNode | Visible text next to the switch; also its accessible name (pressing it switches too). | |
labels | Partial<Switch3DLabels> | The words on the two faces. | |
className | string | Root element class (the label around the switch). | |
style | CSSProperties | Root element style. |
Related components
- Button 3D — Chunky key-style button that presses in and springs back
- Shape Morph — Shapes morph into each other on a spring: circle, drop, star, flower
- Path Text — Text along a circle, arc or wave, rotating over time or with scroll
- Reveal — Reveal any component on scroll: rise, fade in, 3D unfold
- Stagger — Lists, grids and table rows appear in a wave, one after another
- Tilt — Tilt, lift, glare and magnetic pull under the cursor for any card
- Layout Group — Jump-free reordering: filter, sort, regrid
- Presence — Enter and exit: an element stays mounted until its exit animation ends
- Scene Backdrop — WebGL or CSS scene behind a regular UI: hero, cards, dashboard
- Scroll Cylinder — Headline lines on a rotating cylinder, driven by scroll
- Stacking Panels — Panels stick on scroll and pile into a stack
- Helix Rail — Cards on a helix that spins with scroll
Previous: Button 3D · Next: Shape Morph · All 3D and motion