View Switcher
URL param-based toggle between named views with pill/tab styling. Install View Switcher from the VLLNT UI registry with the shadcn CLI.
Supported platforms:WebNative
1 storyView componentWorkspace Switcher
Compare Workspace Switcher for React and React Native in VLLNT UI 0.4.0. Explore source, dependencies and native capabilities. Native is source-only; npm publication is pending.
Supported platforms:WebNative
What it is and when to use
Workspace Switcher is a compact, segmented control for moving between workspaces, canvas views, or operational contexts. It renders each option as a pill inside a radio group, highlighting the active one, and works either controlled or uncontrolled through value and defaultValue props. An onValueChange callback reports selection, and each option can carry a description shown as a tooltip and, on wider screens, inline. Reach for it when users toggle between a handful of top-level contexts rather than navigating a deep menu.
NavigationPreview
Switch between light and dark to inspect the embedded Storybook preview.
Segmented workspace picker for switching between canvas views and operational contexts. Part of the navigation family in VLLNT UI, it ships as a machine-readable registry entry — copy the source directly into your app with the shadcn CLI and own it, no runtime dependency on a component library.
Platform comparison
| Platform | Dependencies | Capabilities |
|---|---|---|
| Web | @vllnt/ui@^0.3.0 | Browser rendering, DOM events, and ARIA semantics |
| Native | @vllnt/ui-native, react-native | Native-adapted interaction and accessibility |
Installation
Add Workspace Switcher to your project with the shadcn CLI. The source lands in your codebase, ready to adapt:
pnpm dlx shadcn@latest add https://ui.vllnt.com/r/workspace-switcher.jsonSource
Stories
Explore every variant and state in the interactive Storybook:
FAQ
- What is Workspace Switcher?
- Workspace Switcher is a React component that renders a segmented pill control for switching between workspaces, canvas views, or operational contexts. Options are supplied as an array of id and label pairs, and the active one is visually highlighted.
- How do I add Workspace Switcher?
- Run `pnpm dlx shadcn@latest add https://ui.vllnt.com/r/workspace-switcher.json` to install it into your React project via the shadcn CLI, then pass your workspaces array to the WorkspaceSwitcher component.
- Is Workspace Switcher controlled or uncontrolled?
- It works both ways. Pass value with onValueChange for a controlled component, or defaultValue to let it manage its own selection. It renders as an accessible radio group, marking the selected workspace with aria-checked.