Workspace Switcher
Segmented workspace picker for switching between canvas views and operational contexts. Install Workspace Switcher from the VLLNT UI registry with the shadcn CLI.
Supported platforms:WebNative
1 storyView componentViewport Bookmarks
Saved-view list for the canvas — pinned spatial locations with optional active state. Install Viewport Bookmarks from the VLLNT UI registry with the shadcn CLI.
Supported platforms:Web
What it is and when to use
Viewport Bookmarks is a saved-view list for a canvas — the spatial parallel of pinned tabs. Each entry names a stored pan and zoom target, with an optional accent color and a secondary detail line. Rows render as buttons when you pass an onSelect handler, or as read-only text when you do not, and an active id highlights the current view. It ships with an empty state and localizable labels. It is pure presentation; your app owns the bookmark store and the camera animation.
NavigationPreview
Switch between light and dark to inspect the embedded Storybook preview.
Saved-view list for the canvas — pinned spatial locations with optional active state. 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 | — | Not available |
Installation
Add Viewport Bookmarks 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/viewport-bookmarks.jsonSource
Stories
Explore every variant and state in the interactive Storybook:
FAQ
- What is Viewport Bookmarks?
- Viewport Bookmarks is a React component that renders a saved-view list for a canvas — the spatial parallel of pinned tabs. Each row names a stored pan and zoom target, with an optional accent color, detail line, and active state.
- How do I add Viewport Bookmarks?
- Run `pnpm dlx shadcn@latest add https://ui.vllnt.com/r/viewport-bookmarks.json` to install it into your React project via the shadcn CLI, then pass your bookmarks array to the ViewportBookmarks component.
- Can Viewport Bookmarks be read-only?
- Yes. When you provide an onSelect handler each row renders as a clickable button; omit it and the rows render as read-only text. It also includes a built-in empty state ("No saved views") and localizable region and empty labels.