SidebarNavGroups

export function SidebarNavGroupsSpecimen() {
  const [activo, setActivo] = useState('blog')

  const groups: SidebarNavGroup[] = [
    {
      label: 'Contenido',
      items: [
        { id: 'blog', label: 'Blog', icon: IconClipboard, badge: 12 },
        { id: 'seo', label: 'SEO Kit', icon: IconChart },
        { id: 'comms', label: 'Comms', icon: IconInbox, badge: 3, badgePulse: true },
      ],
    },
    {
      label: 'Operación',
      items: [
        { id: 'agentes', label: 'Agentes', icon: IconTeam },
        { id: 'ajustes', label: 'Ajustes', icon: IconSettings },
      ],
    },
  ]

  return (
    <Stage label="SidebarNavGroups · el sidebar del admin, dentro del marco que ya pone AdminLayout" tall wide>
      <div className="flex w-full flex-wrap items-start justify-center gap-6 px-1 py-1">
        <aside className="flex h-[300px] w-[230px] flex-col overflow-hidden rounded-xl border border-content/10 bg-container">
          <div className="border-b border-content/10 px-3 py-2.5 text-xs font-medium text-content">
            carlosmartinpavon
          </div>
          <div className="flex-1 overflow-y-auto p-2">
            <SidebarNavGroups
              groups={groups}
              activeItemId={activo}
              collapsed={false}
              onItemClick={(item) => setActivo(item.id)}
              appearance="plain"
              ariaLabel="Navegación del admin, expandida"
            />
          </div>
        </aside>

        <aside className="flex h-[300px] w-[64px] flex-col overflow-hidden rounded-xl border border-content/10 bg-container">
          <div className="border-b border-content/10 px-2 py-2.5 text-center text-xs font-medium text-content">
            CMP
          </div>
          <div className="flex-1 overflow-y-auto p-2">
            <SidebarNavGroups
              groups={groups}
              activeItemId={activo}
              collapsed
              onItemClick={(item) => setActivo(item.id)}
              appearance="plain"
              ariaLabel="Navegación del admin, plegada"
            />
          </div>
        </aside>
      </div>
    </Stage>
  )
}

De specimens/navigation.tsx · SidebarNavGroupsSpecimen: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.