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.
URL param-based toggle between named views with pill/tab styling. 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.
Preview
Switch between light and dark to inspect the embedded Storybook preview.
Installation
Add View 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.ai/r/view-switcher.jsonSource
"use client";
import { memo, Suspense } from "react";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { cn } from "../../lib/utils";
type ViewOption = {
key: string;
label: string;
};
type ViewSwitcherProps = {
className?: string;
defaultKey?: string;
options: ViewOption[];
paramName?: string;
};
function ViewSwitcherInner({
className,
defaultKey,
options,
paramName: parameterName = "view",
}: ViewSwitcherProps) {
const router = useRouter();
const pathname = usePathname();
const searchParameters = useSearchParams();
const resolvedDefault = defaultKey ?? options[0]?.key ?? "";
const currentKey = searchParameters.get(parameterName) ?? resolvedDefault;
function handleSelect(key: string): void {
const parameters = new URLSearchParams(searchParameters.toString());
if (key === resolvedDefault) {
parameters.delete(parameterName);
} else {
parameters.set(parameterName, key);
}
const query = parameters.toString();
router.push(query ? `${pathname}?${query}` : pathname, { scroll: false });
}
return (
<div
className={cn(
"inline-flex items-center rounded-lg border bg-muted p-1",
className,
)}
role="tablist"
>
{options.map((option) => (
<button
aria-selected={currentKey === option.key}
className={cn(
"rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
currentKey === option.key
? "bg-background text-foreground shadow-sm"
: "text-muted-foreground hover:text-foreground",
)}
key={option.key}
onClick={() => {
handleSelect(option.key);
}}
role="tab"
type="button"
>
{option.label}
</button>
))}
</div>
);
}
function ViewSwitcherFallback({
className,
defaultKey,
options,
}: ViewSwitcherProps) {
const resolvedDefault = defaultKey ?? options[0]?.key ?? "";
return (
<div
className={cn(
"inline-flex items-center rounded-lg border bg-muted p-1",
className,
)}
role="tablist"
>
{options.map((option) => (
<button
aria-selected={resolvedDefault === option.key}
className={cn(
"rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
resolvedDefault === option.key
? "bg-background text-foreground shadow-sm"
: "text-muted-foreground hover:text-foreground",
)}
key={option.key}
role="tab"
type="button"
>
{option.label}
</button>
))}
</div>
);
}
const ViewSwitcher = memo(function ViewSwitcher(props: ViewSwitcherProps) {
return (
<Suspense fallback={<ViewSwitcherFallback {...props} />}>
<ViewSwitcherInner {...props} />
</Suspense>
);
});
ViewSwitcher.displayName = "ViewSwitcher";
export { ViewSwitcher };
export type { ViewOption, ViewSwitcherProps };
Stories
Explore every variant and state in the interactive Storybook:
Preview
Switch between light and dark to inspect the embedded Storybook preview.