a flexible, context-based solution to manage and display multiple workspaces in your app. It uses Radix Popover, supports avatars, search, and customizable rendering—perfect for SaaS dashboards with multi-tenant support.
'use client';
import * as React from 'react';
import {
Workspaces,
WorkspaceTrigger,
WorkspaceContent,
type Workspace,
} from '@/components/ui/workspaces';
import { Button } from '@/components/ui/button';
import { PlusIcon } from 'lucide-react';
import { SettingsIcon } from 'lucide-react';
// Extended workspace interface for this specific use case
interface MyWorkspace extends Workspace {
logo: string;
plan: string;
slug: string;
}
const workspaces: MyWorkspace[] = [
{
id: '1',
name: 'Asme Inc.',
logo: 'https://cdn.21st.dev/assets/mirror/bc/bcc1d61f4fed0e8e24b9b4da38783d3dc8b89fbf680bab0b4c492899b389ada9.png',
plan: 'Free',
slug: 'asme',
},
{
id: '2',
name: 'Bilux Labs',
logo: 'https://cdn.21st.dev/assets/mirror/e3/e384379f340a9656b50470215b55a04e83bc4da060a79b2345eeb42cd74d8ce0.png',
plan: 'Pro',
slug: 'bilux',
},
{
id: '3',
name: 'Zentra Ltd.',
logo: 'https://cdn.21st.dev/assets/mirror/bb/bbf794851f7542ebb90db83ffe8bc488ad3eaded2a60a1467e9a0ad7677a66bc.png',
plan: 'Team',
slug: 'zentra',
},
{
id: '4',
name: 'Nuvex Group',
logo: 'https://cdn.21st.dev/assets/mirror/9a/9a8e397bb8799f8bf50c0d5cfe4bc88cc55e1dac0d84a8e97ee37afb88ef360d.png',
plan: 'Free',
slug: 'nuvex',
},
{
id: '5',
name: 'Cortexia',
logo: 'https://cdn.21st.dev/assets/mirror/d2/d214eb22d429424706b048bb9092bf76d6cd9879400696c90bfd458fd737aecd.png',
plan: 'Pro',
slug: 'cortexia',
},
];
export default function Default() {
const [selectedWorkspaceId, setSelectedWorkspaceId] = React.useState('1');
const handleWorkspaceChange = (workspace: MyWorkspace) => {
setSelectedWorkspaceId(workspace.id);
console.log('Selected workspace:', workspace);
};
return (
<div className="flex min-h-screen items-start justify-center gap-8 px-4 py-18">
<Workspaces
workspaces={workspaces}
selectedWorkspaceId={selectedWorkspaceId}
onWorkspaceChange={handleWorkspaceChange}
>
<WorkspaceTrigger
className="w-62 rounded-md border-0 bg-gradient-to-r from-blue-500 to-purple-600 p-2 text-white hover:from-blue-600 hover:to-purple-700"
renderTrigger={(workspace, isOpen) => (
<div className="flex w-full items-center gap-2">
<img
src={(workspace as MyWorkspace).logo}
alt={workspace.name}
className="h-6 w-6 rounded-full"
/>
<span className="font-medium">{workspace.name}</span>
<span className="ml-auto rounded bg-white/20 px-2 py-1 text-xs">
{(workspace as MyWorkspace).plan}
</span>
</div>
)}
/>
<WorkspaceContent searchable className='w-62'>
<div className="space-y-1">
<Button
variant="ghost"
size="sm"
className="text-muted-foreground w-full justify-start"
>
<PlusIcon className="mr-2 h-4 w-4" />
Add workspace
</Button>
<Button
variant="ghost"
size="sm"
className="text-muted-foreground w-full justify-start"
>
<SettingsIcon className="mr-2 h-4 w-4" />
Settings
</Button>
</div>
</WorkspaceContent>
</Workspaces>
</div>
);
}
Part of Efferd UI — browse the full library on 21st.dev.
