Workspace Navigation
A working workspace navigation with illustrative data and frontend interactions.
Make it yours.
Install the editable source and its dependencies into your React + Tailwind project.
Scroll horizontally for long lines
pnpm dlx shadcn@4.0.8 add http://localhost:3000/r/workspace-navigation.jsonUse it
Scroll horizontally for long lines
"use client";
import {WorkspaceNavigation} from '@/components/jez-ui/blocks/workspace-navigation';
export default function Example(){
return <><WorkspaceNavigation/></>;
}Props & types
Scroll horizontally for long lines
{
className?: string;
onViewChange?: (view: string) => void;
onCreate?: () => void;
}Source
View 3 source files
registry/blocks/workspace-navigation.tsx
Scroll horizontally for long lines
"use client";
import * as React from "react";
import {
Layers,
ChevronRight,
Plus,
LayoutGrid,
List,
CalendarDays,
Settings2,
} from "lucide-react";
import { cn } from "../ui/utils";
import { Button } from "../ui/button";
export function WorkspaceNavigation({
className,
onViewChange,
onCreate,
}: {
className?: string;
onViewChange?: (view: string) => void;
onCreate?: () => void;
}) {
const [view, setView] = React.useState("Board");
const [notice, setNotice] = React.useState("");
return (
<div
className={cn("rounded-xl border border-border bg-background", className)}
>
<div className="flex flex-wrap items-center justify-between gap-4 px-5 py-4">
<div className="flex min-w-0 items-center gap-2.5 text-sm">
<Layers size={18} />
<span className="text-muted-foreground">Acme</span>
<ChevronRight size={13} className="text-muted-foreground" />
<span className="truncate font-medium">Website refresh</span>
</div>
<div className="flex items-center gap-3">
<div className="hidden -space-x-2 sm:flex">
{["AM", "SP", "RL"].map((v) => (
<span
key={v}
className="grid size-7 place-items-center rounded-full border-2 border-background bg-muted text-xs"
>
{v}
</span>
))}
</div>
<Button
size="sm"
onClick={() => {
if (onCreate) onCreate();
else setNotice("New project action selected.");
}}
>
<Plus size={14} />
New project
</Button>
</div>
</div>
<div
role="tablist"
aria-label="Project view"
className="flex gap-5 overflow-x-auto border-t border-border px-5"
>
{[
{ label: "Board", icon: LayoutGrid },
{ label: "List", icon: List },
{ label: "Calendar", icon: CalendarDays },
{ label: "Settings", icon: Settings2 },
].map((item, i) => (
<button
key={item.label}
role="tab"
aria-selected={view === item.label}
tabIndex={view === item.label ? 0 : -1}
onKeyDown={(e) => {
if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
e.preventDefault();
const siblings =
e.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>(
'[role="tab"]',
);
const next =
siblings?.[(i + (e.key === "ArrowRight" ? 1 : 3)) % 4];
next?.focus();
next?.click();
}
}}
onClick={() => {
setView(item.label);
onViewChange?.(item.label);
}}
className={cn(
"flex shrink-0 items-center gap-2 border-b-2 py-3 text-sm",
view === item.label
? "border-primary font-medium"
: "border-transparent text-muted-foreground hover:text-foreground",
)}
>
<item.icon size={15} />
{item.label}
</button>
))}
</div>
{notice && (
<p
role="status"
className="border-t border-border p-4 text-xs text-muted-foreground"
>
{notice}
</p>
)}
</div>
);
}
registry/ui/utils.ts
Scroll horizontally for long lines
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...values: ClassValue[]) {
return twMerge(clsx(values));
}
registry/ui/button.tsx
Scroll horizontally for long lines
"use client";
import * as React from "react";
import { Slot } from "radix-ui";
import { LoaderCircle } from "lucide-react";
import { cn } from "./utils";
export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
variant?: "primary" | "secondary" | "outline" | "ghost" | "danger";
size?: "sm" | "md" | "lg";
loading?: boolean;
asChild?: boolean;
};
export function Button({
variant = "primary",
size = "md",
loading,
asChild,
className,
children,
disabled,
...props
}: ButtonProps) {
const Comp = asChild ? Slot.Root : "button";
return (
<Comp
type={asChild ? undefined : "button"}
disabled={asChild ? undefined : disabled || loading}
aria-disabled={disabled || loading || undefined}
aria-busy={loading || undefined}
className={cn(
"relative inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-lg border border-transparent text-sm font-medium leading-none transition-[background-color,border-color,box-shadow,transform] duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:scale-[.98] disabled:pointer-events-none disabled:opacity-45 aria-disabled:pointer-events-none [&_svg]:shrink-0",
{
"bg-primary text-primary-foreground shadow-[inset_0_1px_0_#ffffff26,0_1px_2px_#00000012] hover:bg-primary/90":
variant === "primary",
"border-border/60 bg-muted text-foreground hover:bg-muted/70":
variant === "secondary",
"border-border bg-background text-foreground shadow-sm hover:bg-muted/60":
variant === "outline",
"text-muted-foreground hover:bg-muted hover:text-foreground":
variant === "ghost",
"bg-danger text-danger-foreground hover:bg-danger/90":
variant === "danger",
},
{
"h-8 px-3 text-xs": size === "sm",
"h-10 px-4": size === "md",
"h-12 px-6": size === "lg",
},
className,
)}
{...props}
>
{asChild ? (
children
) : (
<>
<span
className={cn(
"inline-flex min-w-0 flex-1 items-center justify-center gap-2",
loading && "invisible",
)}
>
{children}
</span>
{loading && (
<LoaderCircle
aria-hidden="true"
className="absolute size-4 animate-spin motion-reduce:animate-none"
/>
)}
</>
)}
</Comp>
);
}
Dependencies
lucide-react@0.577.0 · clsx@2.1.1 · tailwind-merge@3.5.0 · radix-ui@1.6.7
Accessibility & behaviour
Provide meaningful labels and preserve keyboard focus styles. Check contrast when customising theme colours.
Read the accessibility and performance guide →