Home

Team selector

A pill showing the current team or company that opens a menu to switch to another, create one or open its settings.

ui.team-selectorcomponents/ui/team-selector.tsx

Use case

For the AI

Use it when a person works for more than one company or workspace in the same tool: an accountant moving between client companies, an owner moving between locations, a studio moving between client workspaces. It sits at the head of the sidebar or in the top bar, and switching it changes what every page shows.

Use it when

  • The person belongs to more than one company, location or workspace
  • Every page's data depends on which one is current
  • At the head of a sidebar or in a top bar

Use something else when

  • The tool belongs to one company only: show its brand (`Logo` from components/brand/logo.tsx), not a selector
  • Picking a company as a value inside a form: Combobox
  • Searching for a company to jump to its page: Command bar

Examples

In a top bar or at the head of a sidebar

Code

Import

import { useState } from "react"
import { useRouter } from "next/navigation"
import { TeamSelector, type Team } from "@/components/ui/team-selector"

Usage

const TEAMS: Team[] = [
  { id: "nord", name: "Atelier Nord", plan: "Pro" },
  { id: "auberge", name: "Auberge du Lac Brûlé", plan: "Team" },
  { id: "brasserie", name: "Brasserie La Voûte", plan: "Team" },
]

export function TeamSwitch() {
  const router = useRouter()
  const [team, setTeam] = useState("nord")
  return (
    <TeamSelector
      teams={TEAMS}
      value={team}
      onValueChange={setTeam}
      onCreate={() => router.push("/teams/new")}
      onSettings={() => router.push("/settings/team")}
    />
  )
}

Rules

  • It holds no state: pass `teams` (`{ id, name, plan?, logo? }`), the current `value` (an id) and `onValueChange`.
  • Pass each team's `logo` when it has one; without one the team wears its name's gradient, never letters.
  • Wire `onCreate` and `onSettings`: Create Team and Team Settings are always drawn and do nothing without them.
  • A plan is one short word shown as a small badge ("Pro", "Team"); only "Pro" takes the primary badge.